From 067da063a8a0d319d3bd89ba678df00dc35f791d Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 21 Feb 2024 21:38:16 +0300
Subject: [PATCH] Initiated InputOtp

---
 api-generator/components/inputotp.js          |  80 ++++
 assets/menu/menu.json                         |   5 +
 components/lib/inputotp/BaseInputOtp.vue      |  53 +++
 components/lib/inputotp/InputOtp.d.ts         | 227 +++++++++
 components/lib/inputotp/InputOtp.spec.js      |  20 +
 components/lib/inputotp/InputOtp.vue          | 155 +++++++
 components/lib/inputotp/package.json          |   9 +
 .../lib/inputotp/style/InputOtpStyle.d.ts     |   3 +
 .../lib/inputotp/style/InputOtpStyle.js       |  11 +
 components/lib/inputotp/style/package.json    |   6 +
 doc/common/apidoc/index.json                  | 431 +++++++++++++++++-
 doc/inputotp/AccessibilityDoc.vue             |  32 ++
 doc/inputotp/BasicDoc.vue                     |  54 +++
 doc/inputotp/ImportDoc.vue                    |  18 +
 doc/inputotp/IntegerOnlyDoc.vue               |  54 +++
 doc/inputotp/MaskDoc.vue                      |  54 +++
 doc/inputotp/pt/PTImage.vue                   |   8 +
 doc/inputotp/pt/index.vue                     |  35 ++
 doc/inputotp/theming/StyledDoc.vue            |  29 ++
 doc/inputotp/theming/TailwindDoc.vue          |   6 +
 doc/inputotp/theming/index.vue                |  40 ++
 .../runtime/core/components/index.js          |   1 +
 nuxt-vite.config.js                           |   1 +
 pages/inputotp/index.vue                      |  49 ++
 public/themes/arya-blue/theme.css             |  11 +
 public/themes/arya-green/theme.css            |  11 +
 public/themes/arya-orange/theme.css           |  11 +
 public/themes/arya-purple/theme.css           |  11 +
 public/themes/aura-dark-amber/theme.css       |  11 +
 public/themes/aura-dark-blue/theme.css        |  11 +
 public/themes/aura-dark-cyan/theme.css        |  11 +
 public/themes/aura-dark-green/theme.css       |  11 +
 public/themes/aura-dark-indigo/theme.css      |  11 +
 public/themes/aura-dark-lime/theme.css        |  11 +
 public/themes/aura-dark-noir/theme.css        |  11 +
 public/themes/aura-dark-pink/theme.css        |  11 +
 public/themes/aura-dark-purple/theme.css      |  11 +
 public/themes/aura-dark-teal/theme.css        |  11 +
 public/themes/aura-light-amber/theme.css      |  11 +
 public/themes/aura-light-blue/theme.css       |  11 +
 public/themes/aura-light-cyan/theme.css       |  11 +
 public/themes/aura-light-green/theme.css      |  11 +
 public/themes/aura-light-indigo/theme.css     |  11 +
 public/themes/aura-light-lime/theme.css       |  11 +
 public/themes/aura-light-noir/theme.css       |  11 +
 public/themes/aura-light-pink/theme.css       |  11 +
 public/themes/aura-light-purple/theme.css     |  11 +
 public/themes/aura-light-teal/theme.css       |  11 +
 public/themes/bootstrap4-dark-blue/theme.css  |  11 +
 .../themes/bootstrap4-dark-purple/theme.css   |  11 +
 public/themes/bootstrap4-light-blue/theme.css |  11 +
 .../themes/bootstrap4-light-purple/theme.css  |  11 +
 public/themes/fluent-light/theme.css          |  11 +
 public/themes/lara-dark-amber/theme.css       |  11 +
 public/themes/lara-dark-blue/theme.css        |  11 +
 public/themes/lara-dark-cyan/theme.css        |  11 +
 public/themes/lara-dark-green/theme.css       |  11 +
 public/themes/lara-dark-indigo/theme.css      |  11 +
 public/themes/lara-dark-pink/theme.css        |  11 +
 public/themes/lara-dark-purple/theme.css      |  11 +
 public/themes/lara-dark-teal/theme.css        |  11 +
 public/themes/lara-light-amber/theme.css      |  11 +
 public/themes/lara-light-blue/theme.css       |  11 +
 public/themes/lara-light-cyan/theme.css       |  11 +
 public/themes/lara-light-green/theme.css      |  11 +
 public/themes/lara-light-indigo/theme.css     |  11 +
 public/themes/lara-light-pink/theme.css       |  11 +
 public/themes/lara-light-purple/theme.css     |  11 +
 public/themes/lara-light-teal/theme.css       |  11 +
 public/themes/luna-amber/theme.css            |  11 +
 public/themes/luna-blue/theme.css             |  11 +
 public/themes/luna-green/theme.css            |  11 +
 public/themes/luna-pink/theme.css             |  11 +
 public/themes/md-dark-deeppurple/theme.css    |  11 +
 public/themes/md-dark-indigo/theme.css        |  11 +
 public/themes/md-light-deeppurple/theme.css   |  11 +
 public/themes/md-light-indigo/theme.css       |  11 +
 public/themes/mdc-dark-deeppurple/theme.css   |  11 +
 public/themes/mdc-dark-indigo/theme.css       |  11 +
 public/themes/mdc-light-deeppurple/theme.css  |  11 +
 public/themes/mdc-light-indigo/theme.css      |  11 +
 public/themes/mira/theme.css                  |  11 +
 public/themes/nano/theme.css                  |  11 +
 public/themes/nova-accent/theme.css           |  11 +
 public/themes/nova-alt/theme.css              |  11 +
 public/themes/nova-vue/theme.css              |  11 +
 public/themes/nova/theme.css                  |  11 +
 public/themes/rhea/theme.css                  |  11 +
 public/themes/saga-blue/theme.css             |  11 +
 public/themes/saga-green/theme.css            |  11 +
 public/themes/saga-orange/theme.css           |  11 +
 public/themes/saga-purple/theme.css           |  11 +
 public/themes/soho-dark/theme.css             |  11 +
 public/themes/soho-light/theme.css            |  11 +
 public/themes/tailwind-light/theme.css        |  11 +
 public/themes/vela-blue/theme.css             |  11 +
 public/themes/vela-green/theme.css            |  11 +
 public/themes/vela-orange/theme.css           |  11 +
 public/themes/vela-purple/theme.css           |  11 +
 public/themes/viva-dark/theme.css             |  11 +
 public/themes/viva-light/theme.css            |  11 +
 rollup.config.js                              |   1 +
 102 files changed, 2228 insertions(+), 1 deletion(-)
 create mode 100644 api-generator/components/inputotp.js
 create mode 100644 components/lib/inputotp/BaseInputOtp.vue
 create mode 100755 components/lib/inputotp/InputOtp.d.ts
 create mode 100644 components/lib/inputotp/InputOtp.spec.js
 create mode 100755 components/lib/inputotp/InputOtp.vue
 create mode 100644 components/lib/inputotp/package.json
 create mode 100644 components/lib/inputotp/style/InputOtpStyle.d.ts
 create mode 100644 components/lib/inputotp/style/InputOtpStyle.js
 create mode 100644 components/lib/inputotp/style/package.json
 create mode 100644 doc/inputotp/AccessibilityDoc.vue
 create mode 100644 doc/inputotp/BasicDoc.vue
 create mode 100644 doc/inputotp/ImportDoc.vue
 create mode 100644 doc/inputotp/IntegerOnlyDoc.vue
 create mode 100644 doc/inputotp/MaskDoc.vue
 create mode 100644 doc/inputotp/pt/PTImage.vue
 create mode 100644 doc/inputotp/pt/index.vue
 create mode 100644 doc/inputotp/theming/StyledDoc.vue
 create mode 100644 doc/inputotp/theming/TailwindDoc.vue
 create mode 100644 doc/inputotp/theming/index.vue
 create mode 100644 pages/inputotp/index.vue

