From a82843f1ff183081ed6df44bece03ca62efc3e6a Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Mon, 13 May 2024 22:48:50 +0100
Subject: [PATCH] Refactor on theming doc section

---
 api-generator/build-apidoc.js                 |  78 ++++++++-
 components/doc/DocApiTable.vue                |   2 +-
 components/doc/DocSections.vue                |   2 +-
 .../doc/helpers/{PTHelper.js => index.js}     |  41 ++++-
 .../lib/inputtext/style/InputTextStyle.d.ts   |   3 +
 components/lib/themes/aura/index.d.ts         |  89 ++++++++++
 .../lib/themes/aura/inputtext/index.d.ts      | 164 ++++++++++++++++++
 .../lib/themes/lara/inputtext/index.d.ts      |  56 ++++++
 .../lib/themes/nora/inputtext/index.d.ts      |  44 +++++
 doc/accordion/pt/index.vue                    |  12 +-
 doc/autocomplete/pt/index.vue                 |   4 +-
 doc/avatar/pt/index.vue                       |   6 +-
 doc/badge/pt/index.vue                        |   4 +-
 doc/blockui/pt/index.vue                      |   4 +-
 doc/breadcrumb/pt/index.vue                   |   4 +-
 doc/button/pt/index.vue                       |   4 +-
 doc/card/pt/index.vue                         |   4 +-
 doc/carousel/pt/index.vue                     |   4 +-
 doc/cascadeselect/pt/index.vue                |   4 +-
 doc/chart/pt/index.vue                        |   4 +-
 doc/checkbox/pt/index.vue                     |   4 +-
 doc/chip/pt/index.vue                         |   4 +-
 doc/colorpicker/pt/index.vue                  |   4 +-
 doc/common/apidoc/index.json                  | 158 ++++++++++++++++-
 doc/confirmdialog/pt/index.vue                |   4 +-
 doc/confirmpopup/pt/index.vue                 |   4 +-
 doc/contextmenu/pt/index.vue                  |   4 +-
 doc/datatable/pt/index.vue                    |  10 +-
 doc/dataview/pt/index.vue                     |   4 +-
 doc/datepicker/pt/index.vue                   |   4 +-
 doc/deferredcontent/pt/index.vue              |   4 +-
 doc/dialog/pt/index.vue                       |   4 +-
 doc/divider/pt/index.vue                      |   4 +-
 doc/dock/pt/index.vue                         |   4 +-
 doc/drawer/pt/index.vue                       |   4 +-
 doc/dynamicdialog/pt/index.vue                |   4 +-
 doc/editor/pt/index.vue                       |   4 +-
 doc/fieldset/pt/index.vue                     |   4 +-
 doc/fileupload/pt/index.vue                   |   4 +-
 doc/floatlabel/pt/index.vue                   |   4 +-
 doc/galleria/pt/index.vue                     |   4 +-
 doc/iconfield/pt/index.vue                    |   6 +-
 doc/iconfield/theming/pt/index.vue            |   4 +-
 doc/image/pt/index.vue                        |   4 +-
 doc/inlinemessage/pt/index.vue                |   4 +-
 doc/inplace/pt/index.vue                      |   4 +-
 doc/inputchips/pt/index.vue                   |   4 +-
 doc/inputgroup/pt/index.vue                   |   6 +-
 doc/inputmask/pt/index.vue                    |   4 +-
 doc/inputnumber/pt/index.vue                  |   4 +-
 doc/inputotp/pt/index.vue                     |   4 +-
 doc/inputtext/pt/index.vue                    |   4 +-
 doc/inputtext/theming/index.vue               |  22 ++-
 doc/knob/pt/index.vue                         |   4 +-
 doc/listbox/pt/index.vue                      |   4 +-
 doc/megamenu/pt/index.vue                     |   4 +-
 doc/menu/pt/index.vue                         |   4 +-
 doc/menubar/pt/index.vue                      |   4 +-
 doc/message/pt/index.vue                      |   4 +-
 doc/metergroup/pt/index.vue                   |   4 +-
 doc/multiselect/pt/index.vue                  |   4 +-
 doc/orderlist/pt/index.vue                    |   4 +-
 doc/organizationchart/pt/index.vue            |   4 +-
 doc/paginator/pt/index.vue                    |   4 +-
 doc/panel/pt/index.vue                        |   4 +-
 doc/panelmenu/pt/index.vue                    |   4 +-
 doc/password/pt/index.vue                     |   4 +-
 doc/picklist/pt/index.vue                     |   4 +-
 doc/popover/pt/index.vue                      |   4 +-
 doc/progressbar/pt/index.vue                  |   4 +-
 doc/progressspinner/pt/index.vue              |   4 +-
 doc/radiobutton/pt/index.vue                  |   4 +-
 doc/rating/pt/index.vue                       |   4 +-
 doc/ripple/pt/index.vue                       |   4 +-
 doc/scrollpanel/pt/index.vue                  |   4 +-
 doc/scrolltop/pt/index.vue                    |   4 +-
 doc/select/pt/index.vue                       |   4 +-
 doc/selectbutton/pt/index.vue                 |   4 +-
 doc/skeleton/pt/index.vue                     |   4 +-
 doc/slider/pt/index.vue                       |   4 +-
 doc/speeddial/pt/index.vue                    |   4 +-
 doc/splitbutton/pt/index.vue                  |   4 +-
 doc/splitter/pt/index.vue                     |   6 +-
 doc/stepper/pt/index.vue                      |   6 +-
 doc/steps/pt/index.vue                        |   4 +-
 doc/tabmenu/pt/index.vue                      |   4 +-
 doc/tabs/pt/index.vue                         |  12 +-
 doc/tag/pt/index.vue                          |   4 +-
 doc/terminal/pt/index.vue                     |   4 +-
 doc/textarea/pt/index.vue                     |   4 +-
 doc/tieredmenu/pt/index.vue                   |   4 +-
 doc/timeline/pt/index.vue                     |   4 +-
 doc/toast/pt/index.vue                        |   4 +-
 doc/togglebutton/pt/index.vue                 |   4 +-
 doc/toggleswitch/pt/index.vue                 |   4 +-
 doc/toolbar/pt/index.vue                      |   4 +-
 doc/tooltip/pt/index.vue                      |   4 +-
 doc/tree/pt/index.vue                         |   4 +-
 doc/treeselect/pt/index.vue                   |   4 +-
 doc/treetable/pt/index.vue                    |   6 +-
 doc/virtualscroller/pt/index.vue              |   4 +-
 layouts/AppConfigurator.vue                   |  14 +-
 plugins/app-state.js                          |   2 +-
 103 files changed, 856 insertions(+), 213 deletions(-)
 rename components/doc/helpers/{PTHelper.js => index.js} (59%)

diff --git a/api-generator/build-apidoc.js b/api-generator/build-apidoc.js
index b11bd771a..2280246cd 100644
--- a/api-generator/build-apidoc.js
+++ b/api-generator/build-apidoc.js
@@ -12,7 +12,8 @@ const staticMessages = {
     functions: 'Defines the custom functions used by the module.',
     events: "Defines the custom events used by the component's emit.",
     interfaces: 'Defines the custom interfaces used by the module.',
-    types: 'Defines the custom types used by the module.'
+    types: 'Defines the custom types used by the module.',
+    tokens: 'Define design tokens used by the component.'
 };
 
 const app = new TypeDoc.Application();
@@ -555,6 +556,81 @@ if (project) {
                 };
             });
 
+        const module_namespaces_group = module.groups?.find((g) => g.title === 'Namespaces');
+
+        module_namespaces_group &&
+            module_namespaces_group.children.forEach((pevent) => {
+                const module_interfaces_group = pevent?.groups?.find((g) => g.title === 'Interfaces');
+
+                module_interfaces_group &&
+                    module_interfaces_group.children.forEach((event) => {
+                        const event_props_description = event.comment && event.comment.summary.map((s) => s.text || '').join(' ');
+                        let component_prop = '';
+
+                        if (event.comment && event.comment.getTag('@see')) {
+                            const tag = event.comment.getTag('@see');
+                            const content = tag.content[0];
+
+                            if (content.text.includes("['")) {
+                                component_prop = `${content.target.name}${content.text}`;
+                            } else {
+                                component_prop = `${content.text === content.target?.name ? content.target.parent.name : content.target?.name}.${content.text}`;
+                            }
+                        }
+
+                        !doc[name]['tokens'] &&
+                            (doc[name]['tokens'] = {
+                                description: staticMessages['tokens'],
+                                values: {}
+                            });
+
+                        const props = [];
+
+                        const setProps = (_declaration, _name) => {
+                            if (_declaration?.groups) {
+                                const event_props_group = _declaration.groups.find((g) => g.title === 'Properties');
+
+                                event_props_group &&
+                                    event_props_group.children.forEach((prop) => {
+                                        if (prop.type?.declaration) {
+                                            setProps(prop.type?.declaration, prop.name);
+                                        } else if (prop.comment?.getTag('@designToken')) {
+                                            props.push({
+                                                name: _name ? `${_name}.${prop.name}` : prop.name,
+                                                token: prop.comment.getTag('@designToken').content[0]?.text || '',
+                                                optional: prop.flags.isOptional,
+                                                readonly: prop.flags.isReadonly,
+                                                type: prop.type.toString(),
+                                                default: prop.comment && prop.comment.getTag('@defaultValue') ? prop.comment.getTag('@defaultValue').content[0]?.text || '' : '', // TODO: Check
+                                                description:
+                                                    prop.comment &&
+                                                    prop.comment.summary
+                                                        .map((s) => {
+                                                            if (s.text.indexOf('[here]') > -1) {
+                                                                return `${s.text.slice(0, s.text.indexOf('[here]'))} <a target="_blank" href="${s.text.slice(s.text.indexOf('(') + 1, s.text.indexOf(')'))}">here</a> ${s.text.slice(
+                                                                    s.text.indexOf(')') + 1
+                                                                )}`;
+                                                            }
+
+                                                            return s.text || '';
+                                                        })
+                                                        .join(' '),
+                                                deprecated: prop.comment && prop.comment.getTag('@deprecated') ? parseText(prop.comment.getTag('@deprecated').content[0]?.text) : undefined
+                                            });
+                                        }
+                                    });
+                            }
+                        };
+
+                        setProps(event);
+
+                        doc[name]['tokens'].values[event.name] = {
+                            description: event_props_description,
+                            props
+                        };
+                    });
+            });
+
         // app.generateJson(module, `./api-generator/module-typedoc.json`);
     });
 
