From b9deab049320d54ac54cecb1299ca28af4c61f17 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bence=20M=C3=A1rkus?= <markus.bence@icloud.com>
Date: Sat, 19 Aug 2023 23:39:31 +0200
Subject: [PATCH] component and docs changes

---
 .storybook/index.scss                         |    3 +
 .storybook/theme.ts                           |    3 +-
 README.md                                     |    4 +-
 package-lock.json                             |    4 +-
 package.json                                  |    6 +-
 src/components/Button/ClButtonGroup.vue       |  116 -
 .../Button/{ClButton.vue => DsButton.vue}     |   42 +-
 src/components/Button/DsButtonGroup.vue       |   90 +
 .../{ClIconButton.vue => DsIconButton.vue}    |    6 +-
 .../__stories__/ClButtonGroup.stories.ts      |  177 -
 ...lButton.stories.ts => DsButton.stories.ts} |   94 +-
 .../__stories__/DsButtonGroup.stories.ts      |  157 +
 ...ton.stories.ts => DsIconButton.stories.ts} |   13 +-
 .../{CbButton.spec.ts => DsButton.spec.ts}    |    6 +-
 .../__snapshots__/CbButton.spec.ts.snap       |    6 +-
 .../__snapshots__/DsButton.spec.ts.snap       |    7 +
 src/components/Button/constants.ts            |    5 +
 src/components/Button/events.ts               |    3 +
 src/components/Button/index.ts                |    7 +-
 src/components/Button/types.ts                |    3 +-
 .../Icon/{ClIcon.vue => DsIcon.vue}           |    0
 .../{ClIcon.stories.ts => DsIcon.stories.ts}  |   21 +-
 src/components/Icon/index.ts                  |    2 +-
 ...oadingSpinner.vue => DsLoadingSpinner.vue} |    0
 ...stories.ts => DsLoadingSpinner.stories.ts} |   11 +-
 ...inner.spec.ts => DsLoadingSpinner.spec.ts} |   10 +-
 .../CbLoadingSpinner.spec.ts.snap             |   30 +-
 .../DsLoadingSpinner.spec.ts.snap             | 4183 +++++++++++++++++
 src/components/Loader/index.ts                |    2 +-
 src/docs/3_Colors.mdx                         |    1 +
 src/index.ts                                  |    6 +-
 31 files changed, 4637 insertions(+), 381 deletions(-)
 delete mode 100644 src/components/Button/ClButtonGroup.vue
 rename src/components/Button/{ClButton.vue => DsButton.vue} (80%)
 create mode 100644 src/components/Button/DsButtonGroup.vue
 rename src/components/Button/{ClIconButton.vue => DsIconButton.vue} (94%)
 delete mode 100644 src/components/Button/__stories__/ClButtonGroup.stories.ts
 rename src/components/Button/__stories__/{ClButton.stories.ts => DsButton.stories.ts} (70%)
 create mode 100644 src/components/Button/__stories__/DsButtonGroup.stories.ts
 rename src/components/Button/__stories__/{ClIconButton.stories.ts => DsIconButton.stories.ts} (94%)
 rename src/components/Button/__tests__/{CbButton.spec.ts => DsButton.spec.ts} (75%)
 create mode 100644 src/components/Button/__tests__/__snapshots__/DsButton.spec.ts.snap
 create mode 100644 src/components/Button/events.ts
 rename src/components/Icon/{ClIcon.vue => DsIcon.vue} (100%)
 rename src/components/Icon/__stories__/{ClIcon.stories.ts => DsIcon.stories.ts} (94%)
 rename src/components/Loader/{ClLoadingSpinner.vue => DsLoadingSpinner.vue} (100%)
 rename src/components/Loader/__stories__/{ClLoadingSpinner.stories.ts => DsLoadingSpinner.stories.ts} (93%)
 rename src/components/Loader/__tests__/{CbLoadingSpinner.spec.ts => DsLoadingSpinner.spec.ts} (71%)
 create mode 100644 src/components/Loader/__tests__/__snapshots__/DsLoadingSpinner.spec.ts.snap

