diff --git a/src/App.vue b/src/App.vue
index 3b369d2..5e7044c 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -15,7 +15,7 @@
 				class="px-7"
 				style="max-width: 1368px;"
 			>
-				<DocsPage :codeBlockOptions="codeBlockSettings" />
+				<DocsPage />
 			</v-container>
 		</v-main>
 	</v-app>
diff --git a/src/documentation/components/ExampleContainer.vue b/src/documentation/components/ExampleContainer.vue
index 0be7166..7ccbaf7 100644
--- a/src/documentation/components/ExampleContainer.vue
+++ b/src/documentation/components/ExampleContainer.vue
@@ -113,6 +113,7 @@
 </template>
 
 <script setup lang="ts">
+defineOptions({ inheritAttrs: false });
 const emit = defineEmits(['closePicker']);
 
 export interface ExampleCode {
diff --git a/src/documentation/components/examples/ButtonsFieldExample.vue b/src/documentation/components/examples/ButtonsFieldExample.vue
index dc7af0a..cc55934 100644
--- a/src/documentation/components/examples/ButtonsFieldExample.vue
+++ b/src/documentation/components/examples/ButtonsFieldExample.vue
@@ -154,6 +154,11 @@ import {
 } from 'yup';
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const emit = defineEmits(['codeUpdated']);
 
diff --git a/src/documentation/components/examples/ColumnsExample.vue b/src/documentation/components/examples/ColumnsExample.vue
index ef0d66b..20daaed 100644
--- a/src/documentation/components/examples/ColumnsExample.vue
+++ b/src/documentation/components/examples/ColumnsExample.vue
@@ -20,6 +20,11 @@
 <script setup lang="ts">
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const links = inject<Docs.Links>('links')!;
 const dialog = ref(false);
diff --git a/src/documentation/components/examples/ConditionalFieldExample.vue b/src/documentation/components/examples/ConditionalFieldExample.vue
index 6f7de07..045696b 100644
--- a/src/documentation/components/examples/ConditionalFieldExample.vue
+++ b/src/documentation/components/examples/ConditionalFieldExample.vue
@@ -15,6 +15,11 @@
 import { ref } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const dialog = ref(false);
 const formAnswers = ref({
diff --git a/src/documentation/components/examples/ConditionalPageExample.vue b/src/documentation/components/examples/ConditionalPageExample.vue
index b3e14e1..75c9d3e 100644
--- a/src/documentation/components/examples/ConditionalPageExample.vue
+++ b/src/documentation/components/examples/ConditionalPageExample.vue
@@ -15,6 +15,11 @@
 import { ref } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+		open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const dialog = ref(false);
 const answers = ref({
diff --git a/src/documentation/components/examples/DynamicAnswersQuestionsExample.vue b/src/documentation/components/examples/DynamicAnswersQuestionsExample.vue
index 7174425..783aa7f 100644
--- a/src/documentation/components/examples/DynamicAnswersQuestionsExample.vue
+++ b/src/documentation/components/examples/DynamicAnswersQuestionsExample.vue
@@ -17,6 +17,12 @@ import type { MaybeRef } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
+
 const dialog = ref(false);
 const answers = ref<{
 	foobar: string | null;
diff --git a/src/documentation/components/examples/FieldSlotExample.vue b/src/documentation/components/examples/FieldSlotExample.vue
index 466aa2d..5c1548e 100644
--- a/src/documentation/components/examples/FieldSlotExample.vue
+++ b/src/documentation/components/examples/FieldSlotExample.vue
@@ -49,6 +49,11 @@
 import { ref } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const dialog = ref(false);
 
diff --git a/src/documentation/components/examples/SimpleExample.vue b/src/documentation/components/examples/SimpleExample.vue
index a4ea2bd..8de162d 100644
--- a/src/documentation/components/examples/SimpleExample.vue
+++ b/src/documentation/components/examples/SimpleExample.vue
@@ -15,6 +15,11 @@
 import { ref } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const dialog = ref(false);
 const answers = ref({
diff --git a/src/documentation/components/examples/SummaryPageExample.vue b/src/documentation/components/examples/SummaryPageExample.vue
index 351ebad..6b09736 100644
--- a/src/documentation/components/examples/SummaryPageExample.vue
+++ b/src/documentation/components/examples/SummaryPageExample.vue
@@ -19,6 +19,11 @@
 import { ref } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
 
 const dialog = ref(false);
 const answers = ref({
diff --git a/src/documentation/components/examples/TemplateExample.vue b/src/documentation/components/examples/TemplateExample.vue
index f69761c..5fa50a7 100644
--- a/src/documentation/components/examples/TemplateExample.vue
+++ b/src/documentation/components/examples/TemplateExample.vue
@@ -14,6 +14,13 @@ import {
 	string as yupString,
 } from 'yup';
 
+
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
+
 const answers = ref({
 	bar: null,
 	foo: null,
diff --git a/src/documentation/components/examples/TooltipExample.vue b/src/documentation/components/examples/TooltipExample.vue
index ad5fe5b..9872d52 100644
--- a/src/documentation/components/examples/TooltipExample.vue
+++ b/src/documentation/components/examples/TooltipExample.vue
@@ -20,6 +20,12 @@ import { ref } from 'vue';
 import AnswersDialog from '../AnswersDialog.vue';
 
 
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
+
 const dialog = ref(false);
 const answers = ref({
 	address: '123 Street',
diff --git a/src/documentation/components/examples/ValidationExample.vue b/src/documentation/components/examples/ValidationExample.vue
index f6b6831..23c9e5b 100644
--- a/src/documentation/components/examples/ValidationExample.vue
+++ b/src/documentation/components/examples/ValidationExample.vue
@@ -20,6 +20,13 @@ import {
 } from 'yup';
 import AnswersDialog from '../AnswersDialog.vue';
 
+
+interface Props {
+	open?: HTMLPreElement | null;
+}
+
+defineProps<Props>();
+
 const dialog = ref(false);
 
 const answers = ref({
diff --git a/src/documentation/sections/ExampleSection.vue b/src/documentation/sections/ExampleSection.vue
index 0e2fb22..4aa1e87 100755
--- a/src/documentation/sections/ExampleSection.vue
+++ b/src/documentation/sections/ExampleSection.vue
@@ -15,7 +15,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('SimpleExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('SimpleExampleRef');"
 		>
 			<Example.SimpleExample
@@ -26,7 +25,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('ColumnsExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('ColumnsExampleRef');"
 		>
 			<Example.ColumnsExample
@@ -37,7 +35,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('FieldSlotExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('FieldSlotExampleRef');"
 		>
 			<Example.FieldSlotExample
@@ -49,7 +46,6 @@
 		<ExampleContainer
 			id="validation-example"
 			:code="getTemplateCode('ValidationExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('ValidationExampleRef');"
 		>
 			<Example.ValidationExample
@@ -60,7 +56,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('ButtonsFieldExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			:codeUpdatedAt="ButtonsFieldExampleCode?.updatedAt"
 			:updatedCode="ButtonsFieldExampleCode?.updatedCode"
 			@closePicker="closePicker('ButtonsFieldExampleRef');"
@@ -74,7 +69,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('SummaryPageExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('SummaryPageExampleRef');"
 		>
 			<Example.SummaryPageExample
@@ -85,7 +79,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('TooltipExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('TooltipExampleRef');"
 		>
 			<Example.TooltipExample
@@ -96,7 +89,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('ConditionalPageExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('ConditionalPageExampleRef');"
 		>
 			<Example.ConditionalPageExample
@@ -107,7 +99,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('ConditionalFieldExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('ConditionalFieldExampleRef');"
 		>
 			<Example.ConditionalFieldExample
@@ -118,7 +109,6 @@
 
 		<ExampleContainer
 			:code="getTemplateCode('DynamicAnswersQuestionsExampleRef')"
-			:codeBlockSettings="codeBlockSettings"
 			@closePicker="closePicker('DynamicAnswersQuestionsExampleRef');"
 		>
 			<Example.DynamicAnswersQuestionsExample
@@ -134,8 +124,6 @@ import type { ExampleCode } from '../components/ExampleContainer.vue';
 import ExampleContainer from '../components/ExampleContainer.vue';
 import * as Example from '../components/examples';
 
-
-const codeBlockSettings = inject<Docs.CodeBlockSettings>('codeBlockSettings')!;
 const classes = inject<Docs.GlobalClasses>('classes')!;
 
 const SimpleExampleRef = ref(null);
diff --git a/src/plugin/components/fields/VSFButtonField/VSFButtonField.vue b/src/plugin/components/fields/VSFButtonField/VSFButtonField.vue
index 4e6f763..55924df 100644
--- a/src/plugin/components/fields/VSFButtonField/VSFButtonField.vue
+++ b/src/plugin/components/fields/VSFButtonField/VSFButtonField.vue
@@ -210,7 +210,7 @@ const getIcon = (option: Option, prop: string): string => {
 };
 
 
-function getId(option: { id?: string; }, key: string | number) {
+function getId(option: { id?: string | number; }, key: string | number) {
 	if (option.id != null) {
 		return option.id;
 	}
@@ -317,7 +317,17 @@ const isActive = (val: string | number): boolean | undefined => {
 		return undefined;
 	}
 
-	return value.value === val || (value.value as string[]).includes(val as string);
+	// If value.value is a number, compare directly.
+	if (typeof value.value === 'number') {
+		return value.value === val;
+	}
+
+	// If value.value is a string or an array of strings, handle both cases.
+	if (typeof value.value === 'string' || Array.isArray(value.value)) {
+		return (value.value as string[]).includes(val as string);
+	}
+
+	return undefined;
 };
 
 // ------------------------- Variants //
diff --git a/src/plugin/components/shared/FieldLabel.vue b/src/plugin/components/shared/FieldLabel.vue
index 2e22b73..07e358b 100644
--- a/src/plugin/components/shared/FieldLabel.vue
+++ b/src/plugin/components/shared/FieldLabel.vue
@@ -11,7 +11,7 @@
 <script lang="ts" setup>
 export interface FieldLabelProps {
 	label: string | undefined;
-	required: boolean | undefined;
+	required?: boolean | undefined;
 }
 
 const { label, required = false } = defineProps<FieldLabelProps>();