diff --git a/components/doc/DocApiTable.vue b/components/doc/DocApiTable.vue
index da7e65cde..03d757e2c 100644
--- a/components/doc/DocApiTable.vue
+++ b/components/doc/DocApiTable.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText :id="id" :label="label" :level="componentLevel" :badge="badge">
-        <p>{{ description || null }}</p>
+        <p v-html="description"></p>
         <p v-if="relatedProp" class="inline-block">
             See <NuxtLink :to="setRelatedPropPath(relatedProp)" class="doc-option-link"> {{ relatedPropValue(relatedProp) }} </NuxtLink>
         </p>
diff --git a/components/doc/DocSections.vue b/components/doc/DocSections.vue
index f04e5cf42..547ccd393 100644
--- a/components/doc/DocSections.vue
+++ b/components/doc/DocSections.vue
@@ -4,7 +4,7 @@
             <template v-if="doc.children">
                 <div :id="doc.id">
                     <DocSectionText :id="doc.id" :label="doc.label" :badge="doc.badge">
-                        <p v-if="doc.description">{{ doc.description }}</p>
+                        <p v-if="doc.description" v-html="doc.description"></p>
                     </DocSectionText>
                 </div>
                 <template v-for="comp of doc.children" :key="comp.label">
diff --git a/components/doc/helpers/PTHelper.js b/components/doc/helpers/index.js
similarity index 59%
rename from components/doc/helpers/PTHelper.js
rename to components/doc/helpers/index.js
index b6c79714e..1aba2b44b 100644
--- a/components/doc/helpers/PTHelper.js
+++ b/components/doc/helpers/index.js
@@ -1,6 +1,7 @@
 import APIDocs from '@/doc/common/apidoc/index.json';
+import { $dt } from 'primevue/themes';
 
