diff --git a/docs/pull_request_template.md b/docs/pull_request_template.md
index 6af9f922..439ff626 100644
--- a/docs/pull_request_template.md
+++ b/docs/pull_request_template.md
@@ -1,6 +1,6 @@
 #### Por favor, verifique se o seu pull request está de acordo com o checklist abaixo:
 
-- [x] A implementação feita possui testes (Caso haja um motivo para não haver testes, descrever abaixo)
+- [x] A implementação feita possui testes (Caso haja um motivo para não haver testes/haver apenas testes de snapshot, descrever abaixo)
 - [x] A documentação no mdx foi feita ou atualizada, caso necessário
 - [x] O eslint passou localmente
 
diff --git a/package.json b/package.json
index 4e6fef52..ab6876bd 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.79.1",
+	"version": "3.79.2",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",
diff --git a/src/components/AlertCard.vue b/src/components/AlertCard.vue
index 25b0e95b..37f24354 100644
--- a/src/components/AlertCard.vue
+++ b/src/components/AlertCard.vue
@@ -65,6 +65,27 @@ export default {
 			type: String,
 			default: 'info',
 		},
+		/**
+		 * Define se o AlertCard é selecionável.
+		 */
+		selectable: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Variante de estilo muted do componente.
+		 */
+		muted: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Controla exibição do título do AlertCard.
+		 */
+		noTitle: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * O título do alerta. O título também pode ser usado com o slot.
 		 */