diff --git a/api-generator/components/inputotp.js b/api-generator/components/inputotp.js
new file mode 100644
index 000000000..c4a86f705
--- /dev/null
+++ b/api-generator/components/inputotp.js
@@ -0,0 +1,80 @@
+const InputSwitchProps = [
+    {
+        name: 'modelValue',
+        type: 'boolean',
+        default: 'null',
+        description: 'Specifies whether a inputswitch should be checked or not.'
+    },
+    {
+        name: 'trueValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in checked state.'
+    },
+    {
+        name: 'falseValue',
+        type: 'any',
+        default: 'null',
+        description: 'Value in unchecked state.'
+    },
+    {
+        name: 'inputId',
+        type: 'string',
+        default: 'null',
+        description: 'Identifier of the underlying input element.'
+    },
+    {
+        name: 'inputStyle',
+        type: 'object',
+        default: 'null',
+        description: 'Inline style of the input field.'
+    },
+    {
+        name: 'inputClass',
+        type: 'string | object',
+        default: 'null',
+        description: 'Style class of the input field.'
+    },
+    {
+        name: 'inputProps',
+        type: 'object',
+        default: 'null',
+        description: 'Used to pass all properties of the HTMLInputElement to the focusable input element inside the component.'
+    },
+    {
+        name: 'pt',
+        type: 'any',
+        default: 'null',
+        description: 'Used to pass attributes to DOM elements inside the component.'
+    },
+    {
+        name: 'unstyled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When enabled, it removes component related styles in the core.'
+    }
+];
+
+const InputSwitchEvents = [
+    {
+        name: 'click',
+        description: 'Callback to invoke on click.'
+    },
+    {
+        name: 'change',
+        description: 'Callback to invoke on value change.'
+    },
+    {
+        name: 'input',
+        description: 'Callback to invoke on value change.'
+    }
+];
+
+module.exports = {
+    inputswitch: {
+        name: 'InputSwitch',
+        description: 'InputSwitch is used to select a boolean value.',
+        props: InputSwitchProps,
+        events: InputSwitchEvents
+    }
+};
diff --git a/assets/menu/menu.json b/assets/menu/menu.json
index ce32aa7a0..f0dc6cc2e 100644
--- a/assets/menu/menu.json
+++ b/assets/menu/menu.json
@@ -115,6 +115,11 @@
                             "name": "InputNumber",
                             "to": "/inputnumber"
                         },