-export const getPTOption = (name) => {
+export const getPTOptions = (name) => {
     const { props } = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughOptions`] || APIDocs[name.toLowerCase()].interfaces.values[`${name}DirectivePassThroughOptions`];
     const options = APIDocs[name.toLowerCase()].interfaces.values[`${name}PassThroughMethodOptions`];
     let data = [];
@@ -35,3 +36,41 @@ export const getPTOption = (name) => {
 
     return data;
 };
+
+export const getStyleOptions = (name) => {
+    const { members } = APIDocs[name.toLowerCase() + 'style']?.enumerations?.values?.[`${name}Classes`];
+    let data = [];
+
+    for (const member of members) {
+        const { name, value, description } = member;
+
+        data.push({
+            class: value.replaceAll('"', ''),
+            section: name,
+            description
+        });
+    }
+
+    return data;
+};
+
+export const getTokenOptions = (preset, name) => {
+    const values = APIDocs[`${preset.toLowerCase()}/${name.toLowerCase()}`]?.tokens?.values;
+    let data = [];
+
+    for (const [key, value] of Object.entries(values)) {
+        for (const tokens of value?.props) {
+            const { token, description } = tokens;
+            const designToken = $dt(token);
+
+            data.push({
+                token,
+                variable: designToken.name,
+                section: key.toLowerCase(),
+                description: description
+            });
+        }
+    }
+
+    return data;
+};
diff --git a/components/lib/inputtext/style/InputTextStyle.d.ts b/components/lib/inputtext/style/InputTextStyle.d.ts
index 94ac26ec8..658698e90 100644
--- a/components/lib/inputtext/style/InputTextStyle.d.ts
+++ b/components/lib/inputtext/style/InputTextStyle.d.ts
@@ -10,6 +10,9 @@
 import { BaseStyle } from '../../base/style';
 
 export enum InputTextClasses {
+    /**
+     * The class of input element
+     */
     root = 'p-inputtext'
 }
 
diff --git a/components/lib/themes/aura/index.d.ts b/components/lib/themes/aura/index.d.ts
index e69de29bb..ba3523d4d 100644
--- a/components/lib/themes/aura/index.d.ts
+++ b/components/lib/themes/aura/index.d.ts
@@ -0,0 +1,89 @@
+/**
+ *
+ * [Live Demo](https://www.primevue.org/)
+ *
+ * @module aura
+ *
+ */
+export interface ColorSchemeDesignToken<T> {
+    colorScheme?: {
+        light?: Omit<T, 'colorScheme'>;
+        dark?: Omit<T, 'colorScheme'>;
+    };
+}
+
+export interface PaletteDesignToken {
+    50?: string;
+    100?: string;
+    200?: string;
+    300?: string;
+    400?: string;
+    500?: string;
+    600?: string;
+    700?: string;
+    800?: string;
+    900?: string;
+    950?: string;
+}
+
+export interface PrimitiveDesignTokens {
+    borderRadius?: {
+        none?: string;
+        xs?: string;
+        sm?: string;
+        md?: string;
+        lg?: string;
+        xl?: string;
+    };
+    emerald?: PaletteDesignToken;
+    green?: PaletteDesignToken;
+    lime?: PaletteDesignToken;
+    red?: PaletteDesignToken;
+    orange?: PaletteDesignToken;
+    amber?: PaletteDesignToken;
+    yellow?: PaletteDesignToken;
+    teal?: PaletteDesignToken;
+    cyan?: PaletteDesignToken;
+    sky?: PaletteDesignToken;
+    blue?: PaletteDesignToken;
+    indigo?: PaletteDesignToken;
+    violet?: PaletteDesignToken;
+    purple?: PaletteDesignToken;
+    fuchsia?: PaletteDesignToken;
+    pink?: PaletteDesignToken;
+    rose?: PaletteDesignToken;
+    slate?: PaletteDesignToken;
+    gray?: PaletteDesignToken;
+    zinc?: PaletteDesignToken;
+    neutral?: PaletteDesignToken;
+    stone?: PaletteDesignToken;
+    [key: string]: any;
+}
+
+export interface SemanticDesignTokens {
+    transitionDuration?: string;
+    focusRing?: {
+        width?: string;
+        style?: string;
+        color?: string;
+        offset?: string;
+        shadow?: string;
+    };
+    iconSize?: string;
+    anchorGutter?: string;
+    primary?: PaletteDesignToken;
+    formField: {
+        paddingX?: string;
+        paddingY?: string;
+        borderRadius?: string;
+        focusRing?: {
+            width?: string;
+            style?: string;
+            color?: string;
+            offset?: string;
+            shadow?: string;
+        };
+    };
+    // @todo
+    [key: string]: any;
+}
diff --git a/components/lib/themes/aura/inputtext/index.d.ts b/components/lib/themes/aura/inputtext/index.d.ts
index e69de29bb..ea2cc3977 100644
--- a/components/lib/themes/aura/inputtext/index.d.ts
+++ b/components/lib/themes/aura/inputtext/index.d.ts
@@ -0,0 +1,164 @@
+/**
+ *
+ * InputText renders a text field to enter data.
+ *
+ * [Live Demo](https://www.primevue.org/inputtext/)
+ *
+ * @module aura/inputtext
+ *
+ */
+import { ColorSchemeDesignToken } from '..';
+
+/**
+ * Defines all sections of design tokens
+ */
+export namespace InputTextDesignToken {
+    /**
+     * Tokens of the root section
+     */
+    export interface Root {
+        /**
+         * Background of an input field
+         *
+         * @designToken inputtext.background
+         */
+        background?: string;
+        /**
+         * Background of an input field when disabled
+         *
+         * @designToken inputtext.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Background of an input field when filled mode
+         *
+         * @designToken inputtext.filled.background
+         */
+        filledBackground?: string;
+        /**
+         * Background of an input field on the focus state of filled mode
+         *
+         * @designToken inputtext.filled.focus.background
+         */
+        filledFocusBackground?: string;
+        /**
+         * Border color of an input field
+         *
+         * @designToken inputtext.border.color
+         */
+        borderColor?: string;
+        /**
+         * Border color of an input field on the hover state
+         *
+         * @designToken inputtext.hover.border.color
+         */
+        hoverBorderColor?: string;
+        /**
+         * Border color of an input field on the focus state
+         *
+         * @designToken inputtext.focus.border.color
+         */
+        focusBorderColor?: string;
+        /**
+         * Border color of an input field when invalid
+         *
+         * @designToken inputtext.invalid.border.color
+         */
+        invalidBorderColor?: string;
+        /**
+         * Color of an input field
+         *
+         * @designToken inputtext.color
+         */
+        color?: string;
+        /**
+         * Color of an input field when disabled
+         *
+         * @designToken inputtext.disabled.color
+         */
+        disabledColor?: string;
+        /**
+         * Placeholder color of an input field
+         *
+         * @designToken inputtext.placeholder.color
+         */
+        placeholderColor?: string;
+        /**
+         * Shadow of an input field
+         *
+         * @designToken inputtext.shadow
+         */
+        shadow?: string;
+        /**
+         * Padding right and left of an input field
+         *
+         * @designToken inputtext.padding.x
+         */
+        paddingX?: string;
+        /**
+         * Padding top and bottom of an input field
+         *
+         * @designToken inputtext.padding.y
+         */
+        paddingY?: string;
+        /**
+         * Border radius of an input field
+         *
+         * @designToken inputtext.border.radius
+         */
+        borderRadius?: string;
+        /**
+         * Outline of an input field on the focus state
+         */
+        focusRing?: {
+            /**
+             * Outline width of an input field on the focus state
+             *
+             * @designToken inputtext.focus.ring.width
+             */
+            width?: string;
+            /**
+             * Outline style of an input field on the focus state
+             *
+             * @designToken inputtext.focus.ring.style
+             */
+            style?: string;
+            /**
+             * Outline color of an input field on the focus state
+             *
+             * @designToken inputtext.focus.ring.color
+             */
+            color?: string;
+            /**
+             * Outline offset of an input field on the focus state
+             *
+             * @designToken inputtext.focus.ring.offset
+             */
+            offset?: string;
+            /**
+             * Shadow of an input field on the focus state
+             *
+             * @designToken inputtext.focus.ring.shadow
+             */
+            shadow?: string;
+        };
+    }
+}
+
+/**
+ * **PrimeVue - InputText**
+ *
+ * _InputText renders a text field to enter data._
+ *
+ * [Live Demo](https://www.primevue.org/inputtext/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group DesignTokens
+ */
+export interface InputTextDesignTokens extends ColorSchemeDesignToken<InputTextDesignTokens> {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: InputTextDesignToken.Root;
+}
diff --git a/components/lib/themes/lara/inputtext/index.d.ts b/components/lib/themes/lara/inputtext/index.d.ts
index e69de29bb..e4b251adf 100644
--- a/components/lib/themes/lara/inputtext/index.d.ts
+++ b/components/lib/themes/lara/inputtext/index.d.ts
@@ -0,0 +1,56 @@
+/**
+ *
+ * InputText renders a text field to enter data.
+ *
+ * [Live Demo](https://www.primevue.org/inputtext/)
+ *
+ * @module lara/inputtext
+ *
+ */
+
+/**
+ * Defines all sections of design tokens
+ */
+export namespace InputTextDesignToken {
+    /**
+     * Tokens of the root section
+     */
+    export interface Root {
+        /**
+         * Background of an input field
+         *
+         * @designToken inputtext.background
+         */
+        background?: string;
+        /**
+         * Background of an input field when disabled
+         *
+         * @designToken inputtext.disabled.background
+         */
+        disabledBackground?: string;
+        /**
+         * Background of an input field when filled mode
+         *
+         * @designToken inputtext.filled.background
+         */
+        filledBackground?: string;
+    }
+}
+
+/**
+ * **PrimeVue - InputText**
+ *
+ * _InputText renders a text field to enter data._
+ *
+ * [Live Demo](https://www.primevue.org/inputtext/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group DesignTokens
+ */
+export interface InputTextDesignTokens {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: InputTextDesignToken.Root;
+}
diff --git a/components/lib/themes/nora/inputtext/index.d.ts b/components/lib/themes/nora/inputtext/index.d.ts
index e69de29bb..d6493b461 100644
--- a/components/lib/themes/nora/inputtext/index.d.ts
+++ b/components/lib/themes/nora/inputtext/index.d.ts
@@ -0,0 +1,44 @@
+/**
+ *
+ * InputText renders a text field to enter data.
+ *
+ * [Live Demo](https://www.primevue.org/inputtext/)
+ *
+ * @module nora/inputtext
+ *
+ */
+
+/**
+ * Defines all sections of design tokens
+ */
+export namespace InputTextDesignToken {
+    /**
+     * Tokens of the root section
+     */
+    export interface Root {
+        /**
+         * Background of an input field
+         *
+         * @designToken inputtext.background
+         */
+        background?: string;
+    }
+}
+
+/**
+ * **PrimeVue - InputText**
+ *
+ * _InputText renders a text field to enter data._
+ *
+ * [Live Demo](https://www.primevue.org/inputtext/)
+ * --- ---
+ * ![PrimeVue](https://primefaces.org/cdn/primevue/images/logo-100.png)
+ *
+ * @group DesignTokens
+ */
+export interface InputTextDesignTokens {
+    /**
+     * Used to pass tokens of the root section
+     */
+    root?: InputTextDesignToken.Root;
+}
diff --git a/doc/accordion/pt/index.vue b/doc/accordion/pt/index.vue
index 4655aec33..172fd99cd 100644
--- a/doc/accordion/pt/index.vue
+++ b/doc/accordion/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,32 +26,32 @@ export default {
                     id: 'pt.doc.accordion',
                     label: 'Accordion PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Accordion')
+                    data: getPTOptions('Accordion')
                 },
                 {
                     id: 'pt.doc.accordionpanel',
                     label: 'AccordionPanel PT Options',
                     component: DocApiTable,
-                    data: getPTOption('AccordionPanel')
+                    data: getPTOptions('AccordionPanel')
                 },
                 {
                     id: 'pt.doc.accordionheader',
                     label: 'AccordionHeader PT Options',
                     component: DocApiTable,
-                    data: getPTOption('AccordionHeader')
+                    data: getPTOptions('AccordionHeader')
                 },
                 {
                     id: 'pt.doc.accordioncontent',
                     label: 'AccordionContent PT Options',
                     component: DocApiTable,
-                    data: getPTOption('AccordionContent')
+                    data: getPTOptions('AccordionContent')
                 },
                 {
                     id: 'pt.doc.accordiontab',
                     label: 'AccordionTab PT Options',
                     badge: { value: 'Deprecated since v4', severity: 'warn' },
                     component: DocApiTable,
-                    data: getPTOption('AccordionTab')
+                    data: getPTOptions('AccordionTab')
                 }
             ]
         };
diff --git a/doc/autocomplete/pt/index.vue b/doc/autocomplete/pt/index.vue
index afa1dbc54..07e2c9cbb 100644
--- a/doc/autocomplete/pt/index.vue
+++ b/doc/autocomplete/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.autocomplete',
                     label: 'AutoComplete PT Options',
                     component: DocApiTable,
-                    data: getPTOption('AutoComplete')
+                    data: getPTOptions('AutoComplete')
                 }
             ]
         };
diff --git a/doc/avatar/pt/index.vue b/doc/avatar/pt/index.vue
index 3107ed8d2..ecfd2f206 100644
--- a/doc/avatar/pt/index.vue
+++ b/doc/avatar/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,13 +26,13 @@ export default {
                     id: 'pt.doc.avatar',
                     label: 'Avatar PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Avatar')
+                    data: getPTOptions('Avatar')
                 },
                 {
                     id: 'pt.doc.avatar',
                     label: 'AvatarGroup PT Options',
                     component: DocApiTable,
-                    data: getPTOption('AvatarGroup')
+                    data: getPTOptions('AvatarGroup')
                 }
             ]
         };
diff --git a/doc/badge/pt/index.vue b/doc/badge/pt/index.vue
index a4b244f92..c1bee986a 100644
--- a/doc/badge/pt/index.vue
+++ b/doc/badge/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.badge',
                     label: 'Badge PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Badge')
+                    data: getPTOptions('Badge')
                 }
             ]
         };
diff --git a/doc/blockui/pt/index.vue b/doc/blockui/pt/index.vue
index e22dc8ce7..b74100990 100644
--- a/doc/blockui/pt/index.vue
+++ b/doc/blockui/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.blockui',
                     label: 'BlockUI PT Options',
                     component: DocApiTable,
-                    data: getPTOption('BlockUI')
+                    data: getPTOptions('BlockUI')
                 }
             ]
         };
diff --git a/doc/breadcrumb/pt/index.vue b/doc/breadcrumb/pt/index.vue
index 4edc6924f..8d8f8b3dc 100644
--- a/doc/breadcrumb/pt/index.vue
+++ b/doc/breadcrumb/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.breadcrumb',
                     label: 'Breadcrumb PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Breadcrumb')
+                    data: getPTOptions('Breadcrumb')
                 }
             ]
         };
diff --git a/doc/button/pt/index.vue b/doc/button/pt/index.vue
index f6fe78f23..ddaadc9cc 100644
--- a/doc/button/pt/index.vue
+++ b/doc/button/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.button',
                     label: 'Button PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Button')
+                    data: getPTOptions('Button')
                 }
             ]
         };
diff --git a/doc/card/pt/index.vue b/doc/card/pt/index.vue
index a0471e14d..023150e62 100644
--- a/doc/card/pt/index.vue
+++ b/doc/card/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.card',
                     label: 'Card PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Card')
+                    data: getPTOptions('Card')
                 }
             ]
         };
diff --git a/doc/carousel/pt/index.vue b/doc/carousel/pt/index.vue
index 64b6dd602..44a6cc992 100644
--- a/doc/carousel/pt/index.vue
+++ b/doc/carousel/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.carousel',
                     label: 'Carousel PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Carousel')
+                    data: getPTOptions('Carousel')
                 }
             ]
         };
diff --git a/doc/cascadeselect/pt/index.vue b/doc/cascadeselect/pt/index.vue
index 00555854e..e8a5f1e93 100644
--- a/doc/cascadeselect/pt/index.vue
+++ b/doc/cascadeselect/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.cascadeselect',
                     label: 'CascadeSelect PT Options',
                     component: DocApiTable,
-                    data: getPTOption('CascadeSelect')
+                    data: getPTOptions('CascadeSelect')
                 }
             ]
         };
diff --git a/doc/chart/pt/index.vue b/doc/chart/pt/index.vue
index d0f684a0f..dfdb22fdb 100644
--- a/doc/chart/pt/index.vue
+++ b/doc/chart/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.chart',
                     label: 'Chart PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Chart')
+                    data: getPTOptions('Chart')
                 }
             ]
         };
diff --git a/doc/checkbox/pt/index.vue b/doc/checkbox/pt/index.vue
index 308b8c1f0..5de9a3a70 100644
--- a/doc/checkbox/pt/index.vue
+++ b/doc/checkbox/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.checkbox',
                     label: 'Checkbox PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Checkbox')
+                    data: getPTOptions('Checkbox')
                 }
             ]
         };
diff --git a/doc/chip/pt/index.vue b/doc/chip/pt/index.vue
index 922646382..232211fe1 100644
--- a/doc/chip/pt/index.vue
+++ b/doc/chip/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.chip',
                     label: 'Chip PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Chip')
+                    data: getPTOptions('Chip')
                 }
             ]
         };
diff --git a/doc/colorpicker/pt/index.vue b/doc/colorpicker/pt/index.vue
index 32d4562a3..cfc9ea403 100644
--- a/doc/colorpicker/pt/index.vue
+++ b/doc/colorpicker/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.colorpicker',
                     label: 'ColorPicker PT Options',
                     component: DocApiTable,
-                    data: getPTOption('ColorPicker')
+                    data: getPTOptions('ColorPicker')
                 }
             ]
         };
diff --git a/doc/common/apidoc/index.json b/doc/common/apidoc/index.json
index 3d939f945..8bacca1b3 100644
--- a/doc/common/apidoc/index.json
+++ b/doc/common/apidoc/index.json
@@ -6157,9 +6157,9 @@
                             "name": "size",
                             "optional": true,
                             "readonly": false,
-                            "type": "null | \"large\" | \"xlarge\"",
+                            "type": "null | \"small\" | \"large\" | \"xlarge\"",
                             "default": "",
-                            "description": "Size of the badge, valid options are 'large' and 'xlarge'."
+                            "description": "Size of the badge, valid options are 'small', 'large', and 'xlarge'."
                         },
                         {
                             "name": "dt",
@@ -40265,7 +40265,8 @@
                             "name": "root",
                             "optional": false,
                             "readonly": false,
-                            "value": "\"p-inputtext\""
+                            "value": "\"p-inputtext\"",
+                            "description": "The class of input element"
                         }
                     ]
                 }
@@ -66270,7 +66271,7 @@
     "themes/aura/inputgroup": {},
     "themes/aura/inputnumber": {},
     "themes/aura/inputotp": {},
-    "inputtexttheme": {
+    "aura/inputtext": {
         "description": "InputText renders a text field to enter data.\n\n[Live Demo](https://www.primevue.org/inputtext/)",
         "tokens": {
             "description": "Define design tokens used by the component.",
@@ -66552,7 +66553,46 @@
     "themes/lara/inputgroup": {},
     "themes/lara/inputnumber": {},
     "themes/lara/inputotp": {},
-    "themes/lara/inputtext": {},
+    "lara/inputtext": {
+        "description": "InputText renders a text field to enter data.\n\n[Live Demo](https://www.primevue.org/inputtext/)",
+        "tokens": {
+            "description": "Define design tokens used by the component.",
+            "values": {
+                "Root": {
+                    "description": "Tokens of the root section",
+                    "props": [
+                        {
+                            "name": "background",
+                            "token": "inputtext.background",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Background of an input field"
+                        },
+                        {
+                            "name": "disabledBackground",
+                            "token": "inputtext.disabled.background",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Background of an input field when disabled"
+                        },
+                        {
+                            "name": "filledBackground",
+                            "token": "inputtext.filled.background",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Background of an input field when filled mode"
+                        }
+                    ]
+                }
+            }
+        }
+    },
     "themes/lara/knob": {},
     "themes/lara/listbox": {},
     "themes/lara/megamenu": {},
@@ -66601,6 +66641,114 @@
     "themes/lara/tree": {},
     "themes/lara/treeselect": {},
     "themes/lara/treetable": {},
+    "themes/nora/accordion": {},
+    "themes/nora/autocomplete": {},
+    "themes/nora/avatar": {},
+    "themes/nora/badge": {},
+    "themes/nora/blockui": {},
+    "themes/nora/breadcrumb": {},
+    "themes/nora/button": {},
+    "themes/nora/buttongroup": {},
+    "themes/nora/card": {},
+    "themes/nora/carousel": {},
+    "themes/nora/cascadeselect": {},
+    "themes/nora/checkbox": {},
+    "themes/nora/chip": {},
+    "themes/nora/colorpicker": {},
+    "themes/nora/confirmdialog": {},
+    "themes/nora/confirmpopup": {},
+    "themes/nora/contextmenu": {},
+    "themes/nora/datatable": {},
+    "themes/nora/dataview": {},
+    "themes/nora/datepicker": {},
+    "themes/nora/dialog": {},
+    "themes/nora/divider": {},
+    "themes/nora/dock": {},
+    "themes/nora/drawer": {},
+    "themes/nora/editor": {},
+    "themes/nora/fieldset": {},
+    "themes/nora/fileupload": {},
+    "themes/nora/floatlabel": {},
+    "themes/nora/galleria": {},
+    "themes/nora/iconfield": {},
+    "themes/nora/image": {},
+    "themes/nora": {},
+    "themes/nora/inlinemessage": {},
+    "themes/nora/inplace": {},
+    "themes/nora/inputchips": {},
+    "themes/nora/inputgroup": {},
+    "themes/nora/inputnumber": {},
+    "themes/nora/inputotp": {},
+    "nora/inputtext": {
+        "description": "InputText renders a text field to enter data.\n\n[Live Demo](https://www.primevue.org/inputtext/)",
+        "tokens": {
+            "description": "Define design tokens used by the component.",
+            "values": {
+                "Root": {
+                    "description": "Tokens of the root section",
+                    "props": [
+                        {
+                            "name": "background",
+                            "token": "inputtext.background",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "string",
+                            "default": "",
+                            "description": "Background of an input field"
+                        }
+                    ]
+                }
+            }
+        }
+    },
+    "themes/nora/knob": {},
+    "themes/nora/listbox": {},
+    "themes/nora/megamenu": {},
+    "themes/nora/menu": {},
+    "themes/nora/menubar": {},
+    "themes/nora/message": {},
+    "themes/nora/metergroup": {},
+    "themes/nora/multiselect": {},
+    "themes/nora/orderlist": {},
+    "themes/nora/organizationchart": {},
+    "themes/nora/paginator": {},
+    "themes/nora/panel": {},
+    "themes/nora/panelmenu": {},
+    "themes/nora/password": {},
+    "themes/nora/picklist": {},
+    "themes/nora/popover": {},
+    "themes/nora/progressbar": {},
+    "themes/nora/progressspinner": {},
+    "themes/nora/radiobutton": {},
+    "themes/nora/rating": {},
+    "themes/nora/ripple": {},
+    "themes/nora/scrollpanel": {},
+    "themes/nora/scrolltop": {},
+    "themes/nora/select": {},
+    "themes/nora/selectbutton": {},
+    "themes/nora/skeleton": {},
+    "themes/nora/slider": {},
+    "themes/nora/speeddial": {},
+    "themes/nora/splitbutton": {},
+    "themes/nora/splitter": {},
+    "themes/nora/stepper": {},
+    "themes/nora/steps": {},
+    "themes/nora/tabmenu": {},
+    "themes/nora/tabs": {},
+    "themes/nora/tabview": {},
+    "themes/nora/tag": {},
+    "themes/nora/terminal": {},
+    "themes/nora/textarea": {},
+    "themes/nora/tieredmenu": {},
+    "themes/nora/timeline": {},
+    "themes/nora/toast": {},
+    "themes/nora/togglebutton": {},
+    "themes/nora/toggleswitch": {},
+    "themes/nora/toolbar": {},
+    "themes/nora/tooltip": {},
+    "themes/nora/tree": {},
+    "themes/nora/treeselect": {},
+    "themes/nora/treetable": {},
     "themes/service": {},
     "themes/utils": {},
     "tieredmenu": {
diff --git a/doc/confirmdialog/pt/index.vue b/doc/confirmdialog/pt/index.vue
index 848795e1f..7478549b9 100644
--- a/doc/confirmdialog/pt/index.vue
+++ b/doc/confirmdialog/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.confirmdialog',
                     label: 'ConfirmDialog PT Options',
                     component: DocApiTable,
-                    data: getPTOption('ConfirmDialog')
+                    data: getPTOptions('ConfirmDialog')
                 }
             ]
         };
diff --git a/doc/confirmpopup/pt/index.vue b/doc/confirmpopup/pt/index.vue
index bfcc4019e..263dab64d 100644
--- a/doc/confirmpopup/pt/index.vue
+++ b/doc/confirmpopup/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.confirmpopup',
                     label: 'ConfirmPopup PT Options',
                     component: DocApiTable,
-                    data: getPTOption('ConfirmPopup')
+                    data: getPTOptions('ConfirmPopup')
                 }
             ]
         };
diff --git a/doc/contextmenu/pt/index.vue b/doc/contextmenu/pt/index.vue
index 6009a524f..7ca9f6a55 100644
--- a/doc/contextmenu/pt/index.vue
+++ b/doc/contextmenu/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.contextmenu',
                     label: 'ContextMenu PT Options',
                     component: DocApiTable,
-                    data: getPTOption('ContextMenu')
+                    data: getPTOptions('ContextMenu')
                 }
             ]
         };
diff --git a/doc/datatable/pt/index.vue b/doc/datatable/pt/index.vue
index c2de789f3..12488a615 100644
--- a/doc/datatable/pt/index.vue
+++ b/doc/datatable/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,25 +26,25 @@ export default {
                     id: 'pt.doc.datatable',
                     label: 'DataTable PT Options',
                     component: DocApiTable,
-                    data: getPTOption('DataTable')
+                    data: getPTOptions('DataTable')
                 },
                 {
                     id: 'pt.doc.column',
                     label: 'Column PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Column')
+                    data: getPTOptions('Column')
                 },
                 {
                     id: 'pt.doc.columngroup',
                     label: 'ColumnGroup PT Options',
                     component: DocApiTable,
-                    data: getPTOption('ColumnGroup')
+                    data: getPTOptions('ColumnGroup')
                 },
                 {
                     id: 'pt.doc.row',
                     label: 'Row PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Row')
+                    data: getPTOptions('Row')
                 }
             ]
         };
diff --git a/doc/dataview/pt/index.vue b/doc/dataview/pt/index.vue
index 3e3b4c993..349307a62 100644
--- a/doc/dataview/pt/index.vue
+++ b/doc/dataview/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.dataview',
                     label: 'DataView PT Options',
                     component: DocApiTable,
-                    data: getPTOption('DataView')
+                    data: getPTOptions('DataView')
                 }
             ]
         };
diff --git a/doc/datepicker/pt/index.vue b/doc/datepicker/pt/index.vue
index ea98571bb..cf55ae326 100644
--- a/doc/datepicker/pt/index.vue
+++ b/doc/datepicker/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.datepicker',
                     label: 'DatePicker PT Options',
                     component: DocApiTable,
-                    data: getPTOption('DatePicker')
+                    data: getPTOptions('DatePicker')
                 }
             ]
         };
diff --git a/doc/deferredcontent/pt/index.vue b/doc/deferredcontent/pt/index.vue
index 88979d2be..6d9f3cc98 100644
--- a/doc/deferredcontent/pt/index.vue
+++ b/doc/deferredcontent/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.deferredcontent',
                     label: 'DeferredContent PT Options',
                     component: DocApiTable,
-                    data: getPTOption('DeferredContent')
+                    data: getPTOptions('DeferredContent')
                 }
             ]
         };
diff --git a/doc/dialog/pt/index.vue b/doc/dialog/pt/index.vue
index c183b1ff3..85f99d865 100644
--- a/doc/dialog/pt/index.vue
+++ b/doc/dialog/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.dialog',
                     label: 'Dialog PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Dialog')
+                    data: getPTOptions('Dialog')
                 }
             ]
         };
diff --git a/doc/divider/pt/index.vue b/doc/divider/pt/index.vue
index 4e74657ea..4a494a4d0 100644
--- a/doc/divider/pt/index.vue
+++ b/doc/divider/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.divider',
                     label: 'Divider PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Divider')
+                    data: getPTOptions('Divider')
                 }
             ]
         };
diff --git a/doc/dock/pt/index.vue b/doc/dock/pt/index.vue
index e096c2d94..fb7b6deec 100644
--- a/doc/dock/pt/index.vue
+++ b/doc/dock/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.dock',
                     label: 'Dock PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Dock')
+                    data: getPTOptions('Dock')
                 }
             ]
         };
diff --git a/doc/drawer/pt/index.vue b/doc/drawer/pt/index.vue
index f65755fa7..3e5778b96 100644
--- a/doc/drawer/pt/index.vue
+++ b/doc/drawer/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.drawer',
                     label: 'Drawer PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Drawer')
+                    data: getPTOptions('Drawer')
                 }
             ]
         };
diff --git a/doc/dynamicdialog/pt/index.vue b/doc/dynamicdialog/pt/index.vue
index c992d9484..c28d1bfa3 100644
--- a/doc/dynamicdialog/pt/index.vue
+++ b/doc/dynamicdialog/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.dynamicdialog',
                     label: 'Dialog PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Dialog')
+                    data: getPTOptions('Dialog')
                 }
             ]
         };
diff --git a/doc/editor/pt/index.vue b/doc/editor/pt/index.vue
index 70da55c63..e5044179e 100644
--- a/doc/editor/pt/index.vue
+++ b/doc/editor/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.editor',
                     label: 'Editor PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Editor')
+                    data: getPTOptions('Editor')
                 }
             ]
         };
diff --git a/doc/fieldset/pt/index.vue b/doc/fieldset/pt/index.vue
index e00ceccf2..42ec4b06e 100644
--- a/doc/fieldset/pt/index.vue
+++ b/doc/fieldset/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.fieldset',
                     label: 'Fieldset PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Fieldset')
+                    data: getPTOptions('Fieldset')
                 }
             ]
         };
diff --git a/doc/fileupload/pt/index.vue b/doc/fileupload/pt/index.vue
index dd148005a..0fe8563f8 100644
--- a/doc/fileupload/pt/index.vue
+++ b/doc/fileupload/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.fileupload',
                     label: 'FileUpload PT Options',
                     component: DocApiTable,
-                    data: getPTOption('FileUpload')
+                    data: getPTOptions('FileUpload')
                 }
             ]
         };
diff --git a/doc/floatlabel/pt/index.vue b/doc/floatlabel/pt/index.vue
index 8beecb0e6..dab994c74 100644
--- a/doc/floatlabel/pt/index.vue
+++ b/doc/floatlabel/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.floatlabel',
                     label: 'FloatLabel PT Options',
                     component: DocApiTable,
-                    data: getPTOption('FloatLabel')
+                    data: getPTOptions('FloatLabel')
                 }
             ]
         };
diff --git a/doc/galleria/pt/index.vue b/doc/galleria/pt/index.vue
index c9ceb35fb..6539e8602 100644
--- a/doc/galleria/pt/index.vue
+++ b/doc/galleria/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.galleria',
                     label: 'Galleria PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Galleria')
+                    data: getPTOptions('Galleria')
                 }
             ]
         };
diff --git a/doc/iconfield/pt/index.vue b/doc/iconfield/pt/index.vue
index 08273030e..49d396d0d 100644
--- a/doc/iconfield/pt/index.vue
+++ b/doc/iconfield/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,13 +26,13 @@ export default {
                     id: 'pt.doc.iconfield',
                     label: 'IconField PT Options',
                     component: DocApiTable,
-                    data: getPTOption('IconField')
+                    data: getPTOptions('IconField')
                 },
                 {
                     id: 'pt.doc.inputicon',
                     label: 'InputIcon PT Options',
                     component: DocApiTable,
-                    data: getPTOption('InputIcon')
+                    data: getPTOptions('InputIcon')
                 }
             ]
         };
diff --git a/doc/iconfield/theming/pt/index.vue b/doc/iconfield/theming/pt/index.vue
index fdb0f6894..d51b69df8 100644
--- a/doc/iconfield/theming/pt/index.vue
+++ b/doc/iconfield/theming/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.iconfield',
                     label: 'IconField PT Options',
                     component: DocApiTable,
-                    data: getPTOption('IconField')
+                    data: getPTOptions('IconField')
                 }
             ]
         };
diff --git a/doc/image/pt/index.vue b/doc/image/pt/index.vue
index da6ddf4f1..12ecfda5e 100644
--- a/doc/image/pt/index.vue
+++ b/doc/image/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.image',
                     label: 'Image PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Image')
+                    data: getPTOptions('Image')
                 }
             ]
         };
diff --git a/doc/inlinemessage/pt/index.vue b/doc/inlinemessage/pt/index.vue
index 3c6edfe4f..615df40e9 100644
--- a/doc/inlinemessage/pt/index.vue
+++ b/doc/inlinemessage/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.inlinemessage',
                     label: 'InlineMessage PT Options',
                     component: DocApiTable,
-                    data: getPTOption('InlineMessage')
+                    data: getPTOptions('InlineMessage')
                 }
             ]
         };
diff --git a/doc/inplace/pt/index.vue b/doc/inplace/pt/index.vue
index d14b97ea9..dbbb9c071 100644
--- a/doc/inplace/pt/index.vue
+++ b/doc/inplace/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.inplace',
                     label: 'Inplace PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Inplace')
+                    data: getPTOptions('Inplace')
                 }
             ]
         };
diff --git a/doc/inputchips/pt/index.vue b/doc/inputchips/pt/index.vue
index cc4ee34bd..dd7b3cbf4 100644
--- a/doc/inputchips/pt/index.vue
+++ b/doc/inputchips/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.inputchips',
                     label: 'InputChips PT Options',
                     component: DocApiTable,
-                    data: getPTOption('InputChips')
+                    data: getPTOptions('InputChips')
                 }
             ]
         };
diff --git a/doc/inputgroup/pt/index.vue b/doc/inputgroup/pt/index.vue
index 8027d1aca..5f3b433d9 100644
--- a/doc/inputgroup/pt/index.vue
+++ b/doc/inputgroup/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 // import PtDoc from './PTDoc.vue';
 import PTImage from './PTImage.vue';
 
@@ -27,13 +27,13 @@ export default {
                     id: 'pt.doc.inputgroup',
                     label: 'InputGroup PT Options',
                     component: DocApiTable,
-                    data: getPTOption('InputGroup')
+                    data: getPTOptions('InputGroup')
                 },
                 {
                     id: 'pt.doc.inputgroupaddon',
                     label: 'InputGroupAddon PT Options',
                     component: DocApiTable,
-                    data: getPTOption('InputGroupAddon')
+                    data: getPTOptions('InputGroupAddon')
                 }
                 // {
                 //     id: 'pt.demo',
diff --git a/doc/inputmask/pt/index.vue b/doc/inputmask/pt/index.vue
index cd115f883..fcc02a1df 100644
--- a/doc/inputmask/pt/index.vue
+++ b/doc/inputmask/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.inputmask',
                     label: 'InputMask PT Options',
                     component: DocApiTable,
-                    data: getPTOption('InputMask')
+                    data: getPTOptions('InputMask')
                 }
             ]
         };
diff --git a/doc/inputnumber/pt/index.vue b/doc/inputnumber/pt/index.vue
index 91111efe1..8de848321 100644
--- a/doc/inputnumber/pt/index.vue
+++ b/doc/inputnumber/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.inputnumber',
                     label: 'InputNumber PT Options',
                     component: DocApiTable,
-                    data: getPTOption('InputNumber')
+                    data: getPTOptions('InputNumber')
                 }
             ]
         };
diff --git a/doc/inputotp/pt/index.vue b/doc/inputotp/pt/index.vue
index 797c4ac77..c7b6c7162 100644
--- a/doc/inputotp/pt/index.vue
+++ b/doc/inputotp/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.inputotp',
                     label: 'InputOtp PT Options',
                     component: DocApiTable,
-                    data: getPTOption('InputOtp')
+                    data: getPTOptions('InputOtp')
                 }
             ]
         };
diff --git a/doc/inputtext/pt/index.vue b/doc/inputtext/pt/index.vue
index c800812a4..89c39f8e2 100644
--- a/doc/inputtext/pt/index.vue
+++ b/doc/inputtext/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.inputtext',
                     label: 'InputText PT Options',
                     component: DocApiTable,
-                    data: getPTOption('InputText')
+                    data: getPTOptions('InputText')
                 }
             ]
         };
diff --git a/doc/inputtext/theming/index.vue b/doc/inputtext/theming/index.vue
index e2b28c79c..c4bfa72b4 100644
--- a/doc/inputtext/theming/index.vue
+++ b/doc/inputtext/theming/index.vue
@@ -9,7 +9,8 @@
 </template>
 
 <script>
-import StyledDoc from './StyledDoc.vue';
+import DocApiTable from '@/components/doc/DocApiTable.vue';
+import { getStyleOptions, getTokenOptions } from '@/components/doc/helpers';
 import TailwindDoc from './TailwindDoc.vue';
 
 export default {
@@ -19,7 +20,16 @@ export default {
                 {
                     id: 'theming.styled',
                     label: 'Styled',
-                    component: StyledDoc
+                    description: 'List of class names used in the styled mode.',
+                    component: DocApiTable,
+                    data: getStyleOptions('InputText')
+                },
+                {
+                    id: 'theming.tokens',
+                    label: 'Design Tokens',
+                    description: `List of design tokens used in <i>${this.$appState.preset}</i> Preset.`,
+                    component: DocApiTable,
+                    data: getTokenOptions(this.$appState.preset, 'InputText')
                 },
                 {
                     id: 'theming.unstyled',
@@ -35,6 +45,14 @@ export default {
                 }
             ]
         };
+    },
+    watch: {
+        '$appState.preset': {
+            flush: 'post',
+            handler(newValue) {
+                this.docs[1] = { ...this.docs[1], description: `List of design tokens used in <i>${newValue}</i> Preset.`, data: getTokenOptions(newValue, 'InputText') };
+            }
+        }
     }
 };
 </script>
diff --git a/doc/knob/pt/index.vue b/doc/knob/pt/index.vue
index e21667a61..fded4fef3 100644
--- a/doc/knob/pt/index.vue
+++ b/doc/knob/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.knob',
                     label: 'Knob PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Knob')
+                    data: getPTOptions('Knob')
                 }
             ]
         };
diff --git a/doc/listbox/pt/index.vue b/doc/listbox/pt/index.vue
index de1beb154..b21248035 100644
--- a/doc/listbox/pt/index.vue
+++ b/doc/listbox/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.listbox',
                     label: 'Listbox PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Listbox')
+                    data: getPTOptions('Listbox')
                 }
             ]
         };
diff --git a/doc/megamenu/pt/index.vue b/doc/megamenu/pt/index.vue
index 895c40638..6ab86713d 100644
--- a/doc/megamenu/pt/index.vue
+++ b/doc/megamenu/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.megamenu',
                     label: 'MegaMenu PT Options',
                     component: DocApiTable,
-                    data: getPTOption('MegaMenu')
+                    data: getPTOptions('MegaMenu')
                 }
             ]
         };
diff --git a/doc/menu/pt/index.vue b/doc/menu/pt/index.vue
index 8fafa419b..7e2592428 100644
--- a/doc/menu/pt/index.vue
+++ b/doc/menu/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.menu',
                     label: 'Menu PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Menu')
+                    data: getPTOptions('Menu')
                 }
             ]
         };
diff --git a/doc/menubar/pt/index.vue b/doc/menubar/pt/index.vue
index 6176280b6..b1e64ecbf 100644
--- a/doc/menubar/pt/index.vue
+++ b/doc/menubar/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.menubar',
                     label: 'Menubar PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Menubar')
+                    data: getPTOptions('Menubar')
                 }
             ]
         };
diff --git a/doc/message/pt/index.vue b/doc/message/pt/index.vue
index a22ff9ecc..17fb05329 100644
--- a/doc/message/pt/index.vue
+++ b/doc/message/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.message',
                     label: 'Message PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Message')
+                    data: getPTOptions('Message')
                 }
             ]
         };
diff --git a/doc/metergroup/pt/index.vue b/doc/metergroup/pt/index.vue
index 5dfd3d120..af7760232 100644
--- a/doc/metergroup/pt/index.vue
+++ b/doc/metergroup/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.metergroup',
                     label: 'MeterGroup PT Options',
                     component: DocApiTable,
-                    data: getPTOption('MeterGroup')
+                    data: getPTOptions('MeterGroup')
                 }
             ]
         };
diff --git a/doc/multiselect/pt/index.vue b/doc/multiselect/pt/index.vue
index c4f6bd142..a5abc402a 100644
--- a/doc/multiselect/pt/index.vue
+++ b/doc/multiselect/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.multiselect',
                     label: 'MultiSelect PT Options',
                     component: DocApiTable,
-                    data: getPTOption('MultiSelect')
+                    data: getPTOptions('MultiSelect')
                 }
             ]
         };
diff --git a/doc/orderlist/pt/index.vue b/doc/orderlist/pt/index.vue
index a657128bf..dc3eba575 100644
--- a/doc/orderlist/pt/index.vue
+++ b/doc/orderlist/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.orderlist',
                     label: 'OrderList PT Options',
                     component: DocApiTable,
-                    data: getPTOption('OrderList')
+                    data: getPTOptions('OrderList')
                 }
             ]
         };
diff --git a/doc/organizationchart/pt/index.vue b/doc/organizationchart/pt/index.vue
index 93162e6b3..9394603e4 100644
--- a/doc/organizationchart/pt/index.vue
+++ b/doc/organizationchart/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.organizationchart',
                     label: 'OrganizationChart PT Options',
                     component: DocApiTable,
-                    data: getPTOption('OrganizationChart')
+                    data: getPTOptions('OrganizationChart')
                 }
             ]
         };
diff --git a/doc/paginator/pt/index.vue b/doc/paginator/pt/index.vue
index 284d9d3ec..56843f7b6 100644
--- a/doc/paginator/pt/index.vue
+++ b/doc/paginator/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.paginator',
                     label: 'Paginator PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Paginator')
+                    data: getPTOptions('Paginator')
                 }
             ]
         };
diff --git a/doc/panel/pt/index.vue b/doc/panel/pt/index.vue
index 81b853aaa..42bd26f43 100644
--- a/doc/panel/pt/index.vue
+++ b/doc/panel/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.panel',
                     label: 'Panel PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Panel')
+                    data: getPTOptions('Panel')
                 }
             ]
         };
diff --git a/doc/panelmenu/pt/index.vue b/doc/panelmenu/pt/index.vue
index 381ff4ed7..3824a10d4 100644
--- a/doc/panelmenu/pt/index.vue
+++ b/doc/panelmenu/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.panelmenu',
                     label: 'PanelMenu PT Options',
                     component: DocApiTable,
-                    data: getPTOption('PanelMenu')
+                    data: getPTOptions('PanelMenu')
                 }
             ]
         };
diff --git a/doc/password/pt/index.vue b/doc/password/pt/index.vue
index 10724ccfe..9e5867c39 100644
--- a/doc/password/pt/index.vue
+++ b/doc/password/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.password',
                     label: 'Password PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Password')
+                    data: getPTOptions('Password')
                 }
             ]
         };
diff --git a/doc/picklist/pt/index.vue b/doc/picklist/pt/index.vue
index 157a24314..9fd7671e3 100644
--- a/doc/picklist/pt/index.vue
+++ b/doc/picklist/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.picklist',
                     label: 'PickList PT Options',
                     component: DocApiTable,
-                    data: getPTOption('PickList')
+                    data: getPTOptions('PickList')
                 }
             ]
         };
diff --git a/doc/popover/pt/index.vue b/doc/popover/pt/index.vue
index c5e3326d5..9ffec4a98 100644
--- a/doc/popover/pt/index.vue
+++ b/doc/popover/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.popover',
                     label: 'Popover PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Popover')
+                    data: getPTOptions('Popover')
                 }
             ]
         };
diff --git a/doc/progressbar/pt/index.vue b/doc/progressbar/pt/index.vue
index 896382c54..14452a734 100644
--- a/doc/progressbar/pt/index.vue
+++ b/doc/progressbar/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.progressbar',
                     label: 'ProgressBar PT Options',
                     component: DocApiTable,
-                    data: getPTOption('ProgressBar')
+                    data: getPTOptions('ProgressBar')
                 }
             ]
         };
diff --git a/doc/progressspinner/pt/index.vue b/doc/progressspinner/pt/index.vue
index 3d5d7b23f..230ac630a 100644
--- a/doc/progressspinner/pt/index.vue
+++ b/doc/progressspinner/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.progressspinner',
                     label: 'ProgressSpinner PT Options',
                     component: DocApiTable,
-                    data: getPTOption('ProgressSpinner')
+                    data: getPTOptions('ProgressSpinner')
                 }
             ]
         };
diff --git a/doc/radiobutton/pt/index.vue b/doc/radiobutton/pt/index.vue
index c88388e1e..7df1fcc4f 100644
--- a/doc/radiobutton/pt/index.vue
+++ b/doc/radiobutton/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.radiobutton',
                     label: 'RadioButton PT Options',
                     component: DocApiTable,
-                    data: getPTOption('RadioButton')
+                    data: getPTOptions('RadioButton')
                 }
             ]
         };
diff --git a/doc/rating/pt/index.vue b/doc/rating/pt/index.vue
index be33f3d52..5abb00056 100644
--- a/doc/rating/pt/index.vue
+++ b/doc/rating/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.steps',
                     label: 'Rating PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Rating')
+                    data: getPTOptions('Rating')
                 }
             ]
         };
diff --git a/doc/ripple/pt/index.vue b/doc/ripple/pt/index.vue
index 606a606ad..fa0b64349 100644
--- a/doc/ripple/pt/index.vue
+++ b/doc/ripple/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.steps',
                     label: 'Ripple PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Ripple')
+                    data: getPTOptions('Ripple')
                 }
             ]
         };
diff --git a/doc/scrollpanel/pt/index.vue b/doc/scrollpanel/pt/index.vue
index 76eb2aa26..db08d8c1f 100644
--- a/doc/scrollpanel/pt/index.vue
+++ b/doc/scrollpanel/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.scrollpanel',
                     label: 'ScrollPanel PT Options',
                     component: DocApiTable,
-                    data: getPTOption('ScrollPanel')
+                    data: getPTOptions('ScrollPanel')
                 }
             ]
         };
diff --git a/doc/scrolltop/pt/index.vue b/doc/scrolltop/pt/index.vue
index c9a413df7..0406e42b9 100644
--- a/doc/scrolltop/pt/index.vue
+++ b/doc/scrolltop/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.scrolltop',
                     label: 'ScrollTop PT Options',
                     component: DocApiTable,
-                    data: getPTOption('ScrollTop')
+                    data: getPTOptions('ScrollTop')
                 }
             ]
         };
diff --git a/doc/select/pt/index.vue b/doc/select/pt/index.vue
index bf9ccc9f7..902e252fd 100644
--- a/doc/select/pt/index.vue
+++ b/doc/select/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.select',
                     label: 'Select PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Select')
+                    data: getPTOptions('Select')
                 }
             ]
         };
diff --git a/doc/selectbutton/pt/index.vue b/doc/selectbutton/pt/index.vue
index ab39cb9a4..6c93a8c49 100644
--- a/doc/selectbutton/pt/index.vue
+++ b/doc/selectbutton/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.steps',
                     label: 'SelectButton PT Options',
                     component: DocApiTable,
-                    data: getPTOption('SelectButton')
+                    data: getPTOptions('SelectButton')
                 }
             ]
         };
diff --git a/doc/skeleton/pt/index.vue b/doc/skeleton/pt/index.vue
index ea296e2a3..84b7fac3d 100644
--- a/doc/skeleton/pt/index.vue
+++ b/doc/skeleton/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.skeleton',
                     label: 'Skeleton PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Skeleton')
+                    data: getPTOptions('Skeleton')
                 }
             ]
         };
diff --git a/doc/slider/pt/index.vue b/doc/slider/pt/index.vue
index 62eb80b84..89030c033 100644
--- a/doc/slider/pt/index.vue
+++ b/doc/slider/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.steps',
                     label: 'Slider PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Slider')
+                    data: getPTOptions('Slider')
                 }
             ]
         };
diff --git a/doc/speeddial/pt/index.vue b/doc/speeddial/pt/index.vue
index 6414ad4a3..482815a7e 100644
--- a/doc/speeddial/pt/index.vue
+++ b/doc/speeddial/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.speeddial',
                     label: 'SpeedDial PT Options',
                     component: DocApiTable,
-                    data: getPTOption('SpeedDial')
+                    data: getPTOptions('SpeedDial')
                 }
             ]
         };
diff --git a/doc/splitbutton/pt/index.vue b/doc/splitbutton/pt/index.vue
index adaba446b..f6a6fd024 100644
--- a/doc/splitbutton/pt/index.vue
+++ b/doc/splitbutton/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.splitbutton',
                     label: 'SplitButton PT Options',
                     component: DocApiTable,
-                    data: getPTOption('SplitButton')
+                    data: getPTOptions('SplitButton')
                 }
             ]
         };
diff --git a/doc/splitter/pt/index.vue b/doc/splitter/pt/index.vue
index 33e5c8177..0c7e7fb64 100644
--- a/doc/splitter/pt/index.vue
+++ b/doc/splitter/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,13 +26,13 @@ export default {
                     id: 'pt.doc.splitter',
                     label: 'Splitter PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Splitter')
+                    data: getPTOptions('Splitter')
                 },
                 {
                     id: 'pt.doc.splitterpanel',
                     label: 'SplitterPanel PT Options',
                     component: DocApiTable,
-                    data: getPTOption('SplitterPanel')
+                    data: getPTOptions('SplitterPanel')
                 }
             ]
         };
diff --git a/doc/stepper/pt/index.vue b/doc/stepper/pt/index.vue
index f58ff66db..70a335b17 100644
--- a/doc/stepper/pt/index.vue
+++ b/doc/stepper/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,13 +26,13 @@ export default {
                     id: 'pt.doc.stepper',
                     label: 'Stepper PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Stepper')
+                    data: getPTOptions('Stepper')
                 },
                 {
                     id: 'pt.doc.stepperpanel',
                     label: 'StepperPanel PT Options',
                     component: DocApiTable,
-                    data: getPTOption('StepperPanel')
+                    data: getPTOptions('StepperPanel')
                 }
             ]
         };
diff --git a/doc/steps/pt/index.vue b/doc/steps/pt/index.vue
index 9575a05b1..94048bfc0 100644
--- a/doc/steps/pt/index.vue
+++ b/doc/steps/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.steps',
                     label: 'Steps PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Steps')
+                    data: getPTOptions('Steps')
                 }
             ]
         };
diff --git a/doc/tabmenu/pt/index.vue b/doc/tabmenu/pt/index.vue
index 86abbbf60..b88d33df3 100644
--- a/doc/tabmenu/pt/index.vue
+++ b/doc/tabmenu/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.tabmenu',
                     label: 'TabMenu PT Options',
                     component: DocApiTable,
-                    data: getPTOption('TabMenu')
+                    data: getPTOptions('TabMenu')
                 }
             ]
         };
diff --git a/doc/tabs/pt/index.vue b/doc/tabs/pt/index.vue
index ea02f0c6c..9e4350d91 100644
--- a/doc/tabs/pt/index.vue
+++ b/doc/tabs/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,31 +26,31 @@ export default {
                     id: 'pt.doc.tabs',
                     label: 'Tabs PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Tabs')
+                    data: getPTOptions('Tabs')
                 },
                 {
                     id: 'pt.doc.tablist',
                     label: 'TabList PT Options',
                     component: DocApiTable,
-                    data: getPTOption('TabList')
+                    data: getPTOptions('TabList')
                 },
                 {
                     id: 'pt.doc.tab',
                     label: 'Tab PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Tab')
+                    data: getPTOptions('Tab')
                 },
                 {
                     id: 'pt.doc.tabpanels',
                     label: 'TabPanels PT Options',
                     component: DocApiTable,
-                    data: getPTOption('TabPanels')
+                    data: getPTOptions('TabPanels')
                 },
                 {
                     id: 'pt.doc.tabpanel',
                     label: 'TabPanel PT Options',
                     component: DocApiTable,
-                    data: getPTOption('TabPanel')
+                    data: getPTOptions('TabPanel')
                 }
             ]
         };
diff --git a/doc/tag/pt/index.vue b/doc/tag/pt/index.vue
index c19db2f9a..1f5b6dda4 100644
--- a/doc/tag/pt/index.vue
+++ b/doc/tag/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.tag',
                     label: 'Tag PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Tag')
+                    data: getPTOptions('Tag')
                 }
             ]
         };
diff --git a/doc/terminal/pt/index.vue b/doc/terminal/pt/index.vue
index 3ea4e7357..39867414f 100644
--- a/doc/terminal/pt/index.vue
+++ b/doc/terminal/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.terminal',
                     label: 'Terminal PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Terminal')
+                    data: getPTOptions('Terminal')
                 }
             ]
         };
diff --git a/doc/textarea/pt/index.vue b/doc/textarea/pt/index.vue
index f8f270e20..7494da245 100644
--- a/doc/textarea/pt/index.vue
+++ b/doc/textarea/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.textarea',
                     label: 'Textarea PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Textarea')
+                    data: getPTOptions('Textarea')
                 }
             ]
         };
diff --git a/doc/tieredmenu/pt/index.vue b/doc/tieredmenu/pt/index.vue
index 186157a65..eb2c92003 100644
--- a/doc/tieredmenu/pt/index.vue
+++ b/doc/tieredmenu/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.tieredmenu',
                     label: 'TieredMenu PT Options',
                     component: DocApiTable,
-                    data: getPTOption('TieredMenu')
+                    data: getPTOptions('TieredMenu')
                 }
             ]
         };
diff --git a/doc/timeline/pt/index.vue b/doc/timeline/pt/index.vue
index 2c30df927..2146e1dc8 100644
--- a/doc/timeline/pt/index.vue
+++ b/doc/timeline/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.timeline',
                     label: 'Timeline PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Timeline')
+                    data: getPTOptions('Timeline')
                 }
             ]
         };
diff --git a/doc/toast/pt/index.vue b/doc/toast/pt/index.vue
index 530cab834..e236ed26a 100644
--- a/doc/toast/pt/index.vue
+++ b/doc/toast/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.toast',
                     label: 'Toast PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Toast')
+                    data: getPTOptions('Toast')
                 }
             ]
         };
diff --git a/doc/togglebutton/pt/index.vue b/doc/togglebutton/pt/index.vue
index 614488d49..c6f108992 100644
--- a/doc/togglebutton/pt/index.vue
+++ b/doc/togglebutton/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.steps',
                     label: 'ToggleButton PT Options',
                     component: DocApiTable,
-                    data: getPTOption('ToggleButton')
+                    data: getPTOptions('ToggleButton')
                 }
             ]
         };
diff --git a/doc/toggleswitch/pt/index.vue b/doc/toggleswitch/pt/index.vue
index fd303c12a..8e7aa7585 100644
--- a/doc/toggleswitch/pt/index.vue
+++ b/doc/toggleswitch/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.toggleswitch',
                     label: 'ToggleSwitch PT Options',
                     component: DocApiTable,
-                    data: getPTOption('ToggleSwitch')
+                    data: getPTOptions('ToggleSwitch')
                 }
             ]
         };
diff --git a/doc/toolbar/pt/index.vue b/doc/toolbar/pt/index.vue
index 9b3f41fa4..1ee768a7d 100644
--- a/doc/toolbar/pt/index.vue
+++ b/doc/toolbar/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.toolbar',
                     label: 'Toolbar PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Toolbar')
+                    data: getPTOptions('Toolbar')
                 }
             ]
         };
diff --git a/doc/tooltip/pt/index.vue b/doc/tooltip/pt/index.vue
index 4d916c823..b3cf274a2 100644
--- a/doc/tooltip/pt/index.vue
+++ b/doc/tooltip/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.tooltip',
                     label: 'Tooltip PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Tooltip')
+                    data: getPTOptions('Tooltip')
                 }
             ]
         };
diff --git a/doc/tree/pt/index.vue b/doc/tree/pt/index.vue
index 2b8c6e285..8cfe506fa 100644
--- a/doc/tree/pt/index.vue
+++ b/doc/tree/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.tree',
                     label: 'Tree PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Tree')
+                    data: getPTOptions('Tree')
                 }
             ]
         };
diff --git a/doc/treeselect/pt/index.vue b/doc/treeselect/pt/index.vue
index 0f5b05b39..c425a88b3 100644
--- a/doc/treeselect/pt/index.vue
+++ b/doc/treeselect/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.treeselect',
                     label: 'TreeSelect PT Options',
                     component: DocApiTable,
-                    data: getPTOption('TreeSelect')
+                    data: getPTOptions('TreeSelect')
                 }
             ]
         };
diff --git a/doc/treetable/pt/index.vue b/doc/treetable/pt/index.vue
index a7f19f064..2e6cdc1e7 100644
--- a/doc/treetable/pt/index.vue
+++ b/doc/treetable/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,13 +26,13 @@ export default {
                     id: 'pt.doc.treetable',
                     label: 'TreeTable PT Options',
                     component: DocApiTable,
-                    data: getPTOption('TreeTable')
+                    data: getPTOptions('TreeTable')
                 },
                 {
                     id: 'pt.doc.column',
                     label: 'Column PT Options',
                     component: DocApiTable,
-                    data: getPTOption('Column')
+                    data: getPTOptions('Column')
                 }
             ]
         };
diff --git a/doc/virtualscroller/pt/index.vue b/doc/virtualscroller/pt/index.vue
index 7b403f1f1..d7eac507e 100644
--- a/doc/virtualscroller/pt/index.vue
+++ b/doc/virtualscroller/pt/index.vue
@@ -10,7 +10,7 @@
 
 <script>
 import DocApiTable from '@/components/doc/DocApiTable.vue';
-import { getPTOption } from '@/components/doc/helpers/PTHelper.js';
+import { getPTOptions } from '@/components/doc/helpers';
 import PTImage from './PTImage.vue';
 
 export default {
@@ -26,7 +26,7 @@ export default {
                     id: 'pt.doc.virtualscroller',
                     label: 'VirtualScroller PT Options',
                     component: DocApiTable,
-                    data: getPTOption('VirtualScroller')
+                    data: getPTOptions('VirtualScroller')
                 }
             ]
         };
diff --git a/layouts/AppConfigurator.vue b/layouts/AppConfigurator.vue
index dd2555394..0bc832b10 100755
--- a/layouts/AppConfigurator.vue
+++ b/layouts/AppConfigurator.vue
@@ -31,7 +31,7 @@
             </div>
             <div class="config-panel-settings">
                 <span class="config-panel-label">Presets</span>
-                <SelectButton v-model="selectedPreset" @update:modelValue="onPresetChange" :options="presets" :unselectable="false" />
+                <SelectButton v-model="$appState.preset" @update:modelValue="onPresetChange" :options="presets" :unselectable="false" />
             </div>
             <div class="config-panel-settings">
                 <span class="config-panel-label">Ripple</span>
@@ -48,11 +48,16 @@ import Aura from 'primevue/themes/aura';
 import Lara from 'primevue/themes/lara';
 import Nora from 'primevue/themes/nora';
 
+const presets = {
+    Aura,
+    Lara,
+    Nora
+};
+
 export default {
     data() {
         return {
-            selectedPreset: 'Lara',
-            presets: ['Aura', 'Lara', 'Nora'],
+            presets: Object.keys(presets),
             selectedPrimaryColor: 'noir',
             selectedSurfaceColor: null,
             primaryColors: [
@@ -207,7 +212,8 @@ export default {
             this.$primevue.config.ripple = value;
         },
         onPresetChange(value) {
-            const preset = value === 'Nora' ? Nora : value === 'Lara' ? Lara : Aura;
+            this.$appState.preset = value;
+            const preset = presets[value];
             const surfacePalette = this.surfaces.find((s) => s.name === this.selectedSurfaceColor)?.palette;
 
             $t().preset(preset).preset(this.getPresetExt()).surfacePalette(surfacePalette).use({ useDefaultOptions: true });
diff --git a/plugins/app-state.js b/plugins/app-state.js
index 6488733b0..b32900224 100644
--- a/plugins/app-state.js
+++ b/plugins/app-state.js
@@ -5,7 +5,7 @@ import { reactive } from 'vue';
 const $appState = {
     install: (Vue, options) => {
         Vue.config.globalProperties.$appState = reactive({
-            //theme: 'aura-light-green',
+            preset: 'Lara',
             darkTheme: false,
             codeSandbox: false,
             sourceType: 'options-api',