diff --git a/.storybook/index.scss b/.storybook/index.scss
index 7253f7dc..023fa58d 100644
--- a/.storybook/index.scss
+++ b/.storybook/index.scss
@@ -1,4 +1,7 @@
 .css-1njl3fa {
+	border: none !important;
+	background-image: none !important;
+
 	div {
 		:first-child {
 			margin-left: 2px;
diff --git a/.storybook/theme.ts b/.storybook/theme.ts
index bf725465..e7b321e1 100644
--- a/.storybook/theme.ts
+++ b/.storybook/theme.ts
@@ -2,5 +2,6 @@ import { create } from '@storybook/theming/create';
 
 export default create({
 	base: 'light',
-	brandTitle: 'Gecko UI Library',
+	brandTitle: 'Shohin',
+	brandUrl: 'https://mrksbnc.github.io/ds',
 });
diff --git a/README.md b/README.md
index 53a3a0ed..337fc7f5 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# Vue Component Library
+# Ds - Vue 3 Component Library
 
 ![Version](https://img.shields.io/github/package-json/v/mrksbnc/complib)
 
@@ -46,7 +46,7 @@ npm run build-storybook
 ```
 
 This will build the Storybook documentation and generate the static files in the `docs` folder.
-The directory is used by GitHub Pages to host the documentation.
+The directory is used by DstHub Pages to host the documentation.
 
 ### Run your unit tests
 
diff --git a/package-lock.json b/package-lock.json
index 1653376b..bce6b873 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,11 +1,11 @@
 {
-	"name": "@mrksbnc/gecko",
+	"name": "@mrksbnc/ds",
 	"version": "0.0.0",
 	"lockfileVersion": 3,
 	"requires": true,
 	"packages": {
 		"": {
-			"name": "@mrksbnc/gecko",
+			"name": "@mrksbnc/ds",
 			"version": "0.0.0",
 			"dependencies": {
 				"vue": "^3.3.4"
diff --git a/package.json b/package.json
index ef85b0f2..126e7aa2 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-	"name": "@mrksbnc/shohin",
+	"name": "@mrksbnc/ds",
 	"version": "0.0.0",
 	"description": "Vue 3 UI library built with Vite, TailwindCSS, and Storybook",
 	"scripts": {
@@ -18,10 +18,10 @@
 		"minor": "npm version --no-git-tag-version minor",
 		"major": "npm version --no-git-tag-version major"
 	},
-	"homepage": "http://mrksbnc.github.io/shohin",
+	"homepage": "http://mrksbnc.github.io/ds",
 	"repository": {
 		"type": "git",
-		"url": "https://github.com/mrksbnc/shohin.git"
+		"url": "https://github.com/mrksbnc/ds.git"
 	},
 	"files": [
 		"dist/**/*"
diff --git a/src/components/Button/ClButtonGroup.vue b/src/components/Button/ClButtonGroup.vue
deleted file mode 100644
index 2d9bb8ec..00000000
--- a/src/components/Button/ClButtonGroup.vue
+++ /dev/null
@@ -1,116 +0,0 @@
-<template>
-	<div class="max-w-lg mx-auto">
-		<div
-			class="inline-flex shadow-sm rounded-md mb-5"
-			role="group"
-		>
-			<button
-				v-for="(item, index) in items"
-				:key="item.id"
-				type="button"
-				:class="[getClass(index), itemTypeColorClass]"
-				class="border text-sm font-medium px-4 py-2 focus:z-10 focus:ring-1 focus:ring-blue-700"
-			>
-				<span
-					v-if="item.prefix"
-					:class="`button_group__prefix__${index}`"
-				>
-					<cl-icon
-						:icon="item.prefix"
-						:color="item.iconColor"
-					/>
-				</span>
-				<span :class="`button_group__label__${index}`">
-					{{ item.label }}
-				</span>
-				<span
-					v-if="item.prefix"
-					:class="`button_group__suffix__${index}`"
-				>
-					<cl-icon
-						:icon="item.prefix"
-						:color="item.iconColor"
-					/>
-				</span>
-			</button>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-	import { ClIcon } from '../Icon';
-	import { toRefs, type PropType, computed, compile } from 'vue';
-	import type { ButtonGroupItem } from './types';
-	import { ButtonType } from '.';
-
-	const props = defineProps({
-		items: {
-			type: Array as PropType<ButtonGroupItem[]>,
-			default: () => [],
-		},
-		type: {
-			type: String as PropType<ButtonType>,
-			default: ButtonType.primary,
-		},
-		fillBackground: {
-			type: Boolean,
-			default: false,
-		},
-	});
-
-	const { items, type, fillBackground } = toRefs(props);
-
-	const itemTypeColorClass = computed<string>(() => {
-		switch (type.value) {
-			case ButtonType.primary:
-				return fillBackground.value
-					? 'bg-gray-100 '
-					: '' +
-							'text-gray-700 hover:bg-gray-200 border-gray-200 hover:text-blue-700 focus:text-blue-700 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 dark:border-gray-600 dark:hover:text-blue-700 dark:focus:text-blue-700';
-
-			case ButtonType.secondary:
-				return fillBackground.value
-					? 'bg-gray-100 '
-					: '' +
-							'text-gray-700 hover:bg-gray-200 border-gray-200 hover:text-gray-800 focus:text-gray-800 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600 dark:border-gray-600 dark:hover:text-gray-800 dark:focus:text-gray-800';
-
-			case ButtonType.danger:
-				return fillBackground.value
-					? 'bg-gray-100 '
-					: '' +
-							'text-red-700 hover:bg-red-200 border-red-200 hover:text-red-800 focus:text-red-800 dark:bg-red-700 dark:text-red-100 dark:hover:bg-red-600 dark:border-red-600 dark:hover:text-red-800 dark:focus:text-red-800';
-
-			case ButtonType.success:
-				return fillBackground.value
-					? 'bg-gray-100 '
-					: '' +
-							' text-green-700 hover:bg-green-200 border-green-200 hover:text-green-800 focus:text-green-800 dark:bg-green-700 dark:text-green-100 dark:hover:bg-green-600 dark:border-green-600 dark:hover:text-green-800 dark:focus:text-green-800';
-
-			case ButtonType.warning:
-				return fillBackground.value
-					? 'bg-gray-100 '
-					: '' +
-							' text-yellow-700 hover:bg-yellow-200 border-yellow-200 hover:text-yellow-800 focus:text-yellow-800 dark:bg-yellow-700 dark:text-yellow-100 dark:hover:bg-yellow-600 dark:border-yellow-600 dark:hover:text-yellow-800 dark:focus:text-yellow-800';
-
-			case ButtonType.light:
-				return fillBackground.value
-					? 'bg-gray-100 '
-					: '' +
-							'text-blue-700 hover:bg-blue-200 border-blue-200 hover:text-blue-800 focus:text-blue-800 dark:bg-blue-700 dark:text-blue-100 dark:hover:bg-blue-600 dark:border-blue-600 dark:hover:text-blue-800 dark:focus:text-blue-800';
-
-			case ButtonType.dark:
-				return fillBackground.value
-					? 'bg-gray-100 '
-					: '' +
-							'text-gray-100 hover:bg-gray-800 border-gray-800 hover:text-gray-100 focus:text-gray-100 dark:bg-gray-100 dark:text-gray-900 dark:hover:bg-gray-200 dark:border-gray-200 dark:hover:text-gray-900 dark:focus:text-gray-900';
-			default:
-				return 'bg-white text-gray-900 hover:bg-gray-100 border-gray-200 hover:text-blue-700 focus:text-blue-700 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700 dark:border-gray-700 dark:hover:text-blue-700 dark:focus:text-blue-700';
-		}
-	});
-
-	const getClass = (index: number): string => {
-		if (index === 0) return 'rounded-l-lg ';
-		if (index === items.value.length - 1) return 'rounded-r-lg ';
-		return '';
-	};
-</script>
diff --git a/src/components/Button/ClButton.vue b/src/components/Button/DsButton.vue
similarity index 80%
rename from src/components/Button/ClButton.vue
rename to src/components/Button/DsButton.vue
index 50b8e10e..e6cad284 100644
--- a/src/components/Button/ClButton.vue
+++ b/src/components/Button/DsButton.vue
@@ -1,27 +1,30 @@
 <template>
 	<button
 		:id="id"
-		ref="cl-button"
-		class="cl-button"
+		ref="Ds-button"
+		class="Ds-button"
 		:class="[btnClass]"
 		:disabled="disabled"
 		@click="clickHandler($event)"
 	>
 		<div v-if="isLoading">
-			<cl-loading-spinner
+			<Ds-loading-spinner
 				:size="loaderSize"
 				:show-label="false"
 				:color="loaderColor"
 			/>
 		</div>
-		<div v-else>
-			<span>
+		<div
+			v-else
+			class="flex flex-row justify-center items-center"
+		>
+			<span class="sh-button__prefix mr-2">
 				<slot name="prefix" />
 			</span>
 			<span>
 				{{ label }}
 			</span>
-			<span>
+			<span class="sh-button__suffix ml-2">
 				<slot name="suffix" />
 			</span>
 		</div>
@@ -30,8 +33,8 @@
 
 <script setup lang="ts">
 	import { type PropType, computed, toRefs, ref } from 'vue';
-	import { ButtonType, ButtonSize } from './constants';
-	import { ClLoadingSpinner, LoadingSpinnerColor, LoadingSpinnerSize } from '../Loader';
+	import { ButtonType, ButtonSize, ButtonForm } from './constants';
+	import { DsLoadingSpinner, LoadingSpinnerColor, LoadingSpinnerSize } from '../Loader';
 
 	const props = defineProps({
 		type: {
@@ -58,17 +61,21 @@
 			type: Function as PropType<(event: MouseEvent) => void>,
 			default: () => {},
 		},
+		form: {
+			type: String as PropType<ButtonForm>,
+			default: ButtonForm.base,
+		},
 	});
 
-	const { label, type, disabled, size, isLoading, onClick } = toRefs(props);
+	const { label, type, disabled, size, isLoading, onClick, form } = toRefs(props);
 
-	const id = ref('cl-button_' + Date.now());
+	const id = ref('Ds-button_' + Date.now());
 
 	const disabledBtnColorClass =
 		'text-gray-400 bg-gray-200 cursor-not-allowed hover:bg-gray-200 focus:ring-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700 dark:focus:ring-gray-800';
 
 	const defaultBtnClass =
-		'w-full h-full flex flex-row justify-center items-center focus:ring-1 font-medium rounded-lg focus:outline-none';
+		'w-full h-full flex flex-row justify-center items-center focus:ring-1 font-medium focus:outline-none';
 
 	const colorClasses = computed<string>(() => {
 		switch (type.value) {
@@ -108,10 +115,21 @@
 		}
 	});
 
+	const computedButtonFormClass = computed<string>(() => {
+		switch (form.value) {
+			case ButtonForm.base:
+				return 'rounded-lg';
+			case ButtonForm.pill:
+				return 'rounded-full';
+			default:
+				return 'rounded-lg';
+		}
+	});
+
 	const btnClass = computed(() => {
 		const color = disabled.value ? disabledBtnColorClass : colorClasses.value;
 
-		return `${defaultBtnClass} ${computedBtnSize.value} ${color}`;
+		return `${defaultBtnClass} ${computedBtnSize.value} ${computedButtonFormClass.value} ${color}`;
 	});
 
 	const loaderColor = computed(() => {
diff --git a/src/components/Button/DsButtonGroup.vue b/src/components/Button/DsButtonGroup.vue
new file mode 100644
index 00000000..eee161c1
--- /dev/null
+++ b/src/components/Button/DsButtonGroup.vue
@@ -0,0 +1,90 @@
+<template>
+	<div
+		class="inline-flex rounded-md shadow-sm"
+		role="group"
+	>
+		<button
+			type="button"
+			:key="item.id"
+			@click="select(item, index)"
+			:class="[
+				getClass(index),
+				isSelectedItem(item)
+					? 'border-blue-700 focus:ring-blue-700 focus:text-blue-700 dark:focus:ring-blue-500 dark:focus:text-white focus:z-10 focus:ring-1'
+					: 'text-gray-700 bg-white',
+			]"
+			v-for="(item, index) in items"
+			class="flex items-center justify-center px-4 py-2 text-sm font-medium bg-white border border-gray-200 hover:bg-gray-100 hover:text-blue-700 dark:bg-gray-700 dark:border-gray-600 dark:text-white dark:hover:text-white dark:hover:bg-gray-600"
+		>
+			<span
+				v-if="item.prefix"
+				class="mr-2"
+				:class="`button_group__prefix__${index}`"
+			>
+				<Ds-icon
+					:size="14"
+					:icon="item.prefix"
+					:color="item.iconColor"
+				/>
+			</span>
+			{{ item.label }}
+			<span
+				v-if="item.suffix"
+				class="ml-2"
+				:class="`button_group__suffix__${index}`"
+			>
+				<Ds-icon
+					:size="14"
+					:icon="item.suffix"
+					:color="item.iconColor"
+				/>
+			</span>
+		</button>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { DsIcon, Icon } from '../Icon';
+	import { ButtonGroupEvents } from './events';
+	import type { ButtonGroupItem } from './types';
+	import { toRefs, type PropType, ref } from 'vue';
+
+	const emits = defineEmits({
+		[ButtonGroupEvents.select]: ({ item, index }: { item: ButtonGroupItem; index: number }) => true,
+	});
+
+	const props = defineProps({
+		items: {
+			type: Array as PropType<ButtonGroupItem[]>,
+			default: () => [],
+		},
+		selected: {
+			type: Number,
+			default: null,
+		},
+		icon: {
+			type: String as PropType<Icon>,
+			default: null,
+		},
+	});
+
+	const { items, selected, icon } = toRefs(props);
+
+	const selectedId = ref<number | null>(selected.value ?? null);
+
+	const select = (item: ButtonGroupItem, index: number): void => {
+		selectedId.value = item.id;
+		emits(ButtonGroupEvents.select, { item, index });
+	};
+
+	const isSelectedItem = (item: ButtonGroupItem): boolean => {
+		return item.id === selectedId.value;
+	};
+
+	const getClass = (index: number): string => {
+		if (index === 0 && items.value.length != 1) return 'rounded-l-lg ';
+		if (index === items.value.length - 1 && items.value.length != 1) return 'rounded-r-lg ';
+		if (items.value.length === 1) return 'rounded-lg ';
+		return '';
+	};
+</script>
diff --git a/src/components/Button/ClIconButton.vue b/src/components/Button/DsIconButton.vue
similarity index 94%
rename from src/components/Button/ClIconButton.vue
rename to src/components/Button/DsIconButton.vue
index 16a45d67..d681c4b3 100644
--- a/src/components/Button/ClIconButton.vue
+++ b/src/components/Button/DsIconButton.vue
@@ -3,7 +3,7 @@
 		aria-label="button-with-icon"
 		:disabled="disabled"
 		:class="[computedTypeClass]"
-		class="flex items-center justify-center cursor-pointer hover:opacity-80 transition-opacity duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+		class="flex items-center justify-center cursor-pointer hover:opacity-60 transition-opacity duration-50 disabled:opacity-50 disabled:cursor-not-allowed"
 		:style="{
 			backgroundColor: backgroundColor,
 			width: `${computedSize}px`,
@@ -11,7 +11,7 @@
 		}"
 		@click="clickHandler($event)"
 	>
-		<cl-icon
+		<Ds-icon
 			:icon="icon"
 			:color="iconColor"
 			:size="computedIconSize"
@@ -21,7 +21,7 @@
 
 <script setup lang="ts">
 	import { Color } from '@/data';
-	import { ClIcon, Icon } from '../Icon';
+	import { DsIcon, Icon } from '../Icon';
 	import { toRefs, type PropType, computed } from 'vue';
 	import { IconButtonSize, IconButtonType } from './constants';
 
diff --git a/src/components/Button/__stories__/ClButtonGroup.stories.ts b/src/components/Button/__stories__/ClButtonGroup.stories.ts
deleted file mode 100644
index f959e04b..00000000
--- a/src/components/Button/__stories__/ClButtonGroup.stories.ts
+++ /dev/null
@@ -1,177 +0,0 @@
-import { ClButtonGroup, type ButtonGroupItem, ButtonType } from '..';
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-const items: ButtonGroupItem[] = [
-	{
-		id: '1',
-		label: 'Button 1',
-	},
-	{
-		id: '2',
-		label: 'Button 2',
-	},
-	{
-		id: '3',
-		label: 'Button 3',
-	},
-];
-
-const meta: Meta = {
-	title: 'Button/cl-button-group',
-	component: ClButtonGroup,
-	tags: ['autodocs'],
-	argTypes: {
-		items: {
-			description: 'The items of the button group',
-			table: {
-				category: 'props',
-				subcategory: 'required',
-				type: {
-					summary: 'ButtonGroupItem[]',
-					detail:
-						'id: string; label: string; prefix?: Icon; suffix?: Icon; iconColor?: Color | string;',
-				},
-				defaultValue: {
-					summary: undefined,
-				},
-			},
-			control: {
-				type: 'object',
-			},
-			defaultValue: items,
-		},
-		type: {
-			description: 'The type of the button group',
-			table: {
-				category: 'props',
-				subcategory: 'optional',
-				type: {
-					summary: 'ButtonType',
-					detail: `enum ButtonType {\n${
-						Object.keys(ButtonType)
-							.map((m: string) => `\t${m} = "${ButtonType[m as keyof typeof ButtonType]}",`)
-							.join('\r\n') + '\r\n}'
-					}`,
-				},
-				defaultValue: {
-					summary: ButtonType.primary,
-				},
-
-				control: {
-					type: 'select',
-				},
-			},
-			options: Object.keys(ButtonType).map((m: string) => ButtonType[m as keyof typeof ButtonType]),
-		},
-		fillBackground: {
-			description: 'The fill background state of the button group',
-			table: {
-				category: 'props',
-				subcategory: 'optional',
-				type: {
-					summary: 'boolean',
-				},
-				defaultValue: {
-					summary: false,
-				},
-			},
-			control: {
-				type: 'boolean',
-			},
-		},
-	},
-} satisfies Meta<typeof ClButtonGroup>;
-
-export default meta;
-
-type Story = StoryObj<typeof ClButtonGroup>;
-
-export const Example: Story = {
-	parameters: {
-		backgrounds: { default: 'white' },
-	},
-	args: {
-		items,
-	},
-};
-
-export const Primary: Story = {
-	parameters: {
-		backgrounds: { default: 'white' },
-	},
-	args: {
-		items,
-		type: ButtonType.primary,
-	},
-};
-
-export const Secondary: Story = {
-	parameters: {
-		backgrounds: { default: 'white' },
-	},
-	args: {
-		items,
-		type: ButtonType.secondary,
-	},
-};
-
-export const Danger: Story = {
-	parameters: {
-		backgrounds: { default: 'white' },
-	},
-	args: {
-		items,
-		type: ButtonType.danger,
-	},
-};
-
-export const Warning: Story = {
-	parameters: {
-		backgrounds: { default: 'white' },
-	},
-	args: {
-		items,
-		type: ButtonType.warning,
-	},
-};
-
-export const Success: Story = {
-	parameters: {
-		backgrounds: { default: 'white' },
-	},
-	args: {
-		items,
-		type: ButtonType.success,
-	},
-};
-
-export const Light: Story = {
-	parameters: {
-		backgrounds: { default: 'white' },
-	},
-	args: {
-		items,
-		type: ButtonType.light,
-	},
-};
-
-export const Dark: Story = {
-	parameters: {
-		backgrounds: { default: 'black' },
-	},
-	args: {
-		items,
-		type: ButtonType.dark,
-	},
-};
-
-export const FillBackground: Story = {
-	parameters: {
-		backgrounds: { default: 'white' },
-	},
-	args: {
-		items,
-		fillBackground: true,
-		type: ButtonType.primary,
-	},
-};
diff --git a/src/components/Button/__stories__/ClButton.stories.ts b/src/components/Button/__stories__/DsButton.stories.ts
similarity index 70%
rename from src/components/Button/__stories__/ClButton.stories.ts
rename to src/components/Button/__stories__/DsButton.stories.ts
index 39960076..e1413da7 100644
--- a/src/components/Button/__stories__/ClButton.stories.ts
+++ b/src/components/Button/__stories__/DsButton.stories.ts
@@ -1,9 +1,11 @@
-import { ButtonSize, ButtonType, ClButton } from '..';
+import { DsIcon, Icon } from '@/components/Icon';
 import type { Meta, StoryObj } from '@storybook/vue3';
+import { ButtonForm, ButtonSize, ButtonType, DsButton } from '..';
 
 const meta = {
-	title: 'Button/cl-button',
-	component: ClButton,
+	id: 'DsButton',
+	title: 'Button/ds-button',
+	component: DsButton,
 	tags: ['autodocs'],
 	argTypes: {
 		label: {
@@ -107,9 +109,12 @@ const meta = {
 					summary: 'unkown',
 				},
 				defaultValue: {
-					summary: undefined,
+					summary: '-',
 				},
 			},
+			control: {
+				type: '-',
+			},
 		},
 		suffix: {
 			description: 'Content of the suffix slot',
@@ -120,9 +125,12 @@ const meta = {
 					summary: 'unkown',
 				},
 				defaultValue: {
-					summary: undefined,
+					summary: '-',
 				},
 			},
+			control: {
+				type: '-',
+			},
 		},
 		onClick: {
 			description: 'The click handler',
@@ -131,22 +139,44 @@ const meta = {
 				category: 'props',
 				subcategory: 'optional',
 				type: {
-					summary: '() => void',
+					summary: null,
 				},
 				defaultValue: {
 					summary: undefined,
 				},
 			},
 			control: {
-				type: null,
+				type: undefined,
 			},
 		},
+		form: {
+			description: 'The form of the button',
+			table: {
+				category: 'props',
+				subcategory: 'optional',
+				type: {
+					summary: 'ButtonForm',
+					detail: `enum ButtonForm {\n${
+						Object.keys(ButtonForm)
+							.map((m: string) => `\t${m} = "${ButtonForm[m as keyof typeof ButtonForm]}",`)
+							.join('\r\n') + '\r\n}'
+					}`,
+				},
+				defaultValue: {
+					summary: undefined,
+				},
+			},
+			control: {
+				type: 'select',
+			},
+			options: Object.keys(ButtonForm).map((m: string) => ButtonForm[m as keyof typeof ButtonForm]),
+		},
 	},
-} as Meta<typeof ClButton>;
+} satisfies Meta<typeof DsButton>;
 
 export default meta;
 
-type Story = StoryObj<typeof ClButton>;
+type Story = StoryObj<typeof DsButton>;
 
 export const Example: Story = {
 	parameters: {
@@ -247,3 +277,49 @@ export const Loading: Story = {
 		isLoading: true,
 	},
 };
+
+export const Prefix: Story = {
+	parameters: {
+		backgrounds: { default: 'white' },
+	},
+	render: (args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { DsButton, DsIcon },
+		template: `
+			<Ds-button v-bind="args">
+				<template #prefix>
+					<Ds-icon icon="${Icon.plus}" color="#fff" :size="16"/>
+				</template>
+			</Ds-button>
+		`,
+		setup() {
+			return { args };
+		},
+	}),
+	args: {
+		label: 'Button',
+	},
+};
+
+export const Suffix: Story = {
+	parameters: {
+		backgrounds: { default: 'white' },
+	},
+	render: (args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { DsButton, DsIcon },
+		template: `
+			<Ds-button v-bind="args">
+				<template #suffix>
+					<Ds-icon icon="${Icon.plus}" color="#fff" :size="16"/>
+				</template>
+			</Ds-button>
+		`,
+		setup() {
+			return { args };
+		},
+	}),
+	args: {
+		label: 'Button',
+	},
+};
diff --git a/src/components/Button/__stories__/DsButtonGroup.stories.ts b/src/components/Button/__stories__/DsButtonGroup.stories.ts
new file mode 100644
index 00000000..c9434149
--- /dev/null
+++ b/src/components/Button/__stories__/DsButtonGroup.stories.ts
@@ -0,0 +1,157 @@
+import { DsIcon, Icon } from '@/components/Icon';
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { DsButtonGroup, type ButtonGroupItem } from '..';
+
+const items: ButtonGroupItem[] = [
+	{
+		id: 1,
+		label: 'Button 1',
+	},
+	{
+		id: 2,
+		label: 'Button 2',
+	},
+	{
+		id: 3,
+		label: 'Button 3',
+	},
+];
+
+const meta: Meta = {
+	id: 'DsButtonGroup',
+	title: 'Button/ds-button-group',
+	component: DsButtonGroup,
+	tags: ['autodocs'],
+	argTypes: {
+		items: {
+			description: 'The items of the button group',
+			table: {
+				category: 'props',
+				subcategory: 'required',
+				type: {
+					summary: 'ButtonGroupItem[]',
+					detail:
+						'id: string; label: string; prefix?: Icon; suffix?: Icon; iconColor?: Color | string;',
+				},
+				defaultValue: {
+					summary: undefined,
+				},
+			},
+			control: {
+				type: undefined,
+			},
+			defaultValue: items,
+		},
+		onSelect: {
+			description: 'The event emitted when a button is selected',
+			table: {
+				category: 'events',
+				subcategory: 'optional',
+				type: {
+					summary: '(item: ButtonGroupItem, index: number) => void',
+				},
+				defaultValue: {
+					summary: undefined,
+				},
+			},
+			action: 'onSelect',
+			control: {
+				type: undefined,
+			},
+		},
+	},
+} satisfies Meta<typeof DsButtonGroup>;
+
+export default meta;
+
+type Story = StoryObj<typeof DsButtonGroup>;
+
+export const Example: Story = {
+	parameters: {
+		backgrounds: { default: 'white' },
+	},
+	args: {
+		items,
+		selected: 1,
+	},
+};
+
+export const Prefix: Story = {
+	parameters: {
+		backgrounds: { default: 'white' },
+	},
+	render: (args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { DsButtonGroup, DsIcon },
+		template: `
+			<Ds-button-group v-bind="args">
+				<template #prefix="{ item }">
+					<Ds-icon :icon="item.prefix" />
+				</template>
+			</Ds-button-group>
+		`,
+		setup() {
+			return { args };
+		},
+	}),
+	args: {
+		items: [
+			{
+				id: 1,
+				label: 'Button 1',
+				prefix: Icon.check,
+			},
+			{
+				id: 2,
+				label: 'Button 2',
+				prefix: Icon.activity,
+			},
+			{
+				id: 2,
+				label: 'Button 3',
+				prefix: Icon.anchor,
+			},
+		],
+		selected: 1,
+	},
+};
+
+export const Suffix: Story = {
+	parameters: {
+		backgrounds: { default: 'white' },
+	},
+	render: (args, { argTypes }) => ({
+		props: Object.keys(argTypes),
+		components: { DsButtonGroup, DsIcon },
+		template: `
+			<Ds-button-group v-bind="args">
+				<template #suffix="{ item }">
+					<Ds-icon :icon="item.suffix" />
+				</template>
+			</Ds-button-group>
+		`,
+		setup() {
+			return { args };
+		},
+	}),
+	args: {
+		items: [
+			{
+				id: 1,
+				label: 'Button 1',
+				suffix: Icon.check,
+			},
+			{
+				id: 2,
+				label: 'Button 2',
+				suffix: Icon.activity,
+			},
+			{
+				id: 2,
+				label: 'Button 3',
+				suffix: Icon.anchor,
+			},
+		],
+		selected: 1,
+	},
+};
diff --git a/src/components/Button/__stories__/ClIconButton.stories.ts b/src/components/Button/__stories__/DsIconButton.stories.ts
similarity index 94%
rename from src/components/Button/__stories__/ClIconButton.stories.ts
rename to src/components/Button/__stories__/DsIconButton.stories.ts
index 669b05b8..55de4d0d 100644
--- a/src/components/Button/__stories__/ClIconButton.stories.ts
+++ b/src/components/Button/__stories__/DsIconButton.stories.ts
@@ -1,12 +1,13 @@
 import { Color } from '@/data';
 import { Icon } from '@/components/Icon';
-import ClIconButton from '../ClIconButton.vue';
+import DsIconButton from '../DsIconButton.vue';
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { IconButtonSize, IconButtonType } from '..';
 
 const meta = {
-	title: 'Button/cl-icon-button',
-	component: ClIconButton,
+	id: 'DsIconButton',
+	title: 'Button/ds-icon-button',
+	component: DsIconButton,
 	tags: ['autodocs'],
 	argTypes: {
 		icon: {
@@ -141,7 +142,7 @@ const meta = {
 				subcategory: 'optional',
 				action: 'clicked',
 				type: {
-					summary: '() => void',
+					summary: null,
 				},
 				defaultValue: {
 					summary: undefined,
@@ -153,11 +154,11 @@ const meta = {
 			},
 		},
 	},
-} as Meta<typeof ClIconButton>;
+} as Meta<typeof DsIconButton>;
 
 export default meta;
 
-type Story = StoryObj<typeof ClIconButton>;
+type Story = StoryObj<typeof DsIconButton>;
 
 export const Example: Story = {
 	parameters: {
diff --git a/src/components/Button/__tests__/CbButton.spec.ts b/src/components/Button/__tests__/DsButton.spec.ts
similarity index 75%
rename from src/components/Button/__tests__/CbButton.spec.ts
rename to src/components/Button/__tests__/DsButton.spec.ts
index e988122d..af0e7368 100644
--- a/src/components/Button/__tests__/CbButton.spec.ts
+++ b/src/components/Button/__tests__/DsButton.spec.ts
@@ -1,13 +1,13 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, test } from 'vitest';
-import { ButtonSize, ButtonType, ClButton } from '..';
+import { ButtonSize, ButtonType, DsButton } from '..';
 
 const btnType = ButtonType.primary;
 const btnSize = ButtonSize.base;
 
-describe('ClButton', () => {
+describe('DsButton', () => {
 	test('renders correctly', () => {
-		const wrapper = mount(ClButton, {
+		const wrapper = mount(DsButton, {
 			props: {
 				label: 'Test',
 				size: 'small' as ButtonSize,
diff --git a/src/components/Button/__tests__/__snapshots__/CbButton.spec.ts.snap b/src/components/Button/__tests__/__snapshots__/CbButton.spec.ts.snap
index f45622ff..8e9efa28 100644
--- a/src/components/Button/__tests__/__snapshots__/CbButton.spec.ts.snap
+++ b/src/components/Button/__tests__/__snapshots__/CbButton.spec.ts.snap
@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ClButton > renders correctly 1`] = `
-"<button id=\\"cl-button_1692472647093\\" class=\\"cl-button w-full h-full flex flex-row justify-center items-center focus:ring-1 font-medium rounded-lg focus:outline-none px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 dark:bg-blue-600 hover:bg-blue-800 dark:hover:bg-blue-700 focus:ring-blue-300 dark:focus:ring-blue-800\\">
-  <div><span></span><span>Test</span><span></span></div>
+exports[`DsButton > renders correctly 1`] = `
+"<button id=\\"Ds-button_1692480764523\\" class=\\"Ds-button w-full h-full flex flex-row justify-center items-center focus:ring-1 font-medium focus:outline-none px-3 py-2 text-sm font-medium text-center rounded-lg text-white bg-blue-700 dark:bg-blue-600 hover:bg-blue-800 dark:hover:bg-blue-700 focus:ring-blue-300 dark:focus:ring-blue-800\\">
+  <div class=\\"flex flex-row justify-center items-center\\"><span class=\\"sh-button__prefix mr-2\\"></span><span>Test</span><span class=\\"sh-button__suffix ml-2\\"></span></div>
 </button>"
 `;
diff --git a/src/components/Button/__tests__/__snapshots__/DsButton.spec.ts.snap b/src/components/Button/__tests__/__snapshots__/DsButton.spec.ts.snap
new file mode 100644
index 00000000..0fc8c97f
--- /dev/null
+++ b/src/components/Button/__tests__/__snapshots__/DsButton.spec.ts.snap
@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DsButton > renders correctly 1`] = `
+"<button id=\\"Ds-button_1692481095537\\" class=\\"Ds-button w-full h-full flex flex-row justify-center items-center focus:ring-1 font-medium focus:outline-none px-3 py-2 text-sm font-medium text-center rounded-lg text-white bg-blue-700 dark:bg-blue-600 hover:bg-blue-800 dark:hover:bg-blue-700 focus:ring-blue-300 dark:focus:ring-blue-800\\">
+  <div class=\\"flex flex-row justify-center items-center\\"><span class=\\"sh-button__prefix mr-2\\"></span><span>Test</span><span class=\\"sh-button__suffix ml-2\\"></span></div>
+</button>"
+`;
diff --git a/src/components/Button/constants.ts b/src/components/Button/constants.ts
index 35045a4c..c37dfad0 100644
--- a/src/components/Button/constants.ts
+++ b/src/components/Button/constants.ts
@@ -28,3 +28,8 @@ export enum IconButtonSize {
 	large = 'large',
 	extra_large = 'extra_large',
 }
+
+export enum ButtonForm {
+	base = 'base',
+	pill = 'pill',
+}
diff --git a/src/components/Button/events.ts b/src/components/Button/events.ts
new file mode 100644
index 00000000..07510300
--- /dev/null
+++ b/src/components/Button/events.ts
@@ -0,0 +1,3 @@
+export enum ButtonGroupEvents {
+	select = 'select',
+}
diff --git a/src/components/Button/index.ts b/src/components/Button/index.ts
index 7d774698..68be746a 100644
--- a/src/components/Button/index.ts
+++ b/src/components/Button/index.ts
@@ -1,5 +1,6 @@
 export * from './types';
+export * from './events';
 export * from './constants';
-export { default as ClButton } from './ClButton.vue';
-export { default as ClIconButton } from './ClIconButton.vue';
-export { default as ClButtonGroup } from './ClButtonGroup.vue';
+export { default as DsButton } from './DsButton.vue';
+export { default as DsIconButton } from './DsIconButton.vue';
+export { default as DsButtonGroup } from './DsButtonGroup.vue';
diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts
index 326c70de..c4d69345 100644
--- a/src/components/Button/types.ts
+++ b/src/components/Button/types.ts
@@ -1,9 +1,8 @@
 import type { Color } from '@/data';
 import type { Icon } from '../Icon';
-import type { ButtonType } from '.';
 
 export declare type ButtonGroupItem = {
-	id: string;
+	id: number;
 	label: string;
 	prefix?: Icon;
 	suffix?: Icon;
diff --git a/src/components/Icon/ClIcon.vue b/src/components/Icon/DsIcon.vue
similarity index 100%
rename from src/components/Icon/ClIcon.vue
rename to src/components/Icon/DsIcon.vue
diff --git a/src/components/Icon/__stories__/ClIcon.stories.ts b/src/components/Icon/__stories__/DsIcon.stories.ts
similarity index 94%
rename from src/components/Icon/__stories__/ClIcon.stories.ts
rename to src/components/Icon/__stories__/DsIcon.stories.ts
index 16fd5d67..ce7db052 100644
--- a/src/components/Icon/__stories__/ClIcon.stories.ts
+++ b/src/components/Icon/__stories__/DsIcon.stories.ts
@@ -1,10 +1,11 @@
 import { Color } from '@/data';
-import { ClIcon, Icon } from '..';
+import { DsIcon, Icon } from '..';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 const meta = {
-	title: 'Icon/cl-icon',
-	component: ClIcon,
+	id: 'DsIcon',
+	title: 'Icon/ds-icon',
+	component: DsIcon,
 	tags: ['autodocs'],
 	argTypes: {
 		icon: {
@@ -65,11 +66,11 @@ const meta = {
 			},
 		},
 	},
-} satisfies Meta<typeof ClIcon>;
+} satisfies Meta<typeof DsIcon>;
 
 export default meta;
 
-type Story = StoryObj<typeof ClIcon>;
+type Story = StoryObj<typeof DsIcon>;
 
 const icons: string[] = [...new Set(Object.values(Icon))];
 
@@ -79,12 +80,12 @@ const stories: Story[] = icons.map((m: string) => {
 			backgrounds: { default: 'white' },
 		},
 		render: (args, { argTypes }) => ({
-			components: { ClIcon },
+			components: { DsIcon },
 			props: Object.keys(argTypes),
 			setup() {
 				return { args };
 			},
-			template: '<cl-icon :icon="args.icon" :size="args.size" :color="args.color" />',
+			template: '<Ds-icon :icon="args.icon" :size="args.size" :color="args.color" />',
 		}),
 		args: {
 			icon: m as Icon,
@@ -94,7 +95,7 @@ const stories: Story[] = icons.map((m: string) => {
 	};
 });
 
-export const Default: Story = {
+export const Example: Story = {
 	parameters: {
 		backgrounds: { default: 'white' },
 	},
@@ -110,7 +111,7 @@ export const All: Story = {
 		backgrounds: { default: 'white' },
 	},
 	render: (args, { argTypes }) => ({
-		components: { ClIcon },
+		components: { DsIcon },
 		props: Object.keys(argTypes),
 		setup() {
 			return { args, icons };
@@ -118,7 +119,7 @@ export const All: Story = {
 		template: `
 			<div class="w-max h-full grid grid-cols-18 gap-4">
 				<span v-for="icon in icons" :key="icon" class="m-1">
-					<cl-icon :icon="icon" :size=24 color="#000000" />
+					<Ds-icon :icon="icon" :size=24 color="#000000" />
 				</span>
 			</div>
 		`,
diff --git a/src/components/Icon/index.ts b/src/components/Icon/index.ts
index 750d620a..33b5699b 100644
--- a/src/components/Icon/index.ts
+++ b/src/components/Icon/index.ts
@@ -1,4 +1,4 @@
 export { getIcon } from './functions';
 export type { IconObj } from './types';
-export { default as ClIcon } from './ClIcon.vue';
+export { default as DsIcon } from './DsIcon.vue';
 export { IconCollection, Icon } from './constants';
diff --git a/src/components/Loader/ClLoadingSpinner.vue b/src/components/Loader/DsLoadingSpinner.vue
similarity index 100%
rename from src/components/Loader/ClLoadingSpinner.vue
rename to src/components/Loader/DsLoadingSpinner.vue
diff --git a/src/components/Loader/__stories__/ClLoadingSpinner.stories.ts b/src/components/Loader/__stories__/DsLoadingSpinner.stories.ts
similarity index 93%
rename from src/components/Loader/__stories__/ClLoadingSpinner.stories.ts
rename to src/components/Loader/__stories__/DsLoadingSpinner.stories.ts
index 02133be4..ae0f3fb2 100644
--- a/src/components/Loader/__stories__/ClLoadingSpinner.stories.ts
+++ b/src/components/Loader/__stories__/DsLoadingSpinner.stories.ts
@@ -1,9 +1,10 @@
 import type { Meta, StoryObj } from '@storybook/vue3';
-import { ClLoadingSpinner, LoadingSpinnerColor, LoadingSpinnerSize } from '..';
+import { DsLoadingSpinner, LoadingSpinnerColor, LoadingSpinnerSize } from '..';
 
 const meta = {
-	title: 'Loader/cl-loading-spinner',
-	component: ClLoadingSpinner,
+	id: 'DsLoadingSpinner',
+	title: 'Loader/ds-loading-spinner',
+	component: DsLoadingSpinner,
 	tags: ['autodocs'],
 	argTypes: {
 		color: {
@@ -93,11 +94,11 @@ const meta = {
 			),
 		},
 	},
-} satisfies Meta<typeof ClLoadingSpinner>;
+} satisfies Meta<typeof DsLoadingSpinner>;
 
 export default meta;
 
-type Story = StoryObj<typeof ClLoadingSpinner>;
+type Story = StoryObj<typeof DsLoadingSpinner>;
 
 export const Blue: Story = {
 	parameters: {
diff --git a/src/components/Loader/__tests__/CbLoadingSpinner.spec.ts b/src/components/Loader/__tests__/DsLoadingSpinner.spec.ts
similarity index 71%
rename from src/components/Loader/__tests__/CbLoadingSpinner.spec.ts
rename to src/components/Loader/__tests__/DsLoadingSpinner.spec.ts
index ce63b520..abe53fe7 100644
--- a/src/components/Loader/__tests__/CbLoadingSpinner.spec.ts
+++ b/src/components/Loader/__tests__/DsLoadingSpinner.spec.ts
@@ -1,16 +1,16 @@
 import { mount } from '@vue/test-utils';
 import { describe, expect, test } from 'vitest';
-import ClLoadingSpinner from '../ClLoadingSpinner.vue';
+import DsLoadingSpinner from '../DsLoadingSpinner.vue';
 import { LoadingSpinnerColor, LoadingSpinnerSize } from '..';
 
-describe('ClLoadingSpinner', () => {
+describe('DsLoadingSpinner', () => {
 	test('renders correctly', () => {
-		const wrapper = mount(ClLoadingSpinner);
+		const wrapper = mount(DsLoadingSpinner);
 		expect(wrapper).toMatchSnapshot();
 	});
 
 	test('renders correctly with color', () => {
-		const wrapper = mount(ClLoadingSpinner, {
+		const wrapper = mount(DsLoadingSpinner, {
 			props: {
 				color: LoadingSpinnerColor.green,
 			},
@@ -19,7 +19,7 @@ describe('ClLoadingSpinner', () => {
 	});
 
 	test('renders correctly with size', () => {
-		const wrapper = mount(ClLoadingSpinner, {
+		const wrapper = mount(DsLoadingSpinner, {
 			props: {
 				size: LoadingSpinnerSize.NORMAL,
 			},
diff --git a/src/components/Loader/__tests__/__snapshots__/CbLoadingSpinner.spec.ts.snap b/src/components/Loader/__tests__/__snapshots__/CbLoadingSpinner.spec.ts.snap
index 8df8c2fe..b08841c2 100644
--- a/src/components/Loader/__tests__/__snapshots__/CbLoadingSpinner.spec.ts.snap
+++ b/src/components/Loader/__tests__/__snapshots__/CbLoadingSpinner.spec.ts.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ClLoadingSpinner > renders correctly 1`] = `
+exports[`DsLoadingSpinner > renders correctly 1`] = `
 VueWrapper {
   "__app": {
     "_component": {
@@ -960,8 +960,8 @@ VueWrapper {
           "suspense": null,
           "suspenseId": 0,
           "type": {
-            "__file": "/Volumes/Data/Code/Projects/gecko/src/components/Loader/ClLoadingSpinner.vue",
-            "__name": "ClLoadingSpinner",
+            "__file": "/Volumes/Data/Code/Projects/genshi/src/components/Loader/DsLoadingSpinner.vue",
+            "__name": "DsLoadingSpinner",
             "components": {},
             "props": {
               "color": {
@@ -1039,8 +1039,8 @@ VueWrapper {
         "targetAnchor": null,
         "transition": null,
         "type": {
-          "__file": "/Volumes/Data/Code/Projects/gecko/src/components/Loader/ClLoadingSpinner.vue",
-          "__name": "ClLoadingSpinner",
+          "__file": "/Volumes/Data/Code/Projects/genshi/src/components/Loader/DsLoadingSpinner.vue",
+          "__name": "DsLoadingSpinner",
           "components": {},
           "props": {
             "color": {
@@ -1386,7 +1386,7 @@ VueWrapper {
 }
 `;
 
-exports[`ClLoadingSpinner > renders correctly with color > <div role="status" class="flex flex-col items-center justify-center w-full h-full"><svg aria-hidden="true" class="fill-green-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+exports[`DsLoadingSpinner > renders correctly with color > <div role="status" class="flex flex-col items-center justify-center w-full h-full"><svg aria-hidden="true" class="fill-green-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path>
     <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path>
   </svg>
@@ -2357,8 +2357,8 @@ VueWrapper {
           "suspense": null,
           "suspenseId": 0,
           "type": {
-            "__file": "/Volumes/Data/Code/Projects/gecko/src/components/Loader/ClLoadingSpinner.vue",
-            "__name": "ClLoadingSpinner",
+            "__file": "/Volumes/Data/Code/Projects/genshi/src/components/Loader/DsLoadingSpinner.vue",
+            "__name": "DsLoadingSpinner",
             "components": {},
             "props": {
               "color": {
@@ -2437,8 +2437,8 @@ VueWrapper {
         "targetAnchor": null,
         "transition": null,
         "type": {
-          "__file": "/Volumes/Data/Code/Projects/gecko/src/components/Loader/ClLoadingSpinner.vue",
-          "__name": "ClLoadingSpinner",
+          "__file": "/Volumes/Data/Code/Projects/genshi/src/components/Loader/DsLoadingSpinner.vue",
+          "__name": "DsLoadingSpinner",
           "components": {},
           "props": {
             "color": {
@@ -2784,7 +2784,7 @@ VueWrapper {
 }
 `;
 
-exports[`ClLoadingSpinner > renders correctly with size > <div role="status" class="flex flex-col items-center justify-center w-full h-full"><svg aria-hidden="true" class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+exports[`DsLoadingSpinner > renders correctly with size > <div role="status" class="flex flex-col items-center justify-center w-full h-full"><svg aria-hidden="true" class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path>
     <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path>
   </svg>
@@ -3755,8 +3755,8 @@ VueWrapper {
           "suspense": null,
           "suspenseId": 0,
           "type": {
-            "__file": "/Volumes/Data/Code/Projects/gecko/src/components/Loader/ClLoadingSpinner.vue",
-            "__name": "ClLoadingSpinner",
+            "__file": "/Volumes/Data/Code/Projects/genshi/src/components/Loader/DsLoadingSpinner.vue",
+            "__name": "DsLoadingSpinner",
             "components": {},
             "props": {
               "color": {
@@ -3835,8 +3835,8 @@ VueWrapper {
         "targetAnchor": null,
         "transition": null,
         "type": {
-          "__file": "/Volumes/Data/Code/Projects/gecko/src/components/Loader/ClLoadingSpinner.vue",
-          "__name": "ClLoadingSpinner",
+          "__file": "/Volumes/Data/Code/Projects/genshi/src/components/Loader/DsLoadingSpinner.vue",
+          "__name": "DsLoadingSpinner",
           "components": {},
           "props": {
             "color": {
diff --git a/src/components/Loader/__tests__/__snapshots__/DsLoadingSpinner.spec.ts.snap b/src/components/Loader/__tests__/__snapshots__/DsLoadingSpinner.spec.ts.snap
new file mode 100644
index 00000000..b08841c2
--- /dev/null
+++ b/src/components/Loader/__tests__/__snapshots__/DsLoadingSpinner.spec.ts.snap
@@ -0,0 +1,4183 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`DsLoadingSpinner > renders correctly 1`] = `
+VueWrapper {
+  "__app": {
+    "_component": {
+      "name": "VTU_ROOT",
+      "render": [Function],
+      "setup": [Function],
+    },
+    "_container": <div
+      data-v-app=""
+    >
+      <div
+        class="flex flex-col items-center justify-center w-full h-full"
+        role="status"
+      >
+        <svg
+          aria-hidden="true"
+          class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+          fill="none"
+          viewBox="0 0 100 101"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+          />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+          />
+        </svg>
+        <!--v-if-->
+      </div>
+    </div>,
+    "_context": {
+      "app": [Circular],
+      "components": {
+        "transition": {
+          "name": "transition",
+        },
+        "transition-group": {
+          "name": "transition-group",
+        },
+      },
+      "config": {
+        "compilerOptions": {},
+        "errorHandler": undefined,
+        "globalProperties": {},
+        "isNativeTag": [Function],
+        "optionMergeStrategies": {},
+        "performance": false,
+        "warnHandler": undefined,
+      },
+      "directives": {},
+      "emitsCache": WeakMap {},
+      "mixins": [
+        {
+          "beforeCreate": [Function],
+        },
+      ],
+      "optionsCache": WeakMap {},
+      "propsCache": WeakMap {},
+      "provides": {},
+      "reload": [Function],
+    },
+    "_instance": {
+      "a": null,
+      "accessCache": {},
+      "appContext": {
+        "app": [Circular],
+        "components": {
+          "transition": {
+            "name": "transition",
+          },
+          "transition-group": {
+            "name": "transition-group",
+          },
+        },
+        "config": {
+          "compilerOptions": {},
+          "errorHandler": undefined,
+          "globalProperties": {},
+          "isNativeTag": [Function],
+          "optionMergeStrategies": {},
+          "performance": false,
+          "warnHandler": undefined,
+        },
+        "directives": {},
+        "emitsCache": WeakMap {},
+        "mixins": [
+          {
+            "beforeCreate": [Function],
+          },
+        ],
+        "optionsCache": WeakMap {},
+        "propsCache": WeakMap {},
+        "provides": {},
+        "reload": [Function],
+      },
+      "asyncDep": null,
+      "asyncResolved": false,
+      "attrs": {},
+      "attrsProxy": null,
+      "bc": null,
+      "bm": null,
+      "bu": null,
+      "bum": null,
+      "c": null,
+      "components": null,
+      "ctx": {
+        "VTU_COMPONENT": {},
+      },
+      "da": null,
+      "data": {},
+      "devtoolsRawSetupState": {
+        "VTU_COMPONENT": RefImpl {
+          "__v_isRef": true,
+          "__v_isShallow": false,
+          "_rawValue": {},
+          "_value": {},
+          "dep": undefined,
+        },
+      },
+      "directives": null,
+      "ec": null,
+      "effect": ReactiveEffect {
+        "active": true,
+        "allowRecurse": true,
+        "deps": [
+          Set {
+            [Circular],
+          },
+          Set {
+            [Circular],
+          },
+          Set {
+            [Circular],
+          },
+        ],
+        "fn": [Function],
+        "onTrack": undefined,
+        "onTrigger": undefined,
+        "parent": undefined,
+        "scheduler": [Function],
+      },
+      "emit": [Function],
+      "emitsOptions": null,
+      "emitted": null,
+      "exposeProxy": null,
+      "exposed": null,
+      "inheritAttrs": undefined,
+      "isDeactivated": false,
+      "isMounted": true,
+      "isUnmounted": false,
+      "m": null,
+      "next": null,
+      "parent": null,
+      "props": {},
+      "propsDefaults": {},
+      "propsOptions": [
+        {},
+        [],
+      ],
+      "provides": {},
+      "proxy": {
+        "VTU_COMPONENT": {},
+      },
+      "refs": {
+        "VTU_COMPONENT": {},
+      },
+      "render": [Function],
+      "renderCache": [],
+      "root": [Circular],
+      "rtc": null,
+      "rtg": null,
+      "scope": EffectScope {
+        "_active": true,
+        "cleanups": [],
+        "detached": true,
+        "effects": [
+          ReactiveEffect {
+            "active": true,
+            "allowRecurse": true,
+            "deps": [
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+            ],
+            "fn": [Function],
+            "onTrack": undefined,
+            "onTrigger": undefined,
+            "parent": undefined,
+            "scheduler": [Function],
+          },
+        ],
+        "parent": undefined,
+      },
+      "setupContext": null,
+      "setupState": {
+        "VTU_COMPONENT": {},
+      },
+      "slots": {},
+      "slotsProxy": null,
+      "sp": null,
+      "subTree": {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": null,
+        "component": {
+          "a": null,
+          "accessCache": {},
+          "appContext": {
+            "app": [Circular],
+            "components": {
+              "transition": {
+                "name": "transition",
+              },
+              "transition-group": {
+                "name": "transition-group",
+              },
+            },
+            "config": {
+              "compilerOptions": {},
+              "errorHandler": undefined,
+              "globalProperties": {},
+              "isNativeTag": [Function],
+              "optionMergeStrategies": {},
+              "performance": false,
+              "warnHandler": undefined,
+            },
+            "directives": {},
+            "emitsCache": WeakMap {},
+            "mixins": [
+              {
+                "beforeCreate": [Function],
+              },
+            ],
+            "optionsCache": WeakMap {},
+            "propsCache": WeakMap {},
+            "provides": {},
+            "reload": [Function],
+          },
+          "asyncDep": null,
+          "asyncResolved": false,
+          "attrs": {},
+          "attrsProxy": null,
+          "bc": null,
+          "bm": null,
+          "bu": null,
+          "bum": null,
+          "c": null,
+          "components": {},
+          "ctx": {
+            "color": "blue",
+            "label": "Loading...",
+            "showLabel": false,
+            "size": "normal",
+          },
+          "da": null,
+          "data": {},
+          "devtoolsRawSetupState": {
+            "color": ObjectRefImpl {
+              "__v_isRef": true,
+              "_defaultValue": undefined,
+              "_key": "color",
+              "_object": {
+                "color": "blue",
+                "label": "Loading...",
+                "showLabel": false,
+                "size": "normal",
+              },
+            },
+            "computedFillColor": ComputedRefImpl {
+              "__v_isReadonly": true,
+              "__v_isRef": true,
+              "_cacheable": true,
+              "_dirty": false,
+              "_setter": [Function],
+              "_value": "fill-blue-600 text-gray-200 dark:text-gray-200",
+              "dep": Set {
+                ReactiveEffect {
+                  "active": true,
+                  "allowRecurse": true,
+                  "deps": [
+                    [Circular],
+                    Set {
+                      [Circular],
+                    },
+                    Set {
+                      [Circular],
+                    },
+                  ],
+                  "fn": [Function],
+                  "onTrack": undefined,
+                  "onTrigger": undefined,
+                  "parent": undefined,
+                  "scheduler": [Function],
+                },
+              },
+              "effect": ReactiveEffect {
+                "active": true,
+                "computed": [Circular],
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+            },
+            "computedSize": ComputedRefImpl {
+              "__v_isReadonly": true,
+              "__v_isRef": true,
+              "_cacheable": true,
+              "_dirty": false,
+              "_setter": [Function],
+              "_value": "w-6 h-6",
+              "dep": Set {
+                ReactiveEffect {
+                  "active": true,
+                  "allowRecurse": true,
+                  "deps": [
+                    Set {
+                      [Circular],
+                    },
+                    [Circular],
+                    Set {
+                      [Circular],
+                    },
+                  ],
+                  "fn": [Function],
+                  "onTrack": undefined,
+                  "onTrigger": undefined,
+                  "parent": undefined,
+                  "scheduler": [Function],
+                },
+              },
+              "effect": ReactiveEffect {
+                "active": true,
+                "computed": [Circular],
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+            },
+            "label": ObjectRefImpl {
+              "__v_isRef": true,
+              "_defaultValue": undefined,
+              "_key": "label",
+              "_object": {
+                "color": "blue",
+                "label": "Loading...",
+                "showLabel": false,
+                "size": "normal",
+              },
+            },
+            "props": {
+              "color": "blue",
+              "label": "Loading...",
+              "showLabel": false,
+              "size": "normal",
+            },
+            "showLabel": ObjectRefImpl {
+              "__v_isRef": true,
+              "_defaultValue": undefined,
+              "_key": "showLabel",
+              "_object": {
+                "color": "blue",
+                "label": "Loading...",
+                "showLabel": false,
+                "size": "normal",
+              },
+            },
+          },
+          "directives": null,
+          "ec": null,
+          "effect": ReactiveEffect {
+            "active": true,
+            "allowRecurse": true,
+            "deps": [
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+            ],
+            "fn": [Function],
+            "onTrack": undefined,
+            "onTrigger": undefined,
+            "parent": undefined,
+            "scheduler": [Function],
+          },
+          "emit": [Function],
+          "emitsOptions": null,
+          "emitted": null,
+          "exposeProxy": {},
+          "exposed": {},
+          "inheritAttrs": undefined,
+          "isDeactivated": false,
+          "isMounted": true,
+          "isUnmounted": false,
+          "m": null,
+          "next": null,
+          "parent": [Circular],
+          "props": {
+            "color": "blue",
+            "label": "Loading...",
+            "showLabel": false,
+            "size": "normal",
+          },
+          "propsDefaults": {},
+          "propsOptions": [
+            {
+              "color": {
+                "0": false,
+                "1": true,
+                "default": "blue",
+                "type": [Function],
+              },
+              "label": {
+                "0": false,
+                "1": true,
+                "default": "Loading...",
+                "type": [Function],
+              },
+              "showLabel": {
+                "0": true,
+                "1": true,
+                "default": false,
+                "type": [Function],
+              },
+              "size": {
+                "0": false,
+                "1": true,
+                "default": "normal",
+                "type": [Function],
+              },
+            },
+            [
+              "color",
+              "label",
+              "showLabel",
+              "size",
+            ],
+          ],
+          "provides": {},
+          "proxy": {
+            "color": "blue",
+            "label": "Loading...",
+            "showLabel": false,
+            "size": "normal",
+          },
+          "refs": {},
+          "render": [Function],
+          "renderCache": [],
+          "root": [Circular],
+          "rtc": null,
+          "rtg": null,
+          "scope": EffectScope {
+            "_active": true,
+            "cleanups": [],
+            "detached": true,
+            "effects": [
+              ReactiveEffect {
+                "active": true,
+                "computed": ComputedRefImpl {
+                  "__v_isReadonly": true,
+                  "__v_isRef": true,
+                  "_cacheable": true,
+                  "_dirty": false,
+                  "_setter": [Function],
+                  "_value": "fill-blue-600 text-gray-200 dark:text-gray-200",
+                  "dep": Set {
+                    ReactiveEffect {
+                      "active": true,
+                      "allowRecurse": true,
+                      "deps": [
+                        [Circular],
+                        Set {
+                          [Circular],
+                        },
+                        Set {
+                          [Circular],
+                        },
+                      ],
+                      "fn": [Function],
+                      "onTrack": undefined,
+                      "onTrigger": undefined,
+                      "parent": undefined,
+                      "scheduler": [Function],
+                    },
+                  },
+                  "effect": [Circular],
+                },
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+              ReactiveEffect {
+                "active": true,
+                "computed": ComputedRefImpl {
+                  "__v_isReadonly": true,
+                  "__v_isRef": true,
+                  "_cacheable": true,
+                  "_dirty": false,
+                  "_setter": [Function],
+                  "_value": "w-6 h-6",
+                  "dep": Set {
+                    ReactiveEffect {
+                      "active": true,
+                      "allowRecurse": true,
+                      "deps": [
+                        Set {
+                          [Circular],
+                        },
+                        [Circular],
+                        Set {
+                          [Circular],
+                        },
+                      ],
+                      "fn": [Function],
+                      "onTrack": undefined,
+                      "onTrigger": undefined,
+                      "parent": undefined,
+                      "scheduler": [Function],
+                    },
+                  },
+                  "effect": [Circular],
+                },
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+              ReactiveEffect {
+                "active": true,
+                "allowRecurse": true,
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                  Set {
+                    [Circular],
+                  },
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "onTrack": undefined,
+                "onTrigger": undefined,
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+            ],
+            "parent": undefined,
+          },
+          "setupContext": {
+            "attrs": {},
+            "emit": [Function],
+            "expose": [Function],
+            "slots": {},
+          },
+          "setupState": {
+            "color": "blue",
+            "computedFillColor": "fill-blue-600 text-gray-200 dark:text-gray-200",
+            "computedSize": "w-6 h-6",
+            "label": "Loading...",
+            "props": {
+              "color": "blue",
+              "label": "Loading...",
+              "showLabel": false,
+              "size": "normal",
+            },
+            "showLabel": false,
+          },
+          "slots": {},
+          "slotsProxy": {},
+          "sp": null,
+          "subTree": {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  {
+                    "__v_isVNode": true,
+                    "__v_skip": true,
+                    "anchor": null,
+                    "appContext": null,
+                    "ce": undefined,
+                    "children": null,
+                    "component": null,
+                    "ctx": null,
+                    "dirs": null,
+                    "dynamicChildren": null,
+                    "dynamicProps": null,
+                    "el": <path
+                      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                      fill="currentColor"
+                    />,
+                    "key": null,
+                    "patchFlag": -1,
+                    "props": {
+                      "d": "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
+                      "fill": "currentColor",
+                    },
+                    "ref": null,
+                    "scopeId": null,
+                    "shapeFlag": 1,
+                    "slotScopeIds": null,
+                    "ssContent": null,
+                    "ssFallback": null,
+                    "staticCount": 0,
+                    "suspense": null,
+                    "target": null,
+                    "targetAnchor": null,
+                    "transition": null,
+                    "type": "path",
+                  },
+                  {
+                    "__v_isVNode": true,
+                    "__v_skip": true,
+                    "anchor": null,
+                    "appContext": null,
+                    "ce": undefined,
+                    "children": null,
+                    "component": null,
+                    "ctx": null,
+                    "dirs": null,
+                    "dynamicChildren": null,
+                    "dynamicProps": null,
+                    "el": <path
+                      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                      fill="currentFill"
+                    />,
+                    "key": null,
+                    "patchFlag": -1,
+                    "props": {
+                      "d": "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
+                      "fill": "currentFill",
+                    },
+                    "ref": null,
+                    "scopeId": null,
+                    "shapeFlag": 1,
+                    "slotScopeIds": null,
+                    "ssContent": null,
+                    "ssFallback": null,
+                    "staticCount": 0,
+                    "suspense": null,
+                    "target": null,
+                    "targetAnchor": null,
+                    "transition": null,
+                    "type": "path",
+                  },
+                ],
+                "component": null,
+                "ctx": [Circular],
+                "dirs": null,
+                "dynamicChildren": [],
+                "dynamicProps": null,
+                "el": <svg
+                  aria-hidden="true"
+                  class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+                  fill="none"
+                  viewBox="0 0 100 101"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                    fill="currentFill"
+                  />
+                </svg>,
+                "key": null,
+                "patchFlag": 2,
+                "props": {
+                  "aria-hidden": "true",
+                  "class": "fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin",
+                  "fill": "none",
+                  "viewBox": "0 0 100 101",
+                  "xmlns": "http://www.w3.org/2000/svg",
+                },
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 17,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": "svg",
+              },
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "v-if",
+                "component": null,
+                "ctx": [Circular],
+                "dirs": null,
+                "dynamicChildren": [],
+                "dynamicProps": null,
+                "el": <!--v-if-->,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(v-cmt),
+              },
+            ],
+            "component": null,
+            "ctx": [Circular],
+            "dirs": null,
+            "dynamicChildren": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  {
+                    "__v_isVNode": true,
+                    "__v_skip": true,
+                    "anchor": null,
+                    "appContext": null,
+                    "ce": undefined,
+                    "children": null,
+                    "component": null,
+                    "ctx": null,
+                    "dirs": null,
+                    "dynamicChildren": null,
+                    "dynamicProps": null,
+                    "el": <path
+                      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                      fill="currentColor"
+                    />,
+                    "key": null,
+                    "patchFlag": -1,
+                    "props": {
+                      "d": "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
+                      "fill": "currentColor",
+                    },
+                    "ref": null,
+                    "scopeId": null,
+                    "shapeFlag": 1,
+                    "slotScopeIds": null,
+                    "ssContent": null,
+                    "ssFallback": null,
+                    "staticCount": 0,
+                    "suspense": null,
+                    "target": null,
+                    "targetAnchor": null,
+                    "transition": null,
+                    "type": "path",
+                  },
+                  {
+                    "__v_isVNode": true,
+                    "__v_skip": true,
+                    "anchor": null,
+                    "appContext": null,
+                    "ce": undefined,
+                    "children": null,
+                    "component": null,
+                    "ctx": null,
+                    "dirs": null,
+                    "dynamicChildren": null,
+                    "dynamicProps": null,
+                    "el": <path
+                      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                      fill="currentFill"
+                    />,
+                    "key": null,
+                    "patchFlag": -1,
+                    "props": {
+                      "d": "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
+                      "fill": "currentFill",
+                    },
+                    "ref": null,
+                    "scopeId": null,
+                    "shapeFlag": 1,
+                    "slotScopeIds": null,
+                    "ssContent": null,
+                    "ssFallback": null,
+                    "staticCount": 0,
+                    "suspense": null,
+                    "target": null,
+                    "targetAnchor": null,
+                    "transition": null,
+                    "type": "path",
+                  },
+                ],
+                "component": null,
+                "ctx": [Circular],
+                "dirs": null,
+                "dynamicChildren": [],
+                "dynamicProps": null,
+                "el": <svg
+                  aria-hidden="true"
+                  class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+                  fill="none"
+                  viewBox="0 0 100 101"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                    fill="currentFill"
+                  />
+                </svg>,
+                "key": null,
+                "patchFlag": 2,
+                "props": {
+                  "aria-hidden": "true",
+                  "class": "fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin",
+                  "fill": "none",
+                  "viewBox": "0 0 100 101",
+                  "xmlns": "http://www.w3.org/2000/svg",
+                },
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 17,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": "svg",
+              },
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "v-if",
+                "component": null,
+                "ctx": [Circular],
+                "dirs": null,
+                "dynamicChildren": [],
+                "dynamicProps": null,
+                "el": <!--v-if-->,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(v-cmt),
+              },
+            ],
+            "dynamicProps": null,
+            "el": <div
+              class="flex flex-col items-center justify-center w-full h-full"
+              role="status"
+            >
+              <svg
+                aria-hidden="true"
+                class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+                fill="none"
+                viewBox="0 0 100 101"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                  fill="currentFill"
+                />
+              </svg>
+              <!--v-if-->
+            </div>,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "flex flex-col items-center justify-center w-full h-full",
+              "role": "status",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "div",
+          },
+          "suspense": null,
+          "suspenseId": 0,
+          "type": {
+            "__file": "/Volumes/Data/Code/Projects/genshi/src/components/Loader/DsLoadingSpinner.vue",
+            "__name": "DsLoadingSpinner",
+            "components": {},
+            "props": {
+              "color": {
+                "default": "blue",
+                "type": [Function],
+              },
+              "label": {
+                "default": "Loading...",
+                "type": [Function],
+              },
+              "showLabel": {
+                "default": false,
+                "type": [Function],
+              },
+              "size": {
+                "default": "normal",
+                "type": [Function],
+              },
+            },
+            "render": [Function],
+            "setup": [Function],
+          },
+          "u": null,
+          "uid": 1,
+          "um": null,
+          "update": [Function],
+          "vnode": [Circular],
+          "withProxy": null,
+        },
+        "ctx": [Circular],
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": <div
+          class="flex flex-col items-center justify-center w-full h-full"
+          role="status"
+        >
+          <svg
+            aria-hidden="true"
+            class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+            fill="none"
+            viewBox="0 0 100 101"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor"
+            />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill"
+            />
+          </svg>
+          <!--v-if-->
+        </div>,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "ref": "VTU_COMPONENT",
+        },
+        "ref": {
+          "f": false,
+          "i": [Circular],
+          "k": undefined,
+          "r": "VTU_COMPONENT",
+        },
+        "scopeId": null,
+        "shapeFlag": 4,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": {
+          "__file": "/Volumes/Data/Code/Projects/genshi/src/components/Loader/DsLoadingSpinner.vue",
+          "__name": "DsLoadingSpinner",
+          "components": {},
+          "props": {
+            "color": {
+              "default": "blue",
+              "type": [Function],
+            },
+            "label": {
+              "default": "Loading...",
+              "type": [Function],
+            },
+            "showLabel": {
+              "default": false,
+              "type": [Function],
+            },
+            "size": {
+              "default": "normal",
+              "type": [Function],
+            },
+          },
+          "render": [Function],
+          "setup": [Function],
+        },
+      },
+      "suspense": null,
+      "suspenseId": 0,
+      "type": {
+        "name": "VTU_ROOT",
+        "render": [Function],
+        "setup": [Function],
+      },
+      "u": null,
+      "uid": 0,
+      "um": null,
+      "update": [Function],
+      "vnode": {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": {
+          "app": [Circular],
+          "components": {
+            "transition": {
+              "name": "transition",
+            },
+            "transition-group": {
+              "name": "transition-group",
+            },
+          },
+          "config": {
+            "compilerOptions": {},
+            "errorHandler": undefined,
+            "globalProperties": {},
+            "isNativeTag": [Function],
+            "optionMergeStrategies": {},
+            "performance": false,
+            "warnHandler": undefined,
+          },
+          "directives": {},
+          "emitsCache": WeakMap {},
+          "mixins": [
+            {
+              "beforeCreate": [Function],
+            },
+          ],
+          "optionsCache": WeakMap {},
+          "propsCache": WeakMap {},
+          "provides": {},
+          "reload": [Function],
+        },
+        "children": null,
+        "component": [Circular],
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": <div
+          class="flex flex-col items-center justify-center w-full h-full"
+          role="status"
+        >
+          <svg
+            aria-hidden="true"
+            class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+            fill="none"
+            viewBox="0 0 100 101"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor"
+            />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill"
+            />
+          </svg>
+          <!--v-if-->
+        </div>,
+        "key": null,
+        "patchFlag": 0,
+        "props": null,
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 4,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": {
+          "name": "VTU_ROOT",
+          "render": [Function],
+          "setup": [Function],
+        },
+      },
+      "withProxy": null,
+    },
+    "_props": null,
+    "_uid": 0,
+    "component": [Function],
+    "config": {
+      "compilerOptions": {},
+      "errorHandler": undefined,
+      "globalProperties": {},
+      "isNativeTag": [Function],
+      "optionMergeStrategies": {},
+      "performance": false,
+      "warnHandler": undefined,
+    },
+    "directive": [Function],
+    "mixin": [Function],
+    "mount": [Function],
+    "provide": [Function],
+    "runWithContext": [Function],
+    "unmount": [Function],
+    "use": [Function],
+    "version": "3.3.4",
+  },
+  "__setProps": [Function],
+  "cleanUpCallbacks": [
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+  ],
+  "componentVM": {},
+  "isDisabled": [Function],
+  "rootVM": {
+    "VTU_COMPONENT": {},
+  },
+  "wrapperElement": <div
+    class="flex flex-col items-center justify-center w-full h-full"
+    role="status"
+  >
+    <svg
+      aria-hidden="true"
+      class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+      fill="none"
+      viewBox="0 0 100 101"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+    <!--v-if-->
+  </div>,
+}
+`;
+
+exports[`DsLoadingSpinner > renders correctly with color > <div role="status" class="flex flex-col items-center justify-center w-full h-full"><svg aria-hidden="true" class="fill-green-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path>
+  </svg>
+  <!--v-if-->
+</div> 1`] = `
+VueWrapper {
+  "__app": {
+    "_component": {
+      "name": "VTU_ROOT",
+      "render": [Function],
+      "setup": [Function],
+    },
+    "_container": <div
+      data-v-app=""
+    >
+      <div
+        class="flex flex-col items-center justify-center w-full h-full"
+        role="status"
+      >
+        <svg
+          aria-hidden="true"
+          class="fill-green-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+          fill="none"
+          viewBox="0 0 100 101"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+          />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+          />
+        </svg>
+        <!--v-if-->
+      </div>
+    </div>,
+    "_context": {
+      "app": [Circular],
+      "components": {
+        "transition": {
+          "name": "transition",
+        },
+        "transition-group": {
+          "name": "transition-group",
+        },
+      },
+      "config": {
+        "compilerOptions": {},
+        "errorHandler": undefined,
+        "globalProperties": {},
+        "isNativeTag": [Function],
+        "optionMergeStrategies": {},
+        "performance": false,
+        "warnHandler": undefined,
+      },
+      "directives": {},
+      "emitsCache": WeakMap {},
+      "mixins": [
+        {
+          "beforeCreate": [Function],
+        },
+      ],
+      "optionsCache": WeakMap {},
+      "propsCache": WeakMap {},
+      "provides": {},
+      "reload": [Function],
+    },
+    "_instance": {
+      "a": null,
+      "accessCache": {},
+      "appContext": {
+        "app": [Circular],
+        "components": {
+          "transition": {
+            "name": "transition",
+          },
+          "transition-group": {
+            "name": "transition-group",
+          },
+        },
+        "config": {
+          "compilerOptions": {},
+          "errorHandler": undefined,
+          "globalProperties": {},
+          "isNativeTag": [Function],
+          "optionMergeStrategies": {},
+          "performance": false,
+          "warnHandler": undefined,
+        },
+        "directives": {},
+        "emitsCache": WeakMap {},
+        "mixins": [
+          {
+            "beforeCreate": [Function],
+          },
+        ],
+        "optionsCache": WeakMap {},
+        "propsCache": WeakMap {},
+        "provides": {},
+        "reload": [Function],
+      },
+      "asyncDep": null,
+      "asyncResolved": false,
+      "attrs": {},
+      "attrsProxy": null,
+      "bc": null,
+      "bm": null,
+      "bu": null,
+      "bum": null,
+      "c": null,
+      "components": null,
+      "ctx": {
+        "VTU_COMPONENT": {},
+      },
+      "da": null,
+      "data": {},
+      "devtoolsRawSetupState": {
+        "VTU_COMPONENT": RefImpl {
+          "__v_isRef": true,
+          "__v_isShallow": false,
+          "_rawValue": {},
+          "_value": {},
+          "dep": undefined,
+        },
+      },
+      "directives": null,
+      "ec": null,
+      "effect": ReactiveEffect {
+        "active": true,
+        "allowRecurse": true,
+        "deps": [
+          Set {
+            [Circular],
+          },
+          Set {
+            [Circular],
+          },
+          Set {
+            [Circular],
+          },
+          Set {
+            [Circular],
+          },
+        ],
+        "fn": [Function],
+        "onTrack": undefined,
+        "onTrigger": undefined,
+        "parent": undefined,
+        "scheduler": [Function],
+      },
+      "emit": [Function],
+      "emitsOptions": null,
+      "emitted": null,
+      "exposeProxy": null,
+      "exposed": null,
+      "inheritAttrs": undefined,
+      "isDeactivated": false,
+      "isMounted": true,
+      "isUnmounted": false,
+      "m": null,
+      "next": null,
+      "parent": null,
+      "props": {},
+      "propsDefaults": {},
+      "propsOptions": [
+        {},
+        [],
+      ],
+      "provides": {},
+      "proxy": {
+        "VTU_COMPONENT": {},
+      },
+      "refs": {
+        "VTU_COMPONENT": {},
+      },
+      "render": [Function],
+      "renderCache": [],
+      "root": [Circular],
+      "rtc": null,
+      "rtg": null,
+      "scope": EffectScope {
+        "_active": true,
+        "cleanups": [],
+        "detached": true,
+        "effects": [
+          ReactiveEffect {
+            "active": true,
+            "allowRecurse": true,
+            "deps": [
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+            ],
+            "fn": [Function],
+            "onTrack": undefined,
+            "onTrigger": undefined,
+            "parent": undefined,
+            "scheduler": [Function],
+          },
+        ],
+        "parent": undefined,
+      },
+      "setupContext": null,
+      "setupState": {
+        "VTU_COMPONENT": {},
+      },
+      "slots": {},
+      "slotsProxy": null,
+      "sp": null,
+      "subTree": {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": null,
+        "component": {
+          "a": null,
+          "accessCache": {},
+          "appContext": {
+            "app": [Circular],
+            "components": {
+              "transition": {
+                "name": "transition",
+              },
+              "transition-group": {
+                "name": "transition-group",
+              },
+            },
+            "config": {
+              "compilerOptions": {},
+              "errorHandler": undefined,
+              "globalProperties": {},
+              "isNativeTag": [Function],
+              "optionMergeStrategies": {},
+              "performance": false,
+              "warnHandler": undefined,
+            },
+            "directives": {},
+            "emitsCache": WeakMap {},
+            "mixins": [
+              {
+                "beforeCreate": [Function],
+              },
+            ],
+            "optionsCache": WeakMap {},
+            "propsCache": WeakMap {},
+            "provides": {},
+            "reload": [Function],
+          },
+          "asyncDep": null,
+          "asyncResolved": false,
+          "attrs": {},
+          "attrsProxy": null,
+          "bc": null,
+          "bm": null,
+          "bu": null,
+          "bum": null,
+          "c": null,
+          "components": {},
+          "ctx": {
+            "color": "green",
+            "label": "Loading...",
+            "showLabel": false,
+            "size": "normal",
+          },
+          "da": null,
+          "data": {},
+          "devtoolsRawSetupState": {
+            "color": ObjectRefImpl {
+              "__v_isRef": true,
+              "_defaultValue": undefined,
+              "_key": "color",
+              "_object": {
+                "color": "green",
+                "label": "Loading...",
+                "showLabel": false,
+                "size": "normal",
+              },
+            },
+            "computedFillColor": ComputedRefImpl {
+              "__v_isReadonly": true,
+              "__v_isRef": true,
+              "_cacheable": true,
+              "_dirty": false,
+              "_setter": [Function],
+              "_value": "fill-green-600 text-gray-200 dark:text-gray-200",
+              "dep": Set {
+                ReactiveEffect {
+                  "active": true,
+                  "allowRecurse": true,
+                  "deps": [
+                    [Circular],
+                    Set {
+                      [Circular],
+                    },
+                    Set {
+                      [Circular],
+                    },
+                  ],
+                  "fn": [Function],
+                  "onTrack": undefined,
+                  "onTrigger": undefined,
+                  "parent": undefined,
+                  "scheduler": [Function],
+                },
+              },
+              "effect": ReactiveEffect {
+                "active": true,
+                "computed": [Circular],
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+            },
+            "computedSize": ComputedRefImpl {
+              "__v_isReadonly": true,
+              "__v_isRef": true,
+              "_cacheable": true,
+              "_dirty": false,
+              "_setter": [Function],
+              "_value": "w-6 h-6",
+              "dep": Set {
+                ReactiveEffect {
+                  "active": true,
+                  "allowRecurse": true,
+                  "deps": [
+                    Set {
+                      [Circular],
+                    },
+                    [Circular],
+                    Set {
+                      [Circular],
+                    },
+                  ],
+                  "fn": [Function],
+                  "onTrack": undefined,
+                  "onTrigger": undefined,
+                  "parent": undefined,
+                  "scheduler": [Function],
+                },
+              },
+              "effect": ReactiveEffect {
+                "active": true,
+                "computed": [Circular],
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+            },
+            "label": ObjectRefImpl {
+              "__v_isRef": true,
+              "_defaultValue": undefined,
+              "_key": "label",
+              "_object": {
+                "color": "green",
+                "label": "Loading...",
+                "showLabel": false,
+                "size": "normal",
+              },
+            },
+            "props": {
+              "color": "green",
+              "label": "Loading...",
+              "showLabel": false,
+              "size": "normal",
+            },
+            "showLabel": ObjectRefImpl {
+              "__v_isRef": true,
+              "_defaultValue": undefined,
+              "_key": "showLabel",
+              "_object": {
+                "color": "green",
+                "label": "Loading...",
+                "showLabel": false,
+                "size": "normal",
+              },
+            },
+          },
+          "directives": null,
+          "ec": null,
+          "effect": ReactiveEffect {
+            "active": true,
+            "allowRecurse": true,
+            "deps": [
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+            ],
+            "fn": [Function],
+            "onTrack": undefined,
+            "onTrigger": undefined,
+            "parent": undefined,
+            "scheduler": [Function],
+          },
+          "emit": [Function],
+          "emitsOptions": null,
+          "emitted": null,
+          "exposeProxy": {},
+          "exposed": {},
+          "inheritAttrs": undefined,
+          "isDeactivated": false,
+          "isMounted": true,
+          "isUnmounted": false,
+          "m": null,
+          "next": null,
+          "parent": [Circular],
+          "props": {
+            "color": "green",
+            "label": "Loading...",
+            "showLabel": false,
+            "size": "normal",
+          },
+          "propsDefaults": {},
+          "propsOptions": [
+            {
+              "color": {
+                "0": false,
+                "1": true,
+                "default": "blue",
+                "type": [Function],
+              },
+              "label": {
+                "0": false,
+                "1": true,
+                "default": "Loading...",
+                "type": [Function],
+              },
+              "showLabel": {
+                "0": true,
+                "1": true,
+                "default": false,
+                "type": [Function],
+              },
+              "size": {
+                "0": false,
+                "1": true,
+                "default": "normal",
+                "type": [Function],
+              },
+            },
+            [
+              "color",
+              "label",
+              "showLabel",
+              "size",
+            ],
+          ],
+          "provides": {},
+          "proxy": {
+            "color": "green",
+            "label": "Loading...",
+            "showLabel": false,
+            "size": "normal",
+          },
+          "refs": {},
+          "render": [Function],
+          "renderCache": [],
+          "root": [Circular],
+          "rtc": null,
+          "rtg": null,
+          "scope": EffectScope {
+            "_active": true,
+            "cleanups": [],
+            "detached": true,
+            "effects": [
+              ReactiveEffect {
+                "active": true,
+                "computed": ComputedRefImpl {
+                  "__v_isReadonly": true,
+                  "__v_isRef": true,
+                  "_cacheable": true,
+                  "_dirty": false,
+                  "_setter": [Function],
+                  "_value": "fill-green-600 text-gray-200 dark:text-gray-200",
+                  "dep": Set {
+                    ReactiveEffect {
+                      "active": true,
+                      "allowRecurse": true,
+                      "deps": [
+                        [Circular],
+                        Set {
+                          [Circular],
+                        },
+                        Set {
+                          [Circular],
+                        },
+                      ],
+                      "fn": [Function],
+                      "onTrack": undefined,
+                      "onTrigger": undefined,
+                      "parent": undefined,
+                      "scheduler": [Function],
+                    },
+                  },
+                  "effect": [Circular],
+                },
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+              ReactiveEffect {
+                "active": true,
+                "computed": ComputedRefImpl {
+                  "__v_isReadonly": true,
+                  "__v_isRef": true,
+                  "_cacheable": true,
+                  "_dirty": false,
+                  "_setter": [Function],
+                  "_value": "w-6 h-6",
+                  "dep": Set {
+                    ReactiveEffect {
+                      "active": true,
+                      "allowRecurse": true,
+                      "deps": [
+                        Set {
+                          [Circular],
+                        },
+                        [Circular],
+                        Set {
+                          [Circular],
+                        },
+                      ],
+                      "fn": [Function],
+                      "onTrack": undefined,
+                      "onTrigger": undefined,
+                      "parent": undefined,
+                      "scheduler": [Function],
+                    },
+                  },
+                  "effect": [Circular],
+                },
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+              ReactiveEffect {
+                "active": true,
+                "allowRecurse": true,
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                  Set {
+                    [Circular],
+                  },
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "onTrack": undefined,
+                "onTrigger": undefined,
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+            ],
+            "parent": undefined,
+          },
+          "setupContext": {
+            "attrs": {},
+            "emit": [Function],
+            "expose": [Function],
+            "slots": {},
+          },
+          "setupState": {
+            "color": "green",
+            "computedFillColor": "fill-green-600 text-gray-200 dark:text-gray-200",
+            "computedSize": "w-6 h-6",
+            "label": "Loading...",
+            "props": {
+              "color": "green",
+              "label": "Loading...",
+              "showLabel": false,
+              "size": "normal",
+            },
+            "showLabel": false,
+          },
+          "slots": {},
+          "slotsProxy": {},
+          "sp": null,
+          "subTree": {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  {
+                    "__v_isVNode": true,
+                    "__v_skip": true,
+                    "anchor": null,
+                    "appContext": null,
+                    "ce": undefined,
+                    "children": null,
+                    "component": null,
+                    "ctx": null,
+                    "dirs": null,
+                    "dynamicChildren": null,
+                    "dynamicProps": null,
+                    "el": <path
+                      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                      fill="currentColor"
+                    />,
+                    "key": null,
+                    "patchFlag": -1,
+                    "props": {
+                      "d": "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
+                      "fill": "currentColor",
+                    },
+                    "ref": null,
+                    "scopeId": null,
+                    "shapeFlag": 1,
+                    "slotScopeIds": null,
+                    "ssContent": null,
+                    "ssFallback": null,
+                    "staticCount": 0,
+                    "suspense": null,
+                    "target": null,
+                    "targetAnchor": null,
+                    "transition": null,
+                    "type": "path",
+                  },
+                  {
+                    "__v_isVNode": true,
+                    "__v_skip": true,
+                    "anchor": null,
+                    "appContext": null,
+                    "ce": undefined,
+                    "children": null,
+                    "component": null,
+                    "ctx": null,
+                    "dirs": null,
+                    "dynamicChildren": null,
+                    "dynamicProps": null,
+                    "el": <path
+                      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                      fill="currentFill"
+                    />,
+                    "key": null,
+                    "patchFlag": -1,
+                    "props": {
+                      "d": "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
+                      "fill": "currentFill",
+                    },
+                    "ref": null,
+                    "scopeId": null,
+                    "shapeFlag": 1,
+                    "slotScopeIds": null,
+                    "ssContent": null,
+                    "ssFallback": null,
+                    "staticCount": 0,
+                    "suspense": null,
+                    "target": null,
+                    "targetAnchor": null,
+                    "transition": null,
+                    "type": "path",
+                  },
+                ],
+                "component": null,
+                "ctx": [Circular],
+                "dirs": null,
+                "dynamicChildren": [],
+                "dynamicProps": null,
+                "el": <svg
+                  aria-hidden="true"
+                  class="fill-green-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+                  fill="none"
+                  viewBox="0 0 100 101"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                    fill="currentFill"
+                  />
+                </svg>,
+                "key": null,
+                "patchFlag": 2,
+                "props": {
+                  "aria-hidden": "true",
+                  "class": "fill-green-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin",
+                  "fill": "none",
+                  "viewBox": "0 0 100 101",
+                  "xmlns": "http://www.w3.org/2000/svg",
+                },
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 17,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": "svg",
+              },
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "v-if",
+                "component": null,
+                "ctx": [Circular],
+                "dirs": null,
+                "dynamicChildren": [],
+                "dynamicProps": null,
+                "el": <!--v-if-->,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(v-cmt),
+              },
+            ],
+            "component": null,
+            "ctx": [Circular],
+            "dirs": null,
+            "dynamicChildren": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  {
+                    "__v_isVNode": true,
+                    "__v_skip": true,
+                    "anchor": null,
+                    "appContext": null,
+                    "ce": undefined,
+                    "children": null,
+                    "component": null,
+                    "ctx": null,
+                    "dirs": null,
+                    "dynamicChildren": null,
+                    "dynamicProps": null,
+                    "el": <path
+                      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                      fill="currentColor"
+                    />,
+                    "key": null,
+                    "patchFlag": -1,
+                    "props": {
+                      "d": "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
+                      "fill": "currentColor",
+                    },
+                    "ref": null,
+                    "scopeId": null,
+                    "shapeFlag": 1,
+                    "slotScopeIds": null,
+                    "ssContent": null,
+                    "ssFallback": null,
+                    "staticCount": 0,
+                    "suspense": null,
+                    "target": null,
+                    "targetAnchor": null,
+                    "transition": null,
+                    "type": "path",
+                  },
+                  {
+                    "__v_isVNode": true,
+                    "__v_skip": true,
+                    "anchor": null,
+                    "appContext": null,
+                    "ce": undefined,
+                    "children": null,
+                    "component": null,
+                    "ctx": null,
+                    "dirs": null,
+                    "dynamicChildren": null,
+                    "dynamicProps": null,
+                    "el": <path
+                      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                      fill="currentFill"
+                    />,
+                    "key": null,
+                    "patchFlag": -1,
+                    "props": {
+                      "d": "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
+                      "fill": "currentFill",
+                    },
+                    "ref": null,
+                    "scopeId": null,
+                    "shapeFlag": 1,
+                    "slotScopeIds": null,
+                    "ssContent": null,
+                    "ssFallback": null,
+                    "staticCount": 0,
+                    "suspense": null,
+                    "target": null,
+                    "targetAnchor": null,
+                    "transition": null,
+                    "type": "path",
+                  },
+                ],
+                "component": null,
+                "ctx": [Circular],
+                "dirs": null,
+                "dynamicChildren": [],
+                "dynamicProps": null,
+                "el": <svg
+                  aria-hidden="true"
+                  class="fill-green-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+                  fill="none"
+                  viewBox="0 0 100 101"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                    fill="currentFill"
+                  />
+                </svg>,
+                "key": null,
+                "patchFlag": 2,
+                "props": {
+                  "aria-hidden": "true",
+                  "class": "fill-green-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin",
+                  "fill": "none",
+                  "viewBox": "0 0 100 101",
+                  "xmlns": "http://www.w3.org/2000/svg",
+                },
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 17,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": "svg",
+              },
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "v-if",
+                "component": null,
+                "ctx": [Circular],
+                "dirs": null,
+                "dynamicChildren": [],
+                "dynamicProps": null,
+                "el": <!--v-if-->,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(v-cmt),
+              },
+            ],
+            "dynamicProps": null,
+            "el": <div
+              class="flex flex-col items-center justify-center w-full h-full"
+              role="status"
+            >
+              <svg
+                aria-hidden="true"
+                class="fill-green-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+                fill="none"
+                viewBox="0 0 100 101"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                  fill="currentFill"
+                />
+              </svg>
+              <!--v-if-->
+            </div>,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "flex flex-col items-center justify-center w-full h-full",
+              "role": "status",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "div",
+          },
+          "suspense": null,
+          "suspenseId": 0,
+          "type": {
+            "__file": "/Volumes/Data/Code/Projects/genshi/src/components/Loader/DsLoadingSpinner.vue",
+            "__name": "DsLoadingSpinner",
+            "components": {},
+            "props": {
+              "color": {
+                "default": "blue",
+                "type": [Function],
+              },
+              "label": {
+                "default": "Loading...",
+                "type": [Function],
+              },
+              "showLabel": {
+                "default": false,
+                "type": [Function],
+              },
+              "size": {
+                "default": "normal",
+                "type": [Function],
+              },
+            },
+            "render": [Function],
+            "setup": [Function],
+          },
+          "u": null,
+          "uid": 3,
+          "um": null,
+          "update": [Function],
+          "vnode": [Circular],
+          "withProxy": null,
+        },
+        "ctx": [Circular],
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": <div
+          class="flex flex-col items-center justify-center w-full h-full"
+          role="status"
+        >
+          <svg
+            aria-hidden="true"
+            class="fill-green-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+            fill="none"
+            viewBox="0 0 100 101"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor"
+            />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill"
+            />
+          </svg>
+          <!--v-if-->
+        </div>,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "color": "green",
+          "ref": "VTU_COMPONENT",
+        },
+        "ref": {
+          "f": false,
+          "i": [Circular],
+          "k": undefined,
+          "r": "VTU_COMPONENT",
+        },
+        "scopeId": null,
+        "shapeFlag": 4,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": {
+          "__file": "/Volumes/Data/Code/Projects/genshi/src/components/Loader/DsLoadingSpinner.vue",
+          "__name": "DsLoadingSpinner",
+          "components": {},
+          "props": {
+            "color": {
+              "default": "blue",
+              "type": [Function],
+            },
+            "label": {
+              "default": "Loading...",
+              "type": [Function],
+            },
+            "showLabel": {
+              "default": false,
+              "type": [Function],
+            },
+            "size": {
+              "default": "normal",
+              "type": [Function],
+            },
+          },
+          "render": [Function],
+          "setup": [Function],
+        },
+      },
+      "suspense": null,
+      "suspenseId": 0,
+      "type": {
+        "name": "VTU_ROOT",
+        "render": [Function],
+        "setup": [Function],
+      },
+      "u": null,
+      "uid": 2,
+      "um": null,
+      "update": [Function],
+      "vnode": {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": {
+          "app": [Circular],
+          "components": {
+            "transition": {
+              "name": "transition",
+            },
+            "transition-group": {
+              "name": "transition-group",
+            },
+          },
+          "config": {
+            "compilerOptions": {},
+            "errorHandler": undefined,
+            "globalProperties": {},
+            "isNativeTag": [Function],
+            "optionMergeStrategies": {},
+            "performance": false,
+            "warnHandler": undefined,
+          },
+          "directives": {},
+          "emitsCache": WeakMap {},
+          "mixins": [
+            {
+              "beforeCreate": [Function],
+            },
+          ],
+          "optionsCache": WeakMap {},
+          "propsCache": WeakMap {},
+          "provides": {},
+          "reload": [Function],
+        },
+        "children": null,
+        "component": [Circular],
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": <div
+          class="flex flex-col items-center justify-center w-full h-full"
+          role="status"
+        >
+          <svg
+            aria-hidden="true"
+            class="fill-green-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+            fill="none"
+            viewBox="0 0 100 101"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor"
+            />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill"
+            />
+          </svg>
+          <!--v-if-->
+        </div>,
+        "key": null,
+        "patchFlag": 0,
+        "props": null,
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 4,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": {
+          "name": "VTU_ROOT",
+          "render": [Function],
+          "setup": [Function],
+        },
+      },
+      "withProxy": null,
+    },
+    "_props": null,
+    "_uid": 1,
+    "component": [Function],
+    "config": {
+      "compilerOptions": {},
+      "errorHandler": undefined,
+      "globalProperties": {},
+      "isNativeTag": [Function],
+      "optionMergeStrategies": {},
+      "performance": false,
+      "warnHandler": undefined,
+    },
+    "directive": [Function],
+    "mixin": [Function],
+    "mount": [Function],
+    "provide": [Function],
+    "runWithContext": [Function],
+    "unmount": [Function],
+    "use": [Function],
+    "version": "3.3.4",
+  },
+  "__setProps": [Function],
+  "cleanUpCallbacks": [
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+  ],
+  "componentVM": {},
+  "isDisabled": [Function],
+  "rootVM": {
+    "VTU_COMPONENT": {},
+  },
+  "wrapperElement": <div
+    class="flex flex-col items-center justify-center w-full h-full"
+    role="status"
+  >
+    <svg
+      aria-hidden="true"
+      class="fill-green-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+      fill="none"
+      viewBox="0 0 100 101"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+    <!--v-if-->
+  </div>,
+}
+`;
+
+exports[`DsLoadingSpinner > renders correctly with size > <div role="status" class="flex flex-col items-center justify-center w-full h-full"><svg aria-hidden="true" class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin" viewBox="0 0 100 101" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="currentColor"></path>
+    <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentFill"></path>
+  </svg>
+  <!--v-if-->
+</div> 1`] = `
+VueWrapper {
+  "__app": {
+    "_component": {
+      "name": "VTU_ROOT",
+      "render": [Function],
+      "setup": [Function],
+    },
+    "_container": <div
+      data-v-app=""
+    >
+      <div
+        class="flex flex-col items-center justify-center w-full h-full"
+        role="status"
+      >
+        <svg
+          aria-hidden="true"
+          class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+          fill="none"
+          viewBox="0 0 100 101"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+            fill="currentColor"
+          />
+          <path
+            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+            fill="currentFill"
+          />
+        </svg>
+        <!--v-if-->
+      </div>
+    </div>,
+    "_context": {
+      "app": [Circular],
+      "components": {
+        "transition": {
+          "name": "transition",
+        },
+        "transition-group": {
+          "name": "transition-group",
+        },
+      },
+      "config": {
+        "compilerOptions": {},
+        "errorHandler": undefined,
+        "globalProperties": {},
+        "isNativeTag": [Function],
+        "optionMergeStrategies": {},
+        "performance": false,
+        "warnHandler": undefined,
+      },
+      "directives": {},
+      "emitsCache": WeakMap {},
+      "mixins": [
+        {
+          "beforeCreate": [Function],
+        },
+      ],
+      "optionsCache": WeakMap {},
+      "propsCache": WeakMap {},
+      "provides": {},
+      "reload": [Function],
+    },
+    "_instance": {
+      "a": null,
+      "accessCache": {},
+      "appContext": {
+        "app": [Circular],
+        "components": {
+          "transition": {
+            "name": "transition",
+          },
+          "transition-group": {
+            "name": "transition-group",
+          },
+        },
+        "config": {
+          "compilerOptions": {},
+          "errorHandler": undefined,
+          "globalProperties": {},
+          "isNativeTag": [Function],
+          "optionMergeStrategies": {},
+          "performance": false,
+          "warnHandler": undefined,
+        },
+        "directives": {},
+        "emitsCache": WeakMap {},
+        "mixins": [
+          {
+            "beforeCreate": [Function],
+          },
+        ],
+        "optionsCache": WeakMap {},
+        "propsCache": WeakMap {},
+        "provides": {},
+        "reload": [Function],
+      },
+      "asyncDep": null,
+      "asyncResolved": false,
+      "attrs": {},
+      "attrsProxy": null,
+      "bc": null,
+      "bm": null,
+      "bu": null,
+      "bum": null,
+      "c": null,
+      "components": null,
+      "ctx": {
+        "VTU_COMPONENT": {},
+      },
+      "da": null,
+      "data": {},
+      "devtoolsRawSetupState": {
+        "VTU_COMPONENT": RefImpl {
+          "__v_isRef": true,
+          "__v_isShallow": false,
+          "_rawValue": {},
+          "_value": {},
+          "dep": undefined,
+        },
+      },
+      "directives": null,
+      "ec": null,
+      "effect": ReactiveEffect {
+        "active": true,
+        "allowRecurse": true,
+        "deps": [
+          Set {
+            [Circular],
+          },
+          Set {
+            [Circular],
+          },
+          Set {
+            [Circular],
+          },
+          Set {
+            [Circular],
+          },
+        ],
+        "fn": [Function],
+        "onTrack": undefined,
+        "onTrigger": undefined,
+        "parent": undefined,
+        "scheduler": [Function],
+      },
+      "emit": [Function],
+      "emitsOptions": null,
+      "emitted": null,
+      "exposeProxy": null,
+      "exposed": null,
+      "inheritAttrs": undefined,
+      "isDeactivated": false,
+      "isMounted": true,
+      "isUnmounted": false,
+      "m": null,
+      "next": null,
+      "parent": null,
+      "props": {},
+      "propsDefaults": {},
+      "propsOptions": [
+        {},
+        [],
+      ],
+      "provides": {},
+      "proxy": {
+        "VTU_COMPONENT": {},
+      },
+      "refs": {
+        "VTU_COMPONENT": {},
+      },
+      "render": [Function],
+      "renderCache": [],
+      "root": [Circular],
+      "rtc": null,
+      "rtg": null,
+      "scope": EffectScope {
+        "_active": true,
+        "cleanups": [],
+        "detached": true,
+        "effects": [
+          ReactiveEffect {
+            "active": true,
+            "allowRecurse": true,
+            "deps": [
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+            ],
+            "fn": [Function],
+            "onTrack": undefined,
+            "onTrigger": undefined,
+            "parent": undefined,
+            "scheduler": [Function],
+          },
+        ],
+        "parent": undefined,
+      },
+      "setupContext": null,
+      "setupState": {
+        "VTU_COMPONENT": {},
+      },
+      "slots": {},
+      "slotsProxy": null,
+      "sp": null,
+      "subTree": {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": null,
+        "children": null,
+        "component": {
+          "a": null,
+          "accessCache": {},
+          "appContext": {
+            "app": [Circular],
+            "components": {
+              "transition": {
+                "name": "transition",
+              },
+              "transition-group": {
+                "name": "transition-group",
+              },
+            },
+            "config": {
+              "compilerOptions": {},
+              "errorHandler": undefined,
+              "globalProperties": {},
+              "isNativeTag": [Function],
+              "optionMergeStrategies": {},
+              "performance": false,
+              "warnHandler": undefined,
+            },
+            "directives": {},
+            "emitsCache": WeakMap {},
+            "mixins": [
+              {
+                "beforeCreate": [Function],
+              },
+            ],
+            "optionsCache": WeakMap {},
+            "propsCache": WeakMap {},
+            "provides": {},
+            "reload": [Function],
+          },
+          "asyncDep": null,
+          "asyncResolved": false,
+          "attrs": {},
+          "attrsProxy": null,
+          "bc": null,
+          "bm": null,
+          "bu": null,
+          "bum": null,
+          "c": null,
+          "components": {},
+          "ctx": {
+            "color": "blue",
+            "label": "Loading...",
+            "showLabel": false,
+            "size": "normal",
+          },
+          "da": null,
+          "data": {},
+          "devtoolsRawSetupState": {
+            "color": ObjectRefImpl {
+              "__v_isRef": true,
+              "_defaultValue": undefined,
+              "_key": "color",
+              "_object": {
+                "color": "blue",
+                "label": "Loading...",
+                "showLabel": false,
+                "size": "normal",
+              },
+            },
+            "computedFillColor": ComputedRefImpl {
+              "__v_isReadonly": true,
+              "__v_isRef": true,
+              "_cacheable": true,
+              "_dirty": false,
+              "_setter": [Function],
+              "_value": "fill-blue-600 text-gray-200 dark:text-gray-200",
+              "dep": Set {
+                ReactiveEffect {
+                  "active": true,
+                  "allowRecurse": true,
+                  "deps": [
+                    [Circular],
+                    Set {
+                      [Circular],
+                    },
+                    Set {
+                      [Circular],
+                    },
+                  ],
+                  "fn": [Function],
+                  "onTrack": undefined,
+                  "onTrigger": undefined,
+                  "parent": undefined,
+                  "scheduler": [Function],
+                },
+              },
+              "effect": ReactiveEffect {
+                "active": true,
+                "computed": [Circular],
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+            },
+            "computedSize": ComputedRefImpl {
+              "__v_isReadonly": true,
+              "__v_isRef": true,
+              "_cacheable": true,
+              "_dirty": false,
+              "_setter": [Function],
+              "_value": "w-6 h-6",
+              "dep": Set {
+                ReactiveEffect {
+                  "active": true,
+                  "allowRecurse": true,
+                  "deps": [
+                    Set {
+                      [Circular],
+                    },
+                    [Circular],
+                    Set {
+                      [Circular],
+                    },
+                  ],
+                  "fn": [Function],
+                  "onTrack": undefined,
+                  "onTrigger": undefined,
+                  "parent": undefined,
+                  "scheduler": [Function],
+                },
+              },
+              "effect": ReactiveEffect {
+                "active": true,
+                "computed": [Circular],
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+            },
+            "label": ObjectRefImpl {
+              "__v_isRef": true,
+              "_defaultValue": undefined,
+              "_key": "label",
+              "_object": {
+                "color": "blue",
+                "label": "Loading...",
+                "showLabel": false,
+                "size": "normal",
+              },
+            },
+            "props": {
+              "color": "blue",
+              "label": "Loading...",
+              "showLabel": false,
+              "size": "normal",
+            },
+            "showLabel": ObjectRefImpl {
+              "__v_isRef": true,
+              "_defaultValue": undefined,
+              "_key": "showLabel",
+              "_object": {
+                "color": "blue",
+                "label": "Loading...",
+                "showLabel": false,
+                "size": "normal",
+              },
+            },
+          },
+          "directives": null,
+          "ec": null,
+          "effect": ReactiveEffect {
+            "active": true,
+            "allowRecurse": true,
+            "deps": [
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+              Set {
+                [Circular],
+              },
+            ],
+            "fn": [Function],
+            "onTrack": undefined,
+            "onTrigger": undefined,
+            "parent": undefined,
+            "scheduler": [Function],
+          },
+          "emit": [Function],
+          "emitsOptions": null,
+          "emitted": null,
+          "exposeProxy": {},
+          "exposed": {},
+          "inheritAttrs": undefined,
+          "isDeactivated": false,
+          "isMounted": true,
+          "isUnmounted": false,
+          "m": null,
+          "next": null,
+          "parent": [Circular],
+          "props": {
+            "color": "blue",
+            "label": "Loading...",
+            "showLabel": false,
+            "size": "normal",
+          },
+          "propsDefaults": {},
+          "propsOptions": [
+            {
+              "color": {
+                "0": false,
+                "1": true,
+                "default": "blue",
+                "type": [Function],
+              },
+              "label": {
+                "0": false,
+                "1": true,
+                "default": "Loading...",
+                "type": [Function],
+              },
+              "showLabel": {
+                "0": true,
+                "1": true,
+                "default": false,
+                "type": [Function],
+              },
+              "size": {
+                "0": false,
+                "1": true,
+                "default": "normal",
+                "type": [Function],
+              },
+            },
+            [
+              "color",
+              "label",
+              "showLabel",
+              "size",
+            ],
+          ],
+          "provides": {},
+          "proxy": {
+            "color": "blue",
+            "label": "Loading...",
+            "showLabel": false,
+            "size": "normal",
+          },
+          "refs": {},
+          "render": [Function],
+          "renderCache": [],
+          "root": [Circular],
+          "rtc": null,
+          "rtg": null,
+          "scope": EffectScope {
+            "_active": true,
+            "cleanups": [],
+            "detached": true,
+            "effects": [
+              ReactiveEffect {
+                "active": true,
+                "computed": ComputedRefImpl {
+                  "__v_isReadonly": true,
+                  "__v_isRef": true,
+                  "_cacheable": true,
+                  "_dirty": false,
+                  "_setter": [Function],
+                  "_value": "fill-blue-600 text-gray-200 dark:text-gray-200",
+                  "dep": Set {
+                    ReactiveEffect {
+                      "active": true,
+                      "allowRecurse": true,
+                      "deps": [
+                        [Circular],
+                        Set {
+                          [Circular],
+                        },
+                        Set {
+                          [Circular],
+                        },
+                      ],
+                      "fn": [Function],
+                      "onTrack": undefined,
+                      "onTrigger": undefined,
+                      "parent": undefined,
+                      "scheduler": [Function],
+                    },
+                  },
+                  "effect": [Circular],
+                },
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+              ReactiveEffect {
+                "active": true,
+                "computed": ComputedRefImpl {
+                  "__v_isReadonly": true,
+                  "__v_isRef": true,
+                  "_cacheable": true,
+                  "_dirty": false,
+                  "_setter": [Function],
+                  "_value": "w-6 h-6",
+                  "dep": Set {
+                    ReactiveEffect {
+                      "active": true,
+                      "allowRecurse": true,
+                      "deps": [
+                        Set {
+                          [Circular],
+                        },
+                        [Circular],
+                        Set {
+                          [Circular],
+                        },
+                      ],
+                      "fn": [Function],
+                      "onTrack": undefined,
+                      "onTrigger": undefined,
+                      "parent": undefined,
+                      "scheduler": [Function],
+                    },
+                  },
+                  "effect": [Circular],
+                },
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+              ReactiveEffect {
+                "active": true,
+                "allowRecurse": true,
+                "deps": [
+                  Set {
+                    [Circular],
+                  },
+                  Set {
+                    [Circular],
+                  },
+                  Set {
+                    [Circular],
+                  },
+                ],
+                "fn": [Function],
+                "onTrack": undefined,
+                "onTrigger": undefined,
+                "parent": undefined,
+                "scheduler": [Function],
+              },
+            ],
+            "parent": undefined,
+          },
+          "setupContext": {
+            "attrs": {},
+            "emit": [Function],
+            "expose": [Function],
+            "slots": {},
+          },
+          "setupState": {
+            "color": "blue",
+            "computedFillColor": "fill-blue-600 text-gray-200 dark:text-gray-200",
+            "computedSize": "w-6 h-6",
+            "label": "Loading...",
+            "props": {
+              "color": "blue",
+              "label": "Loading...",
+              "showLabel": false,
+              "size": "normal",
+            },
+            "showLabel": false,
+          },
+          "slots": {},
+          "slotsProxy": {},
+          "sp": null,
+          "subTree": {
+            "__v_isVNode": true,
+            "__v_skip": true,
+            "anchor": null,
+            "appContext": null,
+            "children": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  {
+                    "__v_isVNode": true,
+                    "__v_skip": true,
+                    "anchor": null,
+                    "appContext": null,
+                    "ce": undefined,
+                    "children": null,
+                    "component": null,
+                    "ctx": null,
+                    "dirs": null,
+                    "dynamicChildren": null,
+                    "dynamicProps": null,
+                    "el": <path
+                      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                      fill="currentColor"
+                    />,
+                    "key": null,
+                    "patchFlag": -1,
+                    "props": {
+                      "d": "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
+                      "fill": "currentColor",
+                    },
+                    "ref": null,
+                    "scopeId": null,
+                    "shapeFlag": 1,
+                    "slotScopeIds": null,
+                    "ssContent": null,
+                    "ssFallback": null,
+                    "staticCount": 0,
+                    "suspense": null,
+                    "target": null,
+                    "targetAnchor": null,
+                    "transition": null,
+                    "type": "path",
+                  },
+                  {
+                    "__v_isVNode": true,
+                    "__v_skip": true,
+                    "anchor": null,
+                    "appContext": null,
+                    "ce": undefined,
+                    "children": null,
+                    "component": null,
+                    "ctx": null,
+                    "dirs": null,
+                    "dynamicChildren": null,
+                    "dynamicProps": null,
+                    "el": <path
+                      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                      fill="currentFill"
+                    />,
+                    "key": null,
+                    "patchFlag": -1,
+                    "props": {
+                      "d": "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
+                      "fill": "currentFill",
+                    },
+                    "ref": null,
+                    "scopeId": null,
+                    "shapeFlag": 1,
+                    "slotScopeIds": null,
+                    "ssContent": null,
+                    "ssFallback": null,
+                    "staticCount": 0,
+                    "suspense": null,
+                    "target": null,
+                    "targetAnchor": null,
+                    "transition": null,
+                    "type": "path",
+                  },
+                ],
+                "component": null,
+                "ctx": [Circular],
+                "dirs": null,
+                "dynamicChildren": [],
+                "dynamicProps": null,
+                "el": <svg
+                  aria-hidden="true"
+                  class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+                  fill="none"
+                  viewBox="0 0 100 101"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                    fill="currentFill"
+                  />
+                </svg>,
+                "key": null,
+                "patchFlag": 2,
+                "props": {
+                  "aria-hidden": "true",
+                  "class": "fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin",
+                  "fill": "none",
+                  "viewBox": "0 0 100 101",
+                  "xmlns": "http://www.w3.org/2000/svg",
+                },
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 17,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": "svg",
+              },
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "v-if",
+                "component": null,
+                "ctx": [Circular],
+                "dirs": null,
+                "dynamicChildren": [],
+                "dynamicProps": null,
+                "el": <!--v-if-->,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(v-cmt),
+              },
+            ],
+            "component": null,
+            "ctx": [Circular],
+            "dirs": null,
+            "dynamicChildren": [
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": [
+                  {
+                    "__v_isVNode": true,
+                    "__v_skip": true,
+                    "anchor": null,
+                    "appContext": null,
+                    "ce": undefined,
+                    "children": null,
+                    "component": null,
+                    "ctx": null,
+                    "dirs": null,
+                    "dynamicChildren": null,
+                    "dynamicProps": null,
+                    "el": <path
+                      d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                      fill="currentColor"
+                    />,
+                    "key": null,
+                    "patchFlag": -1,
+                    "props": {
+                      "d": "M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z",
+                      "fill": "currentColor",
+                    },
+                    "ref": null,
+                    "scopeId": null,
+                    "shapeFlag": 1,
+                    "slotScopeIds": null,
+                    "ssContent": null,
+                    "ssFallback": null,
+                    "staticCount": 0,
+                    "suspense": null,
+                    "target": null,
+                    "targetAnchor": null,
+                    "transition": null,
+                    "type": "path",
+                  },
+                  {
+                    "__v_isVNode": true,
+                    "__v_skip": true,
+                    "anchor": null,
+                    "appContext": null,
+                    "ce": undefined,
+                    "children": null,
+                    "component": null,
+                    "ctx": null,
+                    "dirs": null,
+                    "dynamicChildren": null,
+                    "dynamicProps": null,
+                    "el": <path
+                      d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                      fill="currentFill"
+                    />,
+                    "key": null,
+                    "patchFlag": -1,
+                    "props": {
+                      "d": "M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z",
+                      "fill": "currentFill",
+                    },
+                    "ref": null,
+                    "scopeId": null,
+                    "shapeFlag": 1,
+                    "slotScopeIds": null,
+                    "ssContent": null,
+                    "ssFallback": null,
+                    "staticCount": 0,
+                    "suspense": null,
+                    "target": null,
+                    "targetAnchor": null,
+                    "transition": null,
+                    "type": "path",
+                  },
+                ],
+                "component": null,
+                "ctx": [Circular],
+                "dirs": null,
+                "dynamicChildren": [],
+                "dynamicProps": null,
+                "el": <svg
+                  aria-hidden="true"
+                  class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+                  fill="none"
+                  viewBox="0 0 100 101"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                    fill="currentColor"
+                  />
+                  <path
+                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                    fill="currentFill"
+                  />
+                </svg>,
+                "key": null,
+                "patchFlag": 2,
+                "props": {
+                  "aria-hidden": "true",
+                  "class": "fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin",
+                  "fill": "none",
+                  "viewBox": "0 0 100 101",
+                  "xmlns": "http://www.w3.org/2000/svg",
+                },
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 17,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": "svg",
+              },
+              {
+                "__v_isVNode": true,
+                "__v_skip": true,
+                "anchor": null,
+                "appContext": null,
+                "children": "v-if",
+                "component": null,
+                "ctx": [Circular],
+                "dirs": null,
+                "dynamicChildren": [],
+                "dynamicProps": null,
+                "el": <!--v-if-->,
+                "key": null,
+                "patchFlag": 0,
+                "props": null,
+                "ref": null,
+                "scopeId": null,
+                "shapeFlag": 8,
+                "slotScopeIds": null,
+                "ssContent": null,
+                "ssFallback": null,
+                "staticCount": 0,
+                "suspense": null,
+                "target": null,
+                "targetAnchor": null,
+                "transition": null,
+                "type": Symbol(v-cmt),
+              },
+            ],
+            "dynamicProps": null,
+            "el": <div
+              class="flex flex-col items-center justify-center w-full h-full"
+              role="status"
+            >
+              <svg
+                aria-hidden="true"
+                class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+                fill="none"
+                viewBox="0 0 100 101"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                  fill="currentColor"
+                />
+                <path
+                  d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                  fill="currentFill"
+                />
+              </svg>
+              <!--v-if-->
+            </div>,
+            "key": null,
+            "patchFlag": 0,
+            "props": {
+              "class": "flex flex-col items-center justify-center w-full h-full",
+              "role": "status",
+            },
+            "ref": null,
+            "scopeId": null,
+            "shapeFlag": 17,
+            "slotScopeIds": null,
+            "ssContent": null,
+            "ssFallback": null,
+            "staticCount": 0,
+            "suspense": null,
+            "target": null,
+            "targetAnchor": null,
+            "transition": null,
+            "type": "div",
+          },
+          "suspense": null,
+          "suspenseId": 0,
+          "type": {
+            "__file": "/Volumes/Data/Code/Projects/genshi/src/components/Loader/DsLoadingSpinner.vue",
+            "__name": "DsLoadingSpinner",
+            "components": {},
+            "props": {
+              "color": {
+                "default": "blue",
+                "type": [Function],
+              },
+              "label": {
+                "default": "Loading...",
+                "type": [Function],
+              },
+              "showLabel": {
+                "default": false,
+                "type": [Function],
+              },
+              "size": {
+                "default": "normal",
+                "type": [Function],
+              },
+            },
+            "render": [Function],
+            "setup": [Function],
+          },
+          "u": null,
+          "uid": 5,
+          "um": null,
+          "update": [Function],
+          "vnode": [Circular],
+          "withProxy": null,
+        },
+        "ctx": [Circular],
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": <div
+          class="flex flex-col items-center justify-center w-full h-full"
+          role="status"
+        >
+          <svg
+            aria-hidden="true"
+            class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+            fill="none"
+            viewBox="0 0 100 101"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor"
+            />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill"
+            />
+          </svg>
+          <!--v-if-->
+        </div>,
+        "key": null,
+        "patchFlag": 0,
+        "props": {
+          "ref": "VTU_COMPONENT",
+          "size": "normal",
+        },
+        "ref": {
+          "f": false,
+          "i": [Circular],
+          "k": undefined,
+          "r": "VTU_COMPONENT",
+        },
+        "scopeId": null,
+        "shapeFlag": 4,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": {
+          "__file": "/Volumes/Data/Code/Projects/genshi/src/components/Loader/DsLoadingSpinner.vue",
+          "__name": "DsLoadingSpinner",
+          "components": {},
+          "props": {
+            "color": {
+              "default": "blue",
+              "type": [Function],
+            },
+            "label": {
+              "default": "Loading...",
+              "type": [Function],
+            },
+            "showLabel": {
+              "default": false,
+              "type": [Function],
+            },
+            "size": {
+              "default": "normal",
+              "type": [Function],
+            },
+          },
+          "render": [Function],
+          "setup": [Function],
+        },
+      },
+      "suspense": null,
+      "suspenseId": 0,
+      "type": {
+        "name": "VTU_ROOT",
+        "render": [Function],
+        "setup": [Function],
+      },
+      "u": null,
+      "uid": 4,
+      "um": null,
+      "update": [Function],
+      "vnode": {
+        "__v_isVNode": true,
+        "__v_skip": true,
+        "anchor": null,
+        "appContext": {
+          "app": [Circular],
+          "components": {
+            "transition": {
+              "name": "transition",
+            },
+            "transition-group": {
+              "name": "transition-group",
+            },
+          },
+          "config": {
+            "compilerOptions": {},
+            "errorHandler": undefined,
+            "globalProperties": {},
+            "isNativeTag": [Function],
+            "optionMergeStrategies": {},
+            "performance": false,
+            "warnHandler": undefined,
+          },
+          "directives": {},
+          "emitsCache": WeakMap {},
+          "mixins": [
+            {
+              "beforeCreate": [Function],
+            },
+          ],
+          "optionsCache": WeakMap {},
+          "propsCache": WeakMap {},
+          "provides": {},
+          "reload": [Function],
+        },
+        "children": null,
+        "component": [Circular],
+        "ctx": null,
+        "dirs": null,
+        "dynamicChildren": null,
+        "dynamicProps": null,
+        "el": <div
+          class="flex flex-col items-center justify-center w-full h-full"
+          role="status"
+        >
+          <svg
+            aria-hidden="true"
+            class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+            fill="none"
+            viewBox="0 0 100 101"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+              fill="currentColor"
+            />
+            <path
+              d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+              fill="currentFill"
+            />
+          </svg>
+          <!--v-if-->
+        </div>,
+        "key": null,
+        "patchFlag": 0,
+        "props": null,
+        "ref": null,
+        "scopeId": null,
+        "shapeFlag": 4,
+        "slotScopeIds": null,
+        "ssContent": null,
+        "ssFallback": null,
+        "staticCount": 0,
+        "suspense": null,
+        "target": null,
+        "targetAnchor": null,
+        "transition": null,
+        "type": {
+          "name": "VTU_ROOT",
+          "render": [Function],
+          "setup": [Function],
+        },
+      },
+      "withProxy": null,
+    },
+    "_props": null,
+    "_uid": 2,
+    "component": [Function],
+    "config": {
+      "compilerOptions": {},
+      "errorHandler": undefined,
+      "globalProperties": {},
+      "isNativeTag": [Function],
+      "optionMergeStrategies": {},
+      "performance": false,
+      "warnHandler": undefined,
+    },
+    "directive": [Function],
+    "mixin": [Function],
+    "mount": [Function],
+    "provide": [Function],
+    "runWithContext": [Function],
+    "unmount": [Function],
+    "use": [Function],
+    "version": "3.3.4",
+  },
+  "__setProps": [Function],
+  "cleanUpCallbacks": [
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+    [Function],
+  ],
+  "componentVM": {},
+  "isDisabled": [Function],
+  "rootVM": {
+    "VTU_COMPONENT": {},
+  },
+  "wrapperElement": <div
+    class="flex flex-col items-center justify-center w-full h-full"
+    role="status"
+  >
+    <svg
+      aria-hidden="true"
+      class="fill-blue-600 text-gray-200 dark:text-gray-200 w-6 h-6 mr-2 animate-spin"
+      fill="none"
+      viewBox="0 0 100 101"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+    <!--v-if-->
+  </div>,
+}
+`;
diff --git a/src/components/Loader/index.ts b/src/components/Loader/index.ts
index 01cb5416..f91ff6f9 100644
--- a/src/components/Loader/index.ts
+++ b/src/components/Loader/index.ts
@@ -1,2 +1,2 @@
-export { default as ClLoadingSpinner } from './ClLoadingSpinner.vue';
+export { default as DsLoadingSpinner } from './DsLoadingSpinner.vue';
 export { LoadingSpinnerColor, LoadingSpinnerSize } from './constants';
diff --git a/src/docs/3_Colors.mdx b/src/docs/3_Colors.mdx
index 7c136fcf..33a63e5f 100644
--- a/src/docs/3_Colors.mdx
+++ b/src/docs/3_Colors.mdx
@@ -1,4 +1,5 @@
 import { Meta, ColorPalette, ColorItem } from '@storybook/blocks';
+import { themes as stbThemes, ThemeProvider, ensure } from '@storybook/theming';
 
 <Meta title="3. Colors" />
 
diff --git a/src/index.ts b/src/index.ts
index 1a24c782..62b6cd09 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,2 +1,4 @@
-export { ButtonSize, ButtonType, ClButton } from '@/components/Button';
-export { LoadingSpinnerSize, LoadingSpinnerColor, ClLoadingSpinner } from '@/components/Loader';
+export * from '@/components/Button';
+export * from '@/components/Loader';
+export * from '@/components/Icon';
+export * from '@/data';