+                        {
+                            "name": "InputOtp",
+                            "to": "/inputotp",
+                            "badge": "NEW"
+                        },
                         {
                             "name": "InputSwitch",
                             "to": "/inputswitch"
diff --git a/components/lib/inputotp/BaseInputOtp.vue b/components/lib/inputotp/BaseInputOtp.vue
new file mode 100644
index 000000000..b05b42582
--- /dev/null
+++ b/components/lib/inputotp/BaseInputOtp.vue
@@ -0,0 +1,53 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import InputOtpStyle from 'primevue/inputotp/style';
+
+export default {
+    name: 'BaseInputOtp',
+    extends: BaseComponent,
+    props: {
+        modelValue: {
+            type: null,
+            default: false
+        },
+        invalid: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        variant: {
+            type: String,
+            default: null
+        },
+        tabindex: {
+            type: Number,
+            default: null
+        },
+        length: {
+            type: Number,
+            default: 4
+        },
+        mask: {
+            type: Boolean,
+            default: false
+        },
+        integerOnly: {
+            type: Boolean,
+            default: false
+        }
+    },
+    style: InputOtpStyle,
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>
diff --git a/components/lib/inputotp/InputOtp.d.ts b/components/lib/inputotp/InputOtp.d.ts
new file mode 100755
index 000000000..83506dbf9
--- /dev/null
+++ b/components/lib/inputotp/InputOtp.d.ts
@@ -0,0 +1,227 @@
+/**
+ *
+ * InputSwitch is used to select a boolean value.
+ *
+ * [Live Demo](https://www.primevue.org/inputswitch/)
+ *
+ * @module inputotp
+ *
+ */
+import { ComponentHooks } from '../basecomponent/BaseComponent';
+import { PassThroughOptions } from '../passthrough';
+import { ClassComponent, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
+
+export declare type InputSwitchPassThroughOptionType = InputSwitchPassThroughAttributes | ((options: InputSwitchPassThroughMethodOptions) => InputSwitchPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface InputSwitchPassThroughMethodOptions {
+    /**
+     * Defines instance.
+     */
+    instance: any;
+    /**
+     * Defines valid properties.
+     */
+    props: InputSwitchProps;
+    /**
+     * Defines current inline state.
+     */
+    state: InputSwitchState;
+    /**
+     * Defines current options.
+     */
+    context: InputSwitchContext;
+    /**
+     * Defines valid attributes.
+     */
+    attrs: any;
+    /**
+     * Defines parent options.
+     */
+    parent: any;
+    /**
+     * Defines passthrough(pt) options in global config.
+     */
+    global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link InputSwitchProps.pt}
+ */
+export interface InputSwitchPassThroughOptions {
+    /**
+     * Used to pass attributes to the root's DOM element.
+     */
+    root?: InputSwitchPassThroughOptionType;
+    /**
+     * Used to pass attributes to the input's DOM element.
+     */
+    input?: InputSwitchPassThroughOptionType;
+    /**
+     * Used to pass attributes to the slider's DOM element.
+     */
+    slider?: InputSwitchPassThroughOptionType;
+    /**
+     * Used to manage all lifecycle hooks.
+     * @see {@link BaseComponent.ComponentHooks}
+     */
+    hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface InputSwitchPassThroughAttributes {
+    [key: string]: any;
+}
+
+/**
+ * Defines current inline state in InputSwitch component.
+ */
+export interface InputSwitchState {
+    [key: string]: any;
+}
+
+/**
+ * Defines valid properties in InputSwitch component.
+ */
+export interface InputSwitchProps {
+    /**
+     * Specifies whether a inputswitch should be checked or not.
+     * @defaultValue false
+     */
+    modelValue?: boolean | string | undefined;
+    /**
+     * Value in checked state.
+     * @defaultValue true
+     */
+    trueValue?: any;
+    /**
+     * Value in unchecked state.
+     * @defaultValue false
+     */
+    falseValue?: any;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should be disabled.
+     * @defaultValue false
+     */
+    disabled?: boolean | undefined;
+    /**
+     * When present, it specifies that an input field is read-only.
+     * @default false
+     */
+    readonly?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * 	Identifier of the underlying input element.
+     */
+    inputId?: string | undefined;
+    /**
+     * Style class of the input field.
+     */
+    inputClass?: string | object | undefined;
+    /**
+     * Inline style of the input field.
+     */
+    inputStyle?: object | undefined;
+    /**
+     * Establishes relationships between the component and label(s) where its value should be one or more element IDs.
+     */
+    ariaLabelledby?: string | undefined;
+    /**
+     * Establishes a string value that labels the component.
+     */
+    ariaLabel?: string | undefined;
+    /**
+     * Used to pass attributes to DOM elements inside the component.
+     * @type {InputSwitchPassThroughOptions}
+     */
+    pt?: PassThrough<InputSwitchPassThroughOptions>;
+    /**
+     * Used to configure passthrough(pt) options of the component.
+     * @type {PassThroughOptions}
+     */
+    ptOptions?: PassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
+}
+
+/**
+ * Defines current options in InputSwitch component.
+ */
+export interface InputSwitchContext {
+    /**
+     * Current checked state of the item as a boolean.
+     * @defaultValue false
+     */
+    checked: boolean;
+    /**
+     * Current disabled state of the item as a boolean.
+     * @defaultValue false
+     */
+    disabled: boolean;
+}
+
+export interface InputSwitchSlots {}
+
+/**
+ * Defines valid emits in InputSwitch component.
+ */
+export interface InputSwitchEmits {
+    /**
+     * Emitted when the value changes.
+     * @param {boolean} value - New value.
+     */
+    'update:modelValue'(value: boolean): void;
+    /**
+     * Callback to invoke on value change.
+     * @param {Event} event - Browser event.
+     */
+    change(event: Event): void;
+    /**
+     * Callback to invoke when the component receives focus.
+     * @param {Event} event - Browser event.
+     */
+    focus(event: Event): void;
+    /**
+     * Callback to invoke when the component loses focus.
+     * @param {Event} event - Browser event.
+     */
+    blur(event: Event): void;
+}
+
+/**
+ * **PrimeVue - InputSwitch**
+ *
+ * _InputSwitch is used to select a boolean value._
+ *
+ * [Live Demo](https://www.primevue.org/inputswitch/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group Component
+ *
+ */
+declare class InputSwitch extends ClassComponent<InputSwitchProps, InputSwitchSlots, InputSwitchEmits> {}
+
+declare module '@vue/runtime-core' {
+    interface GlobalComponents {
+        InputSwitch: GlobalComponentConstructor<InputSwitch>;
+    }
+}
+
+export default InputSwitch;
diff --git a/components/lib/inputotp/InputOtp.spec.js b/components/lib/inputotp/InputOtp.spec.js
new file mode 100644
index 000000000..df8f16fc5
--- /dev/null
+++ b/components/lib/inputotp/InputOtp.spec.js
@@ -0,0 +1,20 @@
+import { mount } from '@vue/test-utils';
+import InputSwitch from './InputSwitch.vue';
+
+describe('InputSwitch.vue', () => {
+    it('should exist', async () => {
+        const wrapper = mount(InputSwitch);
+
+        expect(wrapper.find('.p-inputswitch.p-component').exists()).toBe(true);
+        expect(wrapper.find('.p-inputswitch-slider').exists()).toBe(true);
+
+        await wrapper.vm.onChange({});
+
+        expect(wrapper.emitted()['update:modelValue'][0]).toEqual([true]);
+
+        await wrapper.setProps({ modelValue: true });
+
+        expect(wrapper.vm.checked).toBe(true);
+        expect(wrapper.find('.p-inputswitch').classes()).toContain('p-highlight');
+    });
+});
diff --git a/components/lib/inputotp/InputOtp.vue b/components/lib/inputotp/InputOtp.vue
new file mode 100755
index 000000000..9522cb48d
--- /dev/null
+++ b/components/lib/inputotp/InputOtp.vue
@@ -0,0 +1,155 @@
+<template>
+    <div :class="cx('root')" v-bind="ptmi('root')">
+        <OtpInputText
+            v-for="i in length"
+            :key="i"
+            v-model="tokens[i - 1]"
+            :type="inputType"
+            :class="cx('input')"
+            maxlength="1"
+            :inputmode="inputMode"
+            @input="onInput"
+            @focus="onFocus"
+            @blur="onBlur"
+            @paste="onPaste"
+            @keydown="onKeyDown($event, i - 1)"
+            :pt="ptm('input')"
+        />
+    </div>
+</template>
+
+<script>
+import InputText from 'primevue/inputtext';
+import BaseInputOtp from './BaseInputOtp.vue';
+
+export default {
+    name: 'InputOtp',
+    extends: BaseInputOtp,
+    inheritAttrs: false,
+    emits: ['update:modelValue', 'change', 'focus', 'blur'],
+    data() {
+        return {
+            tokens: []
+        };
+    },
+    watch: {
+        modelValue: {
+            immediate: true,
+            handler(newValue) {
+                this.tokens = newValue ? newValue.split('') : new Array(this.length);
+            }
+        }
+    },
+    methods: {
+        getPTOptions(key) {
+            const _ptm = key === 'root' ? this.ptmi : this.ptm;
+
+            return _ptm(key, {
+                context: {
+                    checked: this.checked,
+                    disabled: this.disabled
+                }
+            });
+        },
+        onInput(event) {
+            this.moveToNext(event);
+            this.updateModel(event);
+        },
+        updateModel(event) {
+            const newValue = this.tokens.join('');
+
+            this.$emit('update:modelValue', newValue);
+            this.$emit('change', {
+                originalEvent: event,
+                value: newValue
+            });
+        },
+        moveToPrev(event) {
+            var prevElement = event.target.previousElementSibling;
+
+            if (prevElement) {
+                prevElement.focus();
+                prevElement.select();
+            }
+        },
+        moveToNext(event) {
+            var nextElement = event.target.nextElementSibling;
+
+            if (nextElement) {
+                nextElement.focus();
+                nextElement.select();
+            }
+        },
+        onFocus(event) {
+            event.target.select();
+            this.$emit('focus', event);
+        },
+        onBlur(event) {
+            this.$emit('blur', event);
+        },
+        onKeyDown(event, index) {
+            const keyCode = event.keyCode;
+
+            switch (keyCode) {
+                case 37:
+                    this.moveToPrev(event);
+                    event.preventDefault();
+
+                    break;
+
+                case 38:
+                case 40:
+                    event.preventDefault();
+
+                    break;
+
+                case 39:
+                    this.moveToNext(event);
+                    event.preventDefault();
+
+                    break;
+
+                case 8:
+                    event.preventDefault();
+                    this.tokens[index] = '';
+                    this.moveToPrev(event);
+                    this.updateModel(event);
+
+                    break;
+
+                default:
+                    if (this.integerOnly && !(event.keyCode >= 48 && event.keyCode <= 57)) {
+                        event.preventDefault();
+                    }
+
+                    break;
+            }
+        },
+        onPaste(event) {
+            let paste = event.clipboardData.getData('text');
+
+            if (paste.length) {
+                let pastedCode = paste.substring(0, this.length + 1);
+
+                if (!this.isIntegerOnly || !isNaN(pastedCode)) {
+                    this.tokens = pastedCode.split('');
+                    this.updateModel(event);
+                }
+            }
+
+            event.preventDefault();
+        }
+    },
+    computed: {
+        inputMode() {
+            return this.integerOnly ? 'number' : 'text';
+        },
+        inputType() {
+            return this.mask ? 'password' : 'text';
+        }
+    },
+    components: {
+        OtpInputText: InputText
+    }
+};
+</script>
diff --git a/components/lib/inputotp/package.json b/components/lib/inputotp/package.json
new file mode 100644
index 000000000..39b0a1db3
--- /dev/null
+++ b/components/lib/inputotp/package.json
@@ -0,0 +1,9 @@
+{
+    "main": "./inputotp.cjs.js",
+    "module": "./inputotp.esm.js",
+    "unpkg": "./inputotp.min.js",
+    "types": "./inputotp.d.ts",
+    "browser": {
+        "./sfc": "./inputotp.vue"
+    }
+}
diff --git a/components/lib/inputotp/style/InputOtpStyle.d.ts b/components/lib/inputotp/style/InputOtpStyle.d.ts
new file mode 100644
index 000000000..c52582775
--- /dev/null
+++ b/components/lib/inputotp/style/InputOtpStyle.d.ts
@@ -0,0 +1,3 @@
+import { BaseStyle } from '../../base/style/BaseStyle';
+
+export interface InputOtpStyle extends BaseStyle {}
diff --git a/components/lib/inputotp/style/InputOtpStyle.js b/components/lib/inputotp/style/InputOtpStyle.js
new file mode 100644
index 000000000..f1a9db114
--- /dev/null
+++ b/components/lib/inputotp/style/InputOtpStyle.js
@@ -0,0 +1,11 @@
+import BaseStyle from 'primevue/base/style';
+
+const classes = {
+    root: ({ props }) => ['p-inputotp p-component'],
+    input: 'p-inputotp-input'
+};
+
+export default BaseStyle.extend({
+    name: 'inputotp',
+    classes
+});
diff --git a/components/lib/inputotp/style/package.json b/components/lib/inputotp/style/package.json
new file mode 100644
index 000000000..47e678339
--- /dev/null
+++ b/components/lib/inputotp/style/package.json
@@ -0,0 +1,6 @@
+{
+    "main": "./inputotpstyle.cjs.js",
+    "module": "./inputotpstyle.esm.js",
+    "unpkg": "./inputotpstyle.min.js",
+    "types": "./inputotpstyle.d.ts"
+}
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 44c59e757..1257694f1 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -5418,7 +5418,7 @@
                         }
                     ],
                     "methods": [],
-                    "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DataViewLayoutOptionsStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,AccordionStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,TriStateCheckboxStyle,VirtualScrollerStyle"
+                    "extendedBy": "AccordionStyle,AccordionTabStyle,AnimateOnScrollStyle,AutoCompleteStyle,AvatarStyle,AvatarGroupStyle,BadgeStyle,BadgeDirectiveStyle,BaseComponentStyle,BaseIconStyle,BlockUIStyle,BreadcrumbStyle,ButtonStyle,ButtonGroupStyle,CalendarStyle,CardStyle,CarouselStyle,CascadeSelectStyle,ChartStyle,CheckboxStyle,ChipStyle,ChipsStyle,ColorPickerStyle,ColumnStyle,ColumnGroupStyle,ConfirmDialogStyle,ConfirmPopupStyle,ContextMenuStyle,DataTableStyle,DataViewStyle,DataViewLayoutOptionsStyle,DeferredContentStyle,DialogStyle,DividerStyle,DockStyle,DropdownStyle,DynamicDialogStyle,EditorStyle,FieldsetStyle,AccordionStyle,FloatLabelStyle,FocusTrapStyle,GalleriaStyle,IconFieldStyle,ImageStyle,InlineMessageStyle,InplaceStyle,InputGroupStyle,InputGroupAddonStyle,InputIconStyle,InputMaskStyle,InputNumberStyle,InputOtpStyle,InputSwitchStyle,InputTextStyle,KnobStyle,ListboxStyle,MegaMenuStyle,MenuStyle,MenubarStyle,MessageStyle,MeterGroupStyle,MultiSelectStyle,OrderListStyle,OrganizationChartStyle,OverlayPanelStyle,PaginatorStyle,PanelStyle,PanelMenuStyle,PasswordStyle,PickListStyle,PortalStyle,ProgressBarStyle,ProgressSpinnerStyle,RadioButtonStyle,RatingStyle,AccordionStyle,RowStyle,ScrollPanelStyle,ScrollTopStyle,SelectButtonStyle,SidebarStyle,SkeletonStyle,SliderStyle,SpeedDialStyle,SplitButtonStyle,SplitterStyle,SplitterPanelStyle,StepperStyle,StepperPanelStyle,StepsStyle,StyleClassStyle,TabMenuStyle,TabPanelStyle,TabViewStyle,TagStyle,TerminalStyle,TextareaStyle,TieredMenuStyle,TimelineStyle,ToastStyle,ToggleButtonStyle,ToolbarStyle,TooltipStyle,TreeStyle,TreeSelectStyle,TreeTableStyle,TriStateCheckboxStyle,VirtualScrollerStyle"
                 }
             }
         }