diff --git a/src/components/BarChart.vue b/src/components/BarChart.vue
index b13b0191..1faab487 100644
--- a/src/components/BarChart.vue
+++ b/src/components/BarChart.vue
@@ -35,16 +35,16 @@ export default {
 		 * `data` (array com os valores númericos).
 		 */
 		data: {
-			type: Object,
+			type: Array,
 			required: true,
-			default: () => ({
+			default: () => ([{
 				datasets: [
 					{
 						label: '',
 						data: [],
 					}
 				]
-			})
+			}])
 		},
 		/**
 		 * Personaliza a paleta de cores do gráfico. São 11 variantes implementadas:
diff --git a/src/components/Chip.vue b/src/components/Chip.vue
index 53ce015f..027cab72 100644
--- a/src/components/Chip.vue
+++ b/src/components/Chip.vue
@@ -3,6 +3,7 @@
 	<div
 		class="chip__container"
 		:class="classList"
+		data-testid="chip-container"
 		@click="handleClick"
 	>
 		<div
@@ -44,7 +45,7 @@ export default {
 
 	props: {
 		/**
-		 *  Controla a exibição do bottom sheet.
+		 *  Controla o estado de seleção da chip.
 		 */
 		modelValue: {
 			type: Boolean,
diff --git a/src/components/CollapsibleContainer.vue b/src/components/CollapsibleContainer.vue
index bb9d645a..adfe0040 100644
--- a/src/components/CollapsibleContainer.vue
+++ b/src/components/CollapsibleContainer.vue
@@ -20,6 +20,7 @@
 		<div
 			v-if="internalValue"
 			class="collapsible-container__content"
+			data-testid="collapsible-content"
 		>
 			<!-- @slot Slot para renderização conteúdo do container
 				quando o componente está expandido
diff --git a/src/components/PasswordInput.vue b/src/components/PasswordInput.vue
index c9bca65d..ac51977f 100644
--- a/src/components/PasswordInput.vue
+++ b/src/components/PasswordInput.vue
@@ -67,6 +67,7 @@
 <script>
 import CdsIcon from './Icon.vue';
 import Cdstip from '../utils/directives/cdstip';
+import CdsClickable from './Clickable.vue';
 import { generateKey } from '../utils';
 
 
@@ -76,7 +77,8 @@ export default {
 	},
 
 	components: {
-		CdsIcon
+		CdsIcon,
+		CdsClickable,
 	},
 
 	props: {
diff --git a/src/components/ProgressCircular.vue b/src/components/ProgressCircular.vue
index ec691f14..943b3c42 100644
--- a/src/components/ProgressCircular.vue
+++ b/src/components/ProgressCircular.vue
@@ -6,7 +6,6 @@
 	>
 		<path
 			class="progress-circular__ring-background"
-			:stroke="backgroundColor"
 			:stroke-width="stroke"
 			d="M18 2.0845
 			a 15.9155 15.9155 0 0 1 0 31.831
@@ -35,7 +34,7 @@
 </template>
 
 <script>
-import { colorOptions, colorHexCode } from '../utils/constants/colors';
+import { colorHexCode } from '../utils/constants/colors';
 
 export default {
 	props: {
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 751c60d4..84c71725 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -118,12 +118,17 @@ import { generateKey } from '../utils';
 import cloneDeep from 'lodash.clonedeep';
 import removeAccents from '../utils/methods/removeAccents';
 import CdsIcon from './Icon.vue';
+import Cdstip from '../utils/directives/cdstip';
 
 export default {
 	components: {
 		CdsIcon,
 	},
 
+	directives: {
+		cdstip: Cdstip,
+	},
+
 	props: {
 		/**
 		 * Especifica o título do select.
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 14bb35a6..ebb15749 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -34,8 +34,6 @@
 				</div>
 			</div>
 
-
-
 			<div
 				v-if="searchButton"
 				class="side-bar__search-button"
@@ -63,8 +61,6 @@
 				</span>
 			</div>
 
-
-
 			<ul
 				:class="{'side-bar__container': items.length >= 1}"
 			>
@@ -303,12 +299,14 @@ import CdsPopover from './Popover.vue';
 import CdsAvatar from './Avatar.vue';
 import CdsRichTooltip from './RichTooltip.vue';
 import Cdstip from '../utils/directives/cdstip';
+import vClickOutside from 'click-outside-vue3';
 
 import { colorOptions, colorHexCode } from '../utils/constants/colors';
 
 export default {
 	directives: {
 		cdstip: Cdstip,
+		'on-click-outside': vClickOutside.directive,
 	},
 
 	components: {
diff --git a/src/components/WebcamModal.vue b/src/components/WebcamModal.vue
index 03996978..aaa9554c 100644
--- a/src/components/WebcamModal.vue
+++ b/src/components/WebcamModal.vue
@@ -104,12 +104,12 @@
 
 <script setup>
 import { computed, ref, watch } from 'vue';
-import Button from './Button.vue';
+import CdsButton from './Button.vue';
 import Flexbox from './Flexbox.vue';
 import Modal from './Modal.vue';
 import Spinner from './Spinner.vue';
-
-const CdsButton = Button;
+import CdsIcon from './Icon.vue';
+import CdsFlexbox from './Flexbox.vue';
 
 const emit = defineEmits([
 	/**
diff --git a/src/tests/AlertCard.spec.ts b/src/tests/AlertCard.spec.ts
index 8809c164..e27ac12b 100644
--- a/src/tests/AlertCard.spec.ts
+++ b/src/tests/AlertCard.spec.ts
@@ -1,4 +1,3 @@
-// @vitest-environment jsdom
 import { describe, test, expect } from 'vitest';
 import AlertCard from '../components/AlertCard.vue';
 import { mount } from '@vue/test-utils';
diff --git a/src/tests/BarChart.spec.ts b/src/tests/BarChart.spec.ts
index bb13ad13..924fd7e2 100644
--- a/src/tests/BarChart.spec.ts
+++ b/src/tests/BarChart.spec.ts
@@ -1,7 +1,42 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vi } from 'vitest';
 import BarChart from '../components/BarChart.vue';
 import { shallowMount } from '@vue/test-utils';
 
+vi.mock('../utils/methods/paleteBuilder.js', () => ({
+	default: vi.fn((rawPalete) => {
+		return [
+			{
+				colorName: 'Light Neutrals',
+				variantName: 'Light',
+				color400: '#E7EDF3',
+				colorShades: ['#FFFFFF', '#FAFCFE', '#F4F8FB', '#E7EDF3', '#DFE5EC'],
+				colorTokens: ['$n-0', '$n-10', '$n-20', '$n-30', '$n-40'],
+				colorData: [
+					{ shade: '#FFFFFF', token: '$n-0' },
+					{ shade: '#FAFCFE', token: '$n-10' },
+					{ shade: '#F4F8FB', token: '$n-20' },
+					{ shade: '#E7EDF3', token: '$n-30' },
+					{ shade: '#DFE5EC', token: '$n-40' }
+				]
+			},
+			{
+				colorName: 'Piccolo Green',
+				variantName: 'Green',
+				color400: '#6ddfb1',
+				colorShades: ['#f3fcf8', '#e2f8ef', '#abedd3', '#6ddfb1', '#2db981'],
+				colorTokens: ['$gp-50', '$gp-100', '$gp-200', '$gp-300', '$gp-400'],
+				colorData: [
+					{ shade: '#f3fcf8', token: '$gp-50' },
+					{ shade: '#e2f8ef', token: '$gp-100' },
+					{ shade: '#abedd3', token: '$gp-200' },
+					{ shade: '#6ddfb1', token: '$gp-300' },
+					{ shade: '#2db981', token: '$gp-400' }
+				]
+			}
+		];
+	})
+}));
+
 const mockedData = [
 	{
 		name: 'Ecocardiograma',
diff --git a/src/tests/Breadcrumb.spec.ts b/src/tests/Breadcrumb.spec.ts
index b7bc1d5f..ea72a594 100644
--- a/src/tests/Breadcrumb.spec.ts
+++ b/src/tests/Breadcrumb.spec.ts
@@ -1,7 +1,6 @@
-// @vitest-environment jsdom
 import { describe, test, expect } from 'vitest';
 import Breadcrumb from '../components/Breadcrumb.vue';
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 const items = [
 	{
@@ -29,7 +28,12 @@ const items = [
 
 describe('Breadcrumb snapshot test', () => {
 	test('renders correctly', () => {
-		const wrapper = mount(Breadcrumb, {
+		const wrapper = shallowMount(Breadcrumb, {
+			global: {
+				stubs: {
+					'router-link': true,
+				},
+			},
 			props: {
 				items: items,
 			},
diff --git a/src/tests/Checkbox.spec.ts b/src/tests/Checkbox.spec.ts
index 83abffaf..a50df017 100644
--- a/src/tests/Checkbox.spec.ts
+++ b/src/tests/Checkbox.spec.ts
@@ -6,7 +6,7 @@ describe('Checkbox', () => {
 	test('renders correctly', async () => {
 		const wrapper = mount(Checkbox, {
 			props: {
-				value: false,
+				modelValue: false,
 				label: 'checkbox test'
 			},
 		});
diff --git a/src/tests/Chip.spec.ts b/src/tests/Chip.spec.ts
index 8d3b3f91..de4caa33 100644
--- a/src/tests/Chip.spec.ts
+++ b/src/tests/Chip.spec.ts
@@ -1,12 +1,12 @@
-// @vitest-environment jsdom
 import { describe, test, expect } from 'vitest';
 import Chip from '../components/Chip.vue';
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount } from '@vue/test-utils';
 
 describe('Chip', () => {
 	test('renders correctly', async () => {
 		const wrapper = mount(Chip, {
 			props: {
+				modelValue: false,
 				variant: 'gray',
 			},
 			slots: {
@@ -16,4 +16,32 @@ describe('Chip', () => {
 
 		expect(wrapper.html()).toMatchSnapshot();
 	});
+
+	test('emits update modelValue event based on click correctly', async () => {
+		expect.assertions(2);
+
+		const wrapper = mount(Chip, {
+			props: {
+				modelValue: false,
+				variant: 'gray',
+			},
+			slots: {
+				default: 'Chip'
+			}
+		});
+
+		const container = wrapper.find('[data-testid="chip-container"]');
+
+		container.trigger('click');
+
+		await flushPromises();
+
+		expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+
+		container.trigger('click');
+
+		await flushPromises();
+
+		expect(wrapper.emitted()['update:modelValue'][1]).toEqual([false]);
+	});
 });
diff --git a/src/tests/CollapsibleContainer.spec.ts b/src/tests/CollapsibleContainer.spec.ts
index 9e0b7df4..7d53d41d 100644
--- a/src/tests/CollapsibleContainer.spec.ts
+++ b/src/tests/CollapsibleContainer.spec.ts
@@ -1,16 +1,37 @@
 import { describe, test, expect } from 'vitest';
 import CollapsibleContainer from '../components/CollapsibleContainer.vue';
-import { mount } from '@vue/test-utils';
+import { flushPromises, mount } from '@vue/test-utils';
   
 describe('CollapsibleContainer', () => {
 	test('renders correctly', async () => {
 		const wrapper = mount(CollapsibleContainer, {
 			props: {
-				value: true,
+				modelValue: true,
 				title: 'Seu universo expandido',
 			},
 		});
   
 		expect(wrapper.html()).toMatchSnapshot();
 	});
+
+	test('content is rendered correctly on modelValue change', async () => {
+		expect.assertions(2);
+
+		const wrapper = mount(CollapsibleContainer, {
+			props: {
+				modelValue: false,
+				title: 'Seu universo expandido',
+			},
+		});
+  
+		expect(wrapper.findAll('[data-testid="collapsible-content"]').length).toBe(0);
+
+		wrapper.setProps({
+			modelValue: true,
+		});
+
+		await flushPromises();
+
+		expect(wrapper.findAll('[data-testid="collapsible-content"]').length).toBe(1);
+	})
 });
diff --git a/src/tests/DonutChart.spec.ts b/src/tests/DonutChart.spec.ts
index a7d49ae3..ee7edb4d 100644
--- a/src/tests/DonutChart.spec.ts
+++ b/src/tests/DonutChart.spec.ts
@@ -1,7 +1,42 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vi } from 'vitest';
 import DonutChart from '../components/DonutChart.vue';
 import { shallowMount } from '@vue/test-utils';
 
+vi.mock('../utils/methods/paleteBuilder.js', () => ({
+	default: vi.fn((rawPalete) => {
+		return [
+			{
+				colorName: 'Light Neutrals',
+				variantName: 'Light',
+				color400: '#E7EDF3',
+				colorShades: ['#FFFFFF', '#FAFCFE', '#F4F8FB', '#E7EDF3', '#DFE5EC'],
+				colorTokens: ['$n-0', '$n-10', '$n-20', '$n-30', '$n-40'],
+				colorData: [
+					{ shade: '#FFFFFF', token: '$n-0' },
+					{ shade: '#FAFCFE', token: '$n-10' },
+					{ shade: '#F4F8FB', token: '$n-20' },
+					{ shade: '#E7EDF3', token: '$n-30' },
+					{ shade: '#DFE5EC', token: '$n-40' }
+				]
+			},
+			{
+				colorName: 'Piccolo Green',
+				variantName: 'Green',
+				color400: '#6ddfb1',
+				colorShades: ['#f3fcf8', '#e2f8ef', '#abedd3', '#6ddfb1', '#2db981'],
+				colorTokens: ['$gp-50', '$gp-100', '$gp-200', '$gp-300', '$gp-400'],
+				colorData: [
+					{ shade: '#f3fcf8', token: '$gp-50' },
+					{ shade: '#e2f8ef', token: '$gp-100' },
+					{ shade: '#abedd3', token: '$gp-200' },
+					{ shade: '#6ddfb1', token: '$gp-300' },
+					{ shade: '#2db981', token: '$gp-400' }
+				]
+			}
+		];
+	})
+}));
+
 const mockedData =[
 	{
 		name: 'Ecocardiograma',
@@ -23,6 +58,7 @@ describe('DonutChart', () => {
 				labels: ['Janeiro','Fevereiro','Março', 'Abril', 'Maio'],
 				variant: 'green',
 				data: mockedData,
+				theme: 'green',
 			},
 		});
 
diff --git a/src/tests/InteractionBlockingOverlay.spec.ts b/src/tests/InteractionBlockingOverlay.spec.ts
deleted file mode 100644
index b2b5b0e7..00000000
--- a/src/tests/InteractionBlockingOverlay.spec.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { describe, test, expect } from 'vitest';
-import InteractionBlockingOverlay from '../components/InteractionBlockingOverlay.vue';
-import { mount } from '@vue/test-utils';
-
-describe('InteractionBlockingOverlay', () => {
-	test('renders correctly', async () => {
-		const wrapper = mount(InteractionBlockingOverlay, {
-			props: {
-				block: 'mobile',
-			},
-		});
-
-		expect(wrapper.html()).toMatchSnapshot();
-	});
-});
diff --git a/src/tests/LineChart.spec.ts b/src/tests/LineChart.spec.ts
index 08f47aca..2cf07cd8 100644
--- a/src/tests/LineChart.spec.ts
+++ b/src/tests/LineChart.spec.ts
@@ -1,7 +1,42 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vi } from 'vitest';
 import LineChart from '../components/LineChart.vue';
 import { shallowMount } from '@vue/test-utils';
 
+vi.mock('../utils/methods/paleteBuilder.js', () => ({
+	default: vi.fn((rawPalete) => {
+		return [
+			{
+				colorName: 'Light Neutrals',
+				variantName: 'Light',
+				color400: '#E7EDF3',
+				colorShades: ['#FFFFFF', '#FAFCFE', '#F4F8FB', '#E7EDF3', '#DFE5EC'],
+				colorTokens: ['$n-0', '$n-10', '$n-20', '$n-30', '$n-40'],
+				colorData: [
+					{ shade: '#FFFFFF', token: '$n-0' },
+					{ shade: '#FAFCFE', token: '$n-10' },
+					{ shade: '#F4F8FB', token: '$n-20' },
+					{ shade: '#E7EDF3', token: '$n-30' },
+					{ shade: '#DFE5EC', token: '$n-40' }
+				]
+			},
+			{
+				colorName: 'Piccolo Green',
+				variantName: 'Green',
+				color400: '#6ddfb1',
+				colorShades: ['#f3fcf8', '#e2f8ef', '#abedd3', '#6ddfb1', '#2db981'],
+				colorTokens: ['$gp-50', '$gp-100', '$gp-200', '$gp-300', '$gp-400'],
+				colorData: [
+					{ shade: '#f3fcf8', token: '$gp-50' },
+					{ shade: '#e2f8ef', token: '$gp-100' },
+					{ shade: '#abedd3', token: '$gp-200' },
+					{ shade: '#6ddfb1', token: '$gp-300' },
+					{ shade: '#2db981', token: '$gp-400' }
+				]
+			}
+		];
+	})
+}));
+
 const mockedData = [
 	{
 		name: 'Ecocardiograma',
@@ -44,6 +79,7 @@ describe('LineChart', () => {
 				isDashed: false,
 				borderDash: [5,5],
 				smoothing: 0.6,
+				theme: 'green',
 			},
 		});
 
diff --git a/src/tests/MobileNavigation.spec.ts b/src/tests/MobileNavigation.spec.ts
index f68a587b..a4b48072 100644
--- a/src/tests/MobileNavigation.spec.ts
+++ b/src/tests/MobileNavigation.spec.ts
@@ -36,6 +36,7 @@ describe('MobileNavigation', () => {
 				stubs: {
 					'cds-icon': true,
 					'cds-avatar': true,
+					'router-link': true,
 				},
 			},
 			props: {
diff --git a/src/tests/MobileStepperInput.spec.js b/src/tests/MobileStepperInput.spec.js
index 1f90e517..22f117f0 100644
--- a/src/tests/MobileStepperInput.spec.js
+++ b/src/tests/MobileStepperInput.spec.js
@@ -1,4 +1,4 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vi } from 'vitest';
 import MobileStepperInput from '../components/MobileStepperInput.vue';
 import { shallowMount } from '@vue/test-utils';
 
@@ -10,16 +10,10 @@ describe('MobileStepperInput', () => {
 	});
 
 	test('state classes are applyied correctly', async () => {
-		expect.assertions(2);
+		expect.assertions(1);
 
 		const wrapper = shallowMount(MobileStepperInput);
 
-		expect(wrapper.vm.computedStepperClass).toBe('mobile__stepper');
-
-		await wrapper.setProps({
-			state: 'invalid',
-		});
-
-		expect(wrapper.vm.computedStepperClass).toBe('mobile__stepper--invalid');
+		expect(wrapper.vm.stepperInputStatusClasses).toBe('mobile-stepper-input');
 	});
-});
\ No newline at end of file
+});
diff --git a/src/tests/PieChart.spec.ts b/src/tests/PieChart.spec.ts
index 4840cf04..3223dbc4 100644
--- a/src/tests/PieChart.spec.ts
+++ b/src/tests/PieChart.spec.ts
@@ -1,7 +1,42 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vi } from 'vitest';
 import PieChart from '../components/PieChart.vue';
 import { shallowMount } from '@vue/test-utils';
 
+vi.mock('../utils/methods/paleteBuilder.js', () => ({
+	default: vi.fn((rawPalete) => {
+		return [
+			{
+				colorName: 'Light Neutrals',
+				variantName: 'Light',
+				color400: '#E7EDF3',
+				colorShades: ['#FFFFFF', '#FAFCFE', '#F4F8FB', '#E7EDF3', '#DFE5EC'],
+				colorTokens: ['$n-0', '$n-10', '$n-20', '$n-30', '$n-40'],
+				colorData: [
+					{ shade: '#FFFFFF', token: '$n-0' },
+					{ shade: '#FAFCFE', token: '$n-10' },
+					{ shade: '#F4F8FB', token: '$n-20' },
+					{ shade: '#E7EDF3', token: '$n-30' },
+					{ shade: '#DFE5EC', token: '$n-40' }
+				]
+			},
+			{
+				colorName: 'Piccolo Green',
+				variantName: 'Green',
+				color400: '#6ddfb1',
+				colorShades: ['#f3fcf8', '#e2f8ef', '#abedd3', '#6ddfb1', '#2db981'],
+				colorTokens: ['$gp-50', '$gp-100', '$gp-200', '$gp-300', '$gp-400'],
+				colorData: [
+					{ shade: '#f3fcf8', token: '$gp-50' },
+					{ shade: '#e2f8ef', token: '$gp-100' },
+					{ shade: '#abedd3', token: '$gp-200' },
+					{ shade: '#6ddfb1', token: '$gp-300' },
+					{ shade: '#2db981', token: '$gp-400' }
+				]
+			}
+		];
+	})
+}));
+
 const mockedData =[
 	{
 		name: 'Ecocardiograma',
diff --git a/src/tests/PolarAreaChart.spec.ts b/src/tests/PolarAreaChart.spec.ts
index d73cba0d..de40b225 100644
--- a/src/tests/PolarAreaChart.spec.ts
+++ b/src/tests/PolarAreaChart.spec.ts
@@ -1,7 +1,42 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vi } from 'vitest';
 import PolarAreaChart from '../components/PolarAreaChart.vue';
 import { shallowMount } from '@vue/test-utils';
 
+vi.mock('../utils/methods/paleteBuilder.js', () => ({
+	default: vi.fn((rawPalete) => {
+		return [
+			{
+				colorName: 'Light Neutrals',
+				variantName: 'Light',
+				color400: '#E7EDF3',
+				colorShades: ['#FFFFFF', '#FAFCFE', '#F4F8FB', '#E7EDF3', '#DFE5EC'],
+				colorTokens: ['$n-0', '$n-10', '$n-20', '$n-30', '$n-40'],
+				colorData: [
+					{ shade: '#FFFFFF', token: '$n-0' },
+					{ shade: '#FAFCFE', token: '$n-10' },
+					{ shade: '#F4F8FB', token: '$n-20' },
+					{ shade: '#E7EDF3', token: '$n-30' },
+					{ shade: '#DFE5EC', token: '$n-40' }
+				]
+			},
+			{
+				colorName: 'Piccolo Green',
+				variantName: 'Green',
+				color400: '#6ddfb1',
+				colorShades: ['#f3fcf8', '#e2f8ef', '#abedd3', '#6ddfb1', '#2db981'],
+				colorTokens: ['$gp-50', '$gp-100', '$gp-200', '$gp-300', '$gp-400'],
+				colorData: [
+					{ shade: '#f3fcf8', token: '$gp-50' },
+					{ shade: '#e2f8ef', token: '$gp-100' },
+					{ shade: '#abedd3', token: '$gp-200' },
+					{ shade: '#6ddfb1', token: '$gp-300' },
+					{ shade: '#2db981', token: '$gp-400' }
+				]
+			}
+		];
+	})
+}));
+
 const mockedData = [
 	{
 		name: 'Ecocardiograma',
diff --git a/src/tests/ProgressBar.spec.ts b/src/tests/ProgressBar.spec.ts
index 408cca00..d02f150f 100644
--- a/src/tests/ProgressBar.spec.ts
+++ b/src/tests/ProgressBar.spec.ts
@@ -6,7 +6,7 @@ describe('ProgressBar', () => {
 	test('renders correctly', async () => {
 		const wrapper = mount(ProgressBar, {
 			props: {
-				percentage: 0.67,
+				value: 0.67,
 			},
 		});
 
diff --git a/src/tests/RadialBarChart.spec.ts b/src/tests/RadialBarChart.spec.ts
index ae9fd4a8..d2db92cd 100644
--- a/src/tests/RadialBarChart.spec.ts
+++ b/src/tests/RadialBarChart.spec.ts
@@ -1,7 +1,42 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vi } from 'vitest';
 import RadialBarChart from '../components/RadialBarChart.vue';
 import { shallowMount } from '@vue/test-utils';
 
+vi.mock('../utils/methods/paleteBuilder.js', () => ({
+	default: vi.fn((rawPalete) => {
+		return [
+			{
+				colorName: 'Light Neutrals',
+				variantName: 'Light',
+				color400: '#E7EDF3',
+				colorShades: ['#FFFFFF', '#FAFCFE', '#F4F8FB', '#E7EDF3', '#DFE5EC'],
+				colorTokens: ['$n-0', '$n-10', '$n-20', '$n-30', '$n-40'],
+				colorData: [
+					{ shade: '#FFFFFF', token: '$n-0' },
+					{ shade: '#FAFCFE', token: '$n-10' },
+					{ shade: '#F4F8FB', token: '$n-20' },
+					{ shade: '#E7EDF3', token: '$n-30' },
+					{ shade: '#DFE5EC', token: '$n-40' }
+				]
+			},
+			{
+				colorName: 'Piccolo Green',
+				variantName: 'Green',
+				color400: '#6ddfb1',
+				colorShades: ['#f3fcf8', '#e2f8ef', '#abedd3', '#6ddfb1', '#2db981'],
+				colorTokens: ['$gp-50', '$gp-100', '$gp-200', '$gp-300', '$gp-400'],
+				colorData: [
+					{ shade: '#f3fcf8', token: '$gp-50' },
+					{ shade: '#e2f8ef', token: '$gp-100' },
+					{ shade: '#abedd3', token: '$gp-200' },
+					{ shade: '#6ddfb1', token: '$gp-300' },
+					{ shade: '#2db981', token: '$gp-400' }
+				]
+			}
+		];
+	})
+}));
+
 const mockedData =[
 	{
 		name: 'Ecocardiograma',
@@ -22,6 +57,7 @@ describe('RadialBarChart', () => {
 			props: {
 				labels: ['Janeiro','Fevereiro','Março', 'Abril', 'Maio'],
 				variant: 'green',
+				theme: 'green',
 				data: mockedData,
 			},
 		});
diff --git a/src/tests/Select.spec.ts b/src/tests/Select.spec.ts
index bed08534..86421496 100644
--- a/src/tests/Select.spec.ts
+++ b/src/tests/Select.spec.ts
@@ -1,6 +1,6 @@
 import { describe, test, expect } from 'vitest';
-import Scrollable from '../components/Scrollable.vue';
-import { mount } from '@vue/test-utils';
+import Select from '../components/Select.vue';
+import { shallowMount } from '@vue/test-utils';
 
 const options = [
 	{
@@ -17,13 +17,13 @@ const options = [
 
 const value = {};
 
-describe('Scrollable', () => {
+describe('Select', () => {
 	test('renders correctly', async () => {
-		const wrapper = mount(Scrollable, {
+		const wrapper = shallowMount(Select, {
 			props: {
 				label: 'Label',
 				options,
-				value,
+				modelValue: value,
 			},
 		});
 
diff --git a/src/tests/SideBar.spec.ts b/src/tests/SideBar.spec.ts
index 280db70c..65e2093b 100644
--- a/src/tests/SideBar.spec.ts
+++ b/src/tests/SideBar.spec.ts
@@ -1,6 +1,6 @@
 import { describe, test, expect } from 'vitest';
 import SideBar from '../components/SideBar.vue';
-import { mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 
 const mockedData = [
 	{
@@ -39,10 +39,10 @@ const mockedData = [
 
 describe('SideBar', () => {
 	test('renders correctly', async () => {
-		const wrapper = mount(SideBar, {
+		const wrapper = shallowMount(SideBar, {
 			global: {
 				stubs: {
-					'cds-icon': true,
+					'router-link': true,
 				},
 			},
 			props: {
diff --git a/src/tests/StackedBarChart.spec.ts b/src/tests/StackedBarChart.spec.ts
index 8f4a2dd9..dd5f6dcb 100644
--- a/src/tests/StackedBarChart.spec.ts
+++ b/src/tests/StackedBarChart.spec.ts
@@ -1,7 +1,42 @@
-import { describe, test, expect } from 'vitest';
+import { describe, test, expect, vi } from 'vitest';
 import StackedBarChart from '../components/StackedBarChart.vue';
 import { shallowMount } from '@vue/test-utils';
 
+vi.mock('../utils/methods/paleteBuilder.js', () => ({
+	default: vi.fn((rawPalete) => {
+		return [
+			{
+				colorName: 'Light Neutrals',
+				variantName: 'Light',
+				color400: '#E7EDF3',
+				colorShades: ['#FFFFFF', '#FAFCFE', '#F4F8FB', '#E7EDF3', '#DFE5EC'],
+				colorTokens: ['$n-0', '$n-10', '$n-20', '$n-30', '$n-40'],
+				colorData: [
+					{ shade: '#FFFFFF', token: '$n-0' },
+					{ shade: '#FAFCFE', token: '$n-10' },
+					{ shade: '#F4F8FB', token: '$n-20' },
+					{ shade: '#E7EDF3', token: '$n-30' },
+					{ shade: '#DFE5EC', token: '$n-40' }
+				]
+			},
+			{
+				colorName: 'Piccolo Green',
+				variantName: 'Green',
+				color400: '#6ddfb1',
+				colorShades: ['#f3fcf8', '#e2f8ef', '#abedd3', '#6ddfb1', '#2db981'],
+				colorTokens: ['$gp-50', '$gp-100', '$gp-200', '$gp-300', '$gp-400'],
+				colorData: [
+					{ shade: '#f3fcf8', token: '$gp-50' },
+					{ shade: '#e2f8ef', token: '$gp-100' },
+					{ shade: '#abedd3', token: '$gp-200' },
+					{ shade: '#6ddfb1', token: '$gp-300' },
+					{ shade: '#2db981', token: '$gp-400' }
+				]
+			}
+		];
+	})
+}));
+
 const mockedData = [
 	{
 		name: 'Ecocardiograma',
@@ -38,6 +73,7 @@ describe('StackedBarChart', () => {
 			props: {
 				labels: ['Janeiro','Fevereiro','Março', 'Abril', 'Maio'],
 				variant: 'green',
+				theme: 'green',
 				data: mockedData,
 				barWidth: 1,
 			},
diff --git a/src/tests/__snapshots__/ActionBar.spec.ts.snap b/src/tests/__snapshots__/ActionBar.spec.ts.snap
index 0e9b1abd..d4d6ba2e 100644
--- a/src/tests/__snapshots__/ActionBar.spec.ts.snap
+++ b/src/tests/__snapshots__/ActionBar.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ActionBar snapshot test > renders correctly 1`] = `"<!--v-if-->"`;
diff --git a/src/tests/__snapshots__/ActionsList.spec.ts.snap b/src/tests/__snapshots__/ActionsList.spec.ts.snap
index ec5a7627..801dec0c 100644
--- a/src/tests/__snapshots__/ActionsList.spec.ts.snap
+++ b/src/tests/__snapshots__/ActionsList.spec.ts.snap
@@ -1,13 +1,13 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ActionsList snapshot test > renders correctly 1`] = `
-"<span data-v-99cceb08=\\"\\" class=\\"action-list\\"><div data-v-99cceb08=\\"\\" class=\\"action-list--right\\"><div data-v-99cceb08=\\"\\"><transition-stub data-v-99cceb08=\\"\\" name=\\"action-list__slide-fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\"><div data-v-99cceb08=\\"\\" class=\\"action-list__item\\"><!-- @slot Scoped slot para renderização customizada das 'actions'.
+"<span data-v-99cceb08="" class="action-list"><div data-v-99cceb08="" class="action-list--right"><div data-v-99cceb08=""><transition-stub data-v-99cceb08="" name="action-list__slide-fade" appear="false" persisted="false" css="true"><div data-v-99cceb08="" class="action-list__item"><!-- @slot Scoped slot para renderização customizada das 'actions'.
 							A propriedade 'list', que pode ser acessada através do slot,
 							representa o array de actions a ser exibido.
-						--></div></transition-stub></div><div data-v-99cceb08=\\"\\"><transition-stub data-v-99cceb08=\\"\\" name=\\"action-list__slide-fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\"><div data-v-99cceb08=\\"\\" class=\\"action-list__item--left-bordered\\"><!-- @slot Scoped slot para renderização customizada das 'actions'.
+						--></div></transition-stub></div><div data-v-99cceb08=""><transition-stub data-v-99cceb08="" name="action-list__slide-fade" appear="false" persisted="false" css="true"><div data-v-99cceb08="" class="action-list__item--left-bordered"><!-- @slot Scoped slot para renderização customizada das 'actions'.
 							A propriedade 'list', que pode ser acessada através do slot,
 							representa o array de actions a ser exibido.
-						--></div></transition-stub></div><div data-v-99cceb08=\\"\\"><transition-stub data-v-99cceb08=\\"\\" name=\\"action-list__slide-fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\"><!--v-if--></transition-stub></div><div data-v-99cceb08=\\"\\"><transition-stub data-v-99cceb08=\\"\\" name=\\"action-list__slide-fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\"><!--v-if--></transition-stub></div><div data-v-99cceb08=\\"\\" class=\\"action-list__item--left-bordered\\"><!-- @slot Slot para renderização customizada do conteúdo do item
+						--></div></transition-stub></div><div data-v-99cceb08=""><transition-stub data-v-99cceb08="" name="action-list__slide-fade" appear="false" persisted="false" css="true"><!--v-if--></transition-stub></div><div data-v-99cceb08=""><transition-stub data-v-99cceb08="" name="action-list__slide-fade" appear="false" persisted="false" css="true"><!--v-if--></transition-stub></div><div data-v-99cceb08="" class="action-list__item--left-bordered"><!-- @slot Slot para renderização customizada do conteúdo do item
 					de expandir/colapsar a lista
 				-->Mais ações</div></div></span>"
 `;
diff --git a/src/tests/__snapshots__/Alert.spec.ts.snap b/src/tests/__snapshots__/Alert.spec.ts.snap
index eb1c262d..34ad0969 100644
--- a/src/tests/__snapshots__/Alert.spec.ts.snap
+++ b/src/tests/__snapshots__/Alert.spec.ts.snap
@@ -1,7 +1,7 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Alert snapshot test > renders correctly 1`] = `
-"<span data-v-3f4a8ec2=\\"\\" id=\\"alert\\"><div data-v-3f4a8ec2=\\"\\" class=\\"alert alert__container--info\\"><div data-v-3f4a8ec2=\\"\\" class=\\"alert__body\\"><div data-v-3f4a8ec2=\\"\\"><svg data-v-3f4a8ec2=\\"\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" aria-labelledby=\\"info-outline\\" role=\\"presentation\\" class=\\"alert__icon--info\\"><g fill=\\"currentColor\\"></g></svg></div><span data-v-3f4a8ec2=\\"\\" class=\\"alert__text\\">Texto do alerta</span></div>
+"<span data-v-3f4a8ec2="" id="alert"><div data-v-3f4a8ec2="" class="alert alert__container--info"><div data-v-3f4a8ec2="" class="alert__body"><div data-v-3f4a8ec2=""><svg data-v-3f4a8ec2="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="info-outline" role="presentation" class="alert__icon--info"><g fill="currentColor"></g></svg></div><span data-v-3f4a8ec2="" class="alert__text">Texto do alerta</span></div>
 <!--v-if-->
 </div></span>"
 `;
diff --git a/src/tests/__snapshots__/AlertCard.spec.ts.snap b/src/tests/__snapshots__/AlertCard.spec.ts.snap
index 9528637f..76fe2409 100644
--- a/src/tests/__snapshots__/AlertCard.spec.ts.snap
+++ b/src/tests/__snapshots__/AlertCard.spec.ts.snap
@@ -1,7 +1,7 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`AlertCard snapshot test > renders correctly 1`] = `
-"<span data-v-45f89aca=\\"\\" id=\\"alert-card\\"><div data-v-45f89aca=\\"\\" class=\\"alert-card__container\\"><!--v-if--><div data-v-45f89aca=\\"\\" class=\\"alert-card__content-container\\"><span data-v-45f89aca=\\"\\" class=\\"alert-card__title--info\\">Título do AlertCard</span><!-- @slot Slot usado para inserção de conteúdo customizado no subtítulo. --><span data-v-45f89aca=\\"\\" class=\\"alert-card__subtitle mt-2\\">Subtítulo do AlertCard</span>
+"<span data-v-45f89aca="" id="alert-card"><div data-v-45f89aca="" class="alert-card__container"><!--v-if--><div data-v-45f89aca="" class="alert-card__content-container"><span data-v-45f89aca="" class="alert-card__title--info">Título do AlertCard</span><!-- @slot Slot usado para inserção de conteúdo customizado no subtítulo. --><span data-v-45f89aca="" class="alert-card__subtitle mt-2">Subtítulo do AlertCard</span>
 <!-- @slot Slot usado para inserção de conteúdo adicional no AlertCard
 					abaixo do subtítulo. -->
 </div>
diff --git a/src/tests/__snapshots__/Badge.spec.ts.snap b/src/tests/__snapshots__/Badge.spec.ts.snap
index b65081cd..a66b41a8 100644
--- a/src/tests/__snapshots__/Badge.spec.ts.snap
+++ b/src/tests/__snapshots__/Badge.spec.ts.snap
@@ -1,7 +1,7 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Badge > renders correctly 1`] = `
-"<div data-v-0d3d5e64=\\"\\" class=\\"badge__container badge--gray badge--md\\">
-  <div data-v-0d3d5e64=\\"\\" class=\\"badge__content--md\\">Badge</div>
+"<div data-v-0d3d5e64="" class="badge__container badge--gray badge--md">
+  <div data-v-0d3d5e64="" class="badge__content--md">Badge</div>
 </div>"
 `;
diff --git a/src/tests/__snapshots__/BarChart.spec.ts.snap b/src/tests/__snapshots__/BarChart.spec.ts.snap
index 60704714..1b0c12f4 100644
--- a/src/tests/__snapshots__/BarChart.spec.ts.snap
+++ b/src/tests/__snapshots__/BarChart.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`BarChart > renders correctly 1`] = `"<span data-v-9fd181ea=\\"\\"><div data-v-9fd181ea=\\"\\" class=\\"responsive-container\\"><bar-stub data-v-9fd181ea=\\"\\" data=\\"[object Object]\\" options=\\"[object Object]\\" plugins=\\"\\" datasetidkey=\\"label\\" is=\\"bar\\"></bar-stub></div></span>"`;
+exports[`BarChart > renders correctly 1`] = `"<span data-v-9fd181ea=""><div data-v-9fd181ea="" class="responsive-container"><bar-stub data-v-9fd181ea="" data="[object Object]" options="[object Object]" plugins="" datasetidkey="label" is="bar"></bar-stub></div></span>"`;
diff --git a/src/tests/__snapshots__/BottomSheet.spec.ts.snap b/src/tests/__snapshots__/BottomSheet.spec.ts.snap
index 8c137297..ca58304b 100644
--- a/src/tests/__snapshots__/BottomSheet.spec.ts.snap
+++ b/src/tests/__snapshots__/BottomSheet.spec.ts.snap
@@ -1,19 +1,19 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`BottomSheet > renders correctly 1`] = `
-"<div data-v-4053a7e3=\\"\\">
-  <div data-v-4053a7e3=\\"\\" class=\\"backdrop__show\\">
-    <div data-v-4053a7e3=\\"\\" class=\\"bottom-sheet__show\\">
-      <div data-v-4053a7e3=\\"\\" class=\\"bottom-sheet__header-border\\">
-        <div data-v-4053a7e3=\\"\\" class=\\"bottom-sheet__header-border-line\\"></div>
+"<div data-v-4053a7e3="">
+  <div data-v-4053a7e3="" class="backdrop__show">
+    <div data-v-4053a7e3="" class="bottom-sheet__show">
+      <div data-v-4053a7e3="" class="bottom-sheet__header-border">
+        <div data-v-4053a7e3="" class="bottom-sheet__header-border-line"></div>
       </div>
-      <div data-v-4053a7e3=\\"\\" class=\\"bottom-sheet__header\\">
-        <div data-v-4053a7e3=\\"\\" class=\\"bottom-sheet__title\\">Qual o segredo da vida?</div>
-        <div data-v-4053a7e3=\\"\\" class=\\"bottom-sheet__close-icon\\"><svg data-v-4053a7e3=\\"\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" aria-labelledby=\\"x-outline\\" role=\\"presentation\\">
-            <g fill=\\"#29333D\\"></g>
+      <div data-v-4053a7e3="" class="bottom-sheet__header">
+        <div data-v-4053a7e3="" class="bottom-sheet__title">Qual o segredo da vida?</div>
+        <div data-v-4053a7e3="" class="bottom-sheet__close-icon"><svg data-v-4053a7e3="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-labelledby="x-outline" role="presentation">
+            <g fill="#29333D"></g>
           </svg></div>
       </div>
-      <div data-v-4053a7e3=\\"\\" class=\\"bottom-sheet__content\\">
+      <div data-v-4053a7e3="" class="bottom-sheet__content">
         <!-- @slot Scoped slot usado para inserção de conteúdo customizado. -->
       </div>
     </div>
diff --git a/src/tests/__snapshots__/Box.spec.ts.snap b/src/tests/__snapshots__/Box.spec.ts.snap
index def1e33d..3d0e1e06 100644
--- a/src/tests/__snapshots__/Box.spec.ts.snap
+++ b/src/tests/__snapshots__/Box.spec.ts.snap
@@ -1,16 +1,16 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Spacer snapshot test > renders correctly 1`] = `
-"<div data-v-f9290560=\\"\\" class=\\"box--gray\\">
+"<div data-v-f9290560="" class="box--gray">
   <!--
 		Evento emitido quando o wrapper é clicado
 		@event cds-click
 		@type {Event}
 	-->
-  <div data-v-f9290560=\\"\\" class=\\"clickable__container--not-clickable box__container\\">
+  <div data-v-f9290560="" class="clickable__container--not-clickable box__container">
     <!-- @slot Slot utilizado para renderização do conteúdo interno do Box.-->
-    <div data-v-9cc3ee57=\\"\\" data-v-f9290560=\\"\\" class=\\"spacer\\">
-      <div style=\\"width: 100px; height: 100px; background-color: rgb(42, 192, 146); border-radius: 20px;\\"></div>
+    <div data-v-9cc3ee57="" data-v-f9290560="" class="spacer">
+      <div style="width: 100px; height: 100px; background-color: rgb(42, 192, 146); border-radius: 20px;"></div>
     </div>
   </div>
 </div>"
diff --git a/src/tests/__snapshots__/Breadcrumb.spec.ts.snap b/src/tests/__snapshots__/Breadcrumb.spec.ts.snap
index e9c0cbde..bd2cd78e 100644
--- a/src/tests/__snapshots__/Breadcrumb.spec.ts.snap
+++ b/src/tests/__snapshots__/Breadcrumb.spec.ts.snap
@@ -1,49 +1,16 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Breadcrumb snapshot test > renders correctly 1`] = `
-"<nav data-v-1a0f46d9=\\"\\">
-  <ul data-v-1a0f46d9=\\"\\" class=\\"breadcrumb\\">
-    <li data-v-1a0f46d9=\\"\\" role=\\"presentation\\">
-      <!--
-		Evento emitido quando o wrapper é clicado
-		@event cds-click
-		@type {Event}
-	-->
-      <div data-v-1a0f46d9=\\"\\" class=\\"clickable__container--clickable\\">
-        <router-link data-v-1a0f46d9=\\"\\" to=\\"/reports\\" class=\\"breadcrumb__link\\"><svg data-v-1a0f46d9=\\"\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"15\\" height=\\"15\\" viewBox=\\"0 0 24 24\\" aria-labelledby=\\"home-outline\\" role=\\"presentation\\">
-            <g fill=\\"currentColor\\"></g>
-          </svg>
-          <div data-v-9cc3ee57=\\"\\" data-v-1a0f46d9=\\"\\" class=\\"spacer\\">Relatórios</div>
-        </router-link>
-      </div>
+"<nav data-v-1a0f46d9="">
+  <ul data-v-1a0f46d9="" class="breadcrumb">
+    <li data-v-1a0f46d9="" role="presentation">
+      <cds-clickable-stub data-v-1a0f46d9="" clickable="true"></cds-clickable-stub>
     </li>
-    <li data-v-1a0f46d9=\\"\\" role=\\"presentation\\">
-      <div data-v-9cc3ee57=\\"\\" data-v-1a0f46d9=\\"\\" class=\\"spacer breadcrumb__item\\"><svg data-v-1a0f46d9=\\"\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 24 24\\" aria-labelledby=\\"caret-right-outline\\" role=\\"presentation\\" class=\\"breadcrumb__separator\\">
-          <g fill=\\"currentColor\\"></g>
-        </svg>
-        <router-link data-v-1a0f46d9=\\"\\" to=\\"/individualized-reports\\" class=\\"breadcrumb__link\\">
-          <!--
-		Evento emitido quando o wrapper é clicado
-		@event cds-click
-		@type {Event}
-	-->
-          <div data-v-1a0f46d9=\\"\\" class=\\"clickable__container--clickable\\">Relatórios individualizados</div>
-        </router-link>
-      </div>
+    <li data-v-1a0f46d9="" role="presentation">
+      <cds-spacer-stub data-v-1a0f46d9="" padding="0" paddingtop="0" paddingright="0" paddingbottom="0" paddingleft="0" margin="0" margintop="0" marginright="1" marginbottom="0" marginleft="1" class="breadcrumb__item"></cds-spacer-stub>
     </li>
-    <li data-v-1a0f46d9=\\"\\" role=\\"presentation\\">
-      <div data-v-9cc3ee57=\\"\\" data-v-1a0f46d9=\\"\\" class=\\"spacer breadcrumb__item\\"><svg data-v-1a0f46d9=\\"\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"16\\" height=\\"16\\" viewBox=\\"0 0 24 24\\" aria-labelledby=\\"caret-right-outline\\" role=\\"presentation\\" class=\\"breadcrumb__separator\\">
-          <g fill=\\"currentColor\\"></g>
-        </svg>
-        <router-link data-v-1a0f46d9=\\"\\" to=\\"/users-reports\\" class=\\"breadcrumb__link\\">
-          <!--
-		Evento emitido quando o wrapper é clicado
-		@event cds-click
-		@type {Event}
-	-->
-          <div data-v-1a0f46d9=\\"\\" class=\\"clickable__container--not-clickable\\">Relatório de usuários</div>
-        </router-link>
-      </div>
+    <li data-v-1a0f46d9="" role="presentation">
+      <cds-spacer-stub data-v-1a0f46d9="" padding="0" paddingtop="0" paddingright="0" paddingbottom="0" paddingleft="0" margin="0" margintop="0" marginright="1" marginbottom="0" marginleft="1" class="breadcrumb__item"></cds-spacer-stub>
     </li>
   </ul>
 </nav>"
diff --git a/src/tests/__snapshots__/Button.spec.ts.snap b/src/tests/__snapshots__/Button.spec.ts.snap
index 50741a0e..1f931273 100644
--- a/src/tests/__snapshots__/Button.spec.ts.snap
+++ b/src/tests/__snapshots__/Button.spec.ts.snap
@@ -1,7 +1,7 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders correctly 1`] = `
-"<button data-v-3c9d0845=\\"\\" class=\\"button__container button--green--active button-size--md\\">
+"<button data-v-3c9d0845="" class="button__container button--green--active button-size--md">
   <!--v-if-->
   <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Botão
 </button>"
diff --git a/src/tests/__snapshots__/CalloutCard.spec.ts.snap b/src/tests/__snapshots__/CalloutCard.spec.ts.snap
index 2aed883c..9952b2c6 100644
--- a/src/tests/__snapshots__/CalloutCard.spec.ts.snap
+++ b/src/tests/__snapshots__/CalloutCard.spec.ts.snap
@@ -1,14 +1,14 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CalloutCard > renders correctly 1`] = `
-"<span id=\\"callout-card\\"><div class=\\"callout-card__container\\"><div class=\\"image__container\\"><img class=\\"image__content\\" src=\\"https://cdn-icons-png.flaticon.com/512/7486/7486747.png\\" alt=\\"Imagem de CalloutCard\\"></div><div class=\\"content__container\\"><div class=\\"content\\"><p class=\\"content__title\\">Título do CalloutCard</p><span class=\\"content__text\\"><!-- @slot Slot usado para inserção de conteúdo customizado no texto. -->Texto do CalloutCar</span></div>
+"<span id="callout-card"><div class="callout-card__container"><div class="image__container"><img class="image__content" src="https://cdn-icons-png.flaticon.com/512/7486/7486747.png" alt="Imagem de CalloutCard"></div><div class="content__container"><div class="content"><p class="content__title">Título do CalloutCard</p><span class="content__text"><!-- @slot Slot usado para inserção de conteúdo customizado no texto. -->Texto do CalloutCar</span></div>
 <div>
   <!-- @slot Slot usado para inserção de conteúdo customizado no lugar do botão de ação. -->
   <!--
 							Evento que indica que o Botão foi clicado
 							@event action-button-click
 							@type {Event}
-						--><button data-v-3c9d0845=\\"\\" class=\\"button__container button--green--active button-size--md\\" id=\\"content-button\\">
+						--><button data-v-3c9d0845="" class="button__container button--green--active button-size--md" id="content-button">
     <!--v-if-->
     <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Ok
   </button>
diff --git a/src/tests/__snapshots__/Card.spec.ts.snap b/src/tests/__snapshots__/Card.spec.ts.snap
index 13599b4e..eb7c9286 100644
--- a/src/tests/__snapshots__/Card.spec.ts.snap
+++ b/src/tests/__snapshots__/Card.spec.ts.snap
@@ -1,28 +1,28 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Card snapshot test > renders correctly 1`] = `
-"<div data-v-f9290560=\\"\\" data-v-c6c3362a=\\"\\" class=\\"box--gray\\">
+"<div data-v-f9290560="" data-v-c6c3362a="" class="box--gray">
   <!--
 		Evento emitido quando o wrapper é clicado
 		@event cds-click
 		@type {Event}
 	-->
-  <div data-v-f9290560=\\"\\" class=\\"clickable__container--not-clickable box__container\\">
+  <div data-v-f9290560="" class="clickable__container--not-clickable box__container">
     <!-- @slot Slot utilizado para renderização do conteúdo interno do Box.-->
-    <div data-v-9cc3ee57=\\"\\" data-v-f9290560=\\"\\" class=\\"spacer\\">
-      <div data-v-c6c3362a=\\"\\" class=\\"card__extra-container\\">
-        <div data-v-c6c3362a=\\"\\" class=\\"card__extra\\">
+    <div data-v-9cc3ee57="" data-v-f9290560="" class="spacer">
+      <div data-v-c6c3362a="" class="card__extra-container">
+        <div data-v-c6c3362a="" class="card__extra">
           <!-- @slot Slot para incluir conteúdo adicional no canto superior direito do card.-->
         </div>
       </div>
-      <div data-v-c6c3362a=\\"\\" class=\\"\\">
+      <div data-v-c6c3362a="" class="">
         <!--v-if-->
-        <div data-v-c6c3362a=\\"\\" class=\\"card__spacer\\">
-          <div data-v-c6c3362a=\\"\\">
-            <p data-v-c6c3362a=\\"\\" class=\\"card__header\\">Card Title</p>
+        <div data-v-c6c3362a="" class="card__spacer">
+          <div data-v-c6c3362a="">
+            <p data-v-c6c3362a="" class="card__header">Card Title</p>
           </div>
-          <div data-v-c6c3362a=\\"\\">
-            <p data-v-c6c3362a=\\"\\" class=\\"card__body\\">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
+          <div data-v-c6c3362a="">
+            <p data-v-c6c3362a="" class="card__body">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
           </div>
           <!--v-if-->
         </div>
diff --git a/src/tests/__snapshots__/CarouselController.spec.ts.snap b/src/tests/__snapshots__/CarouselController.spec.ts.snap
index e8939aab..72a5028a 100644
--- a/src/tests/__snapshots__/CarouselController.spec.ts.snap
+++ b/src/tests/__snapshots__/CarouselController.spec.ts.snap
@@ -1,7 +1,7 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Button > renders correctly 1`] = `
-"<button data-v-3c9d0845=\\"\\" class=\\"button__container button--green--active button-size--md\\" total=\\"12\\" perpage=\\"4\\" propertyname=\\"Métricas\\">
+"<button data-v-3c9d0845="" class="button__container button--green--active button-size--md" total="12" perpage="4" propertyname="Métricas">
   <!--v-if-->
   <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Lorem ipsum
 </button>"
diff --git a/src/tests/__snapshots__/Checkbox.spec.ts.snap b/src/tests/__snapshots__/Checkbox.spec.ts.snap
index 36ab5cd9..5be716bc 100644
--- a/src/tests/__snapshots__/Checkbox.spec.ts.snap
+++ b/src/tests/__snapshots__/Checkbox.spec.ts.snap
@@ -1,7 +1,7 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Checkbox > renders correctly 1`] = `
-"<div data-v-75623c80=\\"\\" class=\\"cds-checkbox__container\\" value=\\"false\\">
-  <div data-v-75623c80=\\"\\" class=\\"cds-checkbox__input\\"><input data-v-75623c80=\\"\\" id=\\"cds-checkbox-option-input\\" type=\\"checkbox\\" name=\\"cds-checkbox-option\\" value=\\"false\\"><label data-v-75623c80=\\"\\" for=\\"cds-checkbox-option-input\\" class=\\"cds-checkbox__input--green cds-checkbox__input--unchecked\\"></label></div><label data-v-75623c80=\\"\\" class=\\"cds-checkbox__label\\" for=\\"cds-checkbox-option-input\\">checkbox test</label>
+"<div data-v-75623c80="" class="cds-checkbox__container">
+  <div data-v-75623c80="" class="cds-checkbox__input"><input data-v-75623c80="" id="cds-checkbox-option-input" type="checkbox" name="cds-checkbox-option" value="false"><label data-v-75623c80="" for="cds-checkbox-option-input" class="cds-checkbox__input--green cds-checkbox__input--unchecked"></label></div><label data-v-75623c80="" class="cds-checkbox__label" for="cds-checkbox-option-input">checkbox test</label>
 </div>"
 `;
diff --git a/src/tests/__snapshots__/CheckboxGroup.spec.ts.snap b/src/tests/__snapshots__/CheckboxGroup.spec.ts.snap
index a28c95ea..5dea087b 100644
--- a/src/tests/__snapshots__/CheckboxGroup.spec.ts.snap
+++ b/src/tests/__snapshots__/CheckboxGroup.spec.ts.snap
@@ -1,17 +1,17 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CheckboxGroup > renders correctly 1`] = `
-"<div data-v-5505c754=\\"\\" class=\\"checkbox__container\\"><label data-v-5505c754=\\"\\" class=\\"checkbox__label\\">Checkbox Group Test
+"<div data-v-5505c754="" class="checkbox__container"><label data-v-5505c754="" class="checkbox__label">Checkbox Group Test
     <!--v-if-->
   </label>
-  <div data-v-5505c754=\\"\\" class=\\"checkbox__item\\">
-    <div data-v-75623c80=\\"\\" data-v-5505c754=\\"\\" class=\\"cds-checkbox__container\\" id=\\"test-1\\">
-      <div data-v-75623c80=\\"\\" class=\\"cds-checkbox__input\\"><input data-v-75623c80=\\"\\" id=\\"test-1\\" type=\\"checkbox\\" name=\\"cds-checkbox-option\\" value=\\"false\\"><label data-v-75623c80=\\"\\" for=\\"test-1\\" class=\\"cds-checkbox__input--green cds-checkbox__input--unchecked\\"></label></div><label data-v-75623c80=\\"\\" class=\\"cds-checkbox__label\\" for=\\"test-1\\">Teste 1</label>
+  <div data-v-5505c754="" class="checkbox__item">
+    <div data-v-75623c80="" data-v-5505c754="" class="cds-checkbox__container" id="test-1">
+      <div data-v-75623c80="" class="cds-checkbox__input"><input data-v-75623c80="" id="test-1" type="checkbox" name="cds-checkbox-option" value="false"><label data-v-75623c80="" for="test-1" class="cds-checkbox__input--green cds-checkbox__input--unchecked"></label></div><label data-v-75623c80="" class="cds-checkbox__label" for="test-1">Teste 1</label>
     </div>
   </div>
-  <div data-v-5505c754=\\"\\" class=\\"checkbox__item\\">
-    <div data-v-75623c80=\\"\\" data-v-5505c754=\\"\\" class=\\"cds-checkbox__container\\" id=\\"test-2\\">
-      <div data-v-75623c80=\\"\\" class=\\"cds-checkbox__input\\"><input data-v-75623c80=\\"\\" id=\\"test-2\\" type=\\"checkbox\\" name=\\"cds-checkbox-option\\" value=\\"false\\"><label data-v-75623c80=\\"\\" for=\\"test-2\\" class=\\"cds-checkbox__input--green cds-checkbox__input--unchecked\\"></label></div><label data-v-75623c80=\\"\\" class=\\"cds-checkbox__label\\" for=\\"test-2\\">Teste 2</label>
+  <div data-v-5505c754="" class="checkbox__item">
+    <div data-v-75623c80="" data-v-5505c754="" class="cds-checkbox__container" id="test-2">
+      <div data-v-75623c80="" class="cds-checkbox__input"><input data-v-75623c80="" id="test-2" type="checkbox" name="cds-checkbox-option" value="false"><label data-v-75623c80="" for="test-2" class="cds-checkbox__input--green cds-checkbox__input--unchecked"></label></div><label data-v-75623c80="" class="cds-checkbox__label" for="test-2">Teste 2</label>
     </div>
   </div>
   <!--v-if-->
diff --git a/src/tests/__snapshots__/Chip.spec.ts.snap b/src/tests/__snapshots__/Chip.spec.ts.snap
index ec463cec..63f98323 100644
--- a/src/tests/__snapshots__/Chip.spec.ts.snap
+++ b/src/tests/__snapshots__/Chip.spec.ts.snap
@@ -1,13 +1,13 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Chip > renders correctly 1`] = `
-"<div data-v-711c594a=\\"\\" class=\\"chip__container\\">
-  <div data-v-711c594a=\\"\\" class=\\"chip__content--md\\">
-    <div data-v-711c594a=\\"\\" class=\\"chip__content-container\\" style=\\"max-width: 0px; padding-right: 11px; padding-left: 11px;\\">
-      <transition-stub data-v-711c594a=\\"\\" name=\\"fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+"<div data-v-711c594a="" class="chip__container" data-testid="chip-container">
+  <div data-v-711c594a="" class="chip__content--md">
+    <div data-v-711c594a="" class="chip__content-container" style="max-width: 0px; padding-right: 11px; padding-left: 11px;">
+      <transition-stub data-v-711c594a="" name="fade" appear="false" persisted="false" css="true">
         <!--v-if-->
       </transition-stub>
-      <div data-v-711c594a=\\"\\">Chip</div>
+      <div data-v-711c594a="">Chip</div>
     </div>
   </div>
 </div>"
diff --git a/src/tests/__snapshots__/CollapsibleContainer.spec.ts.snap b/src/tests/__snapshots__/CollapsibleContainer.spec.ts.snap
index df8f9206..79b3f166 100644
--- a/src/tests/__snapshots__/CollapsibleContainer.spec.ts.snap
+++ b/src/tests/__snapshots__/CollapsibleContainer.spec.ts.snap
@@ -1,8 +1,12 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`CollapsibleContainer > renders correctly 1`] = `
-"<span id=\\"collapsible-container\\" value=\\"true\\"><div class=\\"collapsible-container__item\\"><span class=\\"collapsible-container__chevron--closed\\"></span>
+"<span id="collapsible-container"><div class="collapsible-container__item"><span class="collapsible-container__chevron--opened"></span>
 <!-- @slot Slot para renderização do conteúdo do header/title customizado do item
-			--><span class=\\"collapsible-container__title\\">Seu universo expandido</span></div>
-<!--v-if--></span>"
+			--><span class="collapsible-container__title">Seu universo expandido</span></div>
+<div class="collapsible-container__content" data-testid="collapsible-content">
+  <!-- @slot Slot para renderização conteúdo do container
+				quando o componente está expandido
+			-->
+</div></span>"
 `;
diff --git a/src/tests/__snapshots__/ColorPicker.spec.ts.snap b/src/tests/__snapshots__/ColorPicker.spec.ts.snap
index b61d2948..2c28fe0f 100644
--- a/src/tests/__snapshots__/ColorPicker.spec.ts.snap
+++ b/src/tests/__snapshots__/ColorPicker.spec.ts.snap
@@ -1,78 +1,78 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ColorPicker > renders correctly 1`] = `
-"<div data-v-2c841161=\\"\\">
-  <div data-v-2c841161=\\"\\" class=\\"color-picker__label\\">Label</div>
-  <div data-v-2c841161=\\"\\" class=\\"color-picker__container\\">
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--#\\">
+"<div data-v-2c841161="">
+  <div data-v-2c841161="" class="color-picker__label">Label</div>
+  <div data-v-2c841161="" class="color-picker__container">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--#">
         <!--v-if-->
       </div>
     </div>
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--0\\">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--0">
         <!--v-if-->
       </div>
     </div>
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--0\\">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--0">
         <!--v-if-->
       </div>
     </div>
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--0\\">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--0">
         <!--v-if-->
       </div>
     </div>
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--0\\">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--0">
         <!--v-if-->
       </div>
     </div>
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--0\\">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--0">
         <!--v-if-->
       </div>
     </div>
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--0\\">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--0">
         <!--v-if-->
       </div>
     </div>
   </div>
-  <div data-v-2c841161=\\"\\" class=\\"color-picker__container\\">
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--#\\">
+  <div data-v-2c841161="" class="color-picker__container">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--#">
         <!--v-if-->
       </div>
     </div>
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--0\\">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--0">
         <!--v-if-->
       </div>
     </div>
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--0\\">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--0">
         <!--v-if-->
       </div>
     </div>
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--0\\">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--0">
         <!--v-if-->
       </div>
     </div>
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--0\\">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--0">
         <!--v-if-->
       </div>
     </div>
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--0\\">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--0">
         <!--v-if-->
       </div>
     </div>
-    <div data-v-2c841161=\\"\\">
-      <div data-v-2c841161=\\"\\" class=\\"color-picker__swatch--0\\">
+    <div data-v-2c841161="">
+      <div data-v-2c841161="" class="color-picker__swatch--0">
         <!--v-if-->
       </div>
     </div>
diff --git a/src/tests/__snapshots__/DialogModal.spec.ts.snap b/src/tests/__snapshots__/DialogModal.spec.ts.snap
index 603c43b8..cfabbc82 100644
--- a/src/tests/__snapshots__/DialogModal.spec.ts.snap
+++ b/src/tests/__snapshots__/DialogModal.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`DialogModal > renders correctly 1`] = `"<!--v-if-->"`;
diff --git a/src/tests/__snapshots__/DonutChart.spec.ts.snap b/src/tests/__snapshots__/DonutChart.spec.ts.snap
index cf9e7c2a..9f77cf3b 100644
--- a/src/tests/__snapshots__/DonutChart.spec.ts.snap
+++ b/src/tests/__snapshots__/DonutChart.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`DonutChart > renders correctly 1`] = `"<span data-v-2c35dc11=\\"\\"><div data-v-2c35dc11=\\"\\" class=\\"responsive-container\\"><doughnut-stub data-v-2c35dc11=\\"\\" data=\\"[object Object]\\" options=\\"[object Object]\\" plugins=\\"\\" datasetidkey=\\"label\\"></doughnut-stub></div></span>"`;
+exports[`DonutChart > renders correctly 1`] = `"<span data-v-2c35dc11=""><div data-v-2c35dc11="" class="responsive-container"><doughnut-stub data-v-2c35dc11="" data="[object Object]" options="[object Object]" plugins="" datasetidkey="label"></doughnut-stub></div></span>"`;
diff --git a/src/tests/__snapshots__/EmptyState.spec.ts.snap b/src/tests/__snapshots__/EmptyState.spec.ts.snap
index adc5203f..6a1465e7 100644
--- a/src/tests/__snapshots__/EmptyState.spec.ts.snap
+++ b/src/tests/__snapshots__/EmptyState.spec.ts.snap
@@ -1,11 +1,11 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`EmptyState > renders correctly 1`] = `
-"<div data-v-f262d0f3=\\"\\" class=\\"empty-state\\">
+"<div data-v-f262d0f3="" class="empty-state">
   <!-- @slot Slot usado para inserção de conteúdo gráfico
-			customizado como alternativa a imagem do empty-state. --><img data-v-f262d0f3=\\"\\" class=\\"empty-state__image\\" src=\\"\\" alt=\\"Imagem de Empty State\\">
-  <div data-v-f262d0f3=\\"\\" class=\\"empty-state__title\\">EmptyState title</div>
-  <div data-v-f262d0f3=\\"\\" class=\\"empty-state__text\\">
+			customizado como alternativa a imagem do empty-state. --><img data-v-f262d0f3="" class="empty-state__image" src="" alt="Imagem de Empty State">
+  <div data-v-f262d0f3="" class="empty-state__title">EmptyState title</div>
+  <div data-v-f262d0f3="" class="empty-state__text">
     <!-- @slot Slot usado para inserção de conteúdo customizado no texto do corpo do
 				empty state. -->EmptyState text
   </div>
@@ -13,7 +13,7 @@ exports[`EmptyState > renders correctly 1`] = `
 			Evento emitido quando o botão do Empty State é clicado
 			@event action-button-click
 			@type {Event}
-		--><button data-v-3c9d0845=\\"\\" data-v-f262d0f3=\\"\\" class=\\"button__container button--green--active button-size--md empty-state__button\\">
+		--><button data-v-3c9d0845="" data-v-f262d0f3="" class="button__container button--green--active button-size--md empty-state__button">
     <!--v-if-->
     <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Finalizar
   </button>
diff --git a/src/tests/__snapshots__/FileViewer.spec.ts.snap b/src/tests/__snapshots__/FileViewer.spec.ts.snap
index 959fa971..7589f8e6 100644
--- a/src/tests/__snapshots__/FileViewer.spec.ts.snap
+++ b/src/tests/__snapshots__/FileViewer.spec.ts.snap
@@ -1,14 +1,14 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`FileViewer > renders correctly 1`] = `
-"<div data-v-33f5555b=\\"\\" class=\\"file-viewer file-viewer--green\\" tabindex=\\"0\\">
-  <div data-v-33f5555b=\\"\\" class=\\"file-viewer__image\\">
-    <div data-v-33f5555b=\\"\\" class=\\"file-viewer__extension\\">jpeg</div>
+"<div data-v-33f5555b="" class="file-viewer file-viewer--green" tabindex="0">
+  <div data-v-33f5555b="" class="file-viewer__image">
+    <div data-v-33f5555b="" class="file-viewer__extension">jpeg</div>
   </div>
-  <div data-v-33f5555b=\\"\\" class=\\"file-viewer__info\\">
-    <div data-v-33f5555b=\\"\\" class=\\"file-viewer__label\\">Comprovante de residência</div>
-    <div data-v-33f5555b=\\"\\" class=\\"file-viewer__file-name\\">https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg</div>
-    <div data-v-33f5555b=\\"\\"><a data-v-33f5555b=\\"\\" class=\\"file-viewer__download file-viewer__download--green\\"> Baixar arquivo </a></div>
+  <div data-v-33f5555b="" class="file-viewer__info">
+    <div data-v-33f5555b="" class="file-viewer__label">Comprovante de residência</div>
+    <div data-v-33f5555b="" class="file-viewer__file-name">https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg</div>
+    <div data-v-33f5555b=""><a data-v-33f5555b="" class="file-viewer__download file-viewer__download--green"> Baixar arquivo </a></div>
   </div>
 </div>
 <!--v-if-->"
diff --git a/src/tests/__snapshots__/Highlight.spec.ts.snap b/src/tests/__snapshots__/Highlight.spec.ts.snap
index e68c664c..59ea456f 100644
--- a/src/tests/__snapshots__/Highlight.spec.ts.snap
+++ b/src/tests/__snapshots__/Highlight.spec.ts.snap
@@ -1,7 +1,7 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Highlight > renders correctly 1`] = `
-"<mark data-v-eddeabb9=\\"\\" class=\\"highlight__container highlight__container--success\\" style=\\"--duration: 1s; --delay: 0s;\\">
+"<mark data-v-eddeabb9="" class="highlight__container highlight__container--success" style="--duration: 1s; --delay: 0s;">
   <!-- @slot Slot usado para especificar o texto que receberá o highlight. -->Texto
 </mark>"
 `;
diff --git a/src/tests/__snapshots__/IconButton.spec.ts.snap b/src/tests/__snapshots__/IconButton.spec.ts.snap
index 78b7afa7..4dc7308d 100644
--- a/src/tests/__snapshots__/IconButton.spec.ts.snap
+++ b/src/tests/__snapshots__/IconButton.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`IconButton > renders correctly 1`] = `"<span data-v-f6045c74=\\"\\" id=\\"cds-icon-button\\"><span data-v-f6045c74=\\"\\"><button data-v-f6045c74=\\"\\" class=\\"cds-icon-button__container cds-icon-button--lg cds-icon-button__container--white\\"><cds-icon-stub data-v-f6045c74=\\"\\" name=\\"trash-outline\\" width=\\"24\\" height=\\"24\\" color=\\"currentColor\\" dark=\\"false\\" light=\\"false\\" class=\\"cds-icon-button__icon\\"></cds-icon-stub></button></span></span>"`;
+exports[`IconButton > renders correctly 1`] = `"<span data-v-f6045c74="" id="cds-icon-button"><span data-v-f6045c74=""><button data-v-f6045c74="" class="cds-icon-button__container cds-icon-button--lg cds-icon-button__container--white"><cds-icon-stub data-v-f6045c74="" name="trash-outline" width="24" height="24" color="currentColor" dark="false" light="false" class="cds-icon-button__icon"></cds-icon-stub></button></span></span>"`;
diff --git a/src/tests/__snapshots__/InnerTabs.spec.ts.snap b/src/tests/__snapshots__/InnerTabs.spec.ts.snap
index 71ae82f6..57b4ba51 100644
--- a/src/tests/__snapshots__/InnerTabs.spec.ts.snap
+++ b/src/tests/__snapshots__/InnerTabs.spec.ts.snap
@@ -1,43 +1,43 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`InnerTabs > renders correctly 1`] = `
-"<div id=\\"inner-tabs\\">
-  <div class=\\"inner-tabs__header-container\\">
-    <ul class=\\"inner-tabs__header\\">
-      <li role=\\"presentation\\"><a role=\\"tab\\" href=\\"javascript:void(0)\\" target=\\"_self\\" class=\\"inner-tabs__tab inner-tabs__tab--active\\">Dummy title 1</a>
-        <div class=\\"tab__indicator--active--green\\" style=\\"--indicatorColor: #2AC092;\\"></div>
+"<div id="inner-tabs">
+  <div class="inner-tabs__header-container">
+    <ul class="inner-tabs__header">
+      <li role="presentation"><a role="tab" href="javascript:void(0)" target="_self" class="inner-tabs__tab inner-tabs__tab--active">Dummy title 1</a>
+        <div class="tab__indicator--active--green" style="--indicatorColor: #2AC092;"></div>
       </li>
-      <li role=\\"presentation\\"><a role=\\"tab\\" href=\\"javascript:void(0)\\" target=\\"_self\\" class=\\"inner-tabs__tab inner-tabs__tab--inactive\\">Dummy title 2</a>
-        <div class=\\"\\" style=\\"--indicatorColor: #2AC092;\\"></div>
+      <li role="presentation"><a role="tab" href="javascript:void(0)" target="_self" class="inner-tabs__tab inner-tabs__tab--inactive">Dummy title 2</a>
+        <div class="" style="--indicatorColor: #2AC092;"></div>
       </li>
-      <li role=\\"presentation\\"><a role=\\"tab\\" href=\\"javascript:void(0)\\" target=\\"_self\\" class=\\"inner-tabs__tab inner-tabs__tab--inactive\\">Dummy title 3</a>
-        <div class=\\"\\" style=\\"--indicatorColor: #2AC092;\\"></div>
+      <li role="presentation"><a role="tab" href="javascript:void(0)" target="_self" class="inner-tabs__tab inner-tabs__tab--inactive">Dummy title 3</a>
+        <div class="" style="--indicatorColor: #2AC092;"></div>
       </li>
-      <li role=\\"presentation\\"><a role=\\"tab\\" href=\\"javascript:void(0)\\" target=\\"_self\\" class=\\"inner-tabs__tab inner-tabs__tab--inactive\\">Dummy title 4</a>
-        <div class=\\"\\" style=\\"--indicatorColor: #2AC092;\\"></div>
+      <li role="presentation"><a role="tab" href="javascript:void(0)" target="_self" class="inner-tabs__tab inner-tabs__tab--inactive">Dummy title 4</a>
+        <div class="" style="--indicatorColor: #2AC092;"></div>
       </li>
     </ul>
   </div>
-  <div class=\\"inner-tabs__content\\">
-    <div role=\\"tabpanel\\" class=\\"content__pane content__pane--active\\">
+  <div class="inner-tabs__content">
+    <div role="tabpanel" class="content__pane content__pane--active">
       <!-- @slot Slot para renderização customizada do conteúdo das abas
 					os slots são nomeados de acordo com os \`name\` das tabs, cada slot
 					nomeado é exibido de acordo com a aba ativa correspondente
 				-->
     </div>
-    <div role=\\"tabpanel\\" class=\\"content__pane content__pane--inactive\\">
+    <div role="tabpanel" class="content__pane content__pane--inactive">
       <!-- @slot Slot para renderização customizada do conteúdo das abas
 					os slots são nomeados de acordo com os \`name\` das tabs, cada slot
 					nomeado é exibido de acordo com a aba ativa correspondente
 				-->
     </div>
-    <div role=\\"tabpanel\\" class=\\"content__pane content__pane--inactive\\">
+    <div role="tabpanel" class="content__pane content__pane--inactive">
       <!-- @slot Slot para renderização customizada do conteúdo das abas
 					os slots são nomeados de acordo com os \`name\` das tabs, cada slot
 					nomeado é exibido de acordo com a aba ativa correspondente
 				-->
     </div>
-    <div role=\\"tabpanel\\" class=\\"content__pane content__pane--inactive\\">
+    <div role="tabpanel" class="content__pane content__pane--inactive">
       <!-- @slot Slot para renderização customizada do conteúdo das abas
 					os slots são nomeados de acordo com os \`name\` das tabs, cada slot
 					nomeado é exibido de acordo com a aba ativa correspondente
diff --git a/src/tests/__snapshots__/InteractionBlockingOverlay.spec.ts.snap b/src/tests/__snapshots__/InteractionBlockingOverlay.spec.ts.snap
deleted file mode 100644
index 9b030e09..00000000
--- a/src/tests/__snapshots__/InteractionBlockingOverlay.spec.ts.snap
+++ /dev/null
@@ -1,3 +0,0 @@
-// Vitest Snapshot v1
-
-exports[`InteractionBlockingOverlay > renders correctly 1`] = `"<!--v-if-->"`;
diff --git a/src/tests/__snapshots__/LineChart.spec.ts.snap b/src/tests/__snapshots__/LineChart.spec.ts.snap
index ab1cf113..b513c6b1 100644
--- a/src/tests/__snapshots__/LineChart.spec.ts.snap
+++ b/src/tests/__snapshots__/LineChart.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`LineChart > renders correctly 1`] = `"<span data-v-e95cf64e=\\"\\"><div data-v-e95cf64e=\\"\\" class=\\"responsive-container\\"><line-stub data-v-e95cf64e=\\"\\" data=\\"[object Object]\\" options=\\"[object Object]\\" plugins=\\"\\" datasetidkey=\\"label\\"></line-stub></div></span>"`;
+exports[`LineChart > renders correctly 1`] = `"<span data-v-e95cf64e=""><div data-v-e95cf64e="" class="responsive-container"><line-stub data-v-e95cf64e="" data="[object Object]" options="[object Object]" plugins="" datasetidkey="label"></line-stub></div></span>"`;
diff --git a/src/tests/__snapshots__/LoadingBar.spec.ts.snap b/src/tests/__snapshots__/LoadingBar.spec.ts.snap
index e2009a7a..5ac9698a 100644
--- a/src/tests/__snapshots__/LoadingBar.spec.ts.snap
+++ b/src/tests/__snapshots__/LoadingBar.spec.ts.snap
@@ -1,9 +1,9 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`LoadingBar > renders correctly 1`] = `
-"<div data-v-cc77174b=\\"\\">
-  <div data-v-cc77174b=\\"\\" class=\\"loading-bar__container\\">
-    <div data-v-cc77174b=\\"\\" class=\\"loading-bar\\"></div>
+"<div data-v-cc77174b="">
+  <div data-v-cc77174b="" class="loading-bar__container">
+    <div data-v-cc77174b="" class="loading-bar"></div>
   </div>
 </div>"
 `;
diff --git a/src/tests/__snapshots__/LoadingIndicator.spec.ts.snap b/src/tests/__snapshots__/LoadingIndicator.spec.ts.snap
index 41c731cd..c10d8953 100644
--- a/src/tests/__snapshots__/LoadingIndicator.spec.ts.snap
+++ b/src/tests/__snapshots__/LoadingIndicator.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`LoadingIndicator > renders correctly 1`] = `"<div data-v-2f1c657e=\\"\\" class=\\"loading-indicator--green\\"></div>"`;
+exports[`LoadingIndicator > renders correctly 1`] = `"<div data-v-2f1c657e="" class="loading-indicator--green"></div>"`;
diff --git a/src/tests/__snapshots__/MobileNavigation.spec.ts.snap b/src/tests/__snapshots__/MobileNavigation.spec.ts.snap
index 97e4ffd0..369d7a97 100644
--- a/src/tests/__snapshots__/MobileNavigation.spec.ts.snap
+++ b/src/tests/__snapshots__/MobileNavigation.spec.ts.snap
@@ -1,44 +1,38 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`MobileNavigation > renders correctly 1`] = `
-"<div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation mobile-navigation--dark\\">
-  <div data-v-c1f5c1c8=\\"\\" class=\\"variant-resolver--green\\">
-    <div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__header\\">
-      <div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__title\\">Vigilância Sanitária</div>
-      <div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__menu-btn\\">
-        <cds-icon-stub data-v-c1f5c1c8=\\"\\" name=\\"menu-outline\\" width=\\"24\\" height=\\"24\\" color=\\"currentColor\\" dark=\\"false\\" light=\\"false\\"></cds-icon-stub>
+"<div data-v-c1f5c1c8="" class="mobile-navigation mobile-navigation--dark">
+  <div data-v-c1f5c1c8="" class="variant-resolver--green">
+    <div data-v-c1f5c1c8="" class="mobile-navigation__header">
+      <div data-v-c1f5c1c8="" class="mobile-navigation__title">Vigilância Sanitária</div>
+      <div data-v-c1f5c1c8="" class="mobile-navigation__menu-btn">
+        <cds-icon-stub data-v-c1f5c1c8="" name="menu-outline" width="24" height="24" color="currentColor" dark="false" light="false"></cds-icon-stub>
       </div>
     </div>
-    <div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__sidebar\\">
-      <div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__sidebar-header\\">
-        <div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__sidebar-logo\\">
-          <!-- @slot Slot para renderização do logo da sidebar.--><img data-v-c1f5c1c8=\\"\\" src=\\"\\">
+    <div data-v-c1f5c1c8="" class="mobile-navigation__sidebar">
+      <div data-v-c1f5c1c8="" class="mobile-navigation__sidebar-header">
+        <div data-v-c1f5c1c8="" class="mobile-navigation__sidebar-logo">
+          <!-- @slot Slot para renderização do logo da sidebar.--><img data-v-c1f5c1c8="" src="">
         </div>
-        <div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__sidebar-btn\\">
-          <cds-icon-stub data-v-c1f5c1c8=\\"\\" name=\\"x-outline\\" width=\\"24\\" height=\\"24\\" color=\\"currentColor\\" dark=\\"false\\" light=\\"false\\"></cds-icon-stub>
+        <div data-v-c1f5c1c8="" class="mobile-navigation__sidebar-btn">
+          <cds-icon-stub data-v-c1f5c1c8="" name="x-outline" width="24" height="24" color="currentColor" dark="false" light="false"></cds-icon-stub>
         </div>
       </div>
-      <div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__sidebar-content\\">
-        <div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__sidebar-items\\">
-          <router-link data-v-c1f5c1c8=\\"\\" to=\\"/home\\" class=\\"mobile-navigation__sidebar-item\\">
-            <cds-icon-stub data-v-c1f5c1c8=\\"\\" name=\\"home-outline\\" width=\\"24\\" height=\\"24\\" color=\\"currentColor\\" dark=\\"false\\" light=\\"false\\"></cds-icon-stub><span data-v-c1f5c1c8=\\"\\">Início</span>
-          </router-link>
-          <router-link data-v-c1f5c1c8=\\"\\" to=\\"/visa\\" class=\\"mobile-navigation__sidebar-item mobile-navigation__sidebar-item--active\\">
-            <cds-icon-stub data-v-c1f5c1c8=\\"\\" name=\\"shield-outline\\" width=\\"24\\" height=\\"24\\" color=\\"currentColor\\" dark=\\"false\\" light=\\"false\\"></cds-icon-stub><span data-v-c1f5c1c8=\\"\\">Vigilância Sanitária</span>
-          </router-link>
-          <router-link data-v-c1f5c1c8=\\"\\" to=\\"/regulation\\" class=\\"mobile-navigation__sidebar-item\\">
-            <cds-icon-stub data-v-c1f5c1c8=\\"\\" name=\\"calendar-outline\\" width=\\"24\\" height=\\"24\\" color=\\"currentColor\\" dark=\\"false\\" light=\\"false\\"></cds-icon-stub><span data-v-c1f5c1c8=\\"\\">Central de marcação</span>
-          </router-link>
+      <div data-v-c1f5c1c8="" class="mobile-navigation__sidebar-content">
+        <div data-v-c1f5c1c8="" class="mobile-navigation__sidebar-items">
+          <router-link-stub data-v-c1f5c1c8="" to="/home" class="mobile-navigation__sidebar-item"></router-link-stub>
+          <router-link-stub data-v-c1f5c1c8="" to="/visa" class="mobile-navigation__sidebar-item mobile-navigation__sidebar-item--active"></router-link-stub>
+          <router-link-stub data-v-c1f5c1c8="" to="/regulation" class="mobile-navigation__sidebar-item"></router-link-stub>
         </div>
-        <div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__sidebar-footer\\">
-          <div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__sidebar-user-info\\">
-            <cds-avatar-stub data-v-c1f5c1c8=\\"\\" variant=\\"green\\" size=\\"lg\\" src=\\"\\" name=\\"Joana Mendes\\" clickable=\\"false\\"></cds-avatar-stub>
-            <div data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__sidebar-user-text\\">
-              <p data-v-c1f5c1c8=\\"\\">Joana Mendes</p>
-              <p data-v-c1f5c1c8=\\"\\">Administradora</p>
+        <div data-v-c1f5c1c8="" class="mobile-navigation__sidebar-footer">
+          <div data-v-c1f5c1c8="" class="mobile-navigation__sidebar-user-info">
+            <cds-avatar-stub data-v-c1f5c1c8="" variant="green" size="lg" src="" name="Joana Mendes" clickable="false"></cds-avatar-stub>
+            <div data-v-c1f5c1c8="" class="mobile-navigation__sidebar-user-text">
+              <p data-v-c1f5c1c8="">Joana Mendes</p>
+              <p data-v-c1f5c1c8="">Administradora</p>
             </div>
-          </div><button data-v-c1f5c1c8=\\"\\" class=\\"mobile-navigation__sidebar-logout\\">
-            <cds-icon-stub data-v-c1f5c1c8=\\"\\" name=\\"logout-outline\\" width=\\"24\\" height=\\"24\\" color=\\"currentColor\\" dark=\\"false\\" light=\\"false\\"></cds-icon-stub>
+          </div><button data-v-c1f5c1c8="" class="mobile-navigation__sidebar-logout">
+            <cds-icon-stub data-v-c1f5c1c8="" name="logout-outline" width="24" height="24" color="currentColor" dark="false" light="false"></cds-icon-stub>
           </button>
         </div>
       </div>
diff --git a/src/tests/__snapshots__/MobileStepperInput.spec.js.snap b/src/tests/__snapshots__/MobileStepperInput.spec.js.snap
index 43c856f8..cd4a2988 100644
--- a/src/tests/__snapshots__/MobileStepperInput.spec.js.snap
+++ b/src/tests/__snapshots__/MobileStepperInput.spec.js.snap
@@ -1,8 +1,11 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`MobileStepperInput > renders correctly 1`] = `
-"<div data-v-962d09dd=\\"\\" class=\\"mobile__container\\"><input data-v-962d09dd=\\"\\" id=\\"mobile-stepper-input\\" class=\\"mobile__stepper\\" placeholder=\\"0\\" type=\\"number\\">
-  <icon-button-stub data-v-962d09dd=\\"\\" size=\\"lg\\" icon=\\"minus-outline\\" disabled=\\"false\\" feedbackonclick=\\"false\\" feedbackicon=\\"check-outline\\" variant=\\"white\\"></icon-button-stub>
-  <icon-button-stub data-v-962d09dd=\\"\\" size=\\"lg\\" icon=\\"plus-outline\\" disabled=\\"false\\" feedbackonclick=\\"false\\" feedbackicon=\\"check-outline\\" variant=\\"white\\"></icon-button-stub>
+"<div data-v-962d09dd="" class="mobile-stepper-input__container">
+  <div data-v-962d09dd="" class="mobile-stepper-input"><input data-v-962d09dd="" class="mobile-stepper-input__field mobile-stepper-input__field--undefined" type="number">
+    <!--v-if-->
+  </div>
+  <icon-button-stub data-v-962d09dd="" size="lg" icon="minus-outline" disabled="false" feedbackonclick="false" feedbackicon="check-outline" variant="white"></icon-button-stub>
+  <icon-button-stub data-v-962d09dd="" size="lg" icon="plus-outline" disabled="false" feedbackonclick="false" feedbackicon="check-outline" variant="white"></icon-button-stub>
 </div>"
 `;
diff --git a/src/tests/__snapshots__/PanelCard.spec.ts.snap b/src/tests/__snapshots__/PanelCard.spec.ts.snap
index d4ec42aa..9e81b2c4 100644
--- a/src/tests/__snapshots__/PanelCard.spec.ts.snap
+++ b/src/tests/__snapshots__/PanelCard.spec.ts.snap
@@ -1,26 +1,26 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PanelCard > renders correctly 1`] = `
-"<div data-v-f9290560=\\"\\" data-v-9994fd39=\\"\\" class=\\"box--gray panel-card\\">
+"<div data-v-f9290560="" data-v-9994fd39="" class="box--gray panel-card">
   <!--
 		Evento emitido quando o wrapper é clicado
 		@event cds-click
 		@type {Event}
 	-->
-  <div data-v-f9290560=\\"\\" class=\\"clickable__container--not-clickable box__container\\">
+  <div data-v-f9290560="" class="clickable__container--not-clickable box__container">
     <!-- @slot Slot utilizado para renderização do conteúdo interno do Box.-->
-    <div data-v-9cc3ee57=\\"\\" data-v-f9290560=\\"\\" class=\\"spacer\\">
-      <div data-v-9994fd39=\\"\\" class=\\"panel-card__header\\">
-        <div data-v-9994fd39=\\"\\"><span data-v-9994fd39=\\"\\" class=\\"panel-card__title\\">Redes</span><br data-v-9994fd39=\\"\\"><span data-v-9994fd39=\\"\\" class=\\"panel-card__subtitle\\">Habilite as redes da regulação</span></div>
-        <div data-v-9994fd39=\\"\\">
+    <div data-v-9cc3ee57="" data-v-f9290560="" class="spacer">
+      <div data-v-9994fd39="" class="panel-card__header">
+        <div data-v-9994fd39=""><span data-v-9994fd39="" class="panel-card__title">Redes</span><br data-v-9994fd39=""><span data-v-9994fd39="" class="panel-card__subtitle">Habilite as redes da regulação</span></div>
+        <div data-v-9994fd39="">
           <!-- @slot Slot usado para inserção de elemento à direita no header. -->
         </div>
       </div>
-      <div data-v-9994fd39=\\"\\" class=\\"divider__container\\">
+      <div data-v-9994fd39="" class="divider__container">
         <div></div>
-        <hr class=\\"divider divider--dimmed\\">
+        <hr class="divider divider--dimmed">
       </div>
-      <div data-v-9994fd39=\\"\\" class=\\"panel-card__content\\">
+      <div data-v-9994fd39="" class="panel-card__content">
         <!-- @slot Slot usado para inserção de conteúdo customizado. -->
       </div>
     </div>
diff --git a/src/tests/__snapshots__/PasswordInput.spec.ts.snap b/src/tests/__snapshots__/PasswordInput.spec.ts.snap
index 8192731d..85145dcb 100644
--- a/src/tests/__snapshots__/PasswordInput.spec.ts.snap
+++ b/src/tests/__snapshots__/PasswordInput.spec.ts.snap
@@ -1,11 +1,11 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PasswordInput > If component renders correctly 1`] = `
-"<div data-v-41502f2c=\\"\\" id=\\"password-input\\"><span data-v-41502f2c=\\"\\"><label data-v-41502f2c=\\"\\" class=\\"password-input__label\\"><div data-v-41502f2c=\\"\\" class=\\"password-input__label__content\\" for=\\"cds-password-input\\"><span data-v-41502f2c=\\"\\">Label</span>
+"<div data-v-41502f2c="" id="password-input"><span data-v-41502f2c=""><label data-v-41502f2c="" class="password-input__label"><div data-v-41502f2c="" class="password-input__label__content" for="cds-password-input"><span data-v-41502f2c="">Label</span>
   <!--v-if-->
   <!--v-if-->
 </div></label></span>
-<div data-v-41502f2c=\\"\\" class=\\"password-input\\"><input data-v-41502f2c=\\"\\" id=\\"cds-password-input-password-input\\" type=\\"password\\" placeholder=\\"Digite aqui a informação\\" class=\\"password-input__field\\">
+<div data-v-41502f2c="" class="password-input"><input data-v-41502f2c="" id="cds-password-input-password-input" type="password" placeholder="Digite aqui a informação" class="password-input__field">
   <!--v-if-->
 </div>
 <!--v-if-->
diff --git a/src/tests/__snapshots__/PieChart.spec.ts.snap b/src/tests/__snapshots__/PieChart.spec.ts.snap
index 1d53f993..efe3ff36 100644
--- a/src/tests/__snapshots__/PieChart.spec.ts.snap
+++ b/src/tests/__snapshots__/PieChart.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`PieChart > renders correctly 1`] = `"<span data-v-218ded1e=\\"\\"><div data-v-218ded1e=\\"\\" class=\\"responsive-container\\"><pie-stub data-v-218ded1e=\\"\\" data=\\"[object Object]\\" options=\\"[object Object]\\" plugins=\\"\\" datasetidkey=\\"label\\"></pie-stub></div></span>"`;
+exports[`PieChart > renders correctly 1`] = `"<span data-v-218ded1e=""><div data-v-218ded1e="" class="responsive-container"><pie-stub data-v-218ded1e="" data="[object Object]" options="[object Object]" plugins="" datasetidkey="label"></pie-stub></div></span>"`;
diff --git a/src/tests/__snapshots__/PolarAreaChart.spec.ts.snap b/src/tests/__snapshots__/PolarAreaChart.spec.ts.snap
index 0ee4e807..6db493e1 100644
--- a/src/tests/__snapshots__/PolarAreaChart.spec.ts.snap
+++ b/src/tests/__snapshots__/PolarAreaChart.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`PolarAreaChart > renders correctly 1`] = `"<span data-v-d3067411=\\"\\"><div data-v-d3067411=\\"\\" class=\\"responsive-container\\"><polar-area-stub data-v-d3067411=\\"\\" data=\\"[object Object]\\" options=\\"[object Object]\\" plugins=\\"\\" datasetidkey=\\"label\\"></polar-area-stub></div></span>"`;
+exports[`PolarAreaChart > renders correctly 1`] = `"<span data-v-d3067411=""><div data-v-d3067411="" class="responsive-container"><polar-area-stub data-v-d3067411="" data="[object Object]" options="[object Object]" plugins="" datasetidkey="label"></polar-area-stub></div></span>"`;
diff --git a/src/tests/__snapshots__/ProgressBar.spec.ts.snap b/src/tests/__snapshots__/ProgressBar.spec.ts.snap
index 0538a563..0ec5d336 100644
--- a/src/tests/__snapshots__/ProgressBar.spec.ts.snap
+++ b/src/tests/__snapshots__/ProgressBar.spec.ts.snap
@@ -1,10 +1,10 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ProgressBar > renders correctly 1`] = `
-"<div data-v-84df1bb9=\\"\\" class=\\"progress-bar\\" percentage=\\"0.67\\">
+"<div data-v-84df1bb9="" class="progress-bar">
   <!--v-if-->
-  <div data-v-84df1bb9=\\"\\" class=\\"progress-bar__content\\">
-    <div data-v-84df1bb9=\\"\\" class=\\"progress-bar__indicator--green\\" style=\\"--width: 0%; --leftMargin: 10; --bottomMargin: 2;\\"></div>
+  <div data-v-84df1bb9="" class="progress-bar__content">
+    <div data-v-84df1bb9="" class="progress-bar__indicator--green" style="--width: 67%; --leftMargin: 10; --bottomMargin: 2;"></div>
   </div>
 </div>"
 `;
diff --git a/src/tests/__snapshots__/ProgressCircular.spec.ts.snap b/src/tests/__snapshots__/ProgressCircular.spec.ts.snap
index 3154ccb3..1e1a02f5 100644
--- a/src/tests/__snapshots__/ProgressCircular.spec.ts.snap
+++ b/src/tests/__snapshots__/ProgressCircular.spec.ts.snap
@@ -1,12 +1,12 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`ProgressCircular > renders correctly 1`] = `
-"<svg class=\\"progress-circular progress-circular--md\\" viewBox=\\"0 0 36 36\\">
-  <path class=\\"progress-circular__ring-background\\" stroke-width=\\"3.5\\" d=\\"M18 2.0845
+"<svg class="progress-circular progress-circular--md" viewBox="0 0 36 36">
+  <path class="progress-circular__ring-background" stroke-width="3.5" d="M18 2.0845
 			a 15.9155 15.9155 0 0 1 0 31.831
-			a 15.9155 15.9155 0 0 1 0 -31.831\\"></path>
-  <path class=\\"progress-circular__ring-progress--green\\" stroke-dasharray=\\"0.67, 100\\" stroke-width=\\"2.5\\" style=\\"--indicatorColor: #2AC092;\\" d=\\"M18 2.0845
+			a 15.9155 15.9155 0 0 1 0 -31.831"></path>
+  <path class="progress-circular__ring-progress--green" stroke-dasharray="0.67, 100" stroke-width="2.5" style="--indicatorColor: #2AC092;" d="M18 2.0845
 			a 15.9155 15.9155 0 0 1 0 31.831
-			a 15.9155 15.9155 0 0 1 0 -31.831\\"></path><text x=\\"18\\" y=\\"21.7\\" class=\\"progress-circular__label--reduced\\">1%</text>
+			a 15.9155 15.9155 0 0 1 0 -31.831"></path><text x="18" y="21.7" class="progress-circular__label--reduced">1%</text>
 </svg>"
 `;
diff --git a/src/tests/__snapshots__/QuickActionBar.spec.ts.snap b/src/tests/__snapshots__/QuickActionBar.spec.ts.snap
index ec1541b2..65f341d0 100644
--- a/src/tests/__snapshots__/QuickActionBar.spec.ts.snap
+++ b/src/tests/__snapshots__/QuickActionBar.spec.ts.snap
@@ -1,45 +1,45 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`QuickActionBar > renders correctly 1`] = `
-"<div data-v-ee265e08=\\"\\" class=\\"quick_action_bar\\" description=\\"Esta ação afetará o sistema e os arquivos associados.\\">
-  <div data-v-ee265e08=\\"\\" class=\\"quick_action_bar__backdrop\\">
-    <div data-v-c2ac4e6d=\\"\\" data-v-ee265e08=\\"\\" class=\\"flexbox quick_action_bar__input\\">
-      <!-- @slot Slot com o conteúdo interno do FlexBox --><svg data-v-ee265e08=\\"\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"24\\" height=\\"24\\" viewBox=\\"0 0 24 24\\" aria-labelledby=\\"search-outline\\" role=\\"presentation\\" class=\\"quick_action_bar__search-icon\\">
-        <g fill=\\"currentColor\\"></g>
-      </svg><input data-v-ee265e08=\\"\\" type=\\"text\\" placeholder=\\"Buscar por nome, CPF ou CNS...\\">
+"<div data-v-ee265e08="" class="quick_action_bar" description="Esta ação afetará o sistema e os arquivos associados.">
+  <div data-v-ee265e08="" class="quick_action_bar__backdrop">
+    <div data-v-c2ac4e6d="" data-v-ee265e08="" class="flexbox quick_action_bar__input">
+      <!-- @slot Slot com o conteúdo interno do FlexBox --><svg data-v-ee265e08="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-labelledby="search-outline" role="presentation" class="quick_action_bar__search-icon">
+        <g fill="currentColor"></g>
+      </svg><input data-v-ee265e08="" type="text" placeholder="Buscar por nome, CPF ou CNS...">
       <!--v-if-->
     </div>
-    <div data-v-c2ac4e6d=\\"\\" data-v-ee265e08=\\"\\" class=\\"flexbox quick_action_bar__results\\" id=\\"contentResults\\">
+    <div data-v-c2ac4e6d="" data-v-ee265e08="" class="flexbox quick_action_bar__results" id="contentResults">
       <!-- @slot Slot com o conteúdo interno do FlexBox -->
-      <div data-v-c2ac4e6d=\\"\\" data-v-ee265e08=\\"\\" class=\\"flexbox quick_action_bar__result-item\\">
+      <div data-v-c2ac4e6d="" data-v-ee265e08="" class="flexbox quick_action_bar__result-item">
         <!-- @slot Slot com o conteúdo interno do FlexBox -->
         <!--
 						@slot Slot usado para renderizar itens personalizados para os itens recentes. Dados do item podem ser acessados através da propriedade \`recentItem\`.
 					-->
-        <div data-v-c2ac4e6d=\\"\\" data-v-ee265e08=\\"\\" class=\\"flexbox\\">
+        <div data-v-c2ac4e6d="" data-v-ee265e08="" class="flexbox">
           <!-- @slot Slot com o conteúdo interno do FlexBox -->
-          <div data-v-c2ac4e6d=\\"\\" data-v-ee265e08=\\"\\" class=\\"flexbox\\">
-            <!-- @slot Slot com o conteúdo interno do FlexBox --><svg data-v-ee265e08=\\"\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" aria-labelledby=\\"history-outline\\" role=\\"presentation\\">
-              <g fill=\\"#52616F\\"></g>
-            </svg><span data-v-ee265e08=\\"\\">coração</span>
-          </div><svg data-v-ee265e08=\\"\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" aria-labelledby=\\"trash-outline\\" role=\\"presentation\\" class=\\"quick_action_bar__remove-recent-icon\\">
-            <g fill=\\"#52616F\\"></g>
+          <div data-v-c2ac4e6d="" data-v-ee265e08="" class="flexbox">
+            <!-- @slot Slot com o conteúdo interno do FlexBox --><svg data-v-ee265e08="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-labelledby="history-outline" role="presentation">
+              <g fill="#52616F"></g>
+            </svg><span data-v-ee265e08="">coração</span>
+          </div><svg data-v-ee265e08="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-labelledby="trash-outline" role="presentation" class="quick_action_bar__remove-recent-icon">
+            <g fill="#52616F"></g>
           </svg>
         </div>
       </div>
-      <div data-v-c2ac4e6d=\\"\\" data-v-ee265e08=\\"\\" class=\\"flexbox quick_action_bar__result-item\\">
+      <div data-v-c2ac4e6d="" data-v-ee265e08="" class="flexbox quick_action_bar__result-item">
         <!-- @slot Slot com o conteúdo interno do FlexBox -->
         <!--
 						@slot Slot usado para renderizar itens personalizados para os itens recentes. Dados do item podem ser acessados através da propriedade \`recentItem\`.
 					-->
-        <div data-v-c2ac4e6d=\\"\\" data-v-ee265e08=\\"\\" class=\\"flexbox\\">
+        <div data-v-c2ac4e6d="" data-v-ee265e08="" class="flexbox">
           <!-- @slot Slot com o conteúdo interno do FlexBox -->
-          <div data-v-c2ac4e6d=\\"\\" data-v-ee265e08=\\"\\" class=\\"flexbox\\">
-            <!-- @slot Slot com o conteúdo interno do FlexBox --><svg data-v-ee265e08=\\"\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" aria-labelledby=\\"history-outline\\" role=\\"presentation\\">
-              <g fill=\\"#52616F\\"></g>
-            </svg><span data-v-ee265e08=\\"\\">Carlota Oliveira</span>
-          </div><svg data-v-ee265e08=\\"\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"20\\" height=\\"20\\" viewBox=\\"0 0 24 24\\" aria-labelledby=\\"trash-outline\\" role=\\"presentation\\" class=\\"quick_action_bar__remove-recent-icon\\">
-            <g fill=\\"#52616F\\"></g>
+          <div data-v-c2ac4e6d="" data-v-ee265e08="" class="flexbox">
+            <!-- @slot Slot com o conteúdo interno do FlexBox --><svg data-v-ee265e08="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-labelledby="history-outline" role="presentation">
+              <g fill="#52616F"></g>
+            </svg><span data-v-ee265e08="">Carlota Oliveira</span>
+          </div><svg data-v-ee265e08="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-labelledby="trash-outline" role="presentation" class="quick_action_bar__remove-recent-icon">
+            <g fill="#52616F"></g>
           </svg>
         </div>
       </div>
diff --git a/src/tests/__snapshots__/RadialBarChart.spec.ts.snap b/src/tests/__snapshots__/RadialBarChart.spec.ts.snap
index f15fb854..84194a06 100644
--- a/src/tests/__snapshots__/RadialBarChart.spec.ts.snap
+++ b/src/tests/__snapshots__/RadialBarChart.spec.ts.snap
@@ -1,8 +1,8 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`RadialBarChart > renders correctly 1`] = `
-"<span data-v-814a25f0=\\"\\"><div data-v-814a25f0=\\"\\" class=\\"responsive-container\\"><div data-v-814a25f0=\\"\\" class=\\"legend__container\\"><div data-v-814a25f0=\\"\\" class=\\"legend__item\\"><div data-v-814a25f0=\\"\\" class=\\"legend__square\\" style=\\"\\"></div><span data-v-814a25f0=\\"\\" class=\\"\\">Exames realizados</span></div>
+"<span data-v-814a25f0=""><div data-v-814a25f0="" class="responsive-container"><div data-v-814a25f0="" class="legend__container"><div data-v-814a25f0="" class="legend__item"><div data-v-814a25f0="" class="legend__square" style=""></div><span data-v-814a25f0="" class="">Exames realizados</span></div>
 </div>
-<doughnut-stub data-v-814a25f0=\\"\\" data=\\"[object Object]\\" options=\\"[object Object]\\" plugins=\\"\\" datasetidkey=\\"label\\"></doughnut-stub>
+<doughnut-stub data-v-814a25f0="" data="[object Object]" options="[object Object]" plugins="" datasetidkey="label"></doughnut-stub>
 </div></span>"
 `;
diff --git a/src/tests/__snapshots__/Radio.spec.ts.snap b/src/tests/__snapshots__/Radio.spec.ts.snap
index 42fbb01f..7ae454ea 100644
--- a/src/tests/__snapshots__/Radio.spec.ts.snap
+++ b/src/tests/__snapshots__/Radio.spec.ts.snap
@@ -1,9 +1,9 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Radio > renders correctly 1`] = `
-"<span class=\\"cds-radio__container\\"><!--
+"<span class="cds-radio__container"><!--
 			Evento emitido quando o Radio muda seu estado.
 			@event update:modelValue
 			@type {Event}
-		--><input id=\\"0.1-option-1\\" type=\\"radio\\" class=\\"cds-radio cds-radio--green\\" value=\\"option-1\\"><label class=\\"cds-radio__label\\" for=\\"0.1-option-1\\"><!-- @slot Slot padrão para renderização de conteúdo customizado da label --><span class=\\"cds-radio__label-text\\" disabled=\\"false\\">Opção 1</span></label></span>"
+		--><input id="0.1-option-1" type="radio" class="cds-radio cds-radio--green" value="option-1"><label class="cds-radio__label" for="0.1-option-1"><!-- @slot Slot padrão para renderização de conteúdo customizado da label --><span class="cds-radio__label-text" disabled="false">Opção 1</span></label></span>"
 `;
diff --git a/src/tests/__snapshots__/RadioButtonGroup.spec.ts.snap b/src/tests/__snapshots__/RadioButtonGroup.spec.ts.snap
index 88c3de6e..804c102d 100644
--- a/src/tests/__snapshots__/RadioButtonGroup.spec.ts.snap
+++ b/src/tests/__snapshots__/RadioButtonGroup.spec.ts.snap
@@ -1,20 +1,20 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`RadioButtonGroup > renders correctly 1`] = `
-"<span data-v-575576ed=\\"\\" class=\\"radio__button\\" style=\\"--border-color-selected: #377EE1; --background-color: #f6f9fe; --display-vertical: inline-flex;\\" id=\\"radio-button\\" value=\\"\\"><div data-v-575576ed=\\"\\" class=\\"radio-button__label\\"><span data-v-575576ed=\\"\\">Label</span>
+"<span data-v-575576ed="" class="radio__button" style="--border-color-selected: #377EE1; --background-color: #f6f9fe; --display-vertical: inline-flex;" id="radio-button" value=""><div data-v-575576ed="" class="radio-button__label"><span data-v-575576ed="">Label</span>
 <!--v-if-->
 </div>
-<div data-v-575576ed=\\"\\" class=\\"\\">
-  <div data-v-575576ed=\\"\\" class=\\"\\" style=\\"\\"><label data-v-575576ed=\\"\\" class=\\"radio-button\\" disabled=\\"true\\" for=\\"radio-button-value1\\"><input data-v-575576ed=\\"\\" id=\\"radio-button-value1\\" type=\\"radio\\" disabled=\\"\\" value=\\"value1\\"><label data-v-575576ed=\\"\\" class=\\"radio-button__content\\" for=\\"radio-button-value1\\">
-        <div data-v-575576ed=\\"\\" class=\\"content-title\\">Component1</div>
+<div data-v-575576ed="" class="">
+  <div data-v-575576ed="" class="" style=""><label data-v-575576ed="" class="radio-button" disabled="true" for="radio-button-value1"><input data-v-575576ed="" id="radio-button-value1" type="radio" disabled="" value="value1"><label data-v-575576ed="" class="radio-button__content" for="radio-button-value1">
+        <div data-v-575576ed="" class="content-title">Component1</div>
         <!--v-if-->
       </label></label></div>
-  <div data-v-575576ed=\\"\\" class=\\"\\" style=\\"\\"><label data-v-575576ed=\\"\\" class=\\"radio-button\\" disabled=\\"false\\" for=\\"radio-button-value2\\"><input data-v-575576ed=\\"\\" id=\\"radio-button-value2\\" type=\\"radio\\" value=\\"value2\\"><label data-v-575576ed=\\"\\" class=\\"radio-button__content\\" for=\\"radio-button-value2\\">
-        <div data-v-575576ed=\\"\\" class=\\"content-title\\">Component2</div>
+  <div data-v-575576ed="" class="" style=""><label data-v-575576ed="" class="radio-button" disabled="false" for="radio-button-value2"><input data-v-575576ed="" id="radio-button-value2" type="radio" value="value2"><label data-v-575576ed="" class="radio-button__content" for="radio-button-value2">
+        <div data-v-575576ed="" class="content-title">Component2</div>
         <!--v-if-->
       </label></label></div>
-  <div data-v-575576ed=\\"\\" class=\\"\\" style=\\"\\"><label data-v-575576ed=\\"\\" class=\\"radio-button\\" disabled=\\"false\\" for=\\"radio-button-value3\\"><input data-v-575576ed=\\"\\" id=\\"radio-button-value3\\" type=\\"radio\\" value=\\"value3\\"><label data-v-575576ed=\\"\\" class=\\"radio-button__content\\" for=\\"radio-button-value3\\">
-        <div data-v-575576ed=\\"\\" class=\\"content-title\\">Component3</div>
+  <div data-v-575576ed="" class="" style=""><label data-v-575576ed="" class="radio-button" disabled="false" for="radio-button-value3"><input data-v-575576ed="" id="radio-button-value3" type="radio" value="value3"><label data-v-575576ed="" class="radio-button__content" for="radio-button-value3">
+        <div data-v-575576ed="" class="content-title">Component3</div>
         <!--v-if-->
       </label></label></div>
 </div></span>"
diff --git a/src/tests/__snapshots__/Scrollable.spec.ts.snap b/src/tests/__snapshots__/Scrollable.spec.ts.snap
index d513d068..0d04f21b 100644
--- a/src/tests/__snapshots__/Scrollable.spec.ts.snap
+++ b/src/tests/__snapshots__/Scrollable.spec.ts.snap
@@ -1,8 +1,8 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Scrollable > renders correctly 1`] = `
-"<div data-v-5e315bd5=\\"\\" class=\\"scrollable\\">
-  <div data-v-5e315bd5=\\"\\" class=\\"scrollable__container\\" style=\\"max-height: 200px; height: 200px;\\">
+"<div data-v-5e315bd5="" class="scrollable">
+  <div data-v-5e315bd5="" class="scrollable__container" style="max-height: 200px; height: 200px;">
     <!-- @slot Slot com o conteúdo que você deseja que seja scrollable -->
   </div>
 </div>"
diff --git a/src/tests/__snapshots__/Select.spec.ts.snap b/src/tests/__snapshots__/Select.spec.ts.snap
index 1bceeff7..aa0c1631 100644
--- a/src/tests/__snapshots__/Select.spec.ts.snap
+++ b/src/tests/__snapshots__/Select.spec.ts.snap
@@ -1,9 +1,20 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Scrollable > renders correctly 1`] = `
-"<div data-v-5e315bd5=\\"\\" class=\\"scrollable\\" label=\\"Label\\" options=\\"[object Object],[object Object]\\" value=\\"[object Object]\\">
-  <div data-v-5e315bd5=\\"\\" class=\\"scrollable__container\\" style=\\"max-height: 300px; height: 300px;\\">
-    <!-- @slot Slot com o conteúdo que você deseja que seja scrollable -->
+exports[`Select > renders correctly 1`] = `
+"<div data-v-96b70cc4="" class="select"><label data-v-96b70cc4="" class="select__label">
+    <div data-v-96b70cc4="" class="label__content" for="cds-select"><span data-v-96b70cc4="">Label</span>
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </label>
+  <div data-v-96b70cc4="" class="select__container select__container--fit"><input data-v-96b70cc4="" type="text" autocomplete="off" onkeypress="return false;" class="select__input--closed select__input--default select__input--fit" placeholder="Selecione..." readonly="">
+    <div data-v-96b70cc4="" class="select__options select__options--default select__options--down" style="display: none;">
+      <ul data-v-96b70cc4="" class="option__container">
+        <li data-v-96b70cc4="" class="option__text">foo</li>
+        <li data-v-96b70cc4="" class="option__text">bar</li>
+      </ul>
+    </div><span data-v-96b70cc4="" class="select__chevron--closed"></span>
   </div>
+  <!--v-if-->
 </div>"
 `;
diff --git a/src/tests/__snapshots__/SideBar.spec.ts.snap b/src/tests/__snapshots__/SideBar.spec.ts.snap
index 797d227b..caba0fd3 100644
--- a/src/tests/__snapshots__/SideBar.spec.ts.snap
+++ b/src/tests/__snapshots__/SideBar.spec.ts.snap
@@ -1,81 +1,62 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`SideBar > renders correctly 1`] = `
-"<div class=\\"side-bar--dark\\">
-  <div class=\\"variant-resolver--green\\">
-    <div class=\\"side-bar__header\\">
-      <div class=\\"side-bar__logo\\"><img></div>
+"<div class="side-bar--dark">
+  <div class="variant-resolver--green">
+    <div class="side-bar__header">
+      <div class="side-bar__logo"><img></div>
       <!--v-if-->
     </div>
     <!--v-if-->
-    <ul class=\\"side-bar__container\\">
-      <li role=\\"presentation\\">
-        <div class=\\"side-bar__item-container side-bar__item-container--inactive\\">
-          <router-link to=\\"/dashboard\\" class=\\"side-bar__item side-bar__item--inactive\\">
-            <div>
-              <cds-icon-stub name=\\"dashboard-outline\\" width=\\"20\\" height=\\"20\\" color=\\"currentColor\\" dark=\\"false\\" light=\\"false\\"></cds-icon-stub><span>Dashboard</span>
-            </div>
-          </router-link>
+    <ul class="side-bar__container">
+      <li role="presentation">
+        <div class="side-bar__item-container side-bar__item-container--inactive">
+          <router-link-stub to="/dashboard" class="side-bar__item side-bar__item--inactive"></router-link-stub>
         </div>
-        <transition-stub name=\\"collapse\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
-          <div class=\\"side-bar__subitem-container\\" style=\\"display: none;\\">
-            <div class=\\"side-bar__subitems\\"></div>
+        <transition-stub name="collapse" appear="false" persisted="true" css="true">
+          <div class="side-bar__subitem-container" style="display: none;">
+            <div class="side-bar__subitems"></div>
           </div>
         </transition-stub>
         <!--v-if-->
       </li>
-      <li role=\\"presentation\\">
-        <div class=\\"side-bar__item-container side-bar__item-container--inactive\\">
-          <div id=\\"Links\\" class=\\"side-bar__item side-bar__item--inactive\\">
+      <li role="presentation">
+        <div class="side-bar__item-container side-bar__item-container--inactive">
+          <div id="Links" class="side-bar__item side-bar__item--inactive">
             <div>
-              <cds-icon-stub name=\\"link-outline\\" width=\\"20\\" height=\\"20\\" color=\\"currentColor\\" dark=\\"false\\" light=\\"false\\"></cds-icon-stub><span>Links</span>
+              <cds-icon-stub name="link-outline" width="20" height="20" color="currentColor" dark="false" light="false"></cds-icon-stub><span>Links</span>
             </div>
-            <cds-icon-stub name=\\"caret-down-outline\\" width=\\"16\\" height=\\"16\\" color=\\"currentColor\\" dark=\\"false\\" light=\\"false\\" class=\\"\\"></cds-icon-stub>
+            <cds-icon-stub name="caret-down-outline" width="16" height="16" color="currentColor" dark="false" light="false" class=""></cds-icon-stub>
           </div>
         </div>
-        <transition-stub name=\\"collapse\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
-          <div class=\\"side-bar__subitem-container\\" style=\\"display: none;\\">
-            <div class=\\"side-bar__subitems\\"><a class=\\"side-bar__subitem side-bar__subitem--inactive\\" href=\\"javascript:void(0)\\" target=\\"_self\\" rel=\\"noopener noreferrer\\">
-                <router-link class=\\"side-bar__subitem-link\\">Painel (Tv)</router-link>
-              </a><a class=\\"side-bar__subitem side-bar__subitem--inactive\\" href=\\"javascript:void(0)\\" target=\\"_self\\" rel=\\"noopener noreferrer\\">
-                <router-link class=\\"side-bar__subitem-link\\">Totem</router-link>
+        <transition-stub name="collapse" appear="false" persisted="true" css="true">
+          <div class="side-bar__subitem-container" style="display: none;">
+            <div class="side-bar__subitems"><a class="side-bar__subitem side-bar__subitem--inactive" href="javascript:void(0)" target="_self" rel="noopener noreferrer">
+                <router-link-stub class="side-bar__subitem-link"></router-link-stub>
+              </a><a class="side-bar__subitem side-bar__subitem--inactive" href="javascript:void(0)" target="_self" rel="noopener noreferrer">
+                <router-link-stub class="side-bar__subitem-link"></router-link-stub>
               </a></div>
           </div>
         </transition-stub>
         <!--v-if-->
       </li>
-      <li role=\\"presentation\\">
-        <div class=\\"side-bar__item-container side-bar__item-container--inactive\\">
-          <router-link to=\\"/reports\\" class=\\"side-bar__item side-bar__item--inactive\\">
-            <div>
-              <cds-icon-stub name=\\"printer-outline\\" width=\\"20\\" height=\\"20\\" color=\\"currentColor\\" dark=\\"false\\" light=\\"false\\"></cds-icon-stub><span>Relatórios</span>
-            </div>
-          </router-link>
+      <li role="presentation">
+        <div class="side-bar__item-container side-bar__item-container--inactive">
+          <router-link-stub to="/reports" class="side-bar__item side-bar__item--inactive"></router-link-stub>
         </div>
-        <transition-stub name=\\"collapse\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
-          <div class=\\"side-bar__subitem-container\\" style=\\"display: none;\\">
-            <div class=\\"side-bar__subitems\\"></div>
+        <transition-stub name="collapse" appear="false" persisted="true" css="true">
+          <div class="side-bar__subitem-container" style="display: none;">
+            <div class="side-bar__subitems"></div>
           </div>
         </transition-stub>
         <!--v-if-->
       </li>
     </ul>
   </div>
-  <div class=\\"side-bar__footer variant-resolver--green\\">
-    <div id=\\"menu-profile\\" class=\\"side-bar__avatar\\">
-      <!--
-		Evento emitido quando o wrapper é clicado
-		@event cds-click
-		@type {Event}
-	-->
-      <div class=\\"clickable__container--not-clickable\\" id=\\"avatar-dropdown\\">
-        <div class=\\"avatar__container\\">
-          <div class=\\"avatar__container--white avatar__container--lg\\"><span class=\\"avatar__initials--lg\\">JM</span></div>
-          <!--v-if-->
-        </div>
-        <div data-v-eb14fb58=\\"\\" id=\\"\\" class=\\"popover\\"></div>
-      </div>
-      <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+  <div class="side-bar__footer variant-resolver--green">
+    <div id="menu-profile" class="side-bar__avatar">
+      <cds-avatar-stub variant="white" size="lg" name="Joana Mendes" clickable="false"></cds-avatar-stub>
+      <transition-stub name="fade" appear="false" persisted="false" css="true">
         <div>
           <p>Joana Mendes</p>
           <p>Administradora</p>
@@ -83,8 +64,8 @@ exports[`SideBar > renders correctly 1`] = `
       </transition-stub>
     </div>
     <ul>
-      <li class=\\"side-bar__logout-button\\">
-        <cds-icon-stub name=\\"logout-outline\\" width=\\"20\\" height=\\"20\\" color=\\"currentColor\\" dark=\\"false\\" light=\\"false\\"></cds-icon-stub>
+      <li class="side-bar__logout-button">
+        <cds-icon-stub name="logout-outline" width="20" height="20" color="currentColor" dark="false" light="false"></cds-icon-stub>
       </li>
     </ul>
     <!--v-if-->
diff --git a/src/tests/__snapshots__/SideSheet.spec.ts.snap b/src/tests/__snapshots__/SideSheet.spec.ts.snap
index eed9df7b..159bb201 100644
--- a/src/tests/__snapshots__/SideSheet.spec.ts.snap
+++ b/src/tests/__snapshots__/SideSheet.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Spacer snapshot test > renders correctly 1`] = `"<!--v-if-->"`;
diff --git a/src/tests/__snapshots__/Skeleton.spec.ts.snap b/src/tests/__snapshots__/Skeleton.spec.ts.snap
index 52a07fd0..a246aa18 100644
--- a/src/tests/__snapshots__/Skeleton.spec.ts.snap
+++ b/src/tests/__snapshots__/Skeleton.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Skeleton > renders correctly 1`] = `"<div data-v-38271e4e=\\"\\" class=\\"skeleton__container\\" style=\\"--width: 300px; --height: 300px;\\"></div>"`;
+exports[`Skeleton > renders correctly 1`] = `"<div data-v-38271e4e="" class="skeleton__container" style="--width: 300px; --height: 300px;"></div>"`;
diff --git a/src/tests/__snapshots__/SkeletonText.spec.ts.snap b/src/tests/__snapshots__/SkeletonText.spec.ts.snap
index 760c9ee9..1b2c1f29 100644
--- a/src/tests/__snapshots__/SkeletonText.spec.ts.snap
+++ b/src/tests/__snapshots__/SkeletonText.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`SkeletonText > renders correctly 1`] = `"<div data-v-58efc24d=\\"\\" class=\\"skeleton__container\\" style=\\"--width: 300px; --height: 20px;\\"></div>"`;
+exports[`SkeletonText > renders correctly 1`] = `"<div data-v-58efc24d="" class="skeleton__container" style="--width: 300px; --height: 20px;"></div>"`;
diff --git a/src/tests/__snapshots__/Spacer.spec.ts.snap b/src/tests/__snapshots__/Spacer.spec.ts.snap
index 53f9e427..b43cb335 100644
--- a/src/tests/__snapshots__/Spacer.spec.ts.snap
+++ b/src/tests/__snapshots__/Spacer.spec.ts.snap
@@ -1,7 +1,7 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Spacer snapshot test > renders correctly 1`] = `
-"<div data-v-9cc3ee57=\\"\\" class=\\"spacer\\">
-  <div style=\\"width: 100px; height: 100px; background-color: rgb(42, 192, 146); border-radius: 20px;\\"></div>
+"<div data-v-9cc3ee57="" class="spacer">
+  <div style="width: 100px; height: 100px; background-color: rgb(42, 192, 146); border-radius: 20px;"></div>
 </div>"
 `;
diff --git a/src/tests/__snapshots__/Spinner.spec.ts.snap b/src/tests/__snapshots__/Spinner.spec.ts.snap
index d1c3f78f..1c206420 100644
--- a/src/tests/__snapshots__/Spinner.spec.ts.snap
+++ b/src/tests/__snapshots__/Spinner.spec.ts.snap
@@ -1,7 +1,7 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`Spinner > renders correctly 1`] = `"<div data-v-259be2b2=\\"\\" class=\\"spin--sm spin--blue\\"></div>"`;
+exports[`Spinner > renders correctly 1`] = `"<div data-v-259be2b2="" class="spin--sm spin--blue"></div>"`;
 
 exports[`Spinner > renders correctly with delay 1`] = `"<!--v-if-->"`;
 
-exports[`Spinner > renders correctly with delay 2`] = `"<div data-v-259be2b2=\\"\\" class=\\"spin--sm spin--blue\\"></div>"`;
+exports[`Spinner > renders correctly with delay 2`] = `"<div data-v-259be2b2="" class="spin--sm spin--blue"></div>"`;
diff --git a/src/tests/__snapshots__/StackedBarChart.spec.ts.snap b/src/tests/__snapshots__/StackedBarChart.spec.ts.snap
index 279bb645..c4c266e3 100644
--- a/src/tests/__snapshots__/StackedBarChart.spec.ts.snap
+++ b/src/tests/__snapshots__/StackedBarChart.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`StackedBarChart > renders correctly 1`] = `"<span data-v-2c120c07=\\"\\"><div data-v-2c120c07=\\"\\" class=\\"responsive-container\\"><bar-stub data-v-2c120c07=\\"\\" data=\\"[object Object]\\" options=\\"[object Object]\\" plugins=\\"[object Object]\\" datasetidkey=\\"label\\" is=\\"bar\\"></bar-stub></div></span>"`;
+exports[`StackedBarChart > renders correctly 1`] = `"<span data-v-2c120c07=""><div data-v-2c120c07="" class="responsive-container"><bar-stub data-v-2c120c07="" data="[object Object]" options="[object Object]" plugins="[object Object]" datasetidkey="label" is="bar"></bar-stub></div></span>"`;
diff --git a/src/tests/__snapshots__/Stepper.spec.ts.snap b/src/tests/__snapshots__/Stepper.spec.ts.snap
index c73fb871..fb3d972c 100644
--- a/src/tests/__snapshots__/Stepper.spec.ts.snap
+++ b/src/tests/__snapshots__/Stepper.spec.ts.snap
@@ -1,78 +1,78 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Stepper > renders correctly 1`] = `
-"<div data-v-49d2667a=\\"\\" class=\\"stepper\\">
-  <div data-v-49d2667a=\\"\\" class=\\"stepper__edge-container\\">
-    <div data-v-49d2667a=\\"\\" class=\\"stepper__edge\\">
-      <div data-v-49d2667a=\\"\\" class=\\"stepper__divider--default\\"></div>
+"<div data-v-49d2667a="" class="stepper">
+  <div data-v-49d2667a="" class="stepper__edge-container">
+    <div data-v-49d2667a="" class="stepper__edge">
+      <div data-v-49d2667a="" class="stepper__divider--default"></div>
     </div>
   </div>
-  <div data-v-49d2667a=\\"\\" class=\\"stepper__step-section\\">
+  <div data-v-49d2667a="" class="stepper__step-section">
     <!--v-if-->
-    <div data-v-49d2667a=\\"\\" id=\\"step-1\\" class=\\"stepper__icon-container\\">
-      <div data-v-49d2667a=\\"\\" class=\\"stepper__icon-circle stepper__step--completed stepper__step--clickable\\">
+    <div data-v-49d2667a="" id="step-1" class="stepper__icon-container">
+      <div data-v-49d2667a="" class="stepper__icon-circle stepper__step--completed stepper__step--clickable">
         <!-- <check-icon
-						v-if=\\"step.completed\\"
-						size=\\"1x\\"
-					/> --><svg data-v-49d2667a=\\"\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 24 24\\" aria-labelledby=\\"check-outline\\" role=\\"presentation\\">
-          <g fill=\\"currentColor\\"></g>
+						v-if="step.completed"
+						size="1x"
+					/> --><svg data-v-49d2667a="" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-labelledby="check-outline" role="presentation">
+          <g fill="currentColor"></g>
         </svg>
       </div>
-      <div data-v-49d2667a=\\"\\" class=\\"stepper__divider--in-progress\\"></div>
+      <div data-v-49d2667a="" class="stepper__divider--in-progress"></div>
     </div>
-    <div data-v-49d2667a=\\"\\" class=\\"stepper__step-label stepper__step-label--muted stepper__step-label--horizontal stepper__step--clickable\\"><small data-v-49d2667a=\\"\\">Dummy label 1</small></div>
+    <div data-v-49d2667a="" class="stepper__step-label stepper__step-label--muted stepper__step-label--horizontal stepper__step--clickable"><small data-v-49d2667a="">Dummy label 1</small></div>
   </div>
-  <div data-v-49d2667a=\\"\\" class=\\"stepper__step-section\\">
+  <div data-v-49d2667a="" class="stepper__step-section">
     <!--v-if-->
-    <div data-v-49d2667a=\\"\\" id=\\"step-2\\" class=\\"stepper__icon-container\\">
-      <div data-v-49d2667a=\\"\\" class=\\"stepper__icon-circle stepper__step--in-processing stepper__step--clickable\\">
+    <div data-v-49d2667a="" id="step-2" class="stepper__icon-container">
+      <div data-v-49d2667a="" class="stepper__icon-circle stepper__step--in-processing stepper__step--clickable">
         <!-- <check-icon
-						v-if=\\"step.completed\\"
-						size=\\"1x\\"
+						v-if="step.completed"
+						size="1x"
 					/> -->
-        <div data-v-49d2667a=\\"\\" class=\\"stepper__processing-icon\\"><svg data-v-49d2667a=\\"\\" width=\\"19\\" height=\\"22\\" viewBox=\\"0 0 19 22\\" fill=\\"none\\" xmlns=\\"http://www.w3.org/2000/svg\\">
-            <path data-v-49d2667a=\\"\\" d=\\"M18.78 16.6325C17.738 18.0472 16.3457 19.1664 14.7402 19.8799C13.1346 20.5935 11.3709 20.8769 9.62259 20.7023C7.87428 20.5276 6.20151 19.901 4.76877 18.884C3.33604 17.867 2.19266 16.4945 1.45107 14.9017C0.709475 13.3089 0.395207 11.5504 0.539162 9.79934C0.683116 8.04824 1.28034 6.36474 2.2721 4.9144C3.26387 3.46406 4.61603 2.2968 6.19562 1.52741C7.77522 0.758019 9.52787 0.412981 11.2812 0.526225L10.6287 10.6288L18.78 16.6325Z\\" fill=\\"#3A7EDF\\"></path>
+        <div data-v-49d2667a="" class="stepper__processing-icon"><svg data-v-49d2667a="" width="19" height="22" viewBox="0 0 19 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path data-v-49d2667a="" d="M18.78 16.6325C17.738 18.0472 16.3457 19.1664 14.7402 19.8799C13.1346 20.5935 11.3709 20.8769 9.62259 20.7023C7.87428 20.5276 6.20151 19.901 4.76877 18.884C3.33604 17.867 2.19266 16.4945 1.45107 14.9017C0.709475 13.3089 0.395207 11.5504 0.539162 9.79934C0.683116 8.04824 1.28034 6.36474 2.2721 4.9144C3.26387 3.46406 4.61603 2.2968 6.19562 1.52741C7.77522 0.758019 9.52787 0.412981 11.2812 0.526225L10.6287 10.6288L18.78 16.6325Z" fill="#3A7EDF"></path>
           </svg></div>
       </div>
-      <div data-v-49d2667a=\\"\\" class=\\"stepper__divider--default\\"></div>
+      <div data-v-49d2667a="" class="stepper__divider--default"></div>
     </div>
-    <div data-v-49d2667a=\\"\\" class=\\"stepper__step-label stepper__step-label--muted stepper__step-label--horizontal stepper__step--clickable\\"><small data-v-49d2667a=\\"\\">Dummy label 3</small></div>
+    <div data-v-49d2667a="" class="stepper__step-label stepper__step-label--muted stepper__step-label--horizontal stepper__step--clickable"><small data-v-49d2667a="">Dummy label 3</small></div>
   </div>
-  <div data-v-49d2667a=\\"\\" class=\\"stepper__step-section\\">
+  <div data-v-49d2667a="" class="stepper__step-section">
     <!--v-if-->
-    <div data-v-49d2667a=\\"\\" id=\\"step-3\\" class=\\"stepper__icon-container\\">
-      <div data-v-49d2667a=\\"\\" class=\\"stepper__icon-circle stepper__step--error stepper__step--clickable\\">
+    <div data-v-49d2667a="" id="step-3" class="stepper__icon-container">
+      <div data-v-49d2667a="" class="stepper__icon-circle stepper__step--error stepper__step--clickable">
         <!-- <check-icon
-						v-if=\\"step.completed\\"
-						size=\\"1x\\"
+						v-if="step.completed"
+						size="1x"
 					/> -->
         <!-- <x-icon
-						v-else-if=\\"step.error\\"
-						size=\\"1x\\"
-					/> --><svg data-v-49d2667a=\\"\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"32\\" height=\\"32\\" viewBox=\\"0 0 24 24\\" aria-labelledby=\\"x-outline\\" role=\\"presentation\\">
-          <g fill=\\"currentColor\\"></g>
+						v-else-if="step.error"
+						size="1x"
+					/> --><svg data-v-49d2667a="" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" aria-labelledby="x-outline" role="presentation">
+          <g fill="currentColor"></g>
         </svg>
       </div>
-      <div data-v-49d2667a=\\"\\" class=\\"stepper__divider--default\\"></div>
+      <div data-v-49d2667a="" class="stepper__divider--default"></div>
     </div>
-    <div data-v-49d2667a=\\"\\" class=\\"stepper__step-label stepper__step-label--muted stepper__step-label--horizontal stepper__step--clickable\\"><small data-v-49d2667a=\\"\\">Dummy label 2</small></div>
+    <div data-v-49d2667a="" class="stepper__step-label stepper__step-label--muted stepper__step-label--horizontal stepper__step--clickable"><small data-v-49d2667a="">Dummy label 2</small></div>
   </div>
-  <div data-v-49d2667a=\\"\\" class=\\"\\">
+  <div data-v-49d2667a="" class="">
     <!--v-if-->
-    <div data-v-49d2667a=\\"\\" id=\\"step-4\\" class=\\"stepper__icon-container\\">
-      <div data-v-49d2667a=\\"\\" class=\\"stepper__icon-circle stepper__step--active stepper__step--clickable\\">
+    <div data-v-49d2667a="" id="step-4" class="stepper__icon-container">
+      <div data-v-49d2667a="" class="stepper__icon-circle stepper__step--active stepper__step--clickable">
         <!-- <check-icon
-						v-if=\\"step.completed\\"
-						size=\\"1x\\"
-					/> --><span data-v-49d2667a=\\"\\" class=\\"stepper__icon-text\\">4</span>
+						v-if="step.completed"
+						size="1x"
+					/> --><span data-v-49d2667a="" class="stepper__icon-text">4</span>
       </div>
-      <div data-v-49d2667a=\\"\\" class=\\"stepper__divider--default\\"></div>
+      <div data-v-49d2667a="" class="stepper__divider--default"></div>
     </div>
-    <div data-v-49d2667a=\\"\\" class=\\"stepper__step-label stepper__step-label--active stepper__step-label--horizontal stepper__step--clickable\\"><small data-v-49d2667a=\\"\\">Dummy label X</small></div>
+    <div data-v-49d2667a="" class="stepper__step-label stepper__step-label--active stepper__step-label--horizontal stepper__step--clickable"><small data-v-49d2667a="">Dummy label X</small></div>
   </div>
-  <div data-v-49d2667a=\\"\\" class=\\"stepper__edge-container\\">
-    <div data-v-49d2667a=\\"\\" class=\\"stepper__edge\\">
-      <div data-v-49d2667a=\\"\\" class=\\"stepper__divider--default\\"></div>
+  <div data-v-49d2667a="" class="stepper__edge-container">
+    <div data-v-49d2667a="" class="stepper__edge">
+      <div data-v-49d2667a="" class="stepper__divider--default"></div>
     </div>
   </div>
 </div>"
diff --git a/src/tests/__snapshots__/Table.spec.ts.snap b/src/tests/__snapshots__/Table.spec.ts.snap
index e7962444..eee79509 100644
--- a/src/tests/__snapshots__/Table.spec.ts.snap
+++ b/src/tests/__snapshots__/Table.spec.ts.snap
@@ -1,65 +1,65 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Table > renders correctly 1`] = `
-"<table data-v-83c58b0d=\\"\\" class=\\"table__container\\">
-  <tr data-v-83c58b0d=\\"\\" class=\\"table__header\\">
+"<table data-v-83c58b0d="" class="table__container">
+  <tr data-v-83c58b0d="" class="table__header">
     <!--v-if-->
-    <th data-v-83c58b0d=\\"\\" class=\\"table__header-item--first\\">
-      <div data-v-83c58b0d=\\"\\" class=\\"table__header-item-content\\">
+    <th data-v-83c58b0d="" class="table__header-item--first">
+      <div data-v-83c58b0d="" class="table__header-item-content">
         <!--
 						@slot Slot usado para renderizar itens personalizados para o cabeçalho da tabela. Dados do item referente à coluna podem ser acessados através da propriedade \`data\`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ data }
 					-->
-        <cds-clickable-stub data-v-83c58b0d=\\"\\" clickable=\\"false\\" id=\\"sort-icon-field1\\"></cds-clickable-stub>
+        <cds-clickable-stub data-v-83c58b0d="" clickable="false" id="sort-icon-field1"></cds-clickable-stub>
       </div>
     </th>
-    <th data-v-83c58b0d=\\"\\" class=\\"table__header-item\\">
-      <div data-v-83c58b0d=\\"\\" class=\\"table__header-item-content\\">
+    <th data-v-83c58b0d="" class="table__header-item">
+      <div data-v-83c58b0d="" class="table__header-item-content">
         <!--
 						@slot Slot usado para renderizar itens personalizados para o cabeçalho da tabela. Dados do item referente à coluna podem ser acessados através da propriedade \`data\`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ data }
 					-->
-        <cds-clickable-stub data-v-83c58b0d=\\"\\" clickable=\\"false\\" id=\\"sort-icon-field2\\"></cds-clickable-stub>
+        <cds-clickable-stub data-v-83c58b0d="" clickable="false" id="sort-icon-field2"></cds-clickable-stub>
       </div>
     </th>
-    <th data-v-83c58b0d=\\"\\" class=\\"table__header-item--last\\">
-      <div data-v-83c58b0d=\\"\\" class=\\"table__header-item-content\\">
+    <th data-v-83c58b0d="" class="table__header-item--last">
+      <div data-v-83c58b0d="" class="table__header-item-content">
         <!--
 						@slot Slot usado para renderizar itens personalizados para o cabeçalho da tabela. Dados do item referente à coluna podem ser acessados através da propriedade \`data\`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ data }
 					-->
-        <cds-clickable-stub data-v-83c58b0d=\\"\\" clickable=\\"false\\" id=\\"sort-icon-field3\\"></cds-clickable-stub>
+        <cds-clickable-stub data-v-83c58b0d="" clickable="false" id="sort-icon-field3"></cds-clickable-stub>
       </div>
     </th>
   </tr>
-  <tr data-v-83c58b0d=\\"\\" class=\\"\\">
+  <tr data-v-83c58b0d="" class="">
     <!--v-if-->
-    <td data-v-83c58b0d=\\"\\" class=\\"table__item\\" width=\\"auto\\">
+    <td data-v-83c58b0d="" class="table__item" width="auto">
       <!--
 					@slot Slot usado para renderizar itens personalizados para o conteúdo da tabela. Dados do item referente à linha podem ser acessados através da propriedade \`data\`, enquanto a key referente à coluna pode ser acessada através da propriedade \`field\`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ \`data\`, \`field\`, \`rowIndex\` e \`colIndex\` }
 				-->field 1 content
     </td>
-    <td data-v-83c58b0d=\\"\\" class=\\"table__item\\" width=\\"auto\\">
+    <td data-v-83c58b0d="" class="table__item" width="auto">
       <!--
 					@slot Slot usado para renderizar itens personalizados para o conteúdo da tabela. Dados do item referente à linha podem ser acessados através da propriedade \`data\`, enquanto a key referente à coluna pode ser acessada através da propriedade \`field\`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ \`data\`, \`field\`, \`rowIndex\` e \`colIndex\` }
 				-->field 2 content
     </td>
-    <td data-v-83c58b0d=\\"\\" class=\\"table__item\\" width=\\"auto\\">
+    <td data-v-83c58b0d="" class="table__item" width="auto">
       <!--
 					@slot Slot usado para renderizar itens personalizados para o conteúdo da tabela. Dados do item referente à linha podem ser acessados através da propriedade \`data\`, enquanto a key referente à coluna pode ser acessada através da propriedade \`field\`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ \`data\`, \`field\`, \`rowIndex\` e \`colIndex\` }
 				-->field 3 content
     </td>
   </tr>
-  <tr data-v-83c58b0d=\\"\\" class=\\"\\">
+  <tr data-v-83c58b0d="" class="">
     <!--v-if-->
-    <td data-v-83c58b0d=\\"\\" class=\\"table__item--first\\" width=\\"auto\\">
+    <td data-v-83c58b0d="" class="table__item--first" width="auto">
       <!--
 					@slot Slot usado para renderizar itens personalizados para o conteúdo da tabela. Dados do item referente à linha podem ser acessados através da propriedade \`data\`, enquanto a key referente à coluna pode ser acessada através da propriedade \`field\`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ \`data\`, \`field\`, \`rowIndex\` e \`colIndex\` }
 				-->field 1 content
     </td>
-    <td data-v-83c58b0d=\\"\\" class=\\"table__item--common\\" width=\\"auto\\">
+    <td data-v-83c58b0d="" class="table__item--common" width="auto">
       <!--
 					@slot Slot usado para renderizar itens personalizados para o conteúdo da tabela. Dados do item referente à linha podem ser acessados através da propriedade \`data\`, enquanto a key referente à coluna pode ser acessada através da propriedade \`field\`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ \`data\`, \`field\`, \`rowIndex\` e \`colIndex\` }
 				-->field 2 content
     </td>
-    <td data-v-83c58b0d=\\"\\" class=\\"table__item--last\\" width=\\"auto\\">
+    <td data-v-83c58b0d="" class="table__item--last" width="auto">
       <!--
 					@slot Slot usado para renderizar itens personalizados para o conteúdo da tabela. Dados do item referente à linha podem ser acessados através da propriedade \`data\`, enquanto a key referente à coluna pode ser acessada através da propriedade \`field\`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ \`data\`, \`field\`, \`rowIndex\` e \`colIndex\` }
 				-->field 3 content
diff --git a/src/tests/__snapshots__/TextInput.spec.ts.snap b/src/tests/__snapshots__/TextInput.spec.ts.snap
index bd05aced..58fa9cd7 100644
--- a/src/tests/__snapshots__/TextInput.spec.ts.snap
+++ b/src/tests/__snapshots__/TextInput.spec.ts.snap
@@ -1,14 +1,11 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`TextInput > renders correctly 1`] = `
-"<div data-v-d8d9f755=\\"\\" id=\\"test-input\\"><span data-v-d8d9f755=\\"\\"><label data-v-d8d9f755=\\"\\" class=\\"text-input__label\\"><div data-v-d8d9f755=\\"\\" class=\\"label__content\\" for=\\"cds-text-input\\"><span data-v-d8d9f755=\\"\\">Label</span>
+"<div data-v-d8d9f755="" id="test-input"><span data-v-d8d9f755=""><label data-v-d8d9f755="" class="text-input__label" for="cds-text-input"><span data-v-d8d9f755="" class="label__content">Label <!--v-if--><!--v-if--></span>
+  <!--v-if--></label></span>
+  <div data-v-d8d9f755="" class="text-input"><input data-v-d8d9f755="" id="cds-text-input-test-input" placeholder="Digite aqui a informação" class="text-input__field" type="text">
+    <!--v-if-->
+  </div>
   <!--v-if-->
-  <!--v-if-->
-</div>
-<!--v-if--></label></span>
-<div data-v-d8d9f755=\\"\\" class=\\"text-input\\"><input data-v-d8d9f755=\\"\\" id=\\"cds-text-input-test-input\\" placeholder=\\"Digite aqui a informação\\" class=\\"text-input__field\\" type=\\"text\\">
-  <!--v-if-->
-</div>
-<!--v-if-->
 </div>"
 `;
diff --git a/src/tests/__snapshots__/TimeInput.spec.ts.snap b/src/tests/__snapshots__/TimeInput.spec.ts.snap
index 185d730f..e93b7437 100644
--- a/src/tests/__snapshots__/TimeInput.spec.ts.snap
+++ b/src/tests/__snapshots__/TimeInput.spec.ts.snap
@@ -1,13 +1,13 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`TimeInput > renders correctly 1`] = `
-"<div data-v-362c4bdd=\\"\\"><label data-v-362c4bdd=\\"\\" class=\\"input__label\\">
-    <div data-v-362c4bdd=\\"\\" class=\\"label__content\\" for=\\"time-input\\"><span data-v-362c4bdd=\\"\\">Test label</span>
+"<div data-v-362c4bdd=""><label data-v-362c4bdd="" class="input__label">
+    <div data-v-362c4bdd="" class="label__content" for="time-input"><span data-v-362c4bdd="">Test label</span>
       <!--v-if-->
     </div>
   </label>
-  <div data-v-362c4bdd=\\"\\" id=\\"time-input\\" class=\\"input__container\\">
-    <div data-v-362c4bdd=\\"\\"><input data-v-362c4bdd=\\"\\" id=\\"time-input-start-hour\\" class=\\"input__time\\" type=\\"text\\" min=\\"0\\" max=\\"23\\" step=\\"1\\" placeholder=\\"00\\"> : <input data-v-362c4bdd=\\"\\" id=\\"time-input-start-minute\\" class=\\"input__time\\" type=\\"text\\" min=\\"0\\" max=\\"59\\" step=\\"1\\" placeholder=\\"00\\"></div>
+  <div data-v-362c4bdd="" id="time-input" class="input__container">
+    <div data-v-362c4bdd=""><input data-v-362c4bdd="" id="time-input-start-hour" class="input__time" type="text" min="0" max="23" step="1" placeholder="00"> : <input data-v-362c4bdd="" id="time-input-start-minute" class="input__time" type="text" min="0" max="59" step="1" placeholder="00"></div>
     <!--v-if-->
     <!--v-if-->
   </div>
diff --git a/src/tests/__snapshots__/Timeline.spec.ts.snap b/src/tests/__snapshots__/Timeline.spec.ts.snap
index e68ca4f4..3ffd3e62 100644
--- a/src/tests/__snapshots__/Timeline.spec.ts.snap
+++ b/src/tests/__snapshots__/Timeline.spec.ts.snap
@@ -1,7 +1,7 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Timeline > renders correctly 1`] = `
-"<div class=\\"cds-timeline\\" history=\\"[object Object],[object Object],[object Object],[object Object],[object Object]\\">
+"<div class="cds-timeline" history="[object Object],[object Object],[object Object],[object Object],[object Object]">
   <!-- @slot Conteúdo a ser colocar na Timeline. Suporta o \`TimelineItem\` como subcomponente.  -->
 </div>"
 `;
diff --git a/src/tests/__snapshots__/WebcamModal.spec.ts.snap b/src/tests/__snapshots__/WebcamModal.spec.ts.snap
index 53df8184..845f7b19 100644
--- a/src/tests/__snapshots__/WebcamModal.spec.ts.snap
+++ b/src/tests/__snapshots__/WebcamModal.spec.ts.snap
@@ -1,3 +1,3 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`WebcamModal > renders correctly 1`] = `"<!--v-if-->"`;
diff --git a/src/tests/__snapshots__/Wizard.spec.ts.snap b/src/tests/__snapshots__/Wizard.spec.ts.snap
index 9ad698ec..b7adc8ae 100644
--- a/src/tests/__snapshots__/Wizard.spec.ts.snap
+++ b/src/tests/__snapshots__/Wizard.spec.ts.snap
@@ -1,60 +1,60 @@
-// Vitest Snapshot v1
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Wizard > renders correctly 1`] = `
-"<div data-v-61a7952a=\\"\\" class=\\"cds-wizard\\">
-  <div data-v-61a7952a=\\"\\" class=\\"cds-wizard__container\\">
-    <div data-v-f9290560=\\"\\" data-v-61a7952a=\\"\\" class=\\"box--elevated\\">
+"<div data-v-61a7952a="" class="cds-wizard">
+  <div data-v-61a7952a="" class="cds-wizard__container">
+    <div data-v-f9290560="" data-v-61a7952a="" class="box--elevated">
       <!--
 		Evento emitido quando o wrapper é clicado
 		@event cds-click
 		@type {Event}
 	-->
-      <div data-v-f9290560=\\"\\" class=\\"clickable__container--not-clickable box__container\\">
+      <div data-v-f9290560="" class="clickable__container--not-clickable box__container">
         <!-- @slot Slot utilizado para renderização do conteúdo interno do Box.-->
-        <div data-v-9cc3ee57=\\"\\" data-v-f9290560=\\"\\" class=\\"spacer\\"><span data-v-61a7952a=\\"\\">Dummy title without subtitle<div data-v-61a7952a=\\"\\" class=\\"cds-wizard__content\\"><p>Dummy content 1</p></div></span></div>
+        <div data-v-9cc3ee57="" data-v-f9290560="" class="spacer"><span data-v-61a7952a="">Dummy title without subtitle<div data-v-61a7952a="" class="cds-wizard__content"><p>Dummy content 1</p></div></span></div>
       </div>
     </div>
-    <div data-v-f9290560=\\"\\" data-v-61a7952a=\\"\\" class=\\"box--gray cds-wizard__empty-state-box\\">
+    <div data-v-f9290560="" data-v-61a7952a="" class="box--gray cds-wizard__empty-state-box">
       <!--
 		Evento emitido quando o wrapper é clicado
 		@event cds-click
 		@type {Event}
 	-->
-      <div data-v-f9290560=\\"\\" class=\\"clickable__container--not-clickable box__container\\">
+      <div data-v-f9290560="" class="clickable__container--not-clickable box__container">
         <!-- @slot Slot utilizado para renderização do conteúdo interno do Box.-->
-        <div data-v-9cc3ee57=\\"\\" data-v-f9290560=\\"\\" class=\\"spacer\\">
-          <div data-v-61a7952a=\\"\\" class=\\"cds-wizard__empty-state\\">
+        <div data-v-9cc3ee57="" data-v-f9290560="" class="spacer">
+          <div data-v-61a7952a="" class="cds-wizard__empty-state">
             <!--v-if-->
-            <div data-v-61a7952a=\\"\\" class=\\"cds-wizard__empty-state-title\\">Dummy title 2</div>
-            <div data-v-61a7952a=\\"\\" class=\\"cds-wizard__empty-state-subtitle\\">Preencha todos os campos obrigatórios da etapa anterior para
+            <div data-v-61a7952a="" class="cds-wizard__empty-state-title">Dummy title 2</div>
+            <div data-v-61a7952a="" class="cds-wizard__empty-state-subtitle">Preencha todos os campos obrigatórios da etapa anterior para
               liberar a seção de dummy title 2</div>
           </div>
         </div>
       </div>
     </div>
-    <div data-v-f9290560=\\"\\" data-v-61a7952a=\\"\\" class=\\"box--gray cds-wizard__empty-state-box\\">
+    <div data-v-f9290560="" data-v-61a7952a="" class="box--gray cds-wizard__empty-state-box">
       <!--
 		Evento emitido quando o wrapper é clicado
 		@event cds-click
 		@type {Event}
 	-->
-      <div data-v-f9290560=\\"\\" class=\\"clickable__container--not-clickable box__container\\">
+      <div data-v-f9290560="" class="clickable__container--not-clickable box__container">
         <!-- @slot Slot utilizado para renderização do conteúdo interno do Box.-->
-        <div data-v-9cc3ee57=\\"\\" data-v-f9290560=\\"\\" class=\\"spacer\\">
-          <div data-v-61a7952a=\\"\\" class=\\"cds-wizard__empty-state\\">
+        <div data-v-9cc3ee57="" data-v-f9290560="" class="spacer">
+          <div data-v-61a7952a="" class="cds-wizard__empty-state">
             <!--v-if-->
-            <div data-v-61a7952a=\\"\\" class=\\"cds-wizard__empty-state-title\\">Dummy title 3</div>
-            <div data-v-61a7952a=\\"\\" class=\\"cds-wizard__empty-state-subtitle\\">Preencha todos os campos obrigatórios da etapa anterior para
+            <div data-v-61a7952a="" class="cds-wizard__empty-state-title">Dummy title 3</div>
+            <div data-v-61a7952a="" class="cds-wizard__empty-state-subtitle">Preencha todos os campos obrigatórios da etapa anterior para
               liberar a seção de dummy title 3</div>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <div data-v-61a7952a=\\"\\" class=\\"cds-wizard__buttons\\"><button data-v-3c9d0845=\\"\\" data-v-61a7952a=\\"\\" class=\\"button__container button--secondary--active button-size--md\\">
+  <div data-v-61a7952a="" class="cds-wizard__buttons"><button data-v-3c9d0845="" data-v-61a7952a="" class="button__container button--secondary--active button-size--md">
       <!--v-if-->
       <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Anterior
-    </button><button data-v-3c9d0845=\\"\\" data-v-61a7952a=\\"\\" class=\\"button__container button--green--active button-size--md\\">
+    </button><button data-v-3c9d0845="" data-v-61a7952a="" class="button__container button--green--active button-size--md">
       <!--v-if-->
       <!-- @slot Slot padrão utilizado para exibir texto do botão. -->Próximo
     </button></div>