diff --git a/apps/labs/doc/inputnumber/ButtonsDoc.vue b/apps/labs/doc/inputnumber/ButtonsDoc.vue
deleted file mode 100644
index 2e2194ba3..000000000
--- a/apps/labs/doc/inputnumber/ButtonsDoc.vue
+++ /dev/null
@@ -1,73 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Spinner buttons are enabled using the <i>showButtons</i> property and layout is defined with the <i>buttonLayout</i>.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
-                <template #incrementbuttonicon>
-                    <span class="pi pi-plus" />
-                </template>
-                <template #decrementbuttonicon>
-                    <span class="pi pi-minus" />
-                </template>
-            </InputNumber>
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(20);
-const value2 = ref(25);
-const value3 = ref(10.5);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="stacked-buttons" class="font-bold block mb-2"> Stacked </label>
-            <InputNumber v-model="value1" inputId="stacked-buttons" showButtons mode="currency" currency="USD" fluid />
-        </div>
-
-        <div class="flex-auto">
-            <label for="minmax-buttons" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value2" inputId="minmax-buttons" mode="decimal" showButtons :min="0" :max="100" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="horizontal-buttons" class="font-bold block mb-2"> Horizontal with Step </label>
-            <InputNumber v-model="value3" inputId="horizontal-buttons" showButtons buttonLayout="horizontal" :step="0.25" mode="currency" currency="EUR" fluid>
-                <template #incrementbuttonicon>
-                    <span class="pi pi-plus" />
-                </template>
-                <template #decrementbuttonicon>
-                    <span class="pi pi-minus" />
-                </template>
-            </InputNumber>
-        </div>
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(20);
-const value2 = ref(25);
-const value3 = ref(10.5);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/CurrencyDoc.vue b/apps/labs/doc/inputnumber/CurrencyDoc.vue
deleted file mode 100644
index 2e51b6a1a..000000000
--- a/apps/labs/doc/inputnumber/CurrencyDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Monetary values are enabled by setting <i>mode</i> property as <i>currency</i>. In this setting, <i>currency</i> property also needs to be defined using ISO 4217 standard such as "USD" for the US dollar.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="currency-us" class="font-bold block mb-2"> United States </label>
-            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
-            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-india" class="font-bold block mb-2"> India </label>
-            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
-            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(1500);
-const value2 = ref(2500);
-const value3 = ref(4250);
-const value4 = ref(5002);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="currency-us" class="font-bold block mb-2"> United States </label>
-            <InputNumber v-model="value1" inputId="currency-us" mode="currency" currency="USD" locale="en-US" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-germany" class="font-bold block mb-2"> Germany </label>
-            <InputNumber v-model="value2" inputId="currency-germany" mode="currency" currency="EUR" locale="de-DE" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-india" class="font-bold block mb-2"> India </label>
-            <InputNumber v-model="value3" inputId="currency-india" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="currency-japan" class="font-bold block mb-2"> Japan </label>
-            <InputNumber v-model="value4" inputId="currency-japan" mode="currency" currency="JPY" locale="jp-JP" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(1500);
-const value2 = ref(2500);
-const value3 = ref(4250);
-const value4 = ref(5002);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/DisabledDoc.vue b/apps/labs/doc/inputnumber/DisabledDoc.vue
deleted file mode 100644
index 72b738e58..000000000
--- a/apps/labs/doc/inputnumber/DisabledDoc.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" disabled prefix="%" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(50);
-
-const code = ref(`
-<template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" disabled prefix="%" />
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(50);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/FilledDoc.vue b/apps/labs/doc/inputnumber/FilledDoc.vue
deleted file mode 100644
index 6d3bef177..000000000
--- a/apps/labs/doc/inputnumber/FilledDoc.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" variant="filled" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(null);
-
-const code = ref(`
-<template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" variant="filled" />
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/ImportDoc.vue b/apps/labs/doc/inputnumber/ImportDoc.vue
deleted file mode 100644
index 8a8773dce..000000000
--- a/apps/labs/doc/inputnumber/ImportDoc.vue
+++ /dev/null
@@ -1,16 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs" />
-    <DocSectionCode :code="code" lang="script" />
-</template>
-
-<script>
-export default {
-    data() {
-        return {
-            code: `
-import InputNumber from '@/plex/inputnumber';
-`
-        };
-    }
-};
-</script>
diff --git a/apps/labs/doc/inputnumber/InvalidDoc.vue b/apps/labs/doc/inputnumber/InvalidDoc.vue
deleted file mode 100644
index 7225599cf..000000000
--- a/apps/labs/doc/inputnumber/InvalidDoc.vue
+++ /dev/null
@@ -1,31 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Invalid state is displayed using the <i>invalid</i> prop to indicate a failed validation. You can use this style when integrating with form validation libraries.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(null);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-wrap justify-center gap-4">
-        <InputNumber v-model="value" :invalid="value === null" mode="decimal" :minFractionDigits="2" placeholder="Amount" />
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(null);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/LocaleDoc.vue b/apps/labs/doc/inputnumber/LocaleDoc.vue
deleted file mode 100644
index ec82caa43..000000000
--- a/apps/labs/doc/inputnumber/LocaleDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Localization information such as grouping and decimal symbols are defined with the <i>locale</i> property which defaults to the user locale.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
-            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
-            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
-            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
-            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(151351);
-const value2 = ref(115744);
-const value3 = ref(635524);
-const value4 = ref(732762);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="locale-user" class="font-bold block mb-2"> User Locale </label>
-            <InputNumber v-model="value1" inputId="locale-user" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-us" class="font-bold block mb-2"> United States Locale </label>
-            <InputNumber v-model="value2" inputId="locale-us" locale="en-US" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-german" class="font-bold block mb-2"> German Locale </label>
-            <InputNumber v-model="value3" inputId="locale-german" locale="de-DE" :minFractionDigits="2" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="locale-indian" class="font-bold block mb-2"> Indian Locale </label>
-            <InputNumber v-model="value4" inputId="locale-indian" locale="en-IN" :minFractionDigits="2" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(151351);
-const value2 = ref(115744);
-const value3 = ref(635524);
-const value4 = ref(732762);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/NumeralsDoc.vue b/apps/labs/doc/inputnumber/NumeralsDoc.vue
deleted file mode 100644
index 8adf88af7..000000000
--- a/apps/labs/doc/inputnumber/NumeralsDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputNumber is used with the <i>v-model</i> property for two-way value binding.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
-            <InputNumber v-model="value1" inputId="integeronly" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
-            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
-            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(42723);
-const value2 = ref(58151);
-const value3 = ref(2351.35);
-const value4 = ref(50);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="integeronly" class="font-bold block mb-2"> Integer Only </label>
-            <InputNumber v-model="value1" inputId="integeronly" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="withoutgrouping" class="font-bold block mb-2"> Without Grouping </label>
-            <InputNumber v-model="value2" inputId="withoutgrouping" :useGrouping="false" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmaxfraction" class="font-bold block mb-2"> Min-Max Fraction Digits </label>
-            <InputNumber v-model="value3" inputId="minmaxfraction" :minFractionDigits="2" :maxFractionDigits="5" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="minmax" class="font-bold block mb-2"> Min-Max Boundaries </label>
-            <InputNumber v-model="value4" inputId="minmax" :min="0" :max="100" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(42723);
-const value2 = ref(58151);
-const value3 = ref(2351.35);
-const value4 = ref(50);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue b/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
deleted file mode 100644
index 6f416962f..000000000
--- a/apps/labs/doc/inputnumber/PrefixSuffixDoc.vue
+++ /dev/null
@@ -1,67 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Custom texts e.g. units can be placed before or after the input section with the <i>prefix</i> and <i>suffix</i> properties.</p>
-    </DocSectionText>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="mile" class="font-bold block mb-2"> Mile </label>
-            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="percent" class="font-bold block mb-2"> Percent </label>
-            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
-            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
-            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
-        </div>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(20);
-const value2 = ref(50);
-const value3 = ref(10);
-const value4 = ref(20);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-wrap gap-4">
-        <div class="flex-auto">
-            <label for="mile" class="font-bold block mb-2"> Mile </label>
-            <InputNumber v-model="value1" inputId="mile" suffix=" mi" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="percent" class="font-bold block mb-2"> Percent </label>
-            <InputNumber v-model="value2" inputId="percent" prefix="%" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="expiry" class="font-bold block mb-2"> Expiry </label>
-            <InputNumber v-model="value3" inputId="expiry" prefix="Expires in " suffix=" days" fluid />
-        </div>
-        <div class="flex-auto">
-            <label for="temperature" class="font-bold block mb-2"> Temperature </label>
-            <InputNumber v-model="value4" inputId="temperature" prefix="&uarr; " suffix="℃" :min="0" :max="40" fluid />
-        </div>
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(20);
-const value2 = ref(50);
-const value3 = ref(10);
-const value4 = ref(20);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/SizesDoc.vue b/apps/labs/doc/inputnumber/SizesDoc.vue
deleted file mode 100644
index eda20dd39..000000000
--- a/apps/labs/doc/inputnumber/SizesDoc.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>InputNumber provides <i>small</i> and <i>large</i> sizes as alternatives to the base.</p>
-    </DocSectionText>
-    <div class="card flex flex-col items-center gap-4">
-        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-
-const code = ref(`
-<template>
-    <div class="card flex flex-col items-center gap-4">
-        <InputNumber v-model="value1" size="small" placeholder="Small" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value2" placeholder="Normal" mode="currency" currency="USD" locale="en-US" />
-        <InputNumber v-model="value3" size="large" placeholder="Large" mode="currency" currency="USD" locale="en-US" />
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value1 = ref(null);
-const value2 = ref(null);
-const value3 = ref(null);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/doc/inputnumber/VerticalDoc.vue b/apps/labs/doc/inputnumber/VerticalDoc.vue
deleted file mode 100644
index f531f50be..000000000
--- a/apps/labs/doc/inputnumber/VerticalDoc.vue
+++ /dev/null
@@ -1,45 +0,0 @@
-<template>
-    <DocSectionText v-bind="$attrs">
-        <p>Buttons can also placed vertically by setting <i>buttonLayout</i> as <i>vertical</i>.</p>
-    </DocSectionText>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
-            <template #incrementbuttonicon>
-                <span class="pi pi-plus" />
-            </template>
-            <template #decrementbuttonicon>
-                <span class="pi pi-minus" />
-            </template>
-        </InputNumber>
-    </div>
-    <DocSectionCode :code="code" />
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(50);
-
-const code = ref(`
-<template>
-    <div class="card flex justify-center">
-        <InputNumber v-model="value" showButtons buttonLayout="vertical" style="width: 3rem" :min="0" :max="99">
-            <template #incrementbuttonicon>
-                <span class="pi pi-plus" />
-            </template>
-            <template #decrementbuttonicon>
-                <span class="pi pi-minus" />
-            </template>
-        </InputNumber>
-    </div>
-</template>
-
-<script setup>
-import InputNumber from '@/plex/inputnumber';
-import { ref } from 'vue';
-
-const value = ref(50);
-<\/script>
-`);
-</script>
diff --git a/apps/labs/pages/inputnumber/index.vue b/apps/labs/pages/inputnumber/index.vue
deleted file mode 100644
index 9f0515cd0..000000000
--- a/apps/labs/pages/inputnumber/index.vue
+++ /dev/null
@@ -1,81 +0,0 @@
-<template>
-    <DocComponent title="Vue InputNumber Component" header="InputNumber" description="InputNumber is an input component to provide numerical input." :componentDocs="docs" />
-</template>
-
-<script>
-import ButtonsDoc from '@/doc/inputnumber/ButtonsDoc.vue';
-import CurrencyDoc from '@/doc/inputnumber/CurrencyDoc.vue';
-import DisabledDoc from '@/doc/inputnumber/DisabledDoc.vue';
-import FilledDoc from '@/doc/inputnumber/FilledDoc.vue';
-import ImportDoc from '@/doc/inputnumber/ImportDoc.vue';
-import InvalidDoc from '@/doc/inputnumber/InvalidDoc.vue';
-import LocaleDoc from '@/doc/inputnumber/LocaleDoc.vue';
-import NumeralsDoc from '@/doc/inputnumber/NumeralsDoc.vue';
-import PrefixSuffixDoc from '@/doc/inputnumber/PrefixSuffixDoc.vue';
-import SizesDoc from '@/doc/inputnumber/SizesDoc.vue';
-import VerticalDoc from '@/doc/inputnumber/VerticalDoc.vue';
-
-export default {
-    data() {
-        return {
-            docs: [
-                {
-                    id: 'import',
-                    label: 'Import',
-                    component: ImportDoc
-                },
-                {
-                    id: 'numerals',
-                    label: 'Numerals',
-                    component: NumeralsDoc
-                },
-                {
-                    id: 'locale',
-                    label: 'Locale',
-                    component: LocaleDoc
-                },
-                {
-                    id: 'currency',
-                    label: 'Currency',
-                    component: CurrencyDoc
-                },
-                {
-                    id: 'prefixsuffix',
-                    label: 'Prefix & Suffix',
-                    component: PrefixSuffixDoc
-                },
-                {
-                    id: 'buttons',
-                    label: 'Buttons',
-                    component: ButtonsDoc
-                },
-                {
-                    id: 'vertical',
-                    label: 'Vertical',
-                    component: VerticalDoc
-                },
-                {
-                    id: 'filled',
-                    label: 'Filled',
-                    component: FilledDoc
-                },
-                {
-                    id: 'sizes',
-                    label: 'Sizes',
-                    component: SizesDoc
-                },
-                {
-                    id: 'invalid',
-                    label: 'Invalid',
-                    component: InvalidDoc
-                },
-                {
-                    id: 'disabled',
-                    label: 'Disabled',
-                    component: DisabledDoc
-                }
-            ]
-        };
-    }
-};
-</script>
diff --git a/apps/labs/plex/inputnumber/index.vue b/apps/labs/plex/inputnumber/index.vue
deleted file mode 100644
index 7824f133b..000000000
--- a/apps/labs/plex/inputnumber/index.vue
+++ /dev/null
@@ -1,62 +0,0 @@
-<template>
-    <InputNumber unstyled :pt="theme" />
-</template>
-
-<script setup>
-import InputNumber from 'primevue/inputnumber';
-import { ref } from 'vue';
-
-const theme = ref({
-    root: `inline-flex relative 
-        p-vertical:flex-col p-fluid:w-full`,
-    pcInputText: {
-        root: `appearance-none rounded-md outline-none flex-auto
-        bg-surface-0 dark:bg-surface-950
-        p-filled:bg-surface-50 dark:p-filled:bg-surface-800
-        text-surface-700 dark:text-surface-0
-        placeholder:text-surface-500 dark:placeholder:text-surface-400
-        border border-surface-300 dark:border-surface-700 
-        enabled:hover:border-surface-400 dark:enabled:hover:border-surface-600
-        enabled:focus:border-primary
-        disabled:bg-surface-200 disabled:text-surface-500 
-        dark:disabled:bg-surface-700 dark:disabled:text-surface-400
-        p-invalid:border-red-400 dark:p-invalid:border-red-300
-        p-invalid:placeholder:text-red-600 dark:p-invalid:placeholder:text-red-400
-        px-3 py-2 p-fluid:w-full
-        p-small:text-sm p-small:px-[0.625rem] p-small-py-[0.375rem]
-        p-large:text-lg p-small:px-[0.875rem] p-small-py-[0.625rem]
-        transition-colors duration-200 shadow-[0_1px_2px_0_rgba(18,18,23,0.05)]
-
-        p-horizontal:order-2 p-horizontal:rounded-none
-        p-vertical:order-2 p-vertical:rounded-none p-vertical:text-center
-        p-fluid:w-[1%] p-fluid:p-vertical:w-full`
-    },
-    buttonGroup: `p-stacked:flex p-stacked:flex-col p-stacked:absolute p-stacked:top-px p-stacked:end-px p-stacked:h-[calc(100%-2px)] p-stacked:z-10`,
-    incrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
-        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
-        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
-        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
-        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
-        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
-        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
-        transition-colors duration-200
-        p-stacked:relative p-stacked:flex-auto p-stacked:border-none
-        p-stacked:p-0 p-stacked:rounded-tr-[5px]
-        p-horizontal:order-3 p-horizontal:rounded-e-md p-horizontal:border-s-0
-        p-vertical:py-2 p-vertical:order-1 p-vertical:rounded-ss-md p-vertical:rounded-se-md p-vertical:w-full p-vertical:border-b-0`,
-    incrementIcon: ``,
-    decrementButton: `flex items-center justify-center flex-grow-0 flex-shrink-0 basis-auto cursor-pointer w-10
-        bg-transparent enabled:hover:bg-surface-100 enabled:active:bg-surface-200
-        border border-surface-300 enabled:hover:border-surface-300 enabled:active:border-surface-300
-        text-surface-400 enabled:hover:text-surface-500 enabled:active:text-surface-600
-        dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
-        dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
-        dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
-        transition-colors duration-200
-        p-stacked:relative p-stacked:flex-auto p-stacked:border-none
-        p-stacked:p-0 p-stacked:rounded-br-[5px]
-        p-horizontal:order-1 p-horizontal:rounded-s-md p-horizontal:border-e-0
-        p-vertical:py-2 p-vertical:order-3 p-vertical:rounded-ee-md p-vertical:rounded-es-md p-vertical:w-full p-vertical:border-t-0`,
-    decrementIcon: ``
-});
-</script>
diff --git a/apps/volt/doc/inputnumber/ButtonsDoc.vue b/apps/volt/doc/inputnumber/ButtonsDoc.vue
index 2e2194ba3..55f7acfbc 100644
--- a/apps/volt/doc/inputnumber/ButtonsDoc.vue
+++ b/apps/volt/doc/inputnumber/ButtonsDoc.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(20);
@@ -62,7 +62,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(20);
diff --git a/apps/volt/doc/inputnumber/CurrencyDoc.vue b/apps/volt/doc/inputnumber/CurrencyDoc.vue
index 2e51b6a1a..80f9f88d8 100644
--- a/apps/volt/doc/inputnumber/CurrencyDoc.vue
+++ b/apps/volt/doc/inputnumber/CurrencyDoc.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(1500);
@@ -55,7 +55,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(1500);
diff --git a/apps/volt/doc/inputnumber/DisabledDoc.vue b/apps/volt/doc/inputnumber/DisabledDoc.vue
index 72b738e58..05456f253 100644
--- a/apps/volt/doc/inputnumber/DisabledDoc.vue
+++ b/apps/volt/doc/inputnumber/DisabledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(50);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(50);
diff --git a/apps/volt/doc/inputnumber/FilledDoc.vue b/apps/volt/doc/inputnumber/FilledDoc.vue
index 6d3bef177..0d94f0875 100644
--- a/apps/volt/doc/inputnumber/FilledDoc.vue
+++ b/apps/volt/doc/inputnumber/FilledDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/volt/doc/inputnumber/ImportDoc.vue b/apps/volt/doc/inputnumber/ImportDoc.vue
index 8a8773dce..bda912887 100644
--- a/apps/volt/doc/inputnumber/ImportDoc.vue
+++ b/apps/volt/doc/inputnumber/ImportDoc.vue
@@ -8,7 +8,7 @@ export default {
     data() {
         return {
             code: `
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 `
         };
     }
diff --git a/apps/volt/doc/inputnumber/InvalidDoc.vue b/apps/volt/doc/inputnumber/InvalidDoc.vue
index 7225599cf..b50e1cf48 100644
--- a/apps/volt/doc/inputnumber/InvalidDoc.vue
+++ b/apps/volt/doc/inputnumber/InvalidDoc.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(null);
@@ -22,7 +22,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(null);
diff --git a/apps/volt/doc/inputnumber/LocaleDoc.vue b/apps/volt/doc/inputnumber/LocaleDoc.vue
index ec82caa43..685a8e188 100644
--- a/apps/volt/doc/inputnumber/LocaleDoc.vue
+++ b/apps/volt/doc/inputnumber/LocaleDoc.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(151351);
@@ -55,7 +55,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(151351);
diff --git a/apps/volt/doc/inputnumber/NumeralsDoc.vue b/apps/volt/doc/inputnumber/NumeralsDoc.vue
index 8adf88af7..1facb7d8c 100644
--- a/apps/volt/doc/inputnumber/NumeralsDoc.vue
+++ b/apps/volt/doc/inputnumber/NumeralsDoc.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(42723);
@@ -55,7 +55,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(42723);
diff --git a/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue b/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue
index 6f416962f..4b8f7042c 100644
--- a/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue
+++ b/apps/volt/doc/inputnumber/PrefixSuffixDoc.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(20);
@@ -55,7 +55,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(20);
diff --git a/apps/volt/doc/inputnumber/SizesDoc.vue b/apps/volt/doc/inputnumber/SizesDoc.vue
index eda20dd39..0b2026b3f 100644
--- a/apps/volt/doc/inputnumber/SizesDoc.vue
+++ b/apps/volt/doc/inputnumber/SizesDoc.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(null);
@@ -28,7 +28,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value1 = ref(null);
diff --git a/apps/volt/doc/inputnumber/VerticalDoc.vue b/apps/volt/doc/inputnumber/VerticalDoc.vue
index f531f50be..9b0195676 100644
--- a/apps/volt/doc/inputnumber/VerticalDoc.vue
+++ b/apps/volt/doc/inputnumber/VerticalDoc.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(50);
@@ -36,7 +36,7 @@ const code = ref(`
 </template>
 
 <script setup>
-import InputNumber from '@/plex/inputnumber';
+import InputNumber from '@/volt/inputnumber';
 import { ref } from 'vue';
 
 const value = ref(50);
diff --git a/apps/volt/volt/inputnumber/index.vue b/apps/volt/volt/inputnumber/index.vue
index 7824f133b..de4e5bff0 100644
--- a/apps/volt/volt/inputnumber/index.vue
+++ b/apps/volt/volt/inputnumber/index.vue
@@ -39,7 +39,7 @@ const theme = ref({
         dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
         dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
         dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
-        transition-colors duration-200
+        transition-colors duration-200 disabled:pointer-events-none
         p-stacked:relative p-stacked:flex-auto p-stacked:border-none
         p-stacked:p-0 p-stacked:rounded-tr-[5px]
         p-horizontal:order-3 p-horizontal:rounded-e-md p-horizontal:border-s-0
@@ -52,7 +52,7 @@ const theme = ref({
         dark:bg-transparent dark:enabled:hover:bg-surface-800 dark:enabled:active:bg-surface-700
         dark:border-surface-700 dark:enabled:hover:border-surface-700 dark:enabled:active:border-surface-700
         dark:text-surface-400 dark:enabled:hover:text-surface-300 dark:enabled:active:text-surface-200
-        transition-colors duration-200
+        transition-colors duration-200 disabled:pointer-events-none
         p-stacked:relative p-stacked:flex-auto p-stacked:border-none
         p-stacked:p-0 p-stacked:rounded-br-[5px]
         p-horizontal:order-1 p-horizontal:rounded-s-md p-horizontal:border-e-0
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 034c8361e..d72faa348 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3058,8 +3058,8 @@ packages:
     resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
     engines: {node: '>=18.0'}
 
-  cronstrue@2.55.0:
-    resolution: {integrity: sha512-ZsBZNtQWb0Rk6CNGJlzpPBYqNE7t93Aez5ZCExLihGwmIpE5qThSTDQzDV8Z1Nw6ksmLkwI98nPKyciZ5sH7dw==}
+  cronstrue@2.56.0:
+    resolution: {integrity: sha512-/YC3b4D/E/S8ToQ7f676A2fqoC3vVpXKjJ4SMsP0jYsvRYJdZ6h9+Fq/Y7FoFDEUFCqLTca+G2qTV227lyyFZg==}
     hasBin: true
 
   cross-spawn@7.0.6:
@@ -4334,8 +4334,8 @@ packages:
     resolution: {integrity: sha512-9rrA30MRRP3gBD3HTGnC6cDFpaE1kVDWxWgqWJUN0RvDNAo+Nz/9GxB+nHOH0ifbVFy0hSA1V6vFDvnx54lTEQ==}
     engines: {node: '>=14'}
 
-  local-pkg@1.1.0:
-    resolution: {integrity: sha512-xbZBuX6gYIWrlLmZG43aAVer4ocntYO09vPy9lxd6Ns8DnR4U7N+IIeDkubinqFOHHzoMlPxTxwo0jhE7oYjAw==}
+  local-pkg@1.1.1:
+    resolution: {integrity: sha512-WunYko2W1NcdfAFpuLUoucsgULmgDBRkdxHxWQ7mK0cQqwPiy8E1enjuRBrhLtZkB5iScJ1XIPdhVEFK8aOLSg==}
     engines: {node: '>=14'}
 
   locate-path@6.0.0:
@@ -8220,7 +8220,7 @@ snapshots:
       '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
-      cronstrue: 2.55.0
+      cronstrue: 2.56.0
       destr: 2.0.3
       error-stack-parser-es: 0.1.5
       execa: 7.2.0
@@ -8267,7 +8267,7 @@ snapshots:
       '@vue/devtools-kit': 7.6.8
       birpc: 0.2.19
       consola: 3.4.0
-      cronstrue: 2.55.0
+      cronstrue: 2.56.0
       destr: 2.0.3
       error-stack-parser-es: 0.1.5
       execa: 7.2.0
@@ -8322,7 +8322,7 @@ snapshots:
       image-meta: 0.2.1
       is-installed-globally: 1.0.0
       launch-editor: 2.10.0
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magicast: 0.3.5
       nypm: 0.6.0
       ohash: 2.0.9
@@ -8365,7 +8365,7 @@ snapshots:
       eslint-plugin-vue: 9.32.0(eslint@9.21.0(jiti@2.4.2))
       eslint-processor-vue-blocks: 2.0.0(@vue/compiler-sfc@3.5.13)(eslint@9.21.0(jiti@2.4.2))
       globals: 15.15.0
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       pathe: 2.0.3
       vue-eslint-parser: 9.4.3(eslint@9.21.0(jiti@2.4.2))
     transitivePeerDependencies:
@@ -8465,7 +8465,7 @@ snapshots:
       fake-indexeddb: 6.0.0
       get-port-please: 3.1.2
       h3: 1.15.1
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       node-fetch-native: 1.6.6
       ofetch: 1.4.1
@@ -9214,7 +9214,7 @@ snapshots:
     dependencies:
       '@vue/compiler-sfc': 3.5.13
       ast-kit: 1.4.0
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string-ast: 0.7.0
       pathe: 2.0.3
       picomatch: 4.0.2
@@ -10004,7 +10004,7 @@ snapshots:
 
   croner@9.0.0: {}
 
-  cronstrue@2.55.0: {}
+  cronstrue@2.56.0: {}
 
   cross-spawn@7.0.6:
     dependencies:
@@ -11438,10 +11438,10 @@ snapshots:
       mlly: 1.7.4
       pkg-types: 1.3.1
 
-  local-pkg@1.1.0:
+  local-pkg@1.1.1:
     dependencies:
       mlly: 1.7.4
-      pkg-types: 1.3.1
+      pkg-types: 2.0.1
       quansync: 0.2.8
 
   locate-path@6.0.0:
@@ -13572,7 +13572,7 @@ snapshots:
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       fast-glob: 3.3.3
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3
@@ -13591,7 +13591,7 @@ snapshots:
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
       fast-glob: 3.3.3
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3
@@ -13608,7 +13608,7 @@ snapshots:
       acorn: 8.14.0
       escape-string-regexp: 5.0.0
       estree-walker: 3.0.3
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3
@@ -13653,7 +13653,7 @@ snapshots:
     dependencies:
       chokidar: 3.6.0
       debug: 4.4.0(supports-color@9.4.0)
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       mlly: 1.7.4
       tinyglobby: 0.2.12
@@ -13675,7 +13675,7 @@ snapshots:
       chokidar: 3.6.0
       fast-glob: 3.3.3
       json5: 2.2.3
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3
@@ -13697,7 +13697,7 @@ snapshots:
       chokidar: 3.6.0
       fast-glob: 3.3.3
       json5: 2.2.3
-      local-pkg: 1.1.0
+      local-pkg: 1.1.1
       magic-string: 0.30.17
       mlly: 1.7.4
       pathe: 2.0.3