@@ -31974,6 +31974,435 @@
             }
         }
     },
+    "inputotp": {
+        "description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/inputswitch/)",
+        "components": {
+            "default": {
+                "description": "InputSwitch is used to select a boolean value.",
+                "methods": {
+                    "description": "Defines methods that can be accessed by the component's reference.",
+                    "values": []
+                }
+            }
+        },
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "InputSwitchPassThroughMethodOptions": {
+                    "description": "Custom passthrough(pt) option method.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "instance",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines instance."
+                        },
+                        {
+                            "name": "props",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputSwitchProps",
+                            "default": "",
+                            "description": "Defines valid properties."
+                        },
+                        {
+                            "name": "state",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputSwitchState",
+                            "default": "",
+                            "description": "Defines current inline state."
+                        },
+                        {
+                            "name": "context",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "InputSwitchContext",
+                            "default": "",
+                            "description": "Defines current options."
+                        },
+                        {
+                            "name": "attrs",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines valid attributes."
+                        },
+                        {
+                            "name": "parent",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "",
+                            "description": "Defines parent options."
+                        },
+                        {
+                            "name": "global",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "undefined | object",
+                            "default": "",
+                            "description": "Defines passthrough(pt) options in global config."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchPassThroughOptions": {
+                    "description": "Custom passthrough(pt) options.",
+                    "relatedProp": "InputSwitchProps.pt",
+                    "props": [
+                        {
+                            "name": "root",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the root's DOM element."
+                        },
+                        {
+                            "name": "input",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the input's DOM element."
+                        },
+                        {
+                            "name": "slider",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "InputSwitchPassThroughOptionType",
+                            "default": "",
+                            "description": "Used to pass attributes to the slider's DOM element."
+                        },
+                        {
+                            "name": "hooks",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "ComponentHooks",
+                            "default": "",
+                            "description": "Used to manage all lifecycle hooks."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchPassThroughAttributes": {
+                    "description": "Custom passthrough attributes for each DOM elements",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchState": {
+                    "description": "Defines current inline state in InputSwitch component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "[key: string]",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "any"
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchProps": {
+                    "description": "Defines valid properties in InputSwitch component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "modelValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | boolean",
+                            "default": "false",
+                            "description": "Specifies whether a inputswitch should be checked or not."
+                        },
+                        {
+                            "name": "trueValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "true",
+                            "description": "Value in checked state."
+                        },
+                        {
+                            "name": "falseValue",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "any",
+                            "default": "false",
+                            "description": "Value in unchecked state."
+                        },
+                        {
+                            "name": "invalid",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should have invalid state style."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When present, it specifies that the component should be disabled."
+                        },
+                        {
+                            "name": "readonly",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "",
+                            "description": "When present, it specifies that an input field is read-only."
+                        },
+                        {
+                            "name": "tabindex",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "number",
+                            "default": "",
+                            "description": "Index of the element in tabbing order."
+                        },
+                        {
+                            "name": "inputId",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Identifier of the underlying input element."
+                        },
+                        {
+                            "name": "inputClass",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string | object",
+                            "default": "",
+                            "description": "Style class of the input field."
+                        },
+                        {
+                            "name": "inputStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": "",
+                            "description": "Inline style of the input field."
+                        },
+                        {
+                            "name": "ariaLabelledby",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes relationships between the component and label(s) where its value should be one or more element IDs."
+                        },
+                        {
+                            "name": "ariaLabel",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Establishes a string value that labels the component."
+                        },
+                        {
+                            "name": "pt",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThrough<InputSwitchPassThroughOptions>",
+                            "default": "",
+                            "description": "Used to pass attributes to DOM elements inside the component."
+                        },
+                        {
+                            "name": "ptOptions",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "PassThroughOptions",
+                            "default": "",
+                            "description": "Used to configure passthrough(pt) options of the component."
+                        },
+                        {
+                            "name": "unstyled",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "When enabled, it removes component related styles in the core."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchContext": {
+                    "description": "Defines current options in InputSwitch component.",
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "checked",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current checked state of the item as a boolean."
+                        },
+                        {
+                            "name": "disabled",
+                            "optional": false,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Current disabled state of the item as a boolean."
+                        }
+                    ],
+                    "methods": []
+                },
+                "InputSwitchSlots": {
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": []
+                },
+                "InputSwitchEmits": {
+                    "description": "Defines valid emits in InputSwitch component.",
+                    "relatedProp": "",
+                    "props": [],
+                    "methods": [
+                        {
+                            "name": "update:modelValue",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "optional": false,
+                                    "type": "boolean",
+                                    "description": "New value."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Emitted when the value changes."
+                        },
+                        {
+                            "name": "change",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke on value change."
+                        },
+                        {
+                            "name": "focus",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the component receives focus."
+                        },
+                        {
+                            "name": "blur",
+                            "parameters": [
+                                {
+                                    "name": "event",
+                                    "optional": false,
+                                    "type": "Event",
+                                    "description": "Browser event."
+                                }
+                            ],
+                            "returnType": "void",
+                            "description": "Callback to invoke when the component loses focus."
+                        }
+                    ]
+                }
+            }
+        },
+        "types": {
+            "description": "Defines the custom types used by the module.",
+            "values": {
+                "InputSwitchPassThroughOptionType": {
+                    "values": "InputSwitchPassThroughAttributes | (options: InputSwitchPassThroughMethodOptions) => undefined | string | null | undefined"
+                }
+            }
+        }
+    },
+    "inputotp/style/InputOtpStyle": {
+        "interfaces": {
+            "description": "Defines the custom interfaces used by the module.",
+            "eventDescription": "Defines the custom events used by the component's emit.",
+            "methodDescription": "Defines methods that can be accessed by the component's reference.",
+            "typeDescription": "Defines the custom types used by the module.",
+            "values": {
+                "InputOtpStyle": {
+                    "relatedProp": "",
+                    "props": [
+                        {
+                            "name": "name",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "css",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": ""
+                        },
+                        {
+                            "name": "classes",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "inlineStyles",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "object",
+                            "default": ""
+                        },
+                        {
+                            "name": "loadStyle",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        },
+                        {
+                            "name": "getStyleSheet",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "Function",
+                            "default": ""
+                        }
+                    ],
+                    "methods": [],
+                    "extendedTypes": "BaseStyle"
+                }
+            }
+        }
+    },
     "inputswitch": {
         "description": "InputSwitch is used to select a boolean value.\n\n[Live Demo](https://www.primevue.org/inputswitch/)",
         "components": {
diff --git a/doc/inputotp/AccessibilityDoc.vue b/doc/inputotp/AccessibilityDoc.vue
new file mode 100644
index 000000000..29470c777
--- /dev/null
+++ b/doc/inputotp/AccessibilityDoc.vue
@@ -0,0 +1,32 @@
+<template>
+    <DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
+        <h3>Screen Reader</h3>
+        <p>Input OTP uses a set of InputText components, refer to the <NuxtLink to="/inputtext">InputText</NuxtLink> component for more information about the screen reader support.</p>
+
+        <h3>Keyboard Support</h3>
+        <div class="doc-tablewrapper">
+            <table class="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><i>tab</i></td>
+                        <td>Moves focus to the input otp.</td>
+                    </tr>
+                    <tr>
+                        <td><i>right arrow</i></td>
+                        <td>Moves focus to the next input element.</td>
+                    </tr>
+                    <tr>
+                        <td><i>left arrow</i></td>
+                        <td>Moves focus to the next previous element.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </DocSectionText>
+</template>
diff --git a/doc/inputotp/BasicDoc.vue b/doc/inputotp/BasicDoc.vue
new file mode 100644
index 000000000..ac72aad11
--- /dev/null
+++ b/doc/inputotp/BasicDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Two-way value binding is defined using <i>v-model</i>. The number of characters is defined with the <i>length</i> property, which is set to 4 by default.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value" />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputOtp v-model="value" />
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value" />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value" />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputotp/ImportDoc.vue b/doc/inputotp/ImportDoc.vue
new file mode 100644
index 000000000..6c589aa09
--- /dev/null
+++ b/doc/inputotp/ImportDoc.vue
@@ -0,0 +1,18 @@
+<template>
+    <DocSectionText v-bind="$attrs" />
+    <DocSectionCode :code="code" hideToggleCode importCode hideStackBlitz />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            code: {
+                basic: `
+import InputOtp from 'primevue/inputotp';
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputotp/IntegerOnlyDoc.vue b/doc/inputotp/IntegerOnlyDoc.vue
new file mode 100644
index 000000000..55a525e79
--- /dev/null
+++ b/doc/inputotp/IntegerOnlyDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>When <i>integerOnly</i> is present, only integers can be accepted as input.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value" integerOnly />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputOtp v-model="value" integerOnly />
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value" integerOnly />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value" integerOnly />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputotp/MaskDoc.vue b/doc/inputotp/MaskDoc.vue
new file mode 100644
index 000000000..153ad36b4
--- /dev/null
+++ b/doc/inputotp/MaskDoc.vue
@@ -0,0 +1,54 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>Enable the <i>mask</i> option to hide the values in the input fields.</p>
+    </DocSectionText>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value" mask />
+    </div>
+    <DocSectionCode :code="code" />
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null,
+            code: {
+                basic: `
+<InputOtp v-model="value" mask />
+`,
+                options: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value" mask />
+    </div>
+</template>
+
+<script>
+export default {
+    data() {
+        return {
+            value: null
+        }
+    }
+};
+<\/script>
+`,
+                composition: `
+<template>
+    <div class="card flex justify-content-center">
+        <InputOtp v-model="value" mask />
+    </div>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const value = ref(null);
+<\/script>
+`
+            }
+        };
+    }
+};
+</script>
diff --git a/doc/inputotp/pt/PTImage.vue b/doc/inputotp/pt/PTImage.vue
new file mode 100644
index 000000000..60ede1567
--- /dev/null
+++ b/doc/inputotp/pt/PTImage.vue
@@ -0,0 +1,8 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>{{ $attrs.description }}</p>
+    </DocSectionText>
+    <div class="card">
+        <img class="w-full" src="https://primefaces.org/cdn/primevue/images/pt/inputswitch.jpg" />
+    </div>
+</template>
diff --git a/doc/inputotp/pt/index.vue b/doc/inputotp/pt/index.vue
new file mode 100644
index 000000000..584d9a293
--- /dev/null
+++ b/doc/inputotp/pt/index.vue
@@ -0,0 +1,35 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputSwitch Pass Through</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import PTImage from './PTImage.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'pt.image',
+                    label: 'Wireframe',
+                    component: PTImage
+                },
+                {
+                    id: 'pt.doc.inputswitch',
+                    label: 'InputSwitch PT Options',
+                    component: DocApiTable,
+                    data: getPTOption('InputSwitch')
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/doc/inputotp/theming/StyledDoc.vue b/doc/inputotp/theming/StyledDoc.vue
new file mode 100644
index 000000000..5df2ea33a
--- /dev/null
+++ b/doc/inputotp/theming/StyledDoc.vue
@@ -0,0 +1,29 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        <p>List of class names used in the styled mode.</p>
+    </DocSectionText>
+    <div class="doc-tablewrapper">
+        <table class="doc-table">
+            <thead>
+                <tr>
+                    <th>Name</th>
+                    <th>Element</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>p-inputswitch</td>
+                    <td>Container element.</td>
+                </tr>
+                <tr>
+                    <td>p-inputswitch-checked</td>
+                    <td>Container element in active state.</td>
+                </tr>
+                <tr>
+                    <td>p-inputswitch-slider</td>
+                    <td>Slider element behind the handle.</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+</template>
diff --git a/doc/inputotp/theming/TailwindDoc.vue b/doc/inputotp/theming/TailwindDoc.vue
new file mode 100644
index 000000000..fe4aadc26
--- /dev/null
+++ b/doc/inputotp/theming/TailwindDoc.vue
@@ -0,0 +1,6 @@
+<template>
+    <DocSectionText v-bind="$attrs">
+        Visit <a href="https://github.com/primefaces/primevue-tailwind" target="_blank" rel="noopener noreferrer">Tailwind Presets</a> project for detailed documentation, examples and ready-to-use presets about how to style PrimeVue components with
+        Tailwind CSS.
+    </DocSectionText>
+</template>
diff --git a/doc/inputotp/theming/index.vue b/doc/inputotp/theming/index.vue
new file mode 100644
index 000000000..b9c44bb04
--- /dev/null
+++ b/doc/inputotp/theming/index.vue
@@ -0,0 +1,40 @@
+<template>
+    <div class="doc-main">
+        <div class="doc-intro">
+            <h1>InputSwitch Theming</h1>
+        </div>
+        <DocSections :docs="docs" />
+    </div>
+    <DocSectionNav :docs="docs" />
+</template>
+
+<script>
+import StyledDoc from './StyledDoc.vue';
+import TailwindDoc from './TailwindDoc.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'theming.styled',
+                    label: 'Styled',
+                    component: StyledDoc
+                },
+                {
+                    id: 'theming.unstyled',
+                    label: 'Unstyled',
+                    description: 'Theming is implemented with the pass through properties in unstyled mode.',
+                    children: [
+                        {
+                            id: 'theming.tailwind',
+                            label: 'Tailwind',
+                            component: TailwindDoc
+                        }
+                    ]
+                }
+            ]
+        };
+    }
+};
+</script>
diff --git a/modules/nuxt-primevue/runtime/core/components/index.js b/modules/nuxt-primevue/runtime/core/components/index.js
index 037a7c5ff..feca2c2d4 100644
--- a/modules/nuxt-primevue/runtime/core/components/index.js
+++ b/modules/nuxt-primevue/runtime/core/components/index.js
@@ -14,6 +14,7 @@ const form = [
     'InputIcon',
     'InputMask',
     'InputNumber',
+    'InputOtp',
     'InputSwitch',
     'InputText',
     'Knob',
diff --git a/nuxt-vite.config.js b/nuxt-vite.config.js
index 60a8f403f..d7ca8ef78 100644
--- a/nuxt-vite.config.js
+++ b/nuxt-vite.config.js
@@ -56,6 +56,7 @@ const STYLE_ALIAS = {
     'primevue/inputicon/style': path.resolve(__dirname, './components/lib/inputicon/style/InputIconStyle.js'),
     'primevue/inputmask/style': path.resolve(__dirname, './components/lib/inputmask/style/InputMaskStyle.js'),
     'primevue/inputnumber/style': path.resolve(__dirname, './components/lib/inputnumber/style/InputNumberStyle.js'),
+    'primevue/inputotp/style': path.resolve(__dirname, './components/lib/inputotp/style/InputOtpStyle.js'),
     'primevue/inputswitch/style': path.resolve(__dirname, './components/lib/inputswitch/style/InputSwitchStyle.js'),
     'primevue/inputtext/style': path.resolve(__dirname, './components/lib/inputtext/style/InputTextStyle.js'),
     'primevue/knob/style': path.resolve(__dirname, './components/lib/knob/style/KnobStyle.js'),
diff --git a/pages/inputotp/index.vue b/pages/inputotp/index.vue
new file mode 100644
index 000000000..53fbc89d0
--- /dev/null
+++ b/pages/inputotp/index.vue
@@ -0,0 +1,49 @@
+<template>
+    <DocComponent title="Vue Otp Input Component" header="InputOtp" description="Input Otp is used to enter one time passwords." :componentDocs="docs" :apiDocs="['InputOtp']" :ptTabComponent="ptComponent" :themingDocs="themingDoc" />
+</template>
+
+<script>
+import AccessibilityDoc from '@/doc/inputotp/AccessibilityDoc.vue';
+import BasicDoc from '@/doc/inputotp/BasicDoc.vue';
+import ImportDoc from '@/doc/inputotp/ImportDoc.vue';
+import MaskDoc from '@/doc/inputotp/MaskDoc.vue';
+import IntegerOnlyDoc from '@/doc/inputotp/integerOnlyDoc.vue';
+import PTComponent from '@/doc/inputotp/pt/index.vue';
+import ThemingDoc from '@/doc/inputotp/theming/index.vue';
+
+export default {
+    data() {
+        return {
+            docs: [
+                {
+                    id: 'import',
+                    label: 'Import',
+                    component: ImportDoc
+                },
+                {
+                    id: 'basic',
+                    label: 'Basic',
+                    component: BasicDoc
+                },
+                {
+                    id: 'mask',
+                    label: 'Mask',
+                    component: MaskDoc
+                },
+                {
+                    id: 'integeronly',
+                    label: 'Integer Only',
+                    component: IntegerOnlyDoc
+                },
+                {
+                    id: 'accessibility',
+                    label: 'Accessibility',
+                    component: AccessibilityDoc
+                }
+            ],
+            ptComponent: PTComponent,
+            themingDoc: ThemingDoc
+        };
+    }
+};
+</script>
diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css
index a5223b08d..478404e6c 100644
--- a/public/themes/arya-blue/theme.css
+++ b/public/themes/arya-blue/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css
index 7278119d3..0377f8390 100644
--- a/public/themes/arya-green/theme.css
+++ b/public/themes/arya-green/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css
index a853cb151..cc9da0f85 100644
--- a/public/themes/arya-orange/theme.css
+++ b/public/themes/arya-orange/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css
index c2965363d..e239d10d1 100644
--- a/public/themes/arya-purple/theme.css
+++ b/public/themes/arya-purple/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-amber/theme.css b/public/themes/aura-dark-amber/theme.css
index 9de6b57cb..c25e3a03c 100644
--- a/public/themes/aura-dark-amber/theme.css
+++ b/public/themes/aura-dark-amber/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-blue/theme.css b/public/themes/aura-dark-blue/theme.css
index 08822ee98..9e925cef9 100644
--- a/public/themes/aura-dark-blue/theme.css
+++ b/public/themes/aura-dark-blue/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-cyan/theme.css b/public/themes/aura-dark-cyan/theme.css
index 22b7fa082..02e2231c0 100644
--- a/public/themes/aura-dark-cyan/theme.css
+++ b/public/themes/aura-dark-cyan/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-green/theme.css b/public/themes/aura-dark-green/theme.css
index f0399e3cb..b6fd391c8 100644
--- a/public/themes/aura-dark-green/theme.css
+++ b/public/themes/aura-dark-green/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-indigo/theme.css b/public/themes/aura-dark-indigo/theme.css
index 6ec354216..42892e700 100644
--- a/public/themes/aura-dark-indigo/theme.css
+++ b/public/themes/aura-dark-indigo/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-lime/theme.css b/public/themes/aura-dark-lime/theme.css
index 3e834d596..3df7cdc87 100644
--- a/public/themes/aura-dark-lime/theme.css
+++ b/public/themes/aura-dark-lime/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-noir/theme.css b/public/themes/aura-dark-noir/theme.css
index a4f41924f..63015b3ea 100644
--- a/public/themes/aura-dark-noir/theme.css
+++ b/public/themes/aura-dark-noir/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-pink/theme.css b/public/themes/aura-dark-pink/theme.css
index c95143f6f..df4b5fbe5 100644
--- a/public/themes/aura-dark-pink/theme.css
+++ b/public/themes/aura-dark-pink/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-purple/theme.css b/public/themes/aura-dark-purple/theme.css
index 27935ca85..9e0c4daba 100644
--- a/public/themes/aura-dark-purple/theme.css
+++ b/public/themes/aura-dark-purple/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-dark-teal/theme.css b/public/themes/aura-dark-teal/theme.css
index 117fd4225..ce1c3f1c5 100644
--- a/public/themes/aura-dark-teal/theme.css
+++ b/public/themes/aura-dark-teal/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-amber/theme.css b/public/themes/aura-light-amber/theme.css
index ec09b0414..2a25b10c0 100644
--- a/public/themes/aura-light-amber/theme.css
+++ b/public/themes/aura-light-amber/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-blue/theme.css b/public/themes/aura-light-blue/theme.css
index 1cd094f43..1c2463f99 100644
--- a/public/themes/aura-light-blue/theme.css
+++ b/public/themes/aura-light-blue/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-cyan/theme.css b/public/themes/aura-light-cyan/theme.css
index ac0d3fb7e..68e9ce855 100644
--- a/public/themes/aura-light-cyan/theme.css
+++ b/public/themes/aura-light-cyan/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-green/theme.css b/public/themes/aura-light-green/theme.css
index 9c894b6c0..1f3e32da1 100644
--- a/public/themes/aura-light-green/theme.css
+++ b/public/themes/aura-light-green/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-indigo/theme.css b/public/themes/aura-light-indigo/theme.css
index bd07b09b8..56deed7de 100644
--- a/public/themes/aura-light-indigo/theme.css
+++ b/public/themes/aura-light-indigo/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-lime/theme.css b/public/themes/aura-light-lime/theme.css
index 6784b63d4..5dca643a5 100644
--- a/public/themes/aura-light-lime/theme.css
+++ b/public/themes/aura-light-lime/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-noir/theme.css b/public/themes/aura-light-noir/theme.css
index 08513f60c..b89da65bc 100644
--- a/public/themes/aura-light-noir/theme.css
+++ b/public/themes/aura-light-noir/theme.css
@@ -1738,6 +1738,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-pink/theme.css b/public/themes/aura-light-pink/theme.css
index eca62a30b..5fefcea80 100644
--- a/public/themes/aura-light-pink/theme.css
+++ b/public/themes/aura-light-pink/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-purple/theme.css b/public/themes/aura-light-purple/theme.css
index e25b41207..4ca9f3d5f 100644
--- a/public/themes/aura-light-purple/theme.css
+++ b/public/themes/aura-light-purple/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/aura-light-teal/theme.css b/public/themes/aura-light-teal/theme.css
index f124a432f..e536f67b2 100644
--- a/public/themes/aura-light-teal/theme.css
+++ b/public/themes/aura-light-teal/theme.css
@@ -1734,6 +1734,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css
index 301eb4d43..bc9ea3f17 100644
--- a/public/themes/bootstrap4-dark-blue/theme.css
+++ b/public/themes/bootstrap4-dark-blue/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css
index 37002f762..4824e6ba8 100644
--- a/public/themes/bootstrap4-dark-purple/theme.css
+++ b/public/themes/bootstrap4-dark-purple/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css
index 1aec877dd..79ff17a40 100644
--- a/public/themes/bootstrap4-light-blue/theme.css
+++ b/public/themes/bootstrap4-light-blue/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css
index bae0b1032..a8c135d9d 100644
--- a/public/themes/bootstrap4-light-purple/theme.css
+++ b/public/themes/bootstrap4-light-purple/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css
index 91bdd9f4d..25d5e9798 100644
--- a/public/themes/fluent-light/theme.css
+++ b/public/themes/fluent-light/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-amber/theme.css b/public/themes/lara-dark-amber/theme.css
index e03e306df..ae61b1003 100644
--- a/public/themes/lara-dark-amber/theme.css
+++ b/public/themes/lara-dark-amber/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-blue/theme.css b/public/themes/lara-dark-blue/theme.css
index f11813d2e..6971ec8eb 100644
--- a/public/themes/lara-dark-blue/theme.css
+++ b/public/themes/lara-dark-blue/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-cyan/theme.css b/public/themes/lara-dark-cyan/theme.css
index 4017009a4..9a76c1572 100644
--- a/public/themes/lara-dark-cyan/theme.css
+++ b/public/themes/lara-dark-cyan/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-green/theme.css b/public/themes/lara-dark-green/theme.css
index 71c7d7fcf..a15eac126 100644
--- a/public/themes/lara-dark-green/theme.css
+++ b/public/themes/lara-dark-green/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-indigo/theme.css b/public/themes/lara-dark-indigo/theme.css
index 81c2cdb31..4efb41778 100644
--- a/public/themes/lara-dark-indigo/theme.css
+++ b/public/themes/lara-dark-indigo/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-pink/theme.css b/public/themes/lara-dark-pink/theme.css
index 225855982..6c9698607 100644
--- a/public/themes/lara-dark-pink/theme.css
+++ b/public/themes/lara-dark-pink/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-purple/theme.css b/public/themes/lara-dark-purple/theme.css
index 17931a10b..a6d3b4ac4 100644
--- a/public/themes/lara-dark-purple/theme.css
+++ b/public/themes/lara-dark-purple/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-dark-teal/theme.css b/public/themes/lara-dark-teal/theme.css
index 06e92b5a8..8d412eb01 100644
--- a/public/themes/lara-dark-teal/theme.css
+++ b/public/themes/lara-dark-teal/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-amber/theme.css b/public/themes/lara-light-amber/theme.css
index a1846e97b..1b63ab011 100644
--- a/public/themes/lara-light-amber/theme.css
+++ b/public/themes/lara-light-amber/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-blue/theme.css b/public/themes/lara-light-blue/theme.css
index c52a4f27f..260b91ea5 100644
--- a/public/themes/lara-light-blue/theme.css
+++ b/public/themes/lara-light-blue/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-cyan/theme.css b/public/themes/lara-light-cyan/theme.css
index dc8effe19..401171b41 100644
--- a/public/themes/lara-light-cyan/theme.css
+++ b/public/themes/lara-light-cyan/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-green/theme.css b/public/themes/lara-light-green/theme.css
index ea86fe355..3a7ff7804 100644
--- a/public/themes/lara-light-green/theme.css
+++ b/public/themes/lara-light-green/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-indigo/theme.css b/public/themes/lara-light-indigo/theme.css
index e5f43f652..c04048804 100644
--- a/public/themes/lara-light-indigo/theme.css
+++ b/public/themes/lara-light-indigo/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-pink/theme.css b/public/themes/lara-light-pink/theme.css
index 368f92929..4dbed3607 100644
--- a/public/themes/lara-light-pink/theme.css
+++ b/public/themes/lara-light-pink/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-purple/theme.css b/public/themes/lara-light-purple/theme.css
index 6c286fc42..eb8a548d3 100644
--- a/public/themes/lara-light-purple/theme.css
+++ b/public/themes/lara-light-purple/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/lara-light-teal/theme.css b/public/themes/lara-light-teal/theme.css
index aa41c8a34..4cd5361fb 100644
--- a/public/themes/lara-light-teal/theme.css
+++ b/public/themes/lara-light-teal/theme.css
@@ -1732,6 +1732,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css
index de3ecc522..09a5349b6 100644
--- a/public/themes/luna-amber/theme.css
+++ b/public/themes/luna-amber/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css
index 0735e5f13..b8b7088e1 100644
--- a/public/themes/luna-blue/theme.css
+++ b/public/themes/luna-blue/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css
index 9ee1cbd98..841121837 100644
--- a/public/themes/luna-green/theme.css
+++ b/public/themes/luna-green/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css
index 777e905fa..2ae6354ae 100644
--- a/public/themes/luna-pink/theme.css
+++ b/public/themes/luna-pink/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css
index 9f27cbb8d..30bdb79c8 100644
--- a/public/themes/md-dark-deeppurple/theme.css
+++ b/public/themes/md-dark-deeppurple/theme.css
@@ -1738,6 +1738,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css
index 1bcb85c96..d6b368c5e 100644
--- a/public/themes/md-dark-indigo/theme.css
+++ b/public/themes/md-dark-indigo/theme.css
@@ -1738,6 +1738,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css
index 861bc1e01..bc3cd1599 100644
--- a/public/themes/md-light-deeppurple/theme.css
+++ b/public/themes/md-light-deeppurple/theme.css
@@ -1737,6 +1737,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css
index 3fb1973f9..84436237c 100644
--- a/public/themes/md-light-indigo/theme.css
+++ b/public/themes/md-light-indigo/theme.css
@@ -1737,6 +1737,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 3rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css
index 758377026..1fceb2c42 100644
--- a/public/themes/mdc-dark-deeppurple/theme.css
+++ b/public/themes/mdc-dark-deeppurple/theme.css
@@ -1738,6 +1738,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css
index 417f0dc30..d604ba8a1 100644
--- a/public/themes/mdc-dark-indigo/theme.css
+++ b/public/themes/mdc-dark-indigo/theme.css
@@ -1738,6 +1738,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css
index 93edb3402..e54eb882e 100644
--- a/public/themes/mdc-light-deeppurple/theme.css
+++ b/public/themes/mdc-light-deeppurple/theme.css
@@ -1737,6 +1737,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css
index 40f401831..f276a2532 100644
--- a/public/themes/mdc-light-indigo/theme.css
+++ b/public/themes/mdc-light-indigo/theme.css
@@ -1737,6 +1737,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/mira/theme.css b/public/themes/mira/theme.css
index c2fc9a9c1..a1c6571e1 100644
--- a/public/themes/mira/theme.css
+++ b/public/themes/mira/theme.css
@@ -1741,6 +1741,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/nano/theme.css b/public/themes/nano/theme.css
index 5a83e774a..cd2e33434 100644
--- a/public/themes/nano/theme.css
+++ b/public/themes/nano/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css
index fb46f2b65..617717826 100644
--- a/public/themes/nova-accent/theme.css
+++ b/public/themes/nova-accent/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css
index 52df4b159..d9f887b37 100644
--- a/public/themes/nova-alt/theme.css
+++ b/public/themes/nova-alt/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css
index 2702258af..c31fd3fae 100644
--- a/public/themes/nova-vue/theme.css
+++ b/public/themes/nova-vue/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css
index ac967ff21..2d122c672 100644
--- a/public/themes/nova/theme.css
+++ b/public/themes/nova/theme.css
@@ -1717,6 +1717,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css
index 3b5dcffdf..6265f0868 100644
--- a/public/themes/rhea/theme.css
+++ b/public/themes/rhea/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 1.858rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css
index 3d845a2cf..dde35f753 100644
--- a/public/themes/saga-blue/theme.css
+++ b/public/themes/saga-blue/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css
index fa8323357..304253c1d 100644
--- a/public/themes/saga-green/theme.css
+++ b/public/themes/saga-green/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css
index 81befe107..736bf49ce 100644
--- a/public/themes/saga-orange/theme.css
+++ b/public/themes/saga-orange/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css
index e1455fda4..f3f357bc4 100644
--- a/public/themes/saga-purple/theme.css
+++ b/public/themes/saga-purple/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/soho-dark/theme.css b/public/themes/soho-dark/theme.css
index bd6f3f749..13719c15d 100644
--- a/public/themes/soho-dark/theme.css
+++ b/public/themes/soho-dark/theme.css
@@ -1737,6 +1737,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/soho-light/theme.css b/public/themes/soho-light/theme.css
index 9a99d7ae1..55e1ba567 100644
--- a/public/themes/soho-light/theme.css
+++ b/public/themes/soho-light/theme.css
@@ -1737,6 +1737,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/tailwind-light/theme.css b/public/themes/tailwind-light/theme.css
index e519c1538..d81372210 100644
--- a/public/themes/tailwind-light/theme.css
+++ b/public/themes/tailwind-light/theme.css
@@ -1748,6 +1748,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css
index db3f3eef2..435a42566 100644
--- a/public/themes/vela-blue/theme.css
+++ b/public/themes/vela-blue/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css
index fcb70c3c3..598a55ab5 100644
--- a/public/themes/vela-green/theme.css
+++ b/public/themes/vela-green/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css
index dc53ece7f..2c79f2770 100644
--- a/public/themes/vela-orange/theme.css
+++ b/public/themes/vela-orange/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css
index b9a12e9a2..3b9c3cb00 100644
--- a/public/themes/vela-purple/theme.css
+++ b/public/themes/vela-purple/theme.css
@@ -1713,6 +1713,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/viva-dark/theme.css b/public/themes/viva-dark/theme.css
index 3828c6b76..0f7e5c47c 100644
--- a/public/themes/viva-dark/theme.css
+++ b/public/themes/viva-dark/theme.css
@@ -1745,6 +1745,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/public/themes/viva-light/theme.css b/public/themes/viva-light/theme.css
index 7aaa9dd71..be1fc9660 100644
--- a/public/themes/viva-light/theme.css
+++ b/public/themes/viva-light/theme.css
@@ -1745,6 +1745,17 @@
     margin-top: -0.5rem;
   }
 
+  .p-inputotp {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .p-inputotp-input {
+    text-align: center;
+    width: 2.5rem;
+  }
+
   .p-inputgroup {
     display: flex;
     align-items: stretch;
diff --git a/rollup.config.js b/rollup.config.js
index 38ddd8895..27fa6a2fd 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -117,6 +117,7 @@ const CORE_STYLE_DEPENDENCIES = {
     'primevue/inputgroupaddon/style': 'primevue.inputgroupaddon.style',
     'primevue/inputmask/style': 'primevue.inputmask.style',
     'primevue/inputnumber/style': 'primevue.inputnumber.style',
+    'primevue/inputotp/style': 'primevue.inputotp.style',
     'primevue/inputswitch/style': 'primevue.inputswitch.style',
     'primevue/inputtext/style': 'primevue.inputtext.style',
     'primevue/knob/style': 'primevue.knob.style',