diff --git a/.eslintrc.js b/.eslintrc.js
index 49e4b8a51..d002974d3 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -15,7 +15,7 @@ module.exports = {
         }
     },
     plugins: ['prettier'],
-    ignorePatterns: ['**/public/**'],
+    ignorePatterns: ['**/public/**', '**/dist/**'],
     rules: {
         'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
         'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
diff --git a/assets/styles/primevue.css b/assets/styles/primevue.css
deleted file mode 100644
index a99af375f..000000000
--- a/assets/styles/primevue.css
+++ /dev/null
@@ -1,10 +0,0 @@
-@import '../../components/lib/common/Common.css';
-/* Todo: badge.css should be removed for unstyled */
-@import '../../components/lib/badge/Badge.css';
-@import '../../components/lib/button/Button.css';
-@import '../../components/lib/checkbox/Checkbox.css';
-@import '../../components/lib/colorpicker/ColorPicker.css';
-@import '../../components/lib/inputtext/InputText.css';
-@import '../../components/lib/radiobutton/RadioButton.css';
-@import '../../components/lib/ripple/Ripple.css';
-@import '../../components/lib/tooltip/Tooltip.css';
\ No newline at end of file
diff --git a/components/lib/accordion/BaseAccordion.vue b/components/lib/accordion/BaseAccordion.vue
index 3d1d18657..5abaa3557 100644
--- a/components/lib/accordion/BaseAccordion.vue
+++ b/components/lib/accordion/BaseAccordion.vue
@@ -45,7 +45,7 @@ const classes = {
     }
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_accordion_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'accordion', manual: true });
 
 export default {
     name: 'BaseAccordion',
diff --git a/components/lib/autocomplete/AutoComplete.vue b/components/lib/autocomplete/AutoComplete.vue
index 5b786c7f1..28858648b 100755
--- a/components/lib/autocomplete/AutoComplete.vue
+++ b/components/lib/autocomplete/AutoComplete.vue
@@ -110,7 +110,7 @@
                 </slot>
             </template>
         </Button>
-        <span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
             {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
@@ -166,7 +166,7 @@
                         </template>
                     </VirtualScroller>
                     <slot name="footer" :value="modelValue" :suggestions="visibleOptions"></slot>
-                    <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
                         {{ selectedMessageText }}
                     </span>
                 </div>
diff --git a/components/lib/autocomplete/BaseAutoComplete.vue b/components/lib/autocomplete/BaseAutoComplete.vue
index 706a545ba..b1e4039e3 100644
--- a/components/lib/autocomplete/BaseAutoComplete.vue
+++ b/components/lib/autocomplete/BaseAutoComplete.vue
@@ -126,7 +126,6 @@ const classes = {
     inputToken: 'p-autocomplete-input-token',
     loadingIcon: 'p-autocomplete-loader',
     dropdownButton: 'p-autocomplete-dropdown',
-    hiddenSearchResult: 'p-hidden-accessible',
     panel: ({ instance }) => [
         'p-autocomplete-panel p-component',
         {
@@ -144,11 +143,10 @@ const classes = {
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
-    emptyMessage: 'p-autocomplete-empty-message',
-    hiddenSelectedMessage: 'p-hidden-accessible'
+    emptyMessage: 'p-autocomplete-empty-message'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_autocomplete_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'autocomplete', manual: true });
 
 export default {
     name: 'BaseAutoComplete',
diff --git a/components/lib/avatar/BaseAvatar.vue b/components/lib/avatar/BaseAvatar.vue
index 1851bf6bb..c613ce767 100644
--- a/components/lib/avatar/BaseAvatar.vue
+++ b/components/lib/avatar/BaseAvatar.vue
@@ -48,7 +48,7 @@ const classes = {
     icon: 'p-avatar-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_avatar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'avatar', manual: true });
 
 export default {
     name: 'BaseAvatar',
diff --git a/components/lib/avatargroup/BaseAvatarGroup.vue b/components/lib/avatargroup/BaseAvatarGroup.vue
index 86d3e239a..fc134bcde 100644
--- a/components/lib/avatargroup/BaseAvatarGroup.vue
+++ b/components/lib/avatargroup/BaseAvatarGroup.vue
@@ -17,7 +17,7 @@ const classes = {
     root: 'p-avatar-group p-component'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_avatargroup_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'avatargroup', manual: true });
 
 export default {
     name: 'BaseAvatarGroup',
diff --git a/components/lib/badge/BaseBadge.vue b/components/lib/badge/BaseBadge.vue
index 07cc4ce6b..e91903624 100644
--- a/components/lib/badge/BaseBadge.vue
+++ b/components/lib/badge/BaseBadge.vue
@@ -54,7 +54,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_badge_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
 
 export default {
     name: 'BaseBadge',
diff --git a/components/lib/badgedirective/BadgeDirective.js b/components/lib/badgedirective/BadgeDirective.js
index 624eb652f..4c1944f3c 100644
--- a/components/lib/badgedirective/BadgeDirective.js
+++ b/components/lib/badgedirective/BadgeDirective.js
@@ -1,19 +1,19 @@
-import { BaseDirective } from 'primevue/basedirective';
 import { DomHandler, UniqueComponentId } from 'primevue/utils';
+import BaseBadgeDirective from './BaseBadgeDirective';
 
-const BadgeDirective = BaseDirective.extend('badge', {
+const BadgeDirective = BaseBadgeDirective.extend('badge', {
     mounted(el, binding) {
         const id = UniqueComponentId() + '_badge';
 
-        el.$_pbadgeId = id;
         el.$_pbadgeUnstyled = binding.instance.$primevue.config.unstyled || false;
 
-        let badge = document.createElement('span');
+        const badge = DomHandler.createElement('span', {
+            id,
+            class: this.cx('root'),
+            'p-bind': this.ptm('root')
+        });
 
-        badge.id = id;
-        !el.$_pbadgeUnstyled && (badge.className = 'p-badge p-component');
-        badge.setAttribute('data-pc-name', 'badge');
-        badge.setAttribute('data-pc-section', 'root');
+        el.$_pbadgeId = badge.getAttribute('id');
 
         for (let modifier in binding.modifiers) {
             !el.$_pbadgeUnstyled && DomHandler.addClass(badge, 'p-badge-' + modifier);
@@ -34,9 +34,8 @@ const BadgeDirective = BaseDirective.extend('badge', {
         !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');
         el.setAttribute('data-p-overlay-badge', 'true');
         el.appendChild(badge);
-        el.$pEl = badge;
 
-        BaseDirective.handleCSS('badge', el, binding);
+        this.$el = badge;
     },
     updated(el, binding) {
         !el.$_pbadgeUnstyled && DomHandler.addClass(el, 'p-overlay-badge');
diff --git a/components/lib/badge/Badge.css b/components/lib/badgedirective/BaseBadgeDirective.js
similarity index 55%
rename from components/lib/badge/Badge.css
rename to components/lib/badgedirective/BaseBadgeDirective.js
index fe55f385a..384b9e8cc 100644
--- a/components/lib/badge/Badge.css
+++ b/components/lib/badgedirective/BaseBadgeDirective.js
@@ -1,3 +1,7 @@
+import BaseDirective from 'primevue/basedirective';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
 .p-badge {
     display: inline-block;
     border-radius: 10px;
@@ -29,4 +33,20 @@
 .p-badge-no-gutter {
     padding: 0;
     border-radius: 50%;
-}
\ No newline at end of file
+}
+`;
+
+const classes = {
+    root: 'p-badge p-component'
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'badge', manual: true });
+
+const BaseBadgeDirective = BaseDirective.extend({
+    css: {
+        classes,
+        loadStyle
+    }
+});
+
+export default BaseBadgeDirective;
diff --git a/components/lib/base/Base.js b/components/lib/base/Base.js
new file mode 100644
index 000000000..bf31ade85
--- /dev/null
+++ b/components/lib/base/Base.js
@@ -0,0 +1,48 @@
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-hidden-accessible {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.p-hidden-accessible input,
+.p-hidden-accessible select {
+    transform: scale(0);
+}
+
+.p-overflow-hidden {
+    overflow: hidden;
+}
+
+.p-unselectable-text {
+    user-select: none;
+}
+
+.p-sr-only {
+    border: 0;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+    word-wrap: normal !important;
+}
+`;
+
+export const { load: loadBaseStyle } = useStyle(styles, { name: 'base', manual: true });
+
+const Base = {
+    styles
+};
+
+export default Base;
diff --git a/components/lib/base/package.json b/components/lib/base/package.json
new file mode 100644
index 000000000..03fd79edd
--- /dev/null
+++ b/components/lib/base/package.json
@@ -0,0 +1,5 @@
+{
+    "main": "./base.cjs.js",
+    "module": "./base.esm.js",
+    "unpkg": "./base.min.js"
+}
diff --git a/components/lib/basecomponent/BaseComponent.vue b/components/lib/basecomponent/BaseComponent.vue
index a754fe6b6..2a96b44cb 100644
--- a/components/lib/basecomponent/BaseComponent.vue
+++ b/components/lib/basecomponent/BaseComponent.vue
@@ -1,19 +1,358 @@
 <script>
+import { loadBaseStyle } from 'primevue/base';
+import { useStyle } from 'primevue/usestyle';
 import { ObjectUtils } from 'primevue/utils';
 import { mergeProps } from 'vue';
 
-const inlineStyles = {
-    hiddenAccessible: {
-        border: '0',
-        clip: 'rect(0 0 0 0)',
-        height: '1px',
-        margin: '-1px',
-        overflow: 'hidden',
-        padding: '0',
-        position: 'absolute',
-        width: '1px'
-    }
-};
+const inlineStyles = {};
+
+const buttonStyles = `
+.p-button {
+    margin: 0;
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    align-items: center;
+    vertical-align: bottom;
+    text-align: center;
+    overflow: hidden;
+    position: relative;
+}
+
+.p-button-label {
+    flex: 1 1 auto;
+}
+
+.p-button-icon-right {
+    order: 1;
+}
+
+.p-button:disabled {
+    cursor: default;
+}
+
+.p-button-icon-only {
+    justify-content: center;
+}
+
+.p-button-icon-only .p-button-label {
+    visibility: hidden;
+    width: 0;
+    flex: 0 0 auto;
+}
+
+.p-button-vertical {
+    flex-direction: column;
+}
+
+.p-button-icon-bottom {
+    order: 2;
+}
+
+.p-buttonset .p-button {
+    margin: 0;
+}
+
+.p-buttonset .p-button:not(:last-child) {
+    border-right: 0 none;
+}
+
+.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
+    border-radius: 0;
+}
+
+.p-buttonset .p-button:first-of-type {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.p-buttonset .p-button:last-of-type {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.p-buttonset .p-button:focus {
+    position: relative;
+    z-index: 1;
+}
+`;
+const checkboxStyles = `
+.p-checkbox {
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+    position: relative;
+}
+
+.p-checkbox.p-checkbox-disabled {
+    cursor: default;
+}
+
+.p-checkbox-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+`;
+const inputTextStyles = `
+.p-inputtext {
+    margin: 0;
+}
+
+.p-fluid .p-inputtext {
+    width: 100%;
+}
+
+/* InputGroup */
+.p-inputgroup {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup-addon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.p-inputgroup .p-float-label {
+    display: flex;
+    align-items: stretch;
+    width: 100%;
+}
+
+.p-inputgroup .p-inputtext,
+.p-fluid .p-inputgroup .p-inputtext,
+.p-inputgroup .p-inputwrapper,
+.p-fluid .p-inputgroup .p-input {
+    flex: 1 1 auto;
+    width: 1%;
+}
+
+/* Floating Label */
+.p-float-label {
+    display: block;
+    position: relative;
+}
+
+.p-float-label label {
+    position: absolute;
+    pointer-events: none;
+    top: 50%;
+    margin-top: -.5rem;
+    transition-property: all;
+    transition-timing-function: ease;
+    line-height: 1;
+}
+
+.p-float-label textarea ~ label {
+    top: 1rem;
+}
+
+.p-float-label input:focus ~ label,
+.p-float-label input.p-filled ~ label,
+.p-float-label textarea:focus ~ label,
+.p-float-label textarea.p-filled ~ label,
+.p-float-label .p-inputwrapper-focus ~ label,
+.p-float-label .p-inputwrapper-filled ~ label {
+    top: -.75rem;
+    font-size: 12px;
+}
+
+.p-float-label .input:-webkit-autofill ~ label {
+    top: -20px;
+    font-size: 12px;
+}
+
+.p-float-label .p-placeholder,
+.p-float-label input::placeholder,
+.p-float-label .p-inputtext::placeholder {
+    opacity: 0;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-float-label .p-focus .p-placeholder,
+.p-float-label input:focus::placeholder,
+.p-float-label .p-inputtext:focus::placeholder {
+    opacity: 1;
+    transition-property: all;
+    transition-timing-function: ease;
+}
+
+.p-input-icon-left,
+.p-input-icon-right {
+    position: relative;
+    display: inline-block;
+}
+
+.p-input-icon-left > i,
+.p-input-icon-left > svg,
+.p-input-icon-right > i,
+.p-input-icon-right > svg {
+    position: absolute;
+    top: 50%;
+    margin-top: -.5rem;
+}
+
+.p-fluid .p-input-icon-left,
+.p-fluid .p-input-icon-right {
+    display: block;
+    width: 100%;
+}
+`;
+const radioButtonStyles = `
+.p-radiobutton {
+    position: relative;
+    display: inline-flex;
+    cursor: pointer;
+    user-select: none;
+    vertical-align: bottom;
+}
+
+.p-radiobutton.p-radiobutton-disabled {
+    cursor: default;
+}
+
+.p-radiobutton-box {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.p-radiobutton-icon {
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    transform: translateZ(0) scale(.1);
+    border-radius: 50%;
+    visibility: hidden;
+}
+
+.p-radiobutton-box.p-highlight .p-radiobutton-icon {
+    transform: translateZ(0) scale(1.0, 1.0);
+    visibility: visible;
+}
+`;
+const styles = `
+.p-component, .p-component * {
+    box-sizing: border-box;
+}
+
+.p-hidden-space {
+    visibility: hidden;
+}
+
+.p-reset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    outline: 0;
+    text-decoration: none;
+    font-size: 100%;
+    list-style: none;
+}
+
+.p-disabled, .p-disabled * {
+    cursor: default !important;
+    pointer-events: none;
+    user-select: none;
+}
+
+.p-component-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+}
+
+input[type="button"],
+input[type="submit"],
+input[type="reset"],
+input[type="file"]::-webkit-file-upload-button,
+button { /* @todo */
+    border-radius: 0;
+}
+
+.p-link {
+	text-align: left;
+	background-color: transparent;
+	margin: 0;
+	padding: 0;
+	border: none;
+    cursor: pointer;
+    user-select: none;
+}
+
+.p-link:disabled {
+	cursor: default;
+}
+
+/* Non vue overlay animations */
+.p-connected-overlay {
+    opacity: 0;
+    transform: scaleY(0.8);
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-connected-overlay-visible {
+    opacity: 1;
+    transform: scaleY(1);
+}
+
+.p-connected-overlay-hidden {
+    opacity: 0;
+    transform: scaleY(1);
+    transition: opacity .1s linear;
+}
+
+/* Vue based overlay animations */
+.p-connected-overlay-enter-from {
+    opacity: 0;
+    transform: scaleY(0.8);
+}
+
+.p-connected-overlay-leave-to {
+    opacity: 0;
+}
+
+.p-connected-overlay-enter-active {
+    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
+}
+
+.p-connected-overlay-leave-active {
+    transition: opacity .1s linear;
+}
+
+/* Toggleable Content */
+.p-toggleable-content-enter-from,
+.p-toggleable-content-leave-to {
+    max-height: 0;
+}
+
+.p-toggleable-content-enter-to,
+.p-toggleable-content-leave-from {
+    max-height: 1000px;
+}
+
+.p-toggleable-content-leave-active {
+    overflow: hidden;
+    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
+}
+
+.p-toggleable-content-enter-active {
+    overflow: hidden;
+    transition: max-height 1s ease-in-out;
+}
+${buttonStyles}
+${checkboxStyles}
+${inputTextStyles}
+${radioButtonStyles}
+`;
+
+const { load: loadStyle } = useStyle(styles, { name: 'common', manual: true });
 
 export default {
     name: 'BaseComponent',
@@ -36,10 +375,16 @@ export default {
         isUnstyled: {
             immediate: true,
             handler(newValue) {
-                !newValue && this.$options.css && this.$css.loadStyle();
+                if (!newValue) {
+                    loadStyle();
+                    this.$options.css && this.$css.loadStyle();
+                }
             }
         }
     },
+    beforeMount() {
+        loadBaseStyle();
+    },
     methods: {
         _getHostInstance(instance) {
             return instance ? (this.$options.hostName ? (instance.$.type.name === this.$options.hostName ? instance : this._getHostInstance(instance.$parentInstance)) : instance.$parentInstance) : undefined;
diff --git a/components/lib/basedirective/BaseDirective.js b/components/lib/basedirective/BaseDirective.js
index b1948020f..008566224 100644
--- a/components/lib/basedirective/BaseDirective.js
+++ b/components/lib/basedirective/BaseDirective.js
@@ -1,69 +1,109 @@
-import { DomHandler, ObjectUtils } from 'primevue/utils';
+import { loadBaseStyle } from 'primevue/base';
+import { ObjectUtils } from 'primevue/utils';
+import { mergeProps } from 'vue';
+
+const BaseDirective = {
+    _getMeta: (...args) => [ObjectUtils.isObject(args[0]) ? undefined : args[0], ObjectUtils.getItemValue(ObjectUtils.isObject(args[0]) ? args[0] : args[1])],
+    _getOptionValue: (options, key = '', params = {}) => {
+        const fKeys = ObjectUtils.convertToFlatCase(key).split('.');
+        const fKey = fKeys.shift();
+
+        return fKey
+            ? ObjectUtils.isObject(options)
+                ? BaseDirective._getOptionValue(ObjectUtils.getItemValue(options[Object.keys(options).find((k) => ObjectUtils.convertToFlatCase(k) === fKey) || ''], params), fKeys.join('.'), params)
+                : undefined
+            : ObjectUtils.getItemValue(options, params);
+    },
+    _getPTValue: (instance = {}, obj = {}, key = '', params = {}, searchInDefaultPT = true) => {
+        const datasetPrefix = 'data-pc-';
+        const self = BaseDirective._getOptionValue(obj, key, params);
+        const globalPT = searchInDefaultPT ? BaseDirective._getOptionValue(instance.defaultPT, key, params) : undefined;
+        const merged = mergeProps(self, globalPT, {
+            ...(key === 'root' && { [`${datasetPrefix}name`]: ObjectUtils.convertToFlatCase(instance.$name) }),
+            [`${datasetPrefix}section`]: ObjectUtils.convertToFlatCase(key)
+        });
+
+        return merged;
+    },
+    _hook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
+        const config = binding?.instance?.$primevue?.config;
+        const globalHook = config?.pt?.directives?.[directiveName]?.hooks?.[hookName];
+        const selfHook = binding?.value?.pt?.hooks?.[hookName];
+
+        globalHook?.(el, binding, vnode, prevVnode);
+        selfHook?.(el, binding, vnode, prevVnode);
+    },
+    _extend: (name, options = {}) => {
+        const handleHook = (hook, el, binding, vnode, prevVnode) => {
+            el.$instance = el.$instance || {};
+
+            const config = binding?.instance?.$primevue?.config;
+            const $instance = el.$instance[name] || {};
+            const $options = ObjectUtils.isEmpty($instance) ? { ...options, ...options?.methods } : {};
+
+            el.$instance[name] = {
+                ...$instance,
+                /* new instance variables to pass in directive methods */
+                $name: name,
+                $host: el,
+                $binding: binding,
+                $el: $instance['$el'] || undefined,
+                $css: { classes: undefined, inlineStyles: undefined, loadStyle: () => {}, ...options?.css },
+                /* computed instance variables */
+                defaultPT: config?.pt?.directives?.[name],
+                isUnstyled: config?.unstyled,
+                /* instance's methods */
+                ptm: (key = '', params = {}) => BaseDirective._getPTValue(el.$instance[name], el.$instance?.[name]?.$binding?.value?.pt, key, { ...params }),
+                ptmo: (obj = {}, key = '', params = {}) => BaseDirective._getPTValue(el.$instance?.[name], obj, key, params, false),
+                cx: (key = '', params = {}) => (!el.$instance?.[name]?.isUnstyled ? BaseDirective._getOptionValue(el.$instance?.[name]?.$css?.classes, key, { ...params }) : undefined),
+                sx: (key = '', when = true, params = {}) => (when ? BaseDirective._getOptionValue(el.$instance?.[name]?.$css?.inlineStyles, key, { ...params }) : undefined),
+                ...$options
+            };
+
+            $instance[hook]?.(el, binding, vnode, prevVnode); // handle hook in directive implementation
+            BaseDirective._hook(name, hook, el, binding, vnode, prevVnode); // handle hooks during directive uses (global and self-definition)
+        };
 
-export const BaseDirective = {
-    extend: (directiveName, hooks) => {
         return {
             created: (el, binding, vnode, prevVnode) => {
-                hooks['created'] && hooks['created'](el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'created', el, binding, vnode, prevVnode);
+                handleHook('created', el, binding, vnode, prevVnode);
             },
             beforeMount: (el, binding, vnode, prevVnode) => {
-                hooks['beforeMount'] && hooks['beforeMount'](el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'beforeMount', el, binding, vnode, prevVnode);
+                const instance = el.$instance[name];
+
+                loadBaseStyle();
+                !instance?.isUnstyled && instance?.$css?.loadStyle();
+                handleHook('beforeMount', el, binding, vnode, prevVnode);
             },
             mounted: (el, binding, vnode, prevVnode) => {
-                hooks['mounted'] && hooks['mounted'](el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'mounted', el, binding, vnode, prevVnode);
+                handleHook('mounted', el, binding, vnode, prevVnode);
             },
             beforeUpdate: (el, binding, vnode, prevVnode) => {
-                hooks['beforeUpdate'] && hooks['beforeUpdate'](el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'beforeUpdate', el, binding, vnode, prevVnode);
+                handleHook('beforeUpdate', el, binding, vnode, prevVnode);
             },
             updated: (el, binding, vnode, prevVnode) => {
-                hooks['updated'] && hooks['updated'](el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'updated', el, binding, vnode, prevVnode);
+                handleHook('updated', el, binding, vnode, prevVnode);
             },
             beforeUnmount: (el, binding, vnode, prevVnode) => {
-                hooks['beforeUnmount'] && hooks['beforeUnmount'](el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'beforeUnmount', el, binding, vnode, prevVnode);
+                handleHook('beforeUnmount', el, binding, vnode, prevVnode);
             },
             unmounted: (el, binding, vnode, prevVnode) => {
-                hooks['unmounted'] && hooks['unmounted'](el, binding, vnode, prevVnode);
-                BaseDirective.handleHook(directiveName, 'unmounted', el, binding, vnode, prevVnode);
+                handleHook('unmounted', el, binding, vnode, prevVnode);
             }
         };
     },
-    handleHook: (directiveName, hookName, el, binding, vnode, prevVnode) => {
-        let _config = binding.instance.$primevue && binding.instance.$primevue.config;
-        let _directive = _config && _config.pt && _config.pt.directives && _config.pt.directives[directiveName];
+    extend: (...args) => {
+        const [name, options] = BaseDirective._getMeta(...args);
 
-        // global pt hook
-        _directive && _directive.hooks && _directive.hooks[hookName] && _directive.hooks[hookName](el.$pEl, el, binding, vnode, prevVnode);
-        // options pt hook
-        binding.value && typeof binding.value === 'object' && binding.value.pt && binding.value.pt.hooks && binding.value.pt.hooks[hookName] && binding.value.pt.hooks[hookName](el.$pEl, el, binding, vnode, prevVnode);
-    },
-    handleCSS: (directiveName, el, binding) => {
-        let _config = binding.instance.$primevue && binding.instance.$primevue.config;
-        let _directive = _config && _config.pt && _config.pt.directives && _config.pt.directives[directiveName];
-        let ptCSSOptions = [];
+        return {
+            extend: (..._args) => {
+                const [_name, _options] = BaseDirective._getMeta(..._args);
 
-        // global pt css
-        _directive && _directive.css && ptCSSOptions.push(_directive.css);
-        // options pt css
-        binding.value && binding.value.pt && binding.value.pt.css && ptCSSOptions.push(binding.value.pt.css);
-
-        for (let option of ptCSSOptions) {
-            Object.entries(option).forEach(([key, value]) => {
-                let styledElement;
-
-                if (key === 'root' && directiveName !== 'badge') styledElement = el;
-                else {
-                    styledElement = DomHandler.findSingle(el, `[data-pc-section="${ObjectUtils.convertToFlatCase(key)}"]`);
-                }
-
-                value.class && DomHandler.addMultipleClasses(styledElement, value.class);
-                value.style && DomHandler.addStyles(styledElement, value.style);
-            });
-        }
+                return BaseDirective.extend(_name, { ...options, ...options?.methods, ..._options });
+            },
+            ...BaseDirective._extend(name, options)
+        };
     }
 };
+
+export default BaseDirective;
diff --git a/components/lib/basedirective/package.json b/components/lib/basedirective/package.json
index c1773766f..2888b0f19 100644
--- a/components/lib/basedirective/package.json
+++ b/components/lib/basedirective/package.json
@@ -1,6 +1,5 @@
 {
     "main": "./basedirective.cjs.js",
     "module": "./basedirective.esm.js",
-    "unpkg": "./basedirective.min.js",
-    "types": "./BaseDirective.d.ts"
+    "unpkg": "./basedirective.min.js"
 }
diff --git a/components/lib/blockui/BaseBlockUI.vue b/components/lib/blockui/BaseBlockUI.vue
index c40c19c7b..de57c67b5 100644
--- a/components/lib/blockui/BaseBlockUI.vue
+++ b/components/lib/blockui/BaseBlockUI.vue
@@ -28,7 +28,7 @@ const classes = {
     root: 'p-blockui-container'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_blockui_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'blockui', manual: true });
 
 export default {
     name: 'BaseBlockUI',
diff --git a/components/lib/blockui/BlockUI.vue b/components/lib/blockui/BlockUI.vue
index e940ec349..be011cbf2 100755
--- a/components/lib/blockui/BlockUI.vue
+++ b/components/lib/blockui/BlockUI.vue
@@ -38,7 +38,7 @@ export default {
                 this.mask = document.createElement('div');
                 !this.isUnstyled && this.mask.setAttribute('class', styleClass);
                 document.body.appendChild(this.mask);
-                !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
                 document.activeElement.blur();
             } else {
                 this.mask = document.createElement('div');
@@ -65,7 +65,7 @@ export default {
             if (this.fullScreen) {
                 if (!this.isUnstyled) {
                     document.body.removeChild(this.mask);
-                    !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                    DomHandler.removeClass(document.body, 'p-overflow-hidden');
                 }
             } else {
                 this.$refs.container.removeChild(this.mask);
diff --git a/components/lib/breadcrumb/BaseBreadcrumb.vue b/components/lib/breadcrumb/BaseBreadcrumb.vue
index 07d013d8f..7ed1554c1 100644
--- a/components/lib/breadcrumb/BaseBreadcrumb.vue
+++ b/components/lib/breadcrumb/BaseBreadcrumb.vue
@@ -53,7 +53,7 @@ const classes = {
     label: 'p-menuitem-text'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_breadcrumb_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'breadcrumb', manual: true });
 
 export default {
     name: 'BaseBreadcrumb',
diff --git a/components/lib/button/BaseButton.vue b/components/lib/button/BaseButton.vue
index 8f57b99b2..c1c8f048a 100644
--- a/components/lib/button/BaseButton.vue
+++ b/components/lib/button/BaseButton.vue
@@ -103,16 +103,10 @@ const classes = {
             'p-button-icon-bottom': props.iconPos === 'bottom' && props.label
         }
     ],
-    label: 'p-button-label',
-    badge: ({ props }) => [
-        'p-badge p-component',
-        {
-            'p-badge-no-gutter': props.badge && String(props.badge).length === 1
-        }
-    ]
+    label: 'p-button-label'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_button_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'button', manual: true });
 
 export default {
     name: 'BaseButton',
diff --git a/components/lib/button/Button.css b/components/lib/button/Button.css
deleted file mode 100755
index f937b65f9..000000000
--- a/components/lib/button/Button.css
+++ /dev/null
@@ -1,68 +0,0 @@
-.p-button {
-    margin: 0;
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    align-items: center;
-    vertical-align: bottom;
-    text-align: center;
-    overflow: hidden;
-    position: relative;
-}
-
-.p-button-label {
-    flex: 1 1 auto;
-}
-
-.p-button-icon-right {
-    order: 1;
-}
-
-.p-button:disabled {
-    cursor: default;
-}
-
-.p-button-icon-only {
-    justify-content: center;
-}
-
-.p-button-icon-only .p-button-label {
-    visibility: hidden;
-    width: 0;
-    flex: 0 0 auto;
-}
-
-.p-button-vertical {
-    flex-direction: column;
-}
-
-.p-button-icon-bottom {
-    order: 2;
-}
-
-.p-buttonset .p-button {
-    margin: 0;
-}
-
-.p-buttonset .p-button:not(:last-child) {
-    border-right: 0 none;
-}
-
-.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
-    border-radius: 0;
-}
-
-.p-buttonset .p-button:first-of-type {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-}
-
-.p-buttonset .p-button:last-of-type {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-}
-
-.p-buttonset .p-button:focus {
-    position: relative;
-    z-index: 1;
-}
\ No newline at end of file
diff --git a/components/lib/button/Button.vue b/components/lib/button/Button.vue
index 271a72698..7b1d70014 100755
--- a/components/lib/button/Button.vue
+++ b/components/lib/button/Button.vue
@@ -9,7 +9,7 @@
                 <span v-if="icon" :class="[cx('icon'), icon]" v-bind="ptm('icon')"></span>
             </slot>
             <span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
-            <span v-if="badge" :class="[cx('badge'), badgeClass]" v-bind="ptm('badge')">{{ badge }}</span>
+            <Badge v-if="badge" :value="badge" :class="badgeClass" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>
         </slot>
     </button>
 </template>
@@ -17,6 +17,7 @@
 <script>
 import SpinnerIcon from 'primevue/icons/spinner';
 import Ripple from 'primevue/ripple';
+import Badge from 'primevue/badge';
 import BaseButton from './BaseButton.vue';
 
 export default {
@@ -43,7 +44,8 @@ export default {
         }
     },
     components: {
-        SpinnerIcon
+        SpinnerIcon,
+        Badge
     },
     directives: {
         ripple: Ripple
diff --git a/components/lib/calendar/BaseCalendar.vue b/components/lib/calendar/BaseCalendar.vue
index 1c084f7a4..17354f390 100644
--- a/components/lib/calendar/BaseCalendar.vue
+++ b/components/lib/calendar/BaseCalendar.vue
@@ -200,13 +200,10 @@ const classes = {
     weekLabelContainer: 'p-disabled',
     day: ({ date }) => [{ 'p-datepicker-other-month': date.otherMonth, 'p-datepicker-today': date.today }],
     dayLabel: ({ instance, date }) => [{ 'p-highlight': instance.isSelected(date), 'p-disabled': !date.selectable }],
-    hiddenSelectedDay: 'p-hidden-accessible',
     monthPicker: 'p-monthpicker',
     month: ({ instance, month, index }) => ['p-monthpicker-month', { 'p-highlight': instance.isMonthSelected(index), 'p-disabled': !month.selectable }],
-    hiddenMonth: 'p-hidden-accessible',
     yearPicker: 'p-yearpicker',
     year: ({ instance, year }) => ['p-yearpicker-year', { 'p-highlight': instance.isYearSelected(year.value), 'p-disabled': !year.selectable }],
-    hiddenYear: 'p-hidden-accessible',
     timePicker: 'p-timepicker',
     hourPicker: 'p-hour-picker',
     incrementButton: 'p-link',
@@ -222,7 +219,7 @@ const classes = {
     clearButton: 'p-button-text'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_calendar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'calendar', manual: true });
 
 export default {
     name: 'BaseCalendar',
diff --git a/components/lib/calendar/Calendar.vue b/components/lib/calendar/Calendar.vue
index d528107d6..2d6624dd7 100755
--- a/components/lib/calendar/Calendar.vue
+++ b/components/lib/calendar/Calendar.vue
@@ -165,7 +165,7 @@
                                                     >
                                                         <slot name="date" :date="date">{{ date.day }}</slot>
                                                     </span>
-                                                    <div v-if="isSelected(date)" :class="cx('hiddenSelectedDay')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenSelectedDay')" :data-p-hidden-accessible="true">
+                                                    <div v-if="isSelected(date)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenSelectedDay')" :data-p-hidden-accessible="true">
                                                         {{ date.day }}
                                                     </div>
                                                 </td>
@@ -188,7 +188,7 @@
                                 :data-p-highlight="isMonthSelected(i)"
                             >
                                 {{ m.value }}
-                                <div v-if="isMonthSelected(i)" :class="cx('hiddenMonth')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenMonth')" :data-p-hidden-accessible="true">
+                                <div v-if="isMonthSelected(i)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenMonth')" :data-p-hidden-accessible="true">
                                     {{ m.value }}
                                 </div>
                             </span>
@@ -206,7 +206,7 @@
                                 :data-p-highlight="isYearSelected(y.value)"
                             >
                                 {{ y.value }}
-                                <div v-if="isYearSelected(y.value)" :class="cx('hiddenYear')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenYear')" :data-p-hidden-accessible="true">
+                                <div v-if="isYearSelected(y.value)" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenYear')" :data-p-hidden-accessible="true">
                                     {{ y.value }}
                                 </div>
                             </span>
@@ -1543,8 +1543,7 @@ export default {
                 this.mask.addEventListener('click', this.maskClickListener);
 
                 document.body.appendChild(this.mask);
-                document.body.setAttribute('data-p-overflow-hidden', 'true');
-                !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
             }
         },
         disableModality() {
@@ -1578,8 +1577,7 @@ export default {
             }
 
             if (!hasBlockerMasks) {
-                document.body.removeAttribute('data-p-overflow-hidden');
-                !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                DomHandler.removeClass(document.body, 'p-overflow-hidden');
             }
         },
         updateCurrentMetaData() {
diff --git a/components/lib/carousel/BaseCarousel.vue b/components/lib/carousel/BaseCarousel.vue
index 36f720af3..c96bfc2fc 100644
--- a/components/lib/carousel/BaseCarousel.vue
+++ b/components/lib/carousel/BaseCarousel.vue
@@ -128,7 +128,7 @@ const classes = {
     footer: 'p-carousel-footer'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_carousel_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'carousel', manual: true });
 
 export default {
     name: 'BaseCarousel',
diff --git a/components/lib/cascadeselect/BaseCascadeSelect.vue b/components/lib/cascadeselect/BaseCascadeSelect.vue
index 680087e75..e16fd3f02 100644
--- a/components/lib/cascadeselect/BaseCascadeSelect.vue
+++ b/components/lib/cascadeselect/BaseCascadeSelect.vue
@@ -100,7 +100,6 @@ const classes = {
             'p-overlay-open': instance.overlayVisible
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     label: ({ instance, props }) => [
         'p-cascadeselect-label p-inputtext',
         {
@@ -111,7 +110,6 @@ const classes = {
     dropdownButton: 'p-cascadeselect-trigger',
     loadingIcon: 'p-cascadeselect-trigger-icon',
     dropdownIcon: 'p-cascadeselect-trigger-icon',
-    hiddenSearchResult: 'p-hidden-accessible',
     panel: ({ instance }) => [
         'p-cascadeselect-panel p-component',
         {
@@ -120,7 +118,6 @@ const classes = {
         }
     ],
     wrapper: 'p-cascadeselect-items-wrapper',
-    hiddenSelectedMessage: 'p-hidden-accessible',
     list: 'p-cascadeselect-panel p-cascadeselect-items',
     item: ({ instance, processedOption }) => [
         'p-cascadeselect-item',
@@ -137,7 +134,7 @@ const classes = {
     sublist: 'p-cascadeselect-sublist'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_cascadeselect_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'cascadeselect', manual: true });
 
 export default {
     name: 'BaseCascadeSelect',
diff --git a/components/lib/cascadeselect/CascadeSelect.vue b/components/lib/cascadeselect/CascadeSelect.vue
index 5afbc7967..9805d55be 100644
--- a/components/lib/cascadeselect/CascadeSelect.vue
+++ b/components/lib/cascadeselect/CascadeSelect.vue
@@ -1,6 +1,6 @@
 <template>
     <div ref="container" :class="cx('root')" :style="sx('root')" @click="onContainerClick($event)" v-bind="ptm('root')" data-pc-name="cascadeselect">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="focusInput"
                 :id="inputId"
@@ -38,7 +38,7 @@
                 <component :is="dropdownIcon ? 'span' : 'ChevronDownIcon'" :class="[cx('dropdownIcon'), dropdownIcon]" aria-hidden="true" v-bind="ptm('dropdownIcon')" />
             </slot>
         </div>
-        <span role="status" aria-live="polite" :class="cx('hiddenSearchResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSearchResult')" :data-p-hidden-accessible="true">
             {{ searchResultMessageText }}
         </span>
         <Portal :appendTo="appendTo">
@@ -65,7 +65,7 @@
                             :pt="pt"
                         />
                     </div>
-                    <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
                         {{ selectedMessageText }}
                     </span>
                 </div>
diff --git a/components/lib/chart/BaseChart.vue b/components/lib/chart/BaseChart.vue
index 0a34b6a22..48ba5444f 100644
--- a/components/lib/chart/BaseChart.vue
+++ b/components/lib/chart/BaseChart.vue
@@ -12,7 +12,7 @@ const classes = {
     root: 'p-chart'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_chart_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'chart', manual: true });
 
 export default {
     name: 'BaseChart',
diff --git a/components/lib/checkbox/BaseCheckbox.vue b/components/lib/checkbox/BaseCheckbox.vue
index b4f287e72..8a2ea8c64 100644
--- a/components/lib/checkbox/BaseCheckbox.vue
+++ b/components/lib/checkbox/BaseCheckbox.vue
@@ -31,7 +31,6 @@ const classes = {
             'p-checkbox-focused': instance.focused
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     input: ({ instance, props }) => [
         'p-checkbox-box',
         {
@@ -43,7 +42,7 @@ const classes = {
     icon: 'p-checkbox-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_checkbox_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'checkbox', manual: true });
 
 export default {
     name: 'BaseCheckbox',
diff --git a/components/lib/checkbox/Checkbox.css b/components/lib/checkbox/Checkbox.css
deleted file mode 100755
index 12547a4b6..000000000
--- a/components/lib/checkbox/Checkbox.css
+++ /dev/null
@@ -1,17 +0,0 @@
-.p-checkbox {
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-    position: relative;
-}
-
-.p-checkbox.p-checkbox-disabled {
-    cursor: default;
-}
-
-.p-checkbox-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
diff --git a/components/lib/checkbox/Checkbox.vue b/components/lib/checkbox/Checkbox.vue
index c0f411180..e58c059cc 100755
--- a/components/lib/checkbox/Checkbox.vue
+++ b/components/lib/checkbox/Checkbox.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('root')" @click="onClick($event)" v-bind="getPTOptions('root')" data-pc-name="checkbox">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="input"
                 :id="inputId"
diff --git a/components/lib/chip/BaseChip.vue b/components/lib/chip/BaseChip.vue
index 453a4d216..8b57eec43 100644
--- a/components/lib/chip/BaseChip.vue
+++ b/components/lib/chip/BaseChip.vue
@@ -38,7 +38,7 @@ const classes = {
     removeIcon: 'p-chip-remove-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_chip_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'chip', manual: true });
 
 export default {
     name: 'BaseChip',
diff --git a/components/lib/chips/BaseChips.vue b/components/lib/chips/BaseChips.vue
index b9307501d..4c2ef4581 100644
--- a/components/lib/chips/BaseChips.vue
+++ b/components/lib/chips/BaseChips.vue
@@ -67,7 +67,7 @@ const classes = {
     inputToken: 'p-chips-input-token'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_chips_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'chips', manual: true });
 
 export default {
     name: 'BaseChips',
diff --git a/components/lib/colorpicker/BaseColorPicker.vue b/components/lib/colorpicker/BaseColorPicker.vue
index dcff42087..ddcd130e5 100644
--- a/components/lib/colorpicker/BaseColorPicker.vue
+++ b/components/lib/colorpicker/BaseColorPicker.vue
@@ -4,11 +4,11 @@ import { useStyle } from 'primevue/usestyle';
 
 const styles = `
 .p-colorpicker-panel .p-colorpicker-color {
-    background: transparent url("./images/color.png") no-repeat left top;
+    background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 0) 100%), linear-gradient(to right, #fff 0%, rgb(255 255 255 / 0) 100%)
 }
 
 .p-colorpicker-panel .p-colorpicker-hue {
-    background: transparent url("./images/hue.png") no-repeat left top;
+    background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)
 }
 `;
 
@@ -32,7 +32,7 @@ const classes = {
     hueHandle: 'p-colorpicker-hue-handle'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_colorpicker_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'colorpicker', manual: true });
 
 export default {
     name: 'BaseColorPicker',
diff --git a/components/lib/colorpicker/ColorPicker.css b/components/lib/colorpicker/ColorPicker.css
deleted file mode 100755
index 06e52d355..000000000
--- a/components/lib/colorpicker/ColorPicker.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.p-colorpicker-panel .p-colorpicker-color {
-     background: transparent url("./images/color.png") no-repeat left top; 
-}
-
-.p-colorpicker-panel .p-colorpicker-hue {
-    background: transparent url("./images/hue.png") no-repeat left top; 
-}
\ No newline at end of file
diff --git a/components/lib/colorpicker/images/color.png b/components/lib/colorpicker/images/color.png
deleted file mode 100755
index 561cdd9c5..000000000
Binary files a/components/lib/colorpicker/images/color.png and /dev/null differ
diff --git a/components/lib/colorpicker/images/hue.png b/components/lib/colorpicker/images/hue.png
deleted file mode 100755
index 8efa25257..000000000
Binary files a/components/lib/colorpicker/images/hue.png and /dev/null differ
diff --git a/components/lib/common/Common.css b/components/lib/common/Common.css
deleted file mode 100755
index aa19ab3ff..000000000
--- a/components/lib/common/Common.css
+++ /dev/null
@@ -1,168 +0,0 @@
-.p-component, .p-component * {
-    box-sizing: border-box;
-}
-
-.p-hidden {
-    display: none;
-}
-
-.p-hidden-space {
-    visibility: hidden;
-}
-
-.p-hidden-accessible {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-}
-
-.p-hidden-accessible input,
-.p-hidden-accessible select {
-    transform: scale(0);
-}
-
-.p-reset {
-    margin: 0;
-    padding: 0;
-    border: 0;
-    outline: 0;
-    text-decoration: none;
-    font-size: 100%;
-    list-style: none;
-}
-
-.p-disabled, .p-disabled * {
-    cursor: default !important;
-    pointer-events: none;
-    user-select: none;
-}
-
-.p-component-overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-}
-
-.p-overflow-hidden {
-    overflow: hidden;
-}
-
-.p-unselectable-text {
-    user-select: none;
-}
-
-.p-scrollbar-measure {
-    width: 100px;
-    height: 100px;
-    overflow: scroll;
-    position: absolute;
-    top: -9999px;
-}
-
-@-webkit-keyframes p-fadein {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
-}
-@keyframes p-fadein {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-input[type="button"],
-input[type="submit"],
-input[type="reset"],
-input[type="file"]::-webkit-file-upload-button,
-button {
-    border-radius: 0;
-}
-
-.p-link {
-	text-align: left;
-	background-color: transparent;
-	margin: 0;
-	padding: 0;
-	border: none;
-    cursor: pointer;
-    user-select: none;
-}
-
-.p-link:disabled {
-	cursor: default;
-}
-
-/* Non vue overlay animations */
-.p-connected-overlay {
-    opacity: 0;
-    transform: scaleY(0.8);
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-connected-overlay-visible {
-    opacity: 1;
-    transform: scaleY(1);
-}
-
-.p-connected-overlay-hidden {
-    opacity: 0;
-    transform: scaleY(1);
-    transition: opacity .1s linear;
-}
-
-/* Vue based overlay animations */
-.p-connected-overlay-enter-from {
-    opacity: 0;
-    transform: scaleY(0.8);
-}
-
-.p-connected-overlay-leave-to {
-    opacity: 0;
-}
-
-.p-connected-overlay-enter-active {
-    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
-}
-
-.p-connected-overlay-leave-active {
-    transition: opacity .1s linear;
-}
-
-/* Toggleable Content */
-.p-toggleable-content-enter-from,
-.p-toggleable-content-leave-to {
-    max-height: 0;
-}
-
-.p-toggleable-content-enter-to,
-.p-toggleable-content-leave-from {
-    max-height: 1000px;
-}
-
-.p-toggleable-content-leave-active {
-    overflow: hidden;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-.p-toggleable-content-enter-active {
-    overflow: hidden;
-    transition: max-height 1s ease-in-out;
-}
-
-.p-sr-only {
-    border: 0;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-    word-wrap: normal !important;
-}
diff --git a/components/lib/confirmpopup/BaseConfirmPopup.vue b/components/lib/confirmpopup/BaseConfirmPopup.vue
index b124ffb1d..fd8f9e477 100644
--- a/components/lib/confirmpopup/BaseConfirmPopup.vue
+++ b/components/lib/confirmpopup/BaseConfirmPopup.vue
@@ -90,7 +90,7 @@ const classes = {
     acceptButton: ({ instance }) => ['p-confirm-dialog-accept', instance.confirmation ? instance.confirmation.acceptClass : null]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_confirmpopup_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'confirmpopup', manual: true });
 
 export default {
     name: 'BaseConfirmPopup',
diff --git a/components/lib/contextmenu/BaseContextMenu.vue b/components/lib/contextmenu/BaseContextMenu.vue
index 8eff1ed46..27eaea7b1 100644
--- a/components/lib/contextmenu/BaseContextMenu.vue
+++ b/components/lib/contextmenu/BaseContextMenu.vue
@@ -77,7 +77,7 @@ const classes = {
     separator: 'p-menuitem-separator'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_contextmenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'contextmenu', manual: true });
 
 export default {
     name: 'BaseContextMenu',
diff --git a/components/lib/datatable/BaseDataTable.vue b/components/lib/datatable/BaseDataTable.vue
index aa122a40a..1982300d2 100644
--- a/components/lib/datatable/BaseDataTable.vue
+++ b/components/lib/datatable/BaseDataTable.vue
@@ -309,7 +309,6 @@ const classes = {
             'p-disabled': instance.disabled
         }
     ],
-    hiddenHeaderInputWrapper: 'p-hidden-accessible',
     headerCheckbox: ({ instance }) => [
         'p-checkbox-box p-component',
         {
@@ -423,7 +422,6 @@ const classes = {
             'p-checkbox-focused': instance.focused
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     checkbox: ({ instance }) => [
         'p-checkbox-box p-component',
         {
@@ -465,7 +463,7 @@ const classes = {
     reorderIndicatorDown: 'p-datatable-reorder-indicator-down'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_datatable_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'datatable', manual: true });
 
 export default {
     name: 'BaseDataTable',
diff --git a/components/lib/datatable/HeaderCheckbox.vue b/components/lib/datatable/HeaderCheckbox.vue
index 57a363ad3..ed51220d2 100755
--- a/components/lib/datatable/HeaderCheckbox.vue
+++ b/components/lib/datatable/HeaderCheckbox.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('headerCheckboxWrapper')" @click="onClick" @keydown.space.prevent="onClick" v-bind="getColumnPT('headerCheckboxWrapper')">
-        <div :class="cx('hiddenHeaderInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="getColumnPT('hiddenHeaderInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="input"
                 type="checkbox"
diff --git a/components/lib/datatable/RowCheckbox.vue b/components/lib/datatable/RowCheckbox.vue
index 23841529a..b1c43a5c1 100755
--- a/components/lib/datatable/RowCheckbox.vue
+++ b/components/lib/datatable/RowCheckbox.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('checkboxWrapper')" @click="onClick" v-bind="getColumnPT('checkboxWrapper')">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="input"
                 type="checkbox"
diff --git a/components/lib/datatable/RowRadioButton.vue b/components/lib/datatable/RowRadioButton.vue
index c73317c4c..7c8837aae 100755
--- a/components/lib/datatable/RowRadioButton.vue
+++ b/components/lib/datatable/RowRadioButton.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('radiobuttonWrapper')" @click="onClick" v-bind="getColumnPT('radiobuttonWrapper')">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input ref="input" type="radio" :checked="checked" :disabled="$attrs.disabled" :name="name" tabindex="0" @focus="onFocus($event)" @blur="onBlur($event)" @keydown.space.prevent="onClick" v-bind="getColumnPT('hiddenInput')" />
         </div>
         <div ref="box" :class="cx('radiobutton')" v-bind="getColumnPT('radiobutton')">
diff --git a/components/lib/dialog/BaseDialog.vue b/components/lib/dialog/BaseDialog.vue
index bacf13a28..243960dfe 100644
--- a/components/lib/dialog/BaseDialog.vue
+++ b/components/lib/dialog/BaseDialog.vue
@@ -203,7 +203,7 @@ const classes = {
     footer: 'p-dialog-footer'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_dialog_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'dialog', manual: true });
 
 export default {
     name: 'BaseDialog',
diff --git a/components/lib/dialog/Dialog.vue b/components/lib/dialog/Dialog.vue
index 19692a566..3667ad57f 100755
--- a/components/lib/dialog/Dialog.vue
+++ b/components/lib/dialog/Dialog.vue
@@ -189,19 +189,19 @@ export default {
 
             if (!this.modal) {
                 if (this.maximized) {
-                    !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
+                    DomHandler.addClass(document.body, 'p-overflow-hidden');
                 } else {
-                    !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                    DomHandler.removeClass(document.body, 'p-overflow-hidden');
                 }
             }
         },
         enableDocumentSettings() {
-            if (this.modal || (this.maximizable && this.maximized && !this.isUnstyled)) {
+            if (this.modal || (this.maximizable && this.maximized)) {
                 DomHandler.addClass(document.body, 'p-overflow-hidden');
             }
         },
         unbindDocumentState() {
-            if (this.modal || (this.maximizable && this.maximized && !this.isUnstyled)) {
+            if (this.modal || (this.maximizable && this.maximized)) {
                 DomHandler.removeClass(document.body, 'p-overflow-hidden');
             }
         },
diff --git a/components/lib/divider/BaseDivider.vue b/components/lib/divider/BaseDivider.vue
index 9532e602b..ca927613d 100644
--- a/components/lib/divider/BaseDivider.vue
+++ b/components/lib/divider/BaseDivider.vue
@@ -104,7 +104,7 @@ const classes = {
     content: 'p-divider-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_divider_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'divider', manual: true });
 
 export default {
     name: 'BaseDivider',
diff --git a/components/lib/dock/BaseDock.vue b/components/lib/dock/BaseDock.vue
index f303c1024..cd3509452 100644
--- a/components/lib/dock/BaseDock.vue
+++ b/components/lib/dock/BaseDock.vue
@@ -137,7 +137,7 @@ const classes = {
     icon: 'p-dock-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_dock_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'dock', manual: true });
 
 export default {
     name: 'BaseDock',
diff --git a/components/lib/dropdown/BaseDropdown.vue b/components/lib/dropdown/BaseDropdown.vue
index 395b3f908..0b52c684a 100644
--- a/components/lib/dropdown/BaseDropdown.vue
+++ b/components/lib/dropdown/BaseDropdown.vue
@@ -127,12 +127,10 @@ const classes = {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    hiddenFirstFocusableEl: 'p-hidden-accessible p-hidden-focusable',
     header: 'p-dropdown-header',
     filterContainer: 'p-dropdown-filter-container',
     filterInput: 'p-dropdown-filter p-inputtext p-component',
     filterIcon: 'p-dropdown-filter-icon',
-    hiddenFilterResult: 'p-hidden-accessible',
     wrapper: 'p-dropdown-items-wrapper',
     list: 'p-dropdown-items',
     itemGroup: 'p-dropdown-item-group',
@@ -144,13 +142,10 @@ const classes = {
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
-    emptyMessage: 'p-dropdown-empty-message',
-    hiddenEmptyMessage: 'p-hidden-accessible',
-    hiddenSelectedMessage: 'p-hidden-accessible',
-    hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
+    emptyMessage: 'p-dropdown-empty-message'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_dropdown_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'dropdown', manual: true });
 
 export default {
     name: 'BaseDropdown',
diff --git a/components/lib/dropdown/Dropdown.vue b/components/lib/dropdown/Dropdown.vue
index ecd64b094..b85ce1809 100755
--- a/components/lib/dropdown/Dropdown.vue
+++ b/components/lib/dropdown/Dropdown.vue
@@ -66,8 +66,7 @@
                         ref="firstHiddenFocusableElementOnOverlay"
                         role="presentation"
                         aria-hidden="true"
-                        :class="cx('hiddenFirstFocusableEl')"
-                        :style="sx('hiddenAccessible', isUnstyled)"
+                        class="p-hidden-accessible p-hidden-focusable"
                         :tabindex="0"
                         @focus="onFirstHiddenFocus"
                         v-bind="ptm('hiddenFirstFocusableEl')"
@@ -97,7 +96,7 @@
                                 <component :is="filterIcon ? 'span' : 'FilterIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
                             </slot>
                         </div>
-                        <span role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
+                        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
                             {{ filterResultMessageText }}
                         </span>
                     </div>
@@ -131,17 +130,10 @@
                                             <slot name="option" :option="option" :index="getOptionIndex(i, getItemOptions)">{{ getOptionLabel(option) }}</slot>
                                         </li>
                                     </template>
-                                    <li
-                                        v-if="filterValue && (!items || (items && items.length === 0))"
-                                        :class="cx('emptyMessage')"
-                                        :style="sx('hiddenAccessible', isUnstyled)"
-                                        role="option"
-                                        v-bind="ptm('emptyMessage')"
-                                        :data-p-hidden-accessible="true"
-                                    >
+                                    <li v-if="filterValue && (!items || (items && items.length === 0))" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true">
                                         <slot name="emptyfilter">{{ emptyFilterMessageText }}</slot>
                                     </li>
-                                    <li v-else-if="!options || (options && options.length === 0)" :class="cx('emptyMessage')" :style="sx('hiddenAccessible', isUnstyled)" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true">
+                                    <li v-else-if="!options || (options && options.length === 0)" :class="cx('emptyMessage')" role="option" v-bind="ptm('emptyMessage')" :data-p-hidden-accessible="true">
                                         <slot name="empty">{{ emptyMessageText }}</slot>
                                     </li>
                                 </ul>
@@ -152,26 +144,17 @@
                         </VirtualScroller>
                     </div>
                     <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
-                    <span
-                        v-if="!options || (options && options.length === 0)"
-                        role="status"
-                        aria-live="polite"
-                        :class="cx('emptyHiddenMessage')"
-                        :style="sx('hiddenAccessible', isUnstyled)"
-                        v-bind="ptm('hiddenEmptyMessage')"
-                        :data-p-hidden-accessible="true"
-                    >
+                    <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
                         {{ emptyMessageText }}
                     </span>
-                    <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
                         {{ selectedMessageText }}
                     </span>
                     <span
                         ref="lastHiddenFocusableElementOnOverlay"
                         role="presentation"
                         aria-hidden="true"
-                        :class="cx('hiddenLastFocusableEl')"
-                        :style="sx('hiddenAccessible', isUnstyled)"
+                        class="p-hidden-accessible p-hidden-focusable"
                         :tabindex="0"
                         @focus="onLastHiddenFocus"
                         v-bind="ptm('hiddenLastFocusableEl')"
diff --git a/components/lib/editor/BaseEditor.vue b/components/lib/editor/BaseEditor.vue
index 8b1df978c..10991f8e3 100644
--- a/components/lib/editor/BaseEditor.vue
+++ b/components/lib/editor/BaseEditor.vue
@@ -970,7 +970,7 @@ const classes = {
     content: 'p-editor-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_editor_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'editor', manual: true });
 
 export default {
     name: 'BaseEditor',
diff --git a/components/lib/fieldset/BaseFieldset.vue b/components/lib/fieldset/BaseFieldset.vue
index 4add0b86c..2ff880b68 100644
--- a/components/lib/fieldset/BaseFieldset.vue
+++ b/components/lib/fieldset/BaseFieldset.vue
@@ -38,7 +38,7 @@ const classes = {
     content: 'p-fieldset-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_fieldset_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'fieldset', manual: true });
 
 export default {
     name: 'BaseFieldset',
diff --git a/components/lib/fileupload/BaseFileUpload.vue b/components/lib/fileupload/BaseFileUpload.vue
index 30eb0f6b1..503747619 100644
--- a/components/lib/fileupload/BaseFileUpload.vue
+++ b/components/lib/fileupload/BaseFileUpload.vue
@@ -75,7 +75,7 @@ const classes = {
     removeButton: 'p-fileupload-file-remove'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_fileupload_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'fileupload', manual: true });
 
 export default {
     name: 'BaseFileUpload',
diff --git a/components/lib/focustrap/BaseFocusTrap.js b/components/lib/focustrap/BaseFocusTrap.js
new file mode 100644
index 000000000..b0f27c50f
--- /dev/null
+++ b/components/lib/focustrap/BaseFocusTrap.js
@@ -0,0 +1,5 @@
+import BaseDirective from 'primevue/basedirective';
+
+const BaseFocusTrap = BaseDirective.extend({});
+
+export default BaseFocusTrap;
diff --git a/components/lib/focustrap/FocusTrap.js b/components/lib/focustrap/FocusTrap.js
index 087587c3d..facdfef35 100644
--- a/components/lib/focustrap/FocusTrap.js
+++ b/components/lib/focustrap/FocusTrap.js
@@ -1,137 +1,118 @@
-import { BaseDirective } from 'primevue/basedirective';
 import { DomHandler, ObjectUtils } from 'primevue/utils';
+import BaseFocusTrap from './BaseFocusTrap';
 
-function bind(el, binding) {
-    const { onFocusIn, onFocusOut } = binding.value || {};
-
-    el.$_pfocustrap_mutationobserver = new MutationObserver((mutationList) => {
-        mutationList.forEach((mutation) => {
-            if (mutation.type === 'childList' && !el.contains(document.activeElement)) {
-                const findNextFocusableElement = (el) => {
-                    const focusableElement = DomHandler.isFocusableElement(el) ? el : DomHandler.getFirstFocusableElement(el);
-
-                    return ObjectUtils.isNotEmpty(focusableElement) ? focusableElement : findNextFocusableElement(el.nextSibling);
-                };
-
-                DomHandler.focus(findNextFocusableElement(mutation.nextSibling));
-            }
-        });
-    });
-
-    el.$_pfocustrap_mutationobserver.disconnect();
-    el.$_pfocustrap_mutationobserver.observe(el, {
-        childList: true
-    });
-
-    el.$_pfocustrap_focusinlistener = (event) => onFocusIn && onFocusIn(event);
-    el.$_pfocustrap_focusoutlistener = (event) => onFocusOut && onFocusOut(event);
-
-    el.addEventListener('focusin', el.$_pfocustrap_focusinlistener);
-    el.addEventListener('focusout', el.$_pfocustrap_focusoutlistener);
-}
-
-function unbind(el) {
-    el.$_pfocustrap_mutationobserver && el.$_pfocustrap_mutationobserver.disconnect();
-    el.$_pfocustrap_focusinlistener && el.removeEventListener('focusin', el.$_pfocustrap_focusinlistener) && (el.$_pfocustrap_focusinlistener = null);
-    el.$_pfocustrap_focusoutlistener && el.removeEventListener('focusout', el.$_pfocustrap_focusoutlistener) && (el.$_pfocustrap_focusoutlistener = null);
-}
-
-function autoFocus(el, binding) {
-    const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {};
-    let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]:not([data-p-hidden-focusable="true"])${autoFocusSelector}`);
-
-    autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(el, `:not([data-p-hidden-focusable="true"])${firstFocusableSelector}`));
-    DomHandler.focus(focusableElement);
-}
-
-function onFirstHiddenElementFocus(event) {
-    const { currentTarget, relatedTarget } = event;
-    const focusableElement =
-        relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement
-            ? DomHandler.getFirstFocusableElement(currentTarget.parentElement, `:not([data-p-hidden-focusable="true"])${currentTarget.$_pfocustrap_focusableselector}`)
-            : currentTarget.$_pfocustrap_lasthiddenfocusableelement;
-
-    DomHandler.focus(focusableElement);
-}
-
-function onLastHiddenElementFocus(event) {
-    const { currentTarget, relatedTarget } = event;
-    const focusableElement =
-        relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement
-            ? DomHandler.getLastFocusableElement(currentTarget.parentElement, `:not([data-p-hidden-focusable="true"])${currentTarget.$_pfocustrap_focusableselector}`)
-            : currentTarget.$_pfocustrap_firsthiddenfocusableelement;
-
-    DomHandler.focus(focusableElement);
-}
-
-function createHiddenFocusableElements(el, binding) {
-    const { tabIndex = 0, firstFocusableSelector = '', lastFocusableSelector = '' } = binding.value || {};
-
-    const createFocusableElement = (onFocus) => {
-        const element = document.createElement('span');
-
-        if (binding.instance.$primevue && binding.instance.$primevue.config && binding.instance.$primevue.config.unstyled) {
-            element.style.border = '0';
-            element.style.clip = 'rect(0 0 0 0)';
-            element.style.height = '1px';
-            element.style.margin = '-1px';
-            element.style.overflow = 'hidden';
-            element.style.padding = '0';
-            element.style.position = 'absolute';
-            element.style.width = '1px';
-        } else {
-            element.classList = 'p-hidden-accessible p-hidden-focusable';
-        }
-
-        element.tabIndex = tabIndex;
-        element.setAttribute('aria-hidden', 'true');
-        element.setAttribute('role', 'presentation');
-        element.setAttribute('data-p-hidden-accessible', true);
-        element.setAttribute('data-p-hidden-focusable', true);
-        element.addEventListener('focus', onFocus);
-
-        return element;
-    };
-
-    const firstFocusableElement = createFocusableElement(onFirstHiddenElementFocus);
-    const lastFocusableElement = createFocusableElement(onLastHiddenElementFocus);
-
-    firstFocusableElement.$_pfocustrap_lasthiddenfocusableelement = lastFocusableElement;
-    firstFocusableElement.$_pfocustrap_focusableselector = firstFocusableSelector;
-    firstFocusableElement.setAttribute('data-pc-section', 'firstfocusableelement');
-
-    lastFocusableElement.$_pfocustrap_firsthiddenfocusableelement = firstFocusableElement;
-    lastFocusableElement.$_pfocustrap_focusableselector = lastFocusableSelector;
-    lastFocusableElement.setAttribute('data-pc-section', 'lastfocusableelement');
-
-    el.prepend(firstFocusableElement);
-    el.append(lastFocusableElement);
-}
-
-const FocusTrap = BaseDirective.extend('focustrap', {
+const FocusTrap = BaseFocusTrap.extend('focustrap', {
     mounted(el, binding) {
         const { disabled } = binding.value || {};
 
         if (!disabled) {
-            createHiddenFocusableElements(el, binding);
-            bind(el, binding);
-            autoFocus(el, binding);
+            this.createHiddenFocusableElements(el, binding);
+            this.bind(el, binding);
+            this.autoFocus(el, binding);
         }
 
-        el.setAttribute('data-pc-section', 'root');
-        el.setAttribute('data-pc-name', 'focustrap');
+        DomHandler.setAttributes(el, {
+            'p-bind': this.ptm('root')
+        });
 
-        el.$pEl = el;
-        BaseDirective.handleCSS('focustrap', el, binding);
+        this.$el = el;
     },
-
     updated(el, binding) {
         const { disabled } = binding.value || {};
 
-        disabled && unbind(el);
+        disabled && this.unbind(el);
     },
     unmounted(el) {
-        unbind(el);
+        this.unbind(el);
+    },
+    methods: {
+        bind(el, binding) {
+            const { onFocusIn, onFocusOut } = binding.value || {};
+
+            el.$_pfocustrap_mutationobserver = new MutationObserver((mutationList) => {
+                mutationList.forEach((mutation) => {
+                    if (mutation.type === 'childList' && !el.contains(document.activeElement)) {
+                        const findNextFocusableElement = (el) => {
+                            const focusableElement = DomHandler.isFocusableElement(el) ? el : DomHandler.getFirstFocusableElement(el);
+
+                            return ObjectUtils.isNotEmpty(focusableElement) ? focusableElement : findNextFocusableElement(el.nextSibling);
+                        };
+
+                        DomHandler.focus(findNextFocusableElement(mutation.nextSibling));
+                    }
+                });
+            });
+
+            el.$_pfocustrap_mutationobserver.disconnect();
+            el.$_pfocustrap_mutationobserver.observe(el, {
+                childList: true
+            });
+
+            el.$_pfocustrap_focusinlistener = (event) => onFocusIn && onFocusIn(event);
+            el.$_pfocustrap_focusoutlistener = (event) => onFocusOut && onFocusOut(event);
+
+            el.addEventListener('focusin', el.$_pfocustrap_focusinlistener);
+            el.addEventListener('focusout', el.$_pfocustrap_focusoutlistener);
+        },
+        unbind(el) {
+            el.$_pfocustrap_mutationobserver && el.$_pfocustrap_mutationobserver.disconnect();
+            el.$_pfocustrap_focusinlistener && el.removeEventListener('focusin', el.$_pfocustrap_focusinlistener) && (el.$_pfocustrap_focusinlistener = null);
+            el.$_pfocustrap_focusoutlistener && el.removeEventListener('focusout', el.$_pfocustrap_focusoutlistener) && (el.$_pfocustrap_focusoutlistener = null);
+        },
+        autoFocus(el, binding) {
+            const { autoFocusSelector = '', firstFocusableSelector = '', autoFocus = false } = binding.value || {};
+            let focusableElement = DomHandler.getFirstFocusableElement(el, `[autofocus]:not([data-p-hidden-focusable="true"])${autoFocusSelector}`);
+
+            autoFocus && !focusableElement && (focusableElement = DomHandler.getFirstFocusableElement(el, `:not([data-p-hidden-focusable="true"])${firstFocusableSelector}`));
+            DomHandler.focus(focusableElement);
+        },
+        onFirstHiddenElementFocus(event) {
+            const { currentTarget, relatedTarget } = event;
+            const focusableElement =
+                relatedTarget === currentTarget.$_pfocustrap_lasthiddenfocusableelement
+                    ? DomHandler.getFirstFocusableElement(currentTarget.parentElement, `:not([data-p-hidden-focusable="true"])${currentTarget.$_pfocustrap_focusableselector}`)
+                    : currentTarget.$_pfocustrap_lasthiddenfocusableelement;
+
+            DomHandler.focus(focusableElement);
+        },
+        onLastHiddenElementFocus(event) {
+            const { currentTarget, relatedTarget } = event;
+            const focusableElement =
+                relatedTarget === currentTarget.$_pfocustrap_firsthiddenfocusableelement
+                    ? DomHandler.getLastFocusableElement(currentTarget.parentElement, `:not([data-p-hidden-focusable="true"])${currentTarget.$_pfocustrap_focusableselector}`)
+                    : currentTarget.$_pfocustrap_firsthiddenfocusableelement;
+
+            DomHandler.focus(focusableElement);
+        },
+        createHiddenFocusableElements(el, binding) {
+            const { tabIndex = 0, firstFocusableSelector = '', lastFocusableSelector = '' } = binding.value || {};
+
+            const createFocusableElement = (onFocus) => {
+                return DomHandler.createElement('span', {
+                    class: 'p-hidden-accessible p-hidden-focusable',
+                    tabIndex,
+                    role: 'presentation',
+                    'aria-hidden': true,
+                    'data-p-hidden-accessible': true,
+                    'data-p-hidden-focusable': true,
+                    onFocus
+                });
+            };
+
+            const firstFocusableElement = createFocusableElement(this.onFirstHiddenElementFocus);
+            const lastFocusableElement = createFocusableElement(this.onLastHiddenElementFocus);
+
+            firstFocusableElement.$_pfocustrap_lasthiddenfocusableelement = lastFocusableElement;
+            firstFocusableElement.$_pfocustrap_focusableselector = firstFocusableSelector;
+            firstFocusableElement.setAttribute('data-pc-section', 'firstfocusableelement');
+
+            lastFocusableElement.$_pfocustrap_firsthiddenfocusableelement = firstFocusableElement;
+            lastFocusableElement.$_pfocustrap_focusableselector = lastFocusableSelector;
+            lastFocusableElement.setAttribute('data-pc-section', 'lastfocusableelement');
+
+            el.prepend(firstFocusableElement);
+            el.append(lastFocusableElement);
+        }
     }
 });
 
diff --git a/components/lib/galleria/BaseGalleria.vue b/components/lib/galleria/BaseGalleria.vue
index 372a7c1f0..e88884274 100644
--- a/components/lib/galleria/BaseGalleria.vue
+++ b/components/lib/galleria/BaseGalleria.vue
@@ -371,7 +371,7 @@ const classes = {
     nextThumbnailIcon: 'p-galleria-thumbnail-next-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_galleria_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'galleria', manual: true });
 
 export default {
     name: 'BaseGalleria',
diff --git a/components/lib/galleria/Galleria.vue b/components/lib/galleria/Galleria.vue
index cffab71f0..320bb541a 100755
--- a/components/lib/galleria/Galleria.vue
+++ b/components/lib/galleria/Galleria.vue
@@ -35,8 +35,7 @@ export default {
     },
     beforeUnmount() {
         if (this.fullScreen) {
-            document.body.setAttribute('data-p-overflow-hidden', 'false');
-            !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            DomHandler.removeClass(document.body, 'p-overflow-hidden');
         }
 
         this.mask = null;
@@ -52,8 +51,7 @@ export default {
         },
         onEnter(el) {
             this.mask.style.zIndex = String(parseInt(el.style.zIndex, 10) - 1);
-            document.body.setAttribute('data-p-overflow-hidden', 'true');
-            !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
+            DomHandler.addClass(document.body, 'p-overflow-hidden');
             this.focus();
         },
         onBeforeLeave() {
@@ -62,8 +60,7 @@ export default {
         onAfterLeave(el) {
             ZIndexUtils.clear(el);
             this.containerVisible = false;
-            document.body.setAttribute('data-p-overflow-hidden', 'false');
-            !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
+            DomHandler.removeClass(document.body, 'p-overflow-hidden');
         },
         onActiveItemChange(index) {
             if (this.activeIndex !== index) {
diff --git a/components/lib/image/BaseImage.vue b/components/lib/image/BaseImage.vue
index 463f3cfc3..d2a09f84f 100644
--- a/components/lib/image/BaseImage.vue
+++ b/components/lib/image/BaseImage.vue
@@ -97,7 +97,7 @@ const classes = {
     preview: 'p-image-preview'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_image_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'image', manual: true });
 
 export default {
     name: 'BaseImage',
diff --git a/components/lib/inlinemessage/BaseInlineMessage.vue b/components/lib/inlinemessage/BaseInlineMessage.vue
index d6d34bb52..8d71635a8 100644
--- a/components/lib/inlinemessage/BaseInlineMessage.vue
+++ b/components/lib/inlinemessage/BaseInlineMessage.vue
@@ -26,7 +26,7 @@ const classes = {
     text: 'p-inline-message-text'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_inlinemessage_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'inlinemessage', manual: true });
 
 export default {
     name: 'BaseInlineMessage',
diff --git a/components/lib/inplace/BaseInplace.vue b/components/lib/inplace/BaseInplace.vue
index e619784cf..6b8da5e11 100644
--- a/components/lib/inplace/BaseInplace.vue
+++ b/components/lib/inplace/BaseInplace.vue
@@ -28,7 +28,7 @@ const classes = {
     content: 'p-inplace-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_inplace_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'inplace', manual: true });
 
 export default {
     name: 'BaseInplace',
diff --git a/components/lib/inputnumber/BaseInputNumber.vue b/components/lib/inputnumber/BaseInputNumber.vue
index 2ea01ddf0..66daa2eb3 100644
--- a/components/lib/inputnumber/BaseInputNumber.vue
+++ b/components/lib/inputnumber/BaseInputNumber.vue
@@ -132,7 +132,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputnumber_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'inputnumber', manual: true });
 
 export default {
     name: 'BaseInputNumber',
diff --git a/components/lib/inputswitch/BaseInputSwitch.vue b/components/lib/inputswitch/BaseInputSwitch.vue
index a78a88906..2c6db8a19 100644
--- a/components/lib/inputswitch/BaseInputSwitch.vue
+++ b/components/lib/inputswitch/BaseInputSwitch.vue
@@ -37,11 +37,10 @@ const classes = {
             'p-focus': instance.focused
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     slider: 'p-inputswitch-slider'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputswitch_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'inputswitch', manual: true });
 
 export default {
     name: 'BaseInputSwitch',
diff --git a/components/lib/inputswitch/InputSwitch.vue b/components/lib/inputswitch/InputSwitch.vue
index 64cdd4ff1..1452dffa9 100755
--- a/components/lib/inputswitch/InputSwitch.vue
+++ b/components/lib/inputswitch/InputSwitch.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('root')" :style="sx('root')" @click="onClick($event)" v-bind="ptm('root')" data-pc-name="inputswitch">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="input"
                 :id="inputId"
diff --git a/components/lib/inputtext/BaseInputText.vue b/components/lib/inputtext/BaseInputText.vue
index b23b1f2be..d6778e080 100644
--- a/components/lib/inputtext/BaseInputText.vue
+++ b/components/lib/inputtext/BaseInputText.vue
@@ -116,7 +116,7 @@ const classes = {
     root: ({ instance }) => ['p-inputtext p-component', { 'p-filled': instance.filled }]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_inputtext_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'inputtext', manual: true });
 
 export default {
     name: 'BaseInputText',
diff --git a/components/lib/inputtext/InputText.css b/components/lib/inputtext/InputText.css
deleted file mode 100755
index 946091252..000000000
--- a/components/lib/inputtext/InputText.css
+++ /dev/null
@@ -1,106 +0,0 @@
-.p-inputtext {
-    margin: 0;
-}
-
-.p-fluid .p-inputtext {
-    width: 100%;
-}
-
-/* InputGroup */
-.p-inputgroup {
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-}
-
-.p-inputgroup-addon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.p-inputgroup .p-float-label {
-    display: flex;
-    align-items: stretch;
-    width: 100%;
-}
-
-.p-inputgroup .p-inputtext,
-.p-fluid .p-inputgroup .p-inputtext,
-.p-inputgroup .p-inputwrapper,
-.p-fluid .p-inputgroup .p-input {
-    flex: 1 1 auto;
-    width: 1%;
-}
-
-/* Floating Label */
-.p-float-label {
-    display: block;
-    position: relative;
-}
-
-.p-float-label label {
-    position: absolute;
-    pointer-events: none;
-    top: 50%;
-    margin-top: -.5rem;
-    transition-property: all;
-    transition-timing-function: ease;
-    line-height: 1;
-}
-
-.p-float-label textarea ~ label {
-    top: 1rem;
-}
-
-.p-float-label input:focus ~ label,
-.p-float-label input.p-filled ~ label,
-.p-float-label textarea:focus ~ label,
-.p-float-label textarea.p-filled ~ label,
-.p-float-label .p-inputwrapper-focus ~ label,
-.p-float-label .p-inputwrapper-filled ~ label {
-    top: -.75rem;
-    font-size: 12px;
-}
-
-.p-float-label .input:-webkit-autofill ~ label {
-    top: -20px;
-    font-size: 12px;
-}
-
-.p-float-label .p-placeholder,
-.p-float-label input::placeholder,
-.p-float-label .p-inputtext::placeholder {
-    opacity: 0;
-    transition-property: all;
-    transition-timing-function: ease;
-}
-
-.p-float-label .p-focus .p-placeholder,
-.p-float-label input:focus::placeholder,
-.p-float-label .p-inputtext:focus::placeholder {
-    opacity: 1;
-    transition-property: all;
-    transition-timing-function: ease;
-}
-
-.p-input-icon-left,
-.p-input-icon-right {
-    position: relative;
-    display: inline-block;
-}
-
-.p-input-icon-left > i,
-.p-input-icon-left > svg,
-.p-input-icon-right > i,
-.p-input-icon-right > svg {
-    position: absolute;
-    top: 50%;
-    margin-top: -.5rem;
-}
-
-.p-fluid .p-input-icon-left,
-.p-fluid .p-input-icon-right {
-    display: block;
-    width: 100%;
-}
diff --git a/components/lib/knob/BaseKnob.vue b/components/lib/knob/BaseKnob.vue
index 2a70e2e0c..6e99a9e30 100644
--- a/components/lib/knob/BaseKnob.vue
+++ b/components/lib/knob/BaseKnob.vue
@@ -30,7 +30,7 @@ const classes = {
     label: 'p-knob-text'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_knob_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'knob', manual: true });
 
 export default {
     name: 'BaseKnob',
diff --git a/components/lib/listbox/BaseListbox.vue b/components/lib/listbox/BaseListbox.vue
index e033c6657..65bf45d00 100644
--- a/components/lib/listbox/BaseListbox.vue
+++ b/components/lib/listbox/BaseListbox.vue
@@ -46,12 +46,10 @@ const classes = {
             'p-disabled': props.disabled
         }
     ],
-    hiddenFirstFocusableEl: 'p-hidden-accessible p-hidden-focusable',
     header: 'p-listbox-header',
     filterContainer: 'p-listbox-filter-container',
     filterInput: 'p-listbox-filter p-inputtext p-component',
     filterIcon: 'p-listbox-filter-icon',
-    hiddenFilterResult: 'p-hidden-accessible',
     wrapper: 'p-listbox-list-wrapper',
     list: 'p-listbox-list',
     itemGroup: 'p-listbox-item-group',
@@ -63,13 +61,10 @@ const classes = {
             'p-disabled': instance.isOptionDisabled(option)
         }
     ],
-    emptyMessage: 'p-listbox-empty-message',
-    hiddenEmptyMessage: 'p-hidden-accessible',
-    hiddenSelectedMessage: 'p-hidden-accessible',
-    hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
+    emptyMessage: 'p-listbox-empty-message'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_listbox_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'listbox', manual: true });
 
 export default {
     name: 'BaseListbox',
diff --git a/components/lib/listbox/Listbox.vue b/components/lib/listbox/Listbox.vue
index 47fba5cac..b8c6a2aa4 100755
--- a/components/lib/listbox/Listbox.vue
+++ b/components/lib/listbox/Listbox.vue
@@ -4,8 +4,7 @@
             ref="firstHiddenFocusableElement"
             role="presentation"
             aria-hidden="true"
-            :class="cx('hiddenFirstFocusableEl')"
-            :style="sx('hiddenAccessible', isUnstyled)"
+            class="p-hidden-accessible p-hidden-focusable"
             :tabindex="!disabled ? tabindex : -1"
             @focus="onFirstHiddenFocus"
             v-bind="ptm('hiddenFirstFocusableEl')"
@@ -36,7 +35,7 @@
                     <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
                 </slot>
             </div>
-            <span role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
+            <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
                 {{ filterResultMessageText }}
             </span>
         </div>
@@ -102,18 +101,17 @@
             </VirtualScroller>
         </div>
         <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
-        <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" :class="cx('hiddenEmptyMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
+        <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
             {{ emptyMessageText }}
         </span>
-        <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
+        <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
             {{ selectedMessageText }}
         </span>
         <span
             ref="lastHiddenFocusableElement"
             role="presentation"
             aria-hidden="true"
-            :class="cx('hiddenLastFocusableEl')"
-            :style="sx('hiddenAccessible', isUnstyled)"
+            class="p-hidden-accessible p-hidden-focusable"
             :tabindex="!disabled ? tabindex : -1"
             @focus="onLastHiddenFocus"
             v-bind="ptm('hiddenLastFocusableEl')"
diff --git a/components/lib/megamenu/BaseMegaMenu.vue b/components/lib/megamenu/BaseMegaMenu.vue
index 9140f015f..a290d1a06 100644
--- a/components/lib/megamenu/BaseMegaMenu.vue
+++ b/components/lib/megamenu/BaseMegaMenu.vue
@@ -189,7 +189,7 @@ const classes = {
     end: 'p-megamenu-end'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_megamenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'megamenu', manual: true });
 
 export default {
     name: 'BaseMegaMenu',
diff --git a/components/lib/menu/BaseMenu.vue b/components/lib/menu/BaseMenu.vue
index c77022c6f..23e99a324 100644
--- a/components/lib/menu/BaseMenu.vue
+++ b/components/lib/menu/BaseMenu.vue
@@ -56,7 +56,7 @@ const classes = {
     label: 'p-menuitem-text'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_menu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'menu', manual: true });
 
 export default {
     name: 'BaseMenu',
diff --git a/components/lib/menubar/BaseMenubar.vue b/components/lib/menubar/BaseMenubar.vue
index 67b288cb6..92a7e80a9 100644
--- a/components/lib/menubar/BaseMenubar.vue
+++ b/components/lib/menubar/BaseMenubar.vue
@@ -114,7 +114,7 @@ const classes = {
     end: 'p-menubar-end'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_menubar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'menubar', manual: true });
 
 export default {
     name: 'BaseMenubar',
diff --git a/components/lib/message/BaseMessage.vue b/components/lib/message/BaseMessage.vue
index 3112880de..797f4584e 100644
--- a/components/lib/message/BaseMessage.vue
+++ b/components/lib/message/BaseMessage.vue
@@ -57,7 +57,7 @@ const classes = {
     buttonIcon: ({ props }) => ['p-message-close-icon', props.closeIcon]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_message_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'message', manual: true });
 
 export default {
     name: 'BaseMessage',
diff --git a/components/lib/multiselect/BaseMultiSelect.vue b/components/lib/multiselect/BaseMultiSelect.vue
index 3321a837f..f0fdc8fdc 100644
--- a/components/lib/multiselect/BaseMultiSelect.vue
+++ b/components/lib/multiselect/BaseMultiSelect.vue
@@ -126,7 +126,6 @@ const classes = {
             'p-overlay-open': instance.overlayVisible
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     labelContainer: 'p-multiselect-label-container',
     label: ({ instance, props }) => [
         'p-multiselect-label',
@@ -148,7 +147,6 @@ const classes = {
             'p-ripple-disabled': instance.$primevue.config.ripple === false
         }
     ],
-    hiddenFirstFocusableEl: 'p-hidden-accessible p-hidden-focusable',
     header: 'p-multiselect-header',
     headerCheckboxContainer: ({ instance }) => [
         'p-checkbox p-component',
@@ -157,7 +155,6 @@ const classes = {
             'p-checkbox-focused': instance.headerCheckboxFocused
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     headerCheckbox: ({ instance }) => [
         'p-checkbox-box',
         {
@@ -169,7 +166,6 @@ const classes = {
     filterContainer: 'p-multiselect-filter-container',
     filterInput: 'p-multiselect-filter p-inputtext p-component',
     filterIcon: 'p-multiselect-filter-icon',
-    hiddenFilterResult: 'p-hidden-accessible',
     closeButton: 'p-multiselect-close p-link',
     closeIcon: 'p-multiselect-close-icon',
     wrapper: 'p-multiselect-items-wrapper',
@@ -186,13 +182,10 @@ const classes = {
     checkboxContainer: 'p-checkbox p-component',
     checkbox: ({ instance, option }) => ['p-checkbox-box', { 'p-highlight': instance.isSelected(option) }],
     checkboxIcon: 'p-checkbox-icon',
-    emptyMessage: 'p-multiselect-empty-message',
-    hiddenEmptyMessage: 'p-hidden-accessible',
-    hiddenSelectedMessage: 'p-hidden-accessible',
-    hiddenLastFocusableEl: 'p-hidden-accessible p-hidden-focusable'
+    emptyMessage: 'p-multiselect-empty-message'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_multiselect_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'multiselect', manual: true });
 
 export default {
     name: 'BaseMultiSelect',
diff --git a/components/lib/multiselect/MultiSelect.vue b/components/lib/multiselect/MultiSelect.vue
index 84bb2d548..f5e226821 100755
--- a/components/lib/multiselect/MultiSelect.vue
+++ b/components/lib/multiselect/MultiSelect.vue
@@ -1,6 +1,6 @@
 <template>
     <div ref="container" :class="cx('root')" @click="onContainerClick" v-bind="ptm('root')" data-pc-name="multiselect">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="focusInput"
                 :id="inputId"
@@ -59,8 +59,7 @@
                         ref="firstHiddenFocusableElementOnOverlay"
                         role="presentation"
                         aria-hidden="true"
-                        :class="cx('hiddenFirstFocusableEl')"
-                        :style="sx('hiddenAccessible', isUnstyled)"
+                        class="p-hidden-accessible p-hidden-focusable"
                         :tabindex="0"
                         @focus="onFirstHiddenFocus"
                         v-bind="ptm('hiddenFirstFocusableEl')"
@@ -70,7 +69,7 @@
                     <slot name="header" :value="modelValue" :options="visibleOptions"></slot>
                     <div v-if="(showToggleAll && selectionLimit == null) || filter" :class="cx('header')" v-bind="ptm('header')">
                         <div v-if="showToggleAll && selectionLimit == null" :class="cx('headerCheckboxContainer')" @click="onToggleAll" v-bind="ptm('headerCheckboxContainer')">
-                            <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+                            <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
                                 <input type="checkbox" readonly :checked="allSelected" :aria-label="toggleAllAriaLabel" @focus="onHeaderCheckboxFocus" @blur="onHeaderCheckboxBlur" v-bind="ptm('headerCheckbox')" />
                             </div>
                             <div :class="cx('headerCheckbox')" v-bind="getHeaderCheckboxPTOptions('headerCheckbox')">
@@ -100,7 +99,7 @@
                                 <component :is="filterIcon ? 'span' : 'SearchIcon'" :class="[cx('filterIcon'), filterIcon]" v-bind="ptm('filterIcon')" />
                             </slot>
                         </div>
-                        <span v-if="filter" role="status" aria-live="polite" :class="cx('hiddenFilterResult')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
+                        <span v-if="filter" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenFilterResult')" :data-p-hidden-accessible="true">
                             {{ filterResultMessageText }}
                         </span>
                         <button v-ripple :class="cx('closeButton')" :aria-label="closeAriaLabel" @click="onCloseClick" type="button" v-bind="{ ...closeButtonProps, ...ptm('closeButton') }">
@@ -166,26 +165,17 @@
                         </VirtualScroller>
                     </div>
                     <slot name="footer" :value="modelValue" :options="visibleOptions"></slot>
-                    <span
-                        v-if="!options || (options && options.length === 0)"
-                        role="status"
-                        aria-live="polite"
-                        :class="cx('hiddenEmptyMessage')"
-                        :style="sx('hiddenAccessible', isUnstyled)"
-                        v-bind="ptm('hiddenEmptyMessage')"
-                        :data-p-hidden-accessible="true"
-                    >
+                    <span v-if="!options || (options && options.length === 0)" role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenEmptyMessage')" :data-p-hidden-accessible="true">
                         {{ emptyMessageText }}
                     </span>
-                    <span role="status" aria-live="polite" :class="cx('hiddenSelectedMessage')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
+                    <span role="status" aria-live="polite" class="p-hidden-accessible" v-bind="ptm('hiddenSelectedMessage')" :data-p-hidden-accessible="true">
                         {{ selectedMessageText }}
                     </span>
                     <span
                         ref="lastHiddenFocusableElementOnOverlay"
                         role="presentation"
                         aria-hidden="true"
-                        :class="cx('hiddenLastFocusableEl')"
-                        :style="sx('hiddenAccessible', isUnstyled)"
+                        class="p-hidden-accessible p-hidden-focusable"
                         :tabindex="0"
                         @focus="onLastHiddenFocus"
                         v-bind="ptm('hiddenLastFocusableEl')"
diff --git a/components/lib/orderlist/BaseOrderList.vue b/components/lib/orderlist/BaseOrderList.vue
index 29a665fd3..a78d55eb0 100644
--- a/components/lib/orderlist/BaseOrderList.vue
+++ b/components/lib/orderlist/BaseOrderList.vue
@@ -62,7 +62,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_orderlist_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'orderlist', manual: true });
 
 export default {
     name: 'BaseOrderList',
diff --git a/components/lib/organizationchart/BaseOrganizationChart.vue b/components/lib/organizationchart/BaseOrganizationChart.vue
index 24d505cea..2af5568a8 100644
--- a/components/lib/organizationchart/BaseOrganizationChart.vue
+++ b/components/lib/organizationchart/BaseOrganizationChart.vue
@@ -71,7 +71,7 @@ const classes = {
     nodes: 'p-organizationchart-nodes'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_organizationchart_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'organizationchart', manual: true });
 
 export default {
     name: 'BaseOrganizationChart',
diff --git a/components/lib/overlaypanel/BaseOverlayPanel.vue b/components/lib/overlaypanel/BaseOverlayPanel.vue
index 8b49e6e04..109d05336 100644
--- a/components/lib/overlaypanel/BaseOverlayPanel.vue
+++ b/components/lib/overlaypanel/BaseOverlayPanel.vue
@@ -87,7 +87,7 @@ const classes = {
     closeIcon: 'p-overlaypanel-close-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_overlaypanel_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'overlaypanel', manual: true });
 
 export default {
     name: 'BaseOverlayPanel',
diff --git a/components/lib/paginator/BasePaginator.vue b/components/lib/paginator/BasePaginator.vue
index 58b092d19..2094c624a 100644
--- a/components/lib/paginator/BasePaginator.vue
+++ b/components/lib/paginator/BasePaginator.vue
@@ -95,7 +95,7 @@ const classes = {
     jumpToPageInput: 'p-paginator-page-input'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_paginator_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'paginator', manual: true });
 
 export default {
     name: 'BasePaginator',
diff --git a/components/lib/panel/BasePanel.vue b/components/lib/panel/BasePanel.vue
index e1e422f08..6ab5a1d9f 100644
--- a/components/lib/panel/BasePanel.vue
+++ b/components/lib/panel/BasePanel.vue
@@ -40,7 +40,7 @@ const classes = {
     footer: 'p-panel-footer'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_panel_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'panel', manual: true });
 
 export default {
     name: 'BasePanel',
diff --git a/components/lib/panelmenu/BasePanelMenu.vue b/components/lib/panelmenu/BasePanelMenu.vue
index 7d9afb5f4..8a5dc32e2 100644
--- a/components/lib/panelmenu/BasePanelMenu.vue
+++ b/components/lib/panelmenu/BasePanelMenu.vue
@@ -82,7 +82,7 @@ const classes = {
     separator: 'p-menuitem-separator'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_panelmenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'panelmenu', manual: true });
 
 export default {
     name: 'BasePanelMenu',
diff --git a/components/lib/password/BasePassword.vue b/components/lib/password/BasePassword.vue
index 158df3ee8..50ddc09a0 100644
--- a/components/lib/password/BasePassword.vue
+++ b/components/lib/password/BasePassword.vue
@@ -50,7 +50,6 @@ const classes = {
             'p-disabled': props.disabled
         }
     ],
-    hiddenAccesible: 'p-hidden-accessible',
     panel: ({ instance }) => [
         'p-password-panel p-component',
         {
@@ -63,7 +62,7 @@ const classes = {
     info: 'p-password-info'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_password_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'password', manual: true });
 
 export default {
     name: 'BasePassword',
diff --git a/components/lib/password/Password.vue b/components/lib/password/Password.vue
index a2adf49ec..8a5304535 100755
--- a/components/lib/password/Password.vue
+++ b/components/lib/password/Password.vue
@@ -28,7 +28,7 @@
         <slot v-if="toggleMask && !unmasked" name="showicon" :onClick="onMaskToggle">
             <component :is="showIcon ? 'i' : 'EyeIcon'" :class="showIcon" @click="onMaskToggle" v-bind="ptm('showIcon')" />
         </slot>
-        <span :class="cx('hiddenAccesible')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenAccesible')" :data-p-hidden-accessible="true">
+        <span class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenAccesible')" :data-p-hidden-accessible="true">
             {{ infoText }}
         </span>
         <Portal :appendTo="appendTo">
diff --git a/components/lib/picklist/BasePickList.vue b/components/lib/picklist/BasePickList.vue
index 3197ca54f..e032bf051 100644
--- a/components/lib/picklist/BasePickList.vue
+++ b/components/lib/picklist/BasePickList.vue
@@ -63,7 +63,7 @@ const classes = {
     targetControls: 'p-picklist-buttons p-picklist-target-controls'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_picklist_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'picklist', manual: true });
 
 export default {
     name: 'BasePickList',
diff --git a/components/lib/progressbar/BaseProgressBar.vue b/components/lib/progressbar/BaseProgressBar.vue
index 24a4740d1..65a8e0aab 100644
--- a/components/lib/progressbar/BaseProgressBar.vue
+++ b/components/lib/progressbar/BaseProgressBar.vue
@@ -126,7 +126,7 @@ const classes = {
     label: 'p-progressbar-label'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_progressbar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'progressbar', manual: true });
 
 export default {
     name: 'BaseProgressBar',
diff --git a/components/lib/progressspinner/BaseProgressSpinner.vue b/components/lib/progressspinner/BaseProgressSpinner.vue
index 6760f8300..a0337e7f2 100644
--- a/components/lib/progressspinner/BaseProgressSpinner.vue
+++ b/components/lib/progressspinner/BaseProgressSpinner.vue
@@ -36,7 +36,7 @@ const classes = {
     circle: 'p-progress-spinner-circle'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_progressspinner_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'progressspinner', manual: true });
 
 export default {
     name: 'BaseProgressSpinner',
diff --git a/components/lib/radiobutton/BaseRadioButton.vue b/components/lib/radiobutton/BaseRadioButton.vue
index ee5fa366b..8dd295d3d 100644
--- a/components/lib/radiobutton/BaseRadioButton.vue
+++ b/components/lib/radiobutton/BaseRadioButton.vue
@@ -44,7 +44,6 @@ const classes = {
             'p-radiobutton-focused': instance.focused
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     input: ({ instance, props }) => [
         'p-radiobutton-box',
         {
@@ -56,7 +55,7 @@ const classes = {
     icon: 'p-radiobutton-icon'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_radiobutton_style', manual: true });
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'radiobutton', manual: true });
 
 export default {
     name: 'BaseRadioButton',
diff --git a/components/lib/radiobutton/RadioButton.css b/components/lib/radiobutton/RadioButton.css
deleted file mode 100755
index 29e96441a..000000000
--- a/components/lib/radiobutton/RadioButton.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.p-radiobutton {
-    position: relative;
-    display: inline-flex;
-    cursor: pointer;
-    user-select: none;
-    vertical-align: bottom;
-}
-
-.p-radiobutton.p-radiobutton-disabled {
-    cursor: default;
-}
-
-.p-radiobutton-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.p-radiobutton-icon {
-    -webkit-backface-visibility: hidden;
-    backface-visibility: hidden;
-    transform: translateZ(0) scale(.1);
-    border-radius: 50%;
-    visibility: hidden;
-}
-
-.p-radiobutton-box.p-highlight .p-radiobutton-icon {
-    transform: translateZ(0) scale(1.0, 1.0);
-    visibility: visible;
-}
\ No newline at end of file
diff --git a/components/lib/radiobutton/RadioButton.vue b/components/lib/radiobutton/RadioButton.vue
index 970a51d0c..e8663b8aa 100755
--- a/components/lib/radiobutton/RadioButton.vue
+++ b/components/lib/radiobutton/RadioButton.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('root')" @click="onClick($event)" v-bind="ptm('root')" data-pc-name="radiobutton">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input ref="input" :id="inputId" type="radio" :name="name" :checked="checked" :disabled="disabled" :value="value" :aria-labelledby="ariaLabelledby" :aria-label="ariaLabel" @focus="onFocus" @blur="onBlur" v-bind="ptm('hiddenInput')" />
         </div>
         <div ref="box" :class="[cx('input'), inputClass]" :style="inputStyle" v-bind="{ ...inputProps, ...ptm('input') }" :data-p-highlight="checked" :data-p-disabled="disabled" :data-p-focused="focused">
diff --git a/components/lib/rating/BaseRating.vue b/components/lib/rating/BaseRating.vue
index d7b5ee8af..33a796c85 100644
--- a/components/lib/rating/BaseRating.vue
+++ b/components/lib/rating/BaseRating.vue
@@ -34,7 +34,6 @@ const classes = {
             'p-focus': instance.focusedOptionIndex === 0
         }
     ],
-    hiddenCancelInputWrapper: 'p-hidden-accessible',
     cancelIcon: 'p-rating-icon p-rating-cancel',
     item: ({ instance, props, value }) => [
         'p-rating-item',
@@ -43,12 +42,11 @@ const classes = {
             'p-focus': value === instance.focusedOptionIndex
         }
     ],
-    hiddenItemInputWrapper: 'p-hidden-accessible',
     onIcon: 'p-rating-icon',
     offIcon: 'p-rating-icon'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_rating_style', manual: true });
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'rating', manual: true });
 
 export default {
     name: 'BaseRating',
diff --git a/components/lib/rating/Rating.vue b/components/lib/rating/Rating.vue
index 6409205a4..75e90a89e 100755
--- a/components/lib/rating/Rating.vue
+++ b/components/lib/rating/Rating.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="cx('root')" v-bind="ptm('root')" data-pc-name="rating">
         <div v-if="cancel" :class="cx('cancelItem')" @click="onOptionClick($event, 0)" v-bind="ptm('cancelItem')" :data-p-focused="focusedOptionIndex === 0">
-            <span :class="cx('hiddenCancelInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenCancelInputWrapper')" :data-p-hidden-accessible="true">
+            <span class="p-hidden-accessible" v-bind="ptm('hiddenCancelInputWrapper')" :data-p-hidden-accessible="true">
                 <input
                     type="radio"
                     value="0"
@@ -22,7 +22,7 @@
         </div>
         <template v-for="value in stars" :key="value">
             <div :class="cx('item', { value })" @click="onOptionClick($event, value)" v-bind="getPTOptions(value, 'item')" :data-p-active="value <= modelValue" :data-p-focused="value === focusedOptionIndex">
-                <span :class="cx('hiddenItemInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenItemInputWrapper')" :data-p-hidden-accessible="true">
+                <span class="p-hidden-accessible" v-bind="ptm('hiddenItemInputWrapper')" :data-p-hidden-accessible="true">
                     <input
                         type="radio"
                         :value="value"
diff --git a/components/lib/ripple/Ripple.css b/components/lib/ripple/BaseRipple.js
similarity index 54%
rename from components/lib/ripple/Ripple.css
rename to components/lib/ripple/BaseRipple.js
index 541b14143..0b35f3d56 100644
--- a/components/lib/ripple/Ripple.css
+++ b/components/lib/ripple/BaseRipple.js
@@ -1,3 +1,7 @@
+import BaseDirective from 'primevue/basedirective';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
 .p-ripple {
     overflow: hidden;
     position: relative;
@@ -26,3 +30,19 @@
         transform: scale(2.5);
     }
 }
+`;
+
+const classes = {
+    root: 'p-ink'
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'ripple', manual: true });
+
+const BaseRipple = BaseDirective.extend({
+    css: {
+        classes,
+        loadStyle
+    }
+});
+
+export default BaseRipple;
diff --git a/components/lib/ripple/Ripple.js b/components/lib/ripple/Ripple.js
index 78dab48b9..4db852c46 100644
--- a/components/lib/ripple/Ripple.js
+++ b/components/lib/ripple/Ripple.js
@@ -1,113 +1,104 @@
-import { BaseDirective } from 'primevue/basedirective';
 import { DomHandler } from 'primevue/utils';
+import BaseRipple from './BaseRipple';
 
-let timeout;
-
-function bindEvents(el) {
-    el.addEventListener('mousedown', onMouseDown);
-}
-
-function unbindEvents(el) {
-    el.removeEventListener('mousedown', onMouseDown);
-}
-
-function create(el, binding) {
-    let ink = document.createElement('span');
-
-    !el.$_prippleUnstyled && (ink.className = 'p-ink');
-    ink.setAttribute('data-pc-name', 'ripple');
-    ink.setAttribute('data-pc-section', 'root');
-    ink.setAttribute('role', 'presentation');
-    ink.setAttribute('aria-hidden', 'true');
-    ink.setAttribute('data-p-ink', 'true');
-    ink.setAttribute('data-p-ink-active', 'false');
-    el.appendChild(ink);
-    el.$pEl = ink;
-
-    ink.addEventListener('animationend', onAnimationEnd);
-
-    BaseDirective.handleCSS('ripple', ink, binding);
-}
-
-function remove(el) {
-    let ink = getInk(el);
-
-    if (ink) {
-        unbindEvents(el);
-        ink.removeEventListener('animationend', onAnimationEnd);
-        ink.remove();
-    }
-}
-
-function onMouseDown(event) {
-    let target = event.currentTarget;
-    let ink = getInk(target);
-
-    if (!ink || getComputedStyle(ink, null).display === 'none') {
-        return;
-    }
-
-    !target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
-    ink.setAttribute('data-p-ink-active', 'false');
-
-    if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
-        let d = Math.max(DomHandler.getOuterWidth(target), DomHandler.getOuterHeight(target));
-
-        ink.style.height = d + 'px';
-        ink.style.width = d + 'px';
-    }
-
-    let offset = DomHandler.getOffset(target);
-    let x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(ink) / 2;
-    let y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(ink) / 2;
-
-    ink.style.top = y + 'px';
-    ink.style.left = x + 'px';
-
-    !target.$_prippleUnstyled && DomHandler.addClass(ink, 'p-ink-active');
-    ink.setAttribute('data-p-ink-active', 'true');
-
-    timeout = setTimeout(() => {
-        if (ink) {
-            !target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
-            ink.setAttribute('data-p-ink-active', 'false');
-        }
-    }, 401);
-}
-
-function onAnimationEnd(event) {
-    if (timeout) {
-        clearTimeout(timeout);
-    }
-
-    !event.currentTarget.$_prippleUnstyled && DomHandler.removeClass(event.currentTarget, 'p-ink-active');
-    event.currentTarget.setAttribute('data-p-ink-active', 'false');
-}
-
-function getInk(el) {
-    for (let i = 0; i < el.children.length; i++) {
-        if (el.children[i].getAttribute('data-pc-name') === 'ripple') {
-            return el.children[i];
-        }
-    }
-
-    return null;
-}
-
-const Ripple = BaseDirective.extend('ripple', {
+const Ripple = BaseRipple.extend('ripple', {
     mounted(el, binding) {
         const primevue = binding.instance.$primevue;
 
         if (primevue && primevue.config && primevue.config.ripple) {
             el.$_prippleUnstyled = primevue.config.unstyled || false;
 
-            create(el, binding);
-            bindEvents(el);
+            this.create(el, binding);
+            this.bindEvents(el);
         }
     },
-
     unmounted(el) {
-        remove(el);
+        this.remove(el);
+    },
+    timeout: undefined,
+    methods: {
+        bindEvents(el) {
+            el.addEventListener('mousedown', this.onMouseDown.bind(this));
+        },
+        unbindEvents(el) {
+            el.removeEventListener('mousedown', this.onMouseDown.bind(this));
+        },
+        create(el, binding) {
+            const ink = DomHandler.createElement('span', {
+                role: 'presentation',
+                'aria-hidden': true,
+                'data-p-ink': true,
+                'data-p-ink-active': false,
+                class: this.cx('root'),
+                onAnimationEnd: this.onAnimationEnd,
+                'p-bind': this.ptm('root')
+            });
+
+            el.appendChild(ink);
+
+            this.$el = ink;
+        },
+        remove(el) {
+            let ink = this.getInk(el);
+
+            if (ink) {
+                this.unbindEvents(el);
+                ink.removeEventListener('animationend', this.onAnimationEnd);
+                ink.remove();
+            }
+        },
+        onMouseDown(event) {
+            let target = event.currentTarget;
+            let ink = this.getInk(target);
+
+            if (!ink || getComputedStyle(ink, null).display === 'none') {
+                return;
+            }
+
+            !target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
+            ink.setAttribute('data-p-ink-active', 'false');
+
+            if (!DomHandler.getHeight(ink) && !DomHandler.getWidth(ink)) {
+                let d = Math.max(DomHandler.getOuterWidth(target), DomHandler.getOuterHeight(target));
+
+                ink.style.height = d + 'px';
+                ink.style.width = d + 'px';
+            }
+
+            let offset = DomHandler.getOffset(target);
+            let x = event.pageX - offset.left + document.body.scrollTop - DomHandler.getWidth(ink) / 2;
+            let y = event.pageY - offset.top + document.body.scrollLeft - DomHandler.getHeight(ink) / 2;
+
+            ink.style.top = y + 'px';
+            ink.style.left = x + 'px';
+
+            !target.$_prippleUnstyled && DomHandler.addClass(ink, 'p-ink-active');
+            ink.setAttribute('data-p-ink-active', 'true');
+
+            this.timeout = setTimeout(() => {
+                if (ink) {
+                    !target.$_prippleUnstyled && DomHandler.removeClass(ink, 'p-ink-active');
+                    ink.setAttribute('data-p-ink-active', 'false');
+                }
+            }, 401);
+        },
+        onAnimationEnd(event) {
+            if (this.timeout) {
+                clearTimeout(this.timeout);
+            }
+
+            !event.currentTarget.$_prippleUnstyled && DomHandler.removeClass(event.currentTarget, 'p-ink-active');
+            event.currentTarget.setAttribute('data-p-ink-active', 'false');
+        },
+        getInk(el) {
+            for (let i = 0; i < el.children.length; i++) {
+                if (el.children[i].getAttribute('data-pc-name') === 'ripple') {
+                    return el.children[i];
+                }
+            }
+
+            return null;
+        }
     }
 });
 
diff --git a/components/lib/scrollpanel/BaseScrollPanel.vue b/components/lib/scrollpanel/BaseScrollPanel.vue
index 58bfcf88c..ff1f8c810 100644
--- a/components/lib/scrollpanel/BaseScrollPanel.vue
+++ b/components/lib/scrollpanel/BaseScrollPanel.vue
@@ -68,7 +68,7 @@ const classes = {
     bary: 'p-scrollpanel-bar p-scrollpanel-bar-y'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_scrollpanel_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'scrollpanel', manual: true });
 
 export default {
     name: 'BaseScrollPanel',
diff --git a/components/lib/scrolltop/BaseScrollTop.vue b/components/lib/scrolltop/BaseScrollTop.vue
index a703d78e4..59471bd61 100644
--- a/components/lib/scrolltop/BaseScrollTop.vue
+++ b/components/lib/scrolltop/BaseScrollTop.vue
@@ -42,7 +42,7 @@ const classes = {
     icon: 'p-scrolltop-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_scrolltop_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'scrolltop', manual: true });
 
 export default {
     name: 'BaseScrollTop',
diff --git a/components/lib/sidebar/BaseSidebar.vue b/components/lib/sidebar/BaseSidebar.vue
index 590590ec1..2405806ae 100644
--- a/components/lib/sidebar/BaseSidebar.vue
+++ b/components/lib/sidebar/BaseSidebar.vue
@@ -203,7 +203,7 @@ const classes = {
     content: 'p-sidebar-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_sidebar_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'sidebar', manual: true });
 
 export default {
     name: 'BaseSidebar',
diff --git a/components/lib/sidebar/Sidebar.vue b/components/lib/sidebar/Sidebar.vue
index f59471965..6c6d9c131 100755
--- a/components/lib/sidebar/Sidebar.vue
+++ b/components/lib/sidebar/Sidebar.vue
@@ -121,16 +121,14 @@ export default {
             }
 
             if (this.blockScroll) {
-                document.body.setAttribute('data-p-overflow-hidden', 'true');
-                !this.isUnstyled && DomHandler.addClass(document.body, 'p-overflow-hidden');
+                DomHandler.addClass(document.body, 'p-overflow-hidden');
             }
         },
         disableDocumentSettings() {
             this.unbindOutsideClickListener();
 
             if (this.blockScroll) {
-                document.body.setAttribute('data-p-overflow-hidden', 'false');
-                !this.isUnstyled && DomHandler.removeClass(document.body, 'p-overflow-hidden');
+                DomHandler.removeClass(document.body, 'p-overflow-hidden');
             }
         },
         onKeydown(event) {
diff --git a/components/lib/skeleton/BaseSkeleton.vue b/components/lib/skeleton/BaseSkeleton.vue
index 6fd70698e..ee8bb7e0f 100644
--- a/components/lib/skeleton/BaseSkeleton.vue
+++ b/components/lib/skeleton/BaseSkeleton.vue
@@ -51,7 +51,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_skeleton_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'skeleton', manual: true });
 
 export default {
     name: 'BaseSkeleton',
diff --git a/components/lib/slider/BaseSlider.vue b/components/lib/slider/BaseSlider.vue
index 7eda174ff..1252c4200 100644
--- a/components/lib/slider/BaseSlider.vue
+++ b/components/lib/slider/BaseSlider.vue
@@ -60,7 +60,7 @@ const classes = {
     handle: 'p-slider-handle'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_slider_style', manual: true });
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'slider', manual: true });
 
 export default {
     name: 'BaseSlider',
diff --git a/components/lib/speeddial/BaseSpeedDial.vue b/components/lib/speeddial/BaseSpeedDial.vue
index 1a8fc0ef9..1dade5846 100644
--- a/components/lib/speeddial/BaseSpeedDial.vue
+++ b/components/lib/speeddial/BaseSpeedDial.vue
@@ -156,7 +156,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_speeddial_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'speeddial', manual: true });
 
 export default {
     name: 'BaseSpeedDial',
diff --git a/components/lib/splitbutton/BaseSplitButton.vue b/components/lib/splitbutton/BaseSplitButton.vue
index 243308ae1..44e140158 100644
--- a/components/lib/splitbutton/BaseSplitButton.vue
+++ b/components/lib/splitbutton/BaseSplitButton.vue
@@ -53,7 +53,7 @@ const classes = {
     menuButton: 'p-splitbutton-menubutton'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitbutton_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'splitbutton', manual: true });
 
 export default {
     name: 'BaseSplitButton',
diff --git a/components/lib/splitter/BaseSplitter.vue b/components/lib/splitter/BaseSplitter.vue
index c64bf6fc3..5dfcbbd3f 100644
--- a/components/lib/splitter/BaseSplitter.vue
+++ b/components/lib/splitter/BaseSplitter.vue
@@ -60,7 +60,7 @@ const inlineStyles = {
     root: ({ props }) => [{ display: 'flex', 'flex-wrap': 'nowrap' }, props.layout === 'vertical' ? { 'flex-direction': 'column' } : '']
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitter_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'splitter', manual: true });
 
 export default {
     name: 'BaseSplitter',
diff --git a/components/lib/splitterpanel/BaseSplitterPanel.vue b/components/lib/splitterpanel/BaseSplitterPanel.vue
index 3bc9f1ff1..79ec30933 100644
--- a/components/lib/splitterpanel/BaseSplitterPanel.vue
+++ b/components/lib/splitterpanel/BaseSplitterPanel.vue
@@ -21,7 +21,7 @@ const classes = {
     root: ({ instance }) => ['p-splitter-panel', { 'p-splitter-panel-nested': instance.isNested }]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_splitterpanel_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'splitterpanel', manual: true });
 
 export default {
     name: 'BaseSplitterPanel',
diff --git a/components/lib/steps/BaseSteps.vue b/components/lib/steps/BaseSteps.vue
index bfd05b8c5..a0b03968e 100644
--- a/components/lib/steps/BaseSteps.vue
+++ b/components/lib/steps/BaseSteps.vue
@@ -77,7 +77,7 @@ const classes = {
     label: 'p-steps-title'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_steps_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'steps', manual: true });
 
 export default {
     name: 'BaseSteps',
diff --git a/components/lib/styleclass/BaseStyleClass.js b/components/lib/styleclass/BaseStyleClass.js
new file mode 100644
index 000000000..d4d57a33e
--- /dev/null
+++ b/components/lib/styleclass/BaseStyleClass.js
@@ -0,0 +1,5 @@
+import BaseDirective from 'primevue/basedirective';
+
+const BaseStyleClass = BaseDirective.extend({});
+
+export default BaseStyleClass;
diff --git a/components/lib/styleclass/StyleClass.js b/components/lib/styleclass/StyleClass.js
index 69afcd5fd..688b9f14b 100644
--- a/components/lib/styleclass/StyleClass.js
+++ b/components/lib/styleclass/StyleClass.js
@@ -1,177 +1,170 @@
-import { BaseDirective } from 'primevue/basedirective';
 import { DomHandler } from 'primevue/utils';
+import BaseStyleClass from './BaseStyleClass';
 
-function bind(el, binding) {
-    const target = resolveTarget(el, binding);
+const StyleClass = BaseStyleClass.extend('styleclass', {
+    mounted(el, binding) {
+        this.bind(el, binding);
+    },
+    unmounted(el) {
+        this.unbind(el);
+    },
+    methods: {
+        bind(el, binding) {
+            const target = this.resolveTarget(el, binding);
 
-    el.$pEl = target;
+            this.$el = target;
 
-    el.$_pstyleclass_clicklistener = () => {
-        if (binding.value.toggleClass) {
-            if (DomHandler.hasClass(target, binding.value.toggleClass)) DomHandler.removeClass(target, binding.value.toggleClass);
-            else DomHandler.addClass(target, binding.value.toggleClass);
-        } else {
-            if (target.offsetParent === null) enter(target, el, binding);
-            else leave(target, binding);
-        }
-    };
+            el.$_pstyleclass_clicklistener = () => {
+                if (binding.value.toggleClass) {
+                    if (DomHandler.hasClass(target, binding.value.toggleClass)) DomHandler.removeClass(target, binding.value.toggleClass);
+                    else DomHandler.addClass(target, binding.value.toggleClass);
+                } else {
+                    if (target.offsetParent === null) this.enter(target, el, binding);
+                    else this.leave(target, binding);
+                }
+            };
 
-    el.addEventListener('click', el.$_pstyleclass_clicklistener);
-}
-
-function unbind(el) {
-    if (el.$_pstyleclass_clicklistener) {
-        el.removeEventListener('click', el.$_pstyleclass_clicklistener);
-        el.$_pstyleclass_clicklistener = null;
-    }
-
-    unbindDocumentListener(el);
-}
-
-function enter(target, el, binding) {
-    if (binding.value.enterActiveClass) {
-        if (!target.$_pstyleclass_animating) {
-            target.$_pstyleclass_animating = true;
-
-            if (binding.value.enterActiveClass === 'slidedown') {
-                target.style.height = '0px';
-                DomHandler.removeClass(target, 'hidden');
-                target.style.maxHeight = target.scrollHeight + 'px';
-                DomHandler.addClass(target, 'hidden');
-                target.style.height = '';
+            el.addEventListener('click', el.$_pstyleclass_clicklistener);
+        },
+        unbind(el) {
+            if (el.$_pstyleclass_clicklistener) {
+                el.removeEventListener('click', el.$_pstyleclass_clicklistener);
+                el.$_pstyleclass_clicklistener = null;
             }
 
-            DomHandler.addClass(target, binding.value.enterActiveClass);
+            this.unbindDocumentListener(el);
+        },
+        enter(target, el, binding) {
+            if (binding.value.enterActiveClass) {
+                if (!target.$_pstyleclass_animating) {
+                    target.$_pstyleclass_animating = true;
 
-            if (binding.value.enterClass) {
-                DomHandler.removeClass(target, binding.value.enterClass);
-            }
+                    if (binding.value.enterActiveClass === 'slidedown') {
+                        target.style.height = '0px';
+                        DomHandler.removeClass(target, 'hidden');
+                        target.style.maxHeight = target.scrollHeight + 'px';
+                        DomHandler.addClass(target, 'hidden');
+                        target.style.height = '';
+                    }
 
-            target.$p_styleclass_enterlistener = () => {
-                DomHandler.removeClass(target, binding.value.enterActiveClass);
+                    DomHandler.addClass(target, binding.value.enterActiveClass);
+
+                    if (binding.value.enterClass) {
+                        DomHandler.removeClass(target, binding.value.enterClass);
+                    }
+
+                    target.$p_styleclass_enterlistener = () => {
+                        DomHandler.removeClass(target, binding.value.enterActiveClass);
+
+                        if (binding.value.enterToClass) {
+                            DomHandler.addClass(target, binding.value.enterToClass);
+                        }
+
+                        target.removeEventListener('animationend', target.$p_styleclass_enterlistener);
+
+                        if (binding.value.enterActiveClass === 'slidedown') {
+                            target.style.maxHeight = '';
+                        }
+
+                        target.$_pstyleclass_animating = false;
+                    };
+
+                    target.addEventListener('animationend', target.$p_styleclass_enterlistener);
+                }
+            } else {
+                if (binding.value.enterClass) {
+                    DomHandler.removeClass(target, binding.value.enterClass);
+                }
 
                 if (binding.value.enterToClass) {
                     DomHandler.addClass(target, binding.value.enterToClass);
                 }
-
-                target.removeEventListener('animationend', target.$p_styleclass_enterlistener);
-
-                if (binding.value.enterActiveClass === 'slidedown') {
-                    target.style.maxHeight = '';
-                }
-
-                target.$_pstyleclass_animating = false;
-            };
-
-            target.addEventListener('animationend', target.$p_styleclass_enterlistener);
-        }
-    } else {
-        if (binding.value.enterClass) {
-            DomHandler.removeClass(target, binding.value.enterClass);
-        }
-
-        if (binding.value.enterToClass) {
-            DomHandler.addClass(target, binding.value.enterToClass);
-        }
-    }
-
-    if (binding.value.hideOnOutsideClick) {
-        bindDocumentListener(target, el, binding);
-    }
-}
-
-function leave(target, binding) {
-    if (binding.value.leaveActiveClass) {
-        if (!target.$_pstyleclass_animating) {
-            target.$_pstyleclass_animating = true;
-            DomHandler.addClass(target, binding.value.leaveActiveClass);
-
-            if (binding.value.leaveClass) {
-                DomHandler.removeClass(target, binding.value.leaveClass);
             }
 
-            target.$p_styleclass_leavelistener = () => {
-                DomHandler.removeClass(target, binding.value.leaveActiveClass);
+            if (binding.value.hideOnOutsideClick) {
+                this.bindDocumentListener(target, el, binding);
+            }
+        },
+        leave(target, binding) {
+            if (binding.value.leaveActiveClass) {
+                if (!target.$_pstyleclass_animating) {
+                    target.$_pstyleclass_animating = true;
+                    DomHandler.addClass(target, binding.value.leaveActiveClass);
+
+                    if (binding.value.leaveClass) {
+                        DomHandler.removeClass(target, binding.value.leaveClass);
+                    }
+
+                    target.$p_styleclass_leavelistener = () => {
+                        DomHandler.removeClass(target, binding.value.leaveActiveClass);
+
+                        if (binding.value.leaveToClass) {
+                            DomHandler.addClass(target, binding.value.leaveToClass);
+                        }
+
+                        target.removeEventListener('animationend', target.$p_styleclass_leavelistener);
+                        target.$_pstyleclass_animating = false;
+                    };
+
+                    target.addEventListener('animationend', target.$p_styleclass_leavelistener);
+                }
+            } else {
+                if (binding.value.leaveClass) {
+                    DomHandler.removeClass(target, binding.value.leaveClass);
+                }
 
                 if (binding.value.leaveToClass) {
                     DomHandler.addClass(target, binding.value.leaveToClass);
                 }
-
-                target.removeEventListener('animationend', target.$p_styleclass_leavelistener);
-                target.$_pstyleclass_animating = false;
-            };
-
-            target.addEventListener('animationend', target.$p_styleclass_leavelistener);
-        }
-    } else {
-        if (binding.value.leaveClass) {
-            DomHandler.removeClass(target, binding.value.leaveClass);
-        }
-
-        if (binding.value.leaveToClass) {
-            DomHandler.addClass(target, binding.value.leaveToClass);
-        }
-    }
-
-    if (binding.value.hideOnOutsideClick) {
-        unbindDocumentListener(target);
-    }
-}
-
-function resolveTarget(el, binding) {
-    switch (binding.value.selector) {
-        case '@next':
-            return el.nextElementSibling;
-
-        case '@prev':
-            return el.previousElementSibling;
-
-        case '@parent':
-            return el.parentElement;
-
-        case '@grandparent':
-            return el.parentElement.parentElement;
-
-        default:
-            return document.querySelector(binding.value.selector);
-    }
-}
-
-function bindDocumentListener(target, el, binding) {
-    if (!target.$p_styleclass_documentlistener) {
-        target.$p_styleclass_documentlistener = (event) => {
-            if (!isVisible(target) || getComputedStyle(target).getPropertyValue('position') === 'static') {
-                unbindDocumentListener(target);
-            } else if (isOutsideClick(event, target, el)) {
-                leave(target, binding);
             }
-        };
 
-        target.ownerDocument.addEventListener('click', target.$p_styleclass_documentlistener);
-    }
-}
+            if (binding.value.hideOnOutsideClick) {
+                this.unbindDocumentListener(target);
+            }
+        },
+        resolveTarget(el, binding) {
+            switch (binding.value.selector) {
+                case '@next':
+                    return el.nextElementSibling;
 
-function unbindDocumentListener(target) {
-    if (target.$p_styleclass_documentlistener) {
-        target.ownerDocument.removeEventListener('click', target.$p_styleclass_documentlistener);
-        target.$p_styleclass_documentlistener = null;
-    }
-}
+                case '@prev':
+                    return el.previousElementSibling;
 
-function isVisible(target) {
-    return target.offsetParent !== null;
-}
+                case '@parent':
+                    return el.parentElement;
 
-function isOutsideClick(event, target, el) {
-    return !el.isSameNode(event.target) && !el.contains(event.target) && !target.contains(event.target);
-}
+                case '@grandparent':
+                    return el.parentElement.parentElement;
 
-const StyleClass = BaseDirective.extend('styleclass', {
-    mounted(el, binding) {
-        bind(el, binding);
-    },
-    unmounted(el) {
-        unbind(el);
+                default:
+                    return document.querySelector(binding.value.selector);
+            }
+        },
+        bindDocumentListener(target, el, binding) {
+            if (!target.$p_styleclass_documentlistener) {
+                target.$p_styleclass_documentlistener = (event) => {
+                    if (!this.isVisible(target) || getComputedStyle(target).getPropertyValue('position') === 'static') {
+                        this.unbindDocumentListener(target);
+                    } else if (isOutsideClick(event, target, el)) {
+                        this.leave(target, binding);
+                    }
+                };
+
+                target.ownerDocument.addEventListener('click', target.$p_styleclass_documentlistener);
+            }
+        },
+        unbindDocumentListener(target) {
+            if (target.$p_styleclass_documentlistener) {
+                target.ownerDocument.removeEventListener('click', target.$p_styleclass_documentlistener);
+                target.$p_styleclass_documentlistener = null;
+            }
+        },
+        isVisible(target) {
+            return target.offsetParent !== null;
+        },
+        isOutsideClick(event, target, el) {
+            return !el.isSameNode(event.target) && !el.contains(event.target) && !target.contains(event.target);
+        }
     }
 });
 
diff --git a/components/lib/tabmenu/BaseTabMenu.vue b/components/lib/tabmenu/BaseTabMenu.vue
index 2969a9aec..9d75493ec 100644
--- a/components/lib/tabmenu/BaseTabMenu.vue
+++ b/components/lib/tabmenu/BaseTabMenu.vue
@@ -60,7 +60,7 @@ const classes = {
     inkbar: 'p-tabmenu-ink-bar'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_tabmenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'tabmenu', manual: true });
 
 export default {
     name: 'BaseTabMenu',
diff --git a/components/lib/tabview/BaseTabView.vue b/components/lib/tabview/BaseTabView.vue
index 8088dd9c5..805bb3b6e 100644
--- a/components/lib/tabview/BaseTabView.vue
+++ b/components/lib/tabview/BaseTabView.vue
@@ -103,7 +103,7 @@ const classes = {
     panelContainer: 'p-tabview-panels'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_tabview_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'tabview', manual: true });
 
 export default {
     name: 'BaseTabView',
diff --git a/components/lib/tag/BaseTag.vue b/components/lib/tag/BaseTag.vue
index 1c3470a3c..c4eca577b 100644
--- a/components/lib/tag/BaseTag.vue
+++ b/components/lib/tag/BaseTag.vue
@@ -35,7 +35,7 @@ const classes = {
     value: 'p-tag-value'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_tag_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'tag', manual: true });
 
 export default {
     name: 'BaseTag',
diff --git a/components/lib/terminal/BaseTerminal.vue b/components/lib/terminal/BaseTerminal.vue
index 7b1af88ae..bb6347387 100644
--- a/components/lib/terminal/BaseTerminal.vue
+++ b/components/lib/terminal/BaseTerminal.vue
@@ -37,7 +37,7 @@ const classes = {
     commandText: 'p-terminal-input'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_terminal_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'terminal', manual: true });
 
 export default {
     name: 'BaseTerminal',
diff --git a/components/lib/textarea/BaseTextarea.vue b/components/lib/textarea/BaseTextarea.vue
index 4f4914529..849970700 100644
--- a/components/lib/textarea/BaseTextarea.vue
+++ b/components/lib/textarea/BaseTextarea.vue
@@ -23,7 +23,7 @@ const classes = {
     ]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_textarea_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'textarea', manual: true });
 
 export default {
     name: 'BaseTextarea',
diff --git a/components/lib/tieredmenu/BaseTieredMenu.vue b/components/lib/tieredmenu/BaseTieredMenu.vue
index a1471ab09..d5ae5a406 100644
--- a/components/lib/tieredmenu/BaseTieredMenu.vue
+++ b/components/lib/tieredmenu/BaseTieredMenu.vue
@@ -81,7 +81,7 @@ const classes = {
     separator: 'p-menuitem-separator'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_tieredmenu_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'tieredmenu', manual: true });
 
 export default {
     name: 'BaseTieredMenu',
diff --git a/components/lib/timeline/BaseTimeline.vue b/components/lib/timeline/BaseTimeline.vue
index 55cfc3045..7f98df008 100644
--- a/components/lib/timeline/BaseTimeline.vue
+++ b/components/lib/timeline/BaseTimeline.vue
@@ -125,7 +125,7 @@ const classes = {
     content: 'p-timeline-event-content'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_timeline_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'timeline', manual: true });
 
 export default {
     name: 'BaseTimeline',
diff --git a/components/lib/toast/BaseToast.vue b/components/lib/toast/BaseToast.vue
index 82247a6cf..f840f88ac 100644
--- a/components/lib/toast/BaseToast.vue
+++ b/components/lib/toast/BaseToast.vue
@@ -133,7 +133,7 @@ const classes = {
     buttonIcon: ({ props }) => ['p-toast-icon-close-icon', props.closeIcon]
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_toast_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'toast', manual: true });
 
 export default {
     name: 'BaseToast',
diff --git a/components/lib/togglebutton/BaseToggleButton.vue b/components/lib/togglebutton/BaseToggleButton.vue
index 3f1934496..421325d3f 100644
--- a/components/lib/togglebutton/BaseToggleButton.vue
+++ b/components/lib/togglebutton/BaseToggleButton.vue
@@ -11,7 +11,6 @@ const classes = {
             'p-highlight': props.modelValue === true
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     icon: ({ instance, props }) => [
         props.modelValue ? props.onIcon : props.offIcon,
         'p-button-icon',
diff --git a/components/lib/togglebutton/ToggleButton.vue b/components/lib/togglebutton/ToggleButton.vue
index d35927089..8e7c6ada0 100755
--- a/components/lib/togglebutton/ToggleButton.vue
+++ b/components/lib/togglebutton/ToggleButton.vue
@@ -1,6 +1,6 @@
 <template>
     <div ref="container" v-ripple :class="cx('root')" @click="onClick($event)" v-bind="ptm('root')" :data-p-active="modelValue === true" data-pc-name="togglebutton">
-        <span :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <span class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 :id="inputId"
                 type="checkbox"
diff --git a/components/lib/toolbar/BaseToolbar.vue b/components/lib/toolbar/BaseToolbar.vue
index ff49fcada..88200fddf 100644
--- a/components/lib/toolbar/BaseToolbar.vue
+++ b/components/lib/toolbar/BaseToolbar.vue
@@ -31,7 +31,7 @@ const classes = {
     end: 'p-toolbar-group-end p-toolbar-group-right'
 };
 
-const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { id: 'primevue_toolbar_style', manual: true });
+const { load: loadStyle, unload: unloadStyle } = useStyle(styles, { name: 'toolbar', manual: true });
 
 export default {
     name: 'BaseToolbar',
diff --git a/components/lib/tooltip/Tooltip.css b/components/lib/tooltip/BaseTooltip.js
old mode 100755
new mode 100644
similarity index 70%
rename from components/lib/tooltip/Tooltip.css
rename to components/lib/tooltip/BaseTooltip.js
index 88dd6a7b9..ff533b35e
--- a/components/lib/tooltip/Tooltip.css
+++ b/components/lib/tooltip/BaseTooltip.js
@@ -1,3 +1,7 @@
+import BaseDirective from 'primevue/basedirective';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
 .p-tooltip {
     position:absolute;
     display:none;
@@ -58,4 +62,22 @@
     left: 50%;
     margin-left: -.25rem;
     border-width: 0 .25em .25rem;
-}
\ No newline at end of file
+}
+`;
+
+const classes = {
+    root: 'p-tooltip p-component',
+    arrow: 'p-tooltip-arrow',
+    text: 'p-tooltip-text'
+};
+
+const { load: loadStyle } = useStyle(styles, { name: 'tooltip', manual: true });
+
+const BaseTooltip = BaseDirective.extend({
+    css: {
+        classes,
+        loadStyle
+    }
+});
+
+export default BaseTooltip;
diff --git a/components/lib/tooltip/Tooltip.js b/components/lib/tooltip/Tooltip.js
index 3809186b7..d94cb86d0 100755
--- a/components/lib/tooltip/Tooltip.js
+++ b/components/lib/tooltip/Tooltip.js
@@ -1,375 +1,11 @@
-import { BaseDirective } from 'primevue/basedirective';
 import { ConnectedOverlayScrollHandler, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from 'primevue/utils';
+import BaseTooltip from './BaseTooltip';
 
-let timer;
-
-function bindEvents(el, options) {
-    const modifiers = el.$_ptooltipModifiers;
-
-    if (modifiers.focus) {
-        el.$_focusevent = (event) => onFocus(event, options);
-
-        el.addEventListener('focus', el.$_focusevent);
-        el.addEventListener('blur', onBlur);
-    } else {
-        el.$_mouseenterevent = (event) => onMouseEnter(event, options);
-
-        el.addEventListener('mouseenter', el.$_mouseenterevent);
-        el.addEventListener('mouseleave', onMouseLeave);
-        el.addEventListener('click', onClick);
-    }
-
-    el.addEventListener('keydown', onKeydown);
-}
-
-function unbindEvents(el) {
-    const modifiers = el.$_ptooltipModifiers;
-
-    if (modifiers.focus) {
-        el.removeEventListener('focus', el.$_focusevent);
-        el.$_focusevent = null;
-
-        el.removeEventListener('blur', onBlur);
-    } else {
-        el.removeEventListener('mouseenter', el.$_mouseenterevent);
-        el.$_mouseenterevent = null;
-
-        el.removeEventListener('mouseleave', onMouseLeave);
-        el.removeEventListener('click', onClick);
-    }
-
-    el.removeEventListener('keydown', onKeydown);
-}
-
-function bindScrollListener(el) {
-    if (!el.$_ptooltipScrollHandler) {
-        el.$_ptooltipScrollHandler = new ConnectedOverlayScrollHandler(el, function () {
-            hide(el);
-        });
-    }
-
-    el.$_ptooltipScrollHandler.bindScrollListener();
-}
-
-function unbindScrollListener(el) {
-    if (el.$_ptooltipScrollHandler) {
-        el.$_ptooltipScrollHandler.unbindScrollListener();
-    }
-}
-
-function onMouseEnter(event, options) {
-    const el = event.currentTarget;
-    const showDelay = el.$_ptooltipShowDelay;
-
-    show(el, options, showDelay);
-}
-
-function onMouseLeave(event) {
-    const el = event.currentTarget;
-    const hideDelay = el.$_ptooltipHideDelay;
-
-    hide(el, hideDelay);
-}
-
-function onFocus(event, options) {
-    const el = event.currentTarget;
-    const showDelay = el.$_ptooltipShowDelay;
-
-    show(el, options, showDelay);
-}
-
-function onBlur(event) {
-    const el = event.currentTarget;
-    const hideDelay = el.$_ptooltipHideDelay;
-
-    hide(el, hideDelay);
-}
-
-function onClick(event) {
-    const el = event.currentTarget;
-    const hideDelay = el.$_ptooltipHideDelay;
-
-    hide(el, hideDelay);
-}
-
-function onKeydown(event) {
-    const el = event.currentTarget;
-    const hideDelay = el.$_ptooltipHideDelay;
-
-    event.code === 'Escape' && hide(event.currentTarget, hideDelay);
-}
-
-function tooltipActions(el, options) {
-    if (el.$_ptooltipDisabled || !DomHandler.isExist(el)) {
-        return;
-    }
-
-    let tooltipElement = create(el, options);
-
-    align(el);
-    !el.$_ptooltipUnstyled && DomHandler.fadeIn(tooltipElement, 250);
-
-    window.addEventListener('resize', function onWindowResize() {
-        if (!DomHandler.isTouchDevice()) {
-            hide(el);
-        }
-
-        this.removeEventListener('resize', onWindowResize);
-    });
-
-    bindScrollListener(el);
-    ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex);
-}
-
-function show(el, options, showDelay) {
-    if (showDelay !== undefined) {
-        timer = setTimeout(() => tooltipActions(el, options), showDelay);
-    } else {
-        tooltipActions(el, options);
-    }
-}
-
-function tooltipRemoval(el) {
-    remove(el);
-    unbindScrollListener(el);
-}
-
-function hide(el, hideDelay) {
-    clearTimeout(timer);
-
-    if (hideDelay !== undefined) {
-        setTimeout(() => tooltipRemoval(el), hideDelay);
-    } else {
-        tooltipRemoval(el);
-    }
-}
-
-function getTooltipElement(el) {
-    return document.getElementById(el.$_ptooltipId);
-}
-
-function create(el, options) {
-    const id = el.$_ptooltipIdAttr !== '' ? el.$_ptooltipIdAttr : UniqueComponentId() + '_tooltip';
-
-    el.$_ptooltipId = id;
-
-    let container = document.createElement('div');
-
-    container.id = id;
-    container.setAttribute('data-pc-section', 'root');
-    container.setAttribute('data-pc-name', 'tooltip');
-
-    let tooltipArrow = document.createElement('div');
-
-    tooltipArrow.setAttribute('data-pc-section', 'arrow');
-    container.appendChild(tooltipArrow);
-
-    let tooltipText = document.createElement('div');
-
-    tooltipText.setAttribute('data-pc-section', 'text');
-
-    if (!el.$_ptooltipUnstyled) {
-        tooltipArrow.className = 'p-tooltip-arrow';
-        tooltipText.className = 'p-tooltip-text';
-    }
-
-    if (el.$_ptooltipEscape) {
-        tooltipText.innerHTML = el.$_ptooltipValue;
-    } else {
-        tooltipText.innerHTML = '';
-        tooltipText.appendChild(document.createTextNode(el.$_ptooltipValue));
-    }
-
-    container.setAttribute('role', 'tooltip');
-    container.appendChild(tooltipText);
-    document.body.appendChild(container);
-
-    container.style.display = 'inline-block';
-
-    if (el.$_ptooltipFitContent) {
-        container.style.width = 'fit-content';
-    }
-
-    el.$pEl = container;
-    BaseDirective.handleCSS('tooltip', container, options);
-
-    return container;
-}
-
-function remove(el) {
-    if (el) {
-        let tooltipElement = getTooltipElement(el);
-
-        if (tooltipElement && tooltipElement.parentElement) {
-            ZIndexUtils.clear(tooltipElement);
-            document.body.removeChild(tooltipElement);
-        }
-
-        el.$_ptooltipId = null;
-    }
-}
-
-function align(el) {
-    const modifiers = el.$_ptooltipModifiers;
-
-    if (modifiers.top) {
-        alignTop(el);
-
-        if (isOutOfBounds(el)) {
-            alignBottom(el);
-
-            if (isOutOfBounds(el)) {
-                alignTop(el);
-            }
-        }
-    } else if (modifiers.left) {
-        alignLeft(el);
-
-        if (isOutOfBounds(el)) {
-            alignRight(el);
-
-            if (isOutOfBounds(el)) {
-                alignTop(el);
-
-                if (isOutOfBounds(el)) {
-                    alignBottom(el);
-
-                    if (isOutOfBounds(el)) {
-                        alignLeft(el);
-                    }
-                }
-            }
-        }
-    } else if (modifiers.bottom) {
-        alignBottom(el);
-
-        if (isOutOfBounds(el)) {
-            alignTop(el);
-
-            if (isOutOfBounds(el)) {
-                alignBottom(el);
-            }
-        }
-    } else {
-        alignRight(el);
-
-        if (isOutOfBounds(el)) {
-            alignLeft(el);
-
-            if (isOutOfBounds(el)) {
-                alignTop(el);
-
-                if (isOutOfBounds(el)) {
-                    alignBottom(el);
-
-                    if (isOutOfBounds(el)) {
-                        alignRight(el);
-                    }
-                }
-            }
-        }
-    }
-}
-
-function getHostOffset(el) {
-    let offset = el.getBoundingClientRect();
-    let targetLeft = offset.left + DomHandler.getWindowScrollLeft();
-    let targetTop = offset.top + DomHandler.getWindowScrollTop();
-
-    return { left: targetLeft, top: targetTop };
-}
-
-function alignRight(el) {
-    preAlign(el, 'right');
-    let tooltipElement = getTooltipElement(el);
-    let hostOffset = getHostOffset(el);
-    let left = hostOffset.left + DomHandler.getOuterWidth(el);
-    let top = hostOffset.top + (DomHandler.getOuterHeight(el) - DomHandler.getOuterHeight(tooltipElement)) / 2;
-
-    tooltipElement.style.left = left + 'px';
-    tooltipElement.style.top = top + 'px';
-}
-
-function alignLeft(el) {
-    preAlign(el, 'left');
-    let tooltipElement = getTooltipElement(el);
-    let hostOffset = getHostOffset(el);
-    let left = hostOffset.left - DomHandler.getOuterWidth(tooltipElement);
-    let top = hostOffset.top + (DomHandler.getOuterHeight(el) - DomHandler.getOuterHeight(tooltipElement)) / 2;
-
-    tooltipElement.style.left = left + 'px';
-    tooltipElement.style.top = top + 'px';
-}
-
-function alignTop(el) {
-    preAlign(el, 'top');
-    let tooltipElement = getTooltipElement(el);
-    let hostOffset = getHostOffset(el);
-    let left = hostOffset.left + (DomHandler.getOuterWidth(el) - DomHandler.getOuterWidth(tooltipElement)) / 2;
-    let top = hostOffset.top - DomHandler.getOuterHeight(tooltipElement);
-
-    tooltipElement.style.left = left + 'px';
-    tooltipElement.style.top = top + 'px';
-}
-
-function alignBottom(el) {
-    preAlign(el, 'bottom');
-    let tooltipElement = getTooltipElement(el);
-    let hostOffset = getHostOffset(el);
-    let left = hostOffset.left + (DomHandler.getOuterWidth(el) - DomHandler.getOuterWidth(tooltipElement)) / 2;
-    let top = hostOffset.top + DomHandler.getOuterHeight(el);
-
-    tooltipElement.style.left = left + 'px';
-    tooltipElement.style.top = top + 'px';
-}
-
-function preAlign(el, position) {
-    let tooltipElement = getTooltipElement(el);
-
-    tooltipElement.style.left = -999 + 'px';
-    tooltipElement.style.top = -999 + 'px';
-    tooltipElement.className += el.$_ptooltipUnstyled ? el.$_ptooltipClass : ` p-tooltip p-component p-tooltip-${position} ${el.$_ptooltipClass || ''}`;
-}
-
-function isOutOfBounds(el) {
-    let tooltipElement = getTooltipElement(el);
-    let offset = tooltipElement.getBoundingClientRect();
-    let targetTop = offset.top;
-    let targetLeft = offset.left;
-    let width = DomHandler.getOuterWidth(tooltipElement);
-    let height = DomHandler.getOuterHeight(tooltipElement);
-    let viewport = DomHandler.getViewport();
-
-    return targetLeft + width > viewport.width || targetLeft < 0 || targetTop < 0 || targetTop + height > viewport.height;
-}
-
-function getTarget(el) {
-    return DomHandler.hasClass(el, 'p-inputwrapper') ? DomHandler.findSingle(el, 'input') : el;
-}
-
-function getModifiers(options) {
-    // modifiers
-    if (options.modifiers && Object.keys(options.modifiers).length) {
-        return options.modifiers;
-    }
-
-    // arg
-    if (options.arg && typeof options.arg === 'object') {
-        return Object.entries(options.arg).reduce((acc, [key, val]) => {
-            if (key === 'event' || key === 'position') acc[val] = true;
-
-            return acc;
-        }, {});
-    }
-
-    return {};
-}
-
-const Tooltip = BaseDirective.extend('tooltip', {
+const Tooltip = BaseTooltip.extend('tooltip', {
     beforeMount(el, options) {
-        let target = getTarget(el);
+        let target = this.getTarget(el);
 
-        target.$_ptooltipModifiers = getModifiers(options);
+        target.$_ptooltipModifiers = this.getModifiers(options);
 
         if (!options.value) return;
         else if (typeof options.value === 'string') {
@@ -378,7 +14,7 @@ const Tooltip = BaseDirective.extend('tooltip', {
             target.$_ptooltipEscape = false;
             target.$_ptooltipClass = null;
             target.$_ptooltipFitContent = true;
-            target.$_ptooltipIdAttr = '';
+            target.$_ptooltipIdAttr = UniqueComponentId() + '_tooltip';
             target.$_ptooltipShowDelay = 0;
             target.$_ptooltipHideDelay = 0;
         } else if (typeof options.value === 'object' && options.value) {
@@ -389,7 +25,7 @@ const Tooltip = BaseDirective.extend('tooltip', {
                 target.$_ptooltipEscape = !!options.value.escape === options.value.escape ? options.value.escape : false;
                 target.$_ptooltipClass = options.value.class || '';
                 target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
-                target.$_ptooltipIdAttr = options.value.id || '';
+                target.$_ptooltipIdAttr = options.value.id || UniqueComponentId() + '_tooltip';
                 target.$_ptooltipShowDelay = options.value.showDelay || 0;
                 target.$_ptooltipHideDelay = options.value.hideDelay || 0;
             }
@@ -402,13 +38,13 @@ const Tooltip = BaseDirective.extend('tooltip', {
             target.$_ptooltipUnstyled = _config.unstyled || false;
         }
 
-        bindEvents(target, options);
+        this.bindEvents(target, options);
     },
     updated(el, options) {
-        let target = getTarget(el);
+        let target = this.getTarget(el);
 
-        target.$_ptooltipModifiers = getModifiers(options);
-        unbindEvents(target);
+        target.$_ptooltipModifiers = this.getModifiers(options);
+        this.unbindEvents(target);
 
         if (!options.value) {
             return;
@@ -419,14 +55,14 @@ const Tooltip = BaseDirective.extend('tooltip', {
             target.$_ptooltipDisabled = false;
             target.$_ptooltipEscape = false;
             target.$_ptooltipClass = null;
-            target.$_ptooltipIdAttr = '';
+            target.$_ptooltipIdAttr = target.$_ptooltipIdAttr || UniqueComponentId() + '_tooltip';
             target.$_ptooltipShowDelay = 0;
             target.$_ptooltipHideDelay = 0;
 
-            bindEvents(target, options);
+            this.bindEvents(target, options);
         } else if (typeof options.value === 'object' && options.value) {
             if (ObjectUtils.isEmpty(options.value.value) || options.value.value.trim() === '') {
-                unbindEvents(target, options);
+                this.unbindEvents(target, options);
 
                 return;
             } else {
@@ -435,24 +71,360 @@ const Tooltip = BaseDirective.extend('tooltip', {
                 target.$_ptooltipEscape = !!options.value.escape === options.value.escape ? options.value.escape : false;
                 target.$_ptooltipClass = options.value.class || '';
                 target.$_ptooltipFitContent = !!options.value.fitContent === options.value.fitContent ? options.value.fitContent : true;
-                target.$_ptooltipIdAttr = options.value.id || '';
+                target.$_ptooltipIdAttr = options.value.id || target.$_ptooltipIdAttr || UniqueComponentId() + '_tooltip';
                 target.$_ptooltipShowDelay = options.value.showDelay || 0;
                 target.$_ptooltipHideDelay = options.value.hideDelay || 0;
 
-                bindEvents(target, options);
+                this.bindEvents(target, options);
             }
         }
     },
     unmounted(el, options) {
-        let target = getTarget(el);
+        let target = this.getTarget(el);
 
-        remove(target);
-        unbindEvents(target, options);
+        this.remove(target);
+        this.unbindEvents(target, options);
 
         if (target.$_ptooltipScrollHandler) {
             target.$_ptooltipScrollHandler.destroy();
             target.$_ptooltipScrollHandler = null;
         }
+    },
+    timer: undefined,
+    methods: {
+        bindEvents(el, options) {
+            const modifiers = el.$_ptooltipModifiers;
+
+            if (modifiers.focus) {
+                el.$_focusevent = (event) => this.onFocus(event, options);
+
+                el.addEventListener('focus', el.$_focusevent);
+                el.addEventListener('blur', this.onBlur.bind(this));
+            } else {
+                el.$_mouseenterevent = (event) => this.onMouseEnter(event, options);
+
+                el.addEventListener('mouseenter', el.$_mouseenterevent);
+                el.addEventListener('mouseleave', this.onMouseLeave.bind(this));
+                el.addEventListener('click', this.onClick.bind(this));
+            }
+
+            el.addEventListener('keydown', this.onKeydown.bind(this));
+        },
+        unbindEvents(el) {
+            const modifiers = el.$_ptooltipModifiers;
+
+            if (modifiers.focus) {
+                el.removeEventListener('focus', el.$_focusevent);
+                el.$_focusevent = null;
+
+                el.removeEventListener('blur', this.onBlur.bind(this));
+            } else {
+                el.removeEventListener('mouseenter', el.$_mouseenterevent);
+                el.$_mouseenterevent = null;
+
+                el.removeEventListener('mouseleave', this.onMouseLeave.bind(this));
+                el.removeEventListener('click', this.onClick.bind(this));
+            }
+
+            el.removeEventListener('keydown', this.onKeydown.bind(this));
+        },
+        bindScrollListener(el) {
+            if (!el.$_ptooltipScrollHandler) {
+                el.$_ptooltipScrollHandler = new ConnectedOverlayScrollHandler(el, () => {
+                    this.hide(el);
+                });
+            }
+
+            el.$_ptooltipScrollHandler.bindScrollListener();
+        },
+        unbindScrollListener(el) {
+            if (el.$_ptooltipScrollHandler) {
+                el.$_ptooltipScrollHandler.unbindScrollListener();
+            }
+        },
+        onMouseEnter(event, options) {
+            const el = event.currentTarget;
+            const showDelay = el.$_ptooltipShowDelay;
+
+            this.show(el, options, showDelay);
+        },
+        onMouseLeave(event) {
+            const el = event.currentTarget;
+            const hideDelay = el.$_ptooltipHideDelay;
+
+            this.hide(el, hideDelay);
+        },
+        onFocus(event, options) {
+            const el = event.currentTarget;
+            const showDelay = el.$_ptooltipShowDelay;
+
+            this.show(el, options, showDelay);
+        },
+        onBlur(event) {
+            const el = event.currentTarget;
+            const hideDelay = el.$_ptooltipHideDelay;
+
+            this.hide(el, hideDelay);
+        },
+        onClick(event) {
+            const el = event.currentTarget;
+            const hideDelay = el.$_ptooltipHideDelay;
+
+            this.hide(el, hideDelay);
+        },
+        onKeydown(event) {
+            const el = event.currentTarget;
+            const hideDelay = el.$_ptooltipHideDelay;
+
+            event.code === 'Escape' && this.hide(event.currentTarget, hideDelay);
+        },
+        tooltipActions(el, options) {
+            if (el.$_ptooltipDisabled || !DomHandler.isExist(el)) {
+                return;
+            }
+
+            let tooltipElement = this.create(el, options);
+
+            this.align(el);
+            !el.$_ptooltipUnstyled && DomHandler.fadeIn(tooltipElement, 250);
+
+            const $this = this;
+
+            window.addEventListener('resize', function onWindowResize() {
+                if (!DomHandler.isTouchDevice()) {
+                    $this.hide(el);
+                }
+
+                window.removeEventListener('resize', onWindowResize);
+            });
+
+            this.bindScrollListener(el);
+            ZIndexUtils.set('tooltip', tooltipElement, el.$_ptooltipZIndex);
+        },
+        show(el, options, showDelay) {
+            if (showDelay !== undefined) {
+                this.timer = setTimeout(() => this.tooltipActions(el, options), showDelay);
+            } else {
+                this.tooltipActions(el, options);
+            }
+        },
+        tooltipRemoval(el) {
+            this.remove(el);
+            this.unbindScrollListener(el);
+        },
+        hide(el, hideDelay) {
+            clearTimeout(this.timer);
+
+            if (hideDelay !== undefined) {
+                setTimeout(() => this.tooltipRemoval(el), hideDelay);
+            } else {
+                this.tooltipRemoval(el);
+            }
+        },
+        getTooltipElement(el) {
+            return document.getElementById(el.$_ptooltipId);
+        },
+        create(el, options) {
+            const tooltipArrow = DomHandler.createElement('div', {
+                class: this.cx('arrow'),
+                'p-bind': this.ptm('arrow')
+            });
+
+            const tooltipText = DomHandler.createElement('div', {
+                class: this.cx('text'),
+                'p-bind': this.ptm('text')
+            });
+
+            if (el.$_ptooltipEscape) {
+                tooltipText.innerHTML = el.$_ptooltipValue;
+            } else {
+                tooltipText.innerHTML = '';
+                tooltipText.appendChild(document.createTextNode(el.$_ptooltipValue));
+            }
+
+            const container = DomHandler.createElement(
+                'div',
+                {
+                    id: el.$_ptooltipIdAttr,
+                    role: 'tooltip',
+                    style: {
+                        display: 'inline-block',
+                        width: el.$_ptooltipFitContent ? 'fit-content' : undefined
+                    },
+                    class: [this.cx('root'), el.$_ptooltipClass],
+                    'p-bind': this.ptm('root')
+                },
+                tooltipArrow,
+                tooltipText
+            );
+
+            document.body.appendChild(container);
+
+            el.$_ptooltipId = container.id;
+            this.$el = container;
+
+            return container;
+        },
+        remove(el) {
+            if (el) {
+                let tooltipElement = this.getTooltipElement(el);
+
+                if (tooltipElement && tooltipElement.parentElement) {
+                    ZIndexUtils.clear(tooltipElement);
+                    document.body.removeChild(tooltipElement);
+                }
+
+                el.$_ptooltipId = null;
+            }
+        },
+        align(el) {
+            const modifiers = el.$_ptooltipModifiers;
+
+            if (modifiers.top) {
+                this.alignTop(el);
+
+                if (this.isOutOfBounds(el)) {
+                    this.alignBottom(el);
+
+                    if (this.isOutOfBounds(el)) {
+                        this.alignTop(el);
+                    }
+                }
+            } else if (modifiers.left) {
+                this.alignLeft(el);
+
+                if (this.isOutOfBounds(el)) {
+                    this.alignRight(el);
+
+                    if (this.isOutOfBounds(el)) {
+                        this.alignTop(el);
+
+                        if (this.isOutOfBounds(el)) {
+                            this.alignBottom(el);
+
+                            if (this.isOutOfBounds(el)) {
+                                this.alignLeft(el);
+                            }
+                        }
+                    }
+                }
+            } else if (modifiers.bottom) {
+                this.alignBottom(el);
+
+                if (this.isOutOfBounds(el)) {
+                    this.alignTop(el);
+
+                    if (this.isOutOfBounds(el)) {
+                        this.alignBottom(el);
+                    }
+                }
+            } else {
+                this.alignRight(el);
+
+                if (this.isOutOfBounds(el)) {
+                    this.alignLeft(el);
+
+                    if (this.isOutOfBounds(el)) {
+                        this.alignTop(el);
+
+                        if (this.isOutOfBounds(el)) {
+                            this.alignBottom(el);
+
+                            if (this.isOutOfBounds(el)) {
+                                this.alignRight(el);
+                            }
+                        }
+                    }
+                }
+            }
+        },
+        getHostOffset(el) {
+            let offset = el.getBoundingClientRect();
+            let targetLeft = offset.left + DomHandler.getWindowScrollLeft();
+            let targetTop = offset.top + DomHandler.getWindowScrollTop();
+
+            return { left: targetLeft, top: targetTop };
+        },
+        alignRight(el) {
+            this.preAlign(el, 'right');
+            let tooltipElement = this.getTooltipElement(el);
+            let hostOffset = this.getHostOffset(el);
+            let left = hostOffset.left + DomHandler.getOuterWidth(el);
+            let top = hostOffset.top + (DomHandler.getOuterHeight(el) - DomHandler.getOuterHeight(tooltipElement)) / 2;
+
+            tooltipElement.style.left = left + 'px';
+            tooltipElement.style.top = top + 'px';
+        },
+        alignLeft(el) {
+            this.preAlign(el, 'left');
+            let tooltipElement = this.getTooltipElement(el);
+            let hostOffset = this.getHostOffset(el);
+            let left = hostOffset.left - DomHandler.getOuterWidth(tooltipElement);
+            let top = hostOffset.top + (DomHandler.getOuterHeight(el) - DomHandler.getOuterHeight(tooltipElement)) / 2;
+
+            tooltipElement.style.left = left + 'px';
+            tooltipElement.style.top = top + 'px';
+        },
+        alignTop(el) {
+            this.preAlign(el, 'top');
+            let tooltipElement = this.getTooltipElement(el);
+            let hostOffset = this.getHostOffset(el);
+            let left = hostOffset.left + (DomHandler.getOuterWidth(el) - DomHandler.getOuterWidth(tooltipElement)) / 2;
+            let top = hostOffset.top - DomHandler.getOuterHeight(tooltipElement);
+
+            tooltipElement.style.left = left + 'px';
+            tooltipElement.style.top = top + 'px';
+        },
+        alignBottom(el) {
+            this.preAlign(el, 'bottom');
+            let tooltipElement = this.getTooltipElement(el);
+            let hostOffset = this.getHostOffset(el);
+            let left = hostOffset.left + (DomHandler.getOuterWidth(el) - DomHandler.getOuterWidth(tooltipElement)) / 2;
+            let top = hostOffset.top + DomHandler.getOuterHeight(el);
+
+            tooltipElement.style.left = left + 'px';
+            tooltipElement.style.top = top + 'px';
+        },
+        preAlign(el, position) {
+            let tooltipElement = this.getTooltipElement(el);
+
+            tooltipElement.style.left = -999 + 'px';
+            tooltipElement.style.top = -999 + 'px';
+            DomHandler.removeClass(tooltipElement, `p-tooltip-${tooltipElement.$_ptooltipPosition}`);
+            DomHandler.addClass(tooltipElement, `p-tooltip-${position}`);
+            tooltipElement.$_ptooltipPosition = position;
+        },
+        isOutOfBounds(el) {
+            let tooltipElement = this.getTooltipElement(el);
+            let offset = tooltipElement.getBoundingClientRect();
+            let targetTop = offset.top;
+            let targetLeft = offset.left;
+            let width = DomHandler.getOuterWidth(tooltipElement);
+            let height = DomHandler.getOuterHeight(tooltipElement);
+            let viewport = DomHandler.getViewport();
+
+            return targetLeft + width > viewport.width || targetLeft < 0 || targetTop < 0 || targetTop + height > viewport.height;
+        },
+        getTarget(el) {
+            return DomHandler.hasClass(el, 'p-inputwrapper') ? DomHandler.findSingle(el, 'input') : el;
+        },
+        getModifiers(options) {
+            // modifiers
+            if (options.modifiers && Object.keys(options.modifiers).length) {
+                return options.modifiers;
+            }
+
+            // arg
+            if (options.arg && typeof options.arg === 'object') {
+                return Object.entries(options.arg).reduce((acc, [key, val]) => {
+                    if (key === 'event' || key === 'position') acc[val] = true;
+
+                    return acc;
+                }, {});
+            }
+
+            return {};
+        }
     }
 });
 
diff --git a/components/lib/tree/BaseTree.vue b/components/lib/tree/BaseTree.vue
index 4856d8207..10a66a72c 100644
--- a/components/lib/tree/BaseTree.vue
+++ b/components/lib/tree/BaseTree.vue
@@ -127,7 +127,7 @@ const classes = {
     subgroup: 'p-treenode-children'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_tree_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'tree', manual: true });
 
 export default {
     name: 'BaseTree',
diff --git a/components/lib/treeselect/BaseTreeSelect.vue b/components/lib/treeselect/BaseTreeSelect.vue
index bfd548b75..699bece16 100644
--- a/components/lib/treeselect/BaseTreeSelect.vue
+++ b/components/lib/treeselect/BaseTreeSelect.vue
@@ -70,7 +70,6 @@ const classes = {
             'p-inputwrapper-focus': instance.focused || instance.overlayVisible
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     labelContainer: 'p-treeselect-label-container',
     label: ({ instance, props }) => [
         'p-treeselect-label',
@@ -94,7 +93,7 @@ const classes = {
     emptyMessage: 'p-treeselect-empty-message'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_treeselect_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'treeselect', manual: true });
 
 export default {
     name: 'BaseTreeSelect',
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index 8280632ea..adb8b342b 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -1,6 +1,6 @@
 <template>
     <div ref="container" :class="cx('root')" :style="sx('root')" @click="onClick" v-bind="ptm('root')" data-pc-name="treeselect">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="focusInput"
                 :id="inputId"
diff --git a/components/lib/treetable/BaseTreeTable.vue b/components/lib/treetable/BaseTreeTable.vue
index e2cb380da..b2879d5a4 100644
--- a/components/lib/treetable/BaseTreeTable.vue
+++ b/components/lib/treetable/BaseTreeTable.vue
@@ -239,7 +239,6 @@ const classes = {
             'p-checkbox-focused': instance.checkboxFocused
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
     checkbox: ({ instance }) => [
         'p-checkbox-box',
         {
@@ -263,7 +262,7 @@ const classes = {
     resizeHelper: 'p-column-resizer-helper p-highlight'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_treetable_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'treetable', manual: true });
 
 export default {
     name: 'BaseTreeTable',
diff --git a/components/lib/treetable/BodyCell.vue b/components/lib/treetable/BodyCell.vue
index a8ef88bed..ddf61419e 100644
--- a/components/lib/treetable/BodyCell.vue
+++ b/components/lib/treetable/BodyCell.vue
@@ -6,7 +6,7 @@
             <component v-else :is="node.collapsedIcon ? 'span' : 'ChevronRightIcon'" :class="cx('rowTogglerIcon')" v-bind="getColumnPT('rowTogglerIcon')" />
         </button>
         <div v-if="checkboxSelectionMode && columnProp('expander')" :class="cx('checkboxWrapper')" @click="toggleCheckbox" v-bind="getColumnPT('checkboxWrapper')">
-            <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+            <div class="p-hidden-accessible" v-bind="getColumnPT('hiddenInputWrapper')" :data-p-hidden-accessible="true">
                 <input type="checkbox" @focus="onCheckboxFocus" @blur="onCheckboxBlur" tabindex="-1" v-bind="getColumnPT('hiddenInput')" />
             </div>
             <div ref="checkboxEl" :class="cx('checkbox')" v-bind="getColumnCheckboxPT('checkbox')">
diff --git a/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue b/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
index 90d45be17..733752f46 100644
--- a/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
+++ b/components/lib/tristatecheckbox/BaseTriStateCheckbox.vue
@@ -10,8 +10,6 @@ const classes = {
             'p-checkbox-focused': instance.focused
         }
     ],
-    hiddenInputWrapper: 'p-hidden-accessible',
-    hiddenValueLabel: 'p-hidden-accessible',
     checkbox: ({ instance, props }) => [
         'p-checkbox-box',
         {
diff --git a/components/lib/tristatecheckbox/TriStateCheckbox.vue b/components/lib/tristatecheckbox/TriStateCheckbox.vue
index edc2777e8..c17554df8 100755
--- a/components/lib/tristatecheckbox/TriStateCheckbox.vue
+++ b/components/lib/tristatecheckbox/TriStateCheckbox.vue
@@ -1,6 +1,6 @@
 <template>
     <div :class="cx('root')" @click="onClick($event)" v-bind="ptm('root')" data-pc-name="tristatecheckbox">
-        <div :class="cx('hiddenInputWrapper')" :style="sx('hiddenAccessible', isUnstyled)" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
+        <div class="p-hidden-accessible" v-bind="ptm('hiddenInputWrapper')" :data-p-hidden-accessible="true">
             <input
                 ref="input"
                 :id="inputId"
@@ -16,7 +16,7 @@
                 v-bind="{ ...inputProps, ...ptm('hiddenInput') }"
             />
         </div>
-        <span role="status" :class="cx('hiddenValueLabel')" :style="sx('hiddenAccessible', isUnstyled)" aria-live="polite" v-bind="ptm('hiddenValueLabel')" :data-p-hidden-accessible="true">{{ ariaValueLabel }}</span>
+        <span role="status" class="p-hidden-accessible" aria-live="polite" v-bind="ptm('hiddenValueLabel')" :data-p-hidden-accessible="true">{{ ariaValueLabel }}</span>
         <div ref="box" :class="cx('checkbox')" v-bind="getPTOptions('checkbox')" :data-p-highlight="modelValue != null" :data-p-disabled="disabled" :data-p-focused="focused">
             <slot v-if="modelValue === true" name="checkicon" :class="cx('checkIcon')">
                 <component :is="'CheckIcon'" :class="cx('checkIcon')" v-bind="ptm('checkIcon')" />
diff --git a/components/lib/usestyle/UseStyle.js b/components/lib/usestyle/UseStyle.js
index 9d61bb758..94ceda23f 100644
--- a/components/lib/usestyle/UseStyle.js
+++ b/components/lib/usestyle/UseStyle.js
@@ -17,7 +17,7 @@ export function useStyle(css, options = {}) {
     const isLoaded = ref(false);
 
     const defaultDocument = DomHandler.isClient() ? window.document : undefined;
-    const { document = defaultDocument, immediate = true, manual = false, id = `primevue_style_${++_id}` } = options;
+    const { document = defaultDocument, immediate = true, manual = false, name = `style_${++_id}`, id = undefined, media = undefined } = options;
 
     const cssRef = ref(css);
 
@@ -26,13 +26,14 @@ export function useStyle(css, options = {}) {
     const load = () => {
         if (!document) return;
 
-        const el = document.getElementById(id) || document.createElement('style');
+        const el = document.querySelector(`style[data-primevue-style-id="${name}"]`) || document.getElementById(id) || document.createElement('style');
 
         if (!el.isConnected) {
             el.type = 'text/css';
-            el.id = id;
-            if (options.media) el.media = options.media;
+            id && (el.id = id);
+            media && (el.media = media);
             document.head.appendChild(el);
+            name && el.setAttribute('data-primevue-style-id', name);
         }
 
         if (isLoaded.value) return;
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
index 62e1140c5..b5fcbf414 100755
--- a/components/lib/utils/DomHandler.js
+++ b/components/lib/utils/DomHandler.js
@@ -128,24 +128,12 @@ export default {
 
     addMultipleClasses(element, className) {
         if (element && className) {
-            if (element.classList) {
-                let styles = className.split(' ');
-
-                for (let i = 0; i < styles.length; i++) {
-                    element.classList.add(styles[i]);
-                }
-            } else {
-                let styles = className.split(' ');
-
-                for (let i = 0; i < styles.length; i++) {
-                    element.className += ' ' + styles[i];
-                }
-            }
+            className.split(' ').forEach((style) => this.addClass(element, style));
         }
     },
 
     addClass(element, className) {
-        if (element && className) {
+        if (element && className && !this.hasClass(element, className)) {
             if (element.classList) element.classList.add(className);
             else element.className += ' ' + className;
         }
@@ -181,6 +169,61 @@ export default {
         return this.isElement(element) ? element.querySelector(selector) : null;
     },
 
+    createElement(type, attributes = {}, ...children) {
+        if (type) {
+            const element = document.createElement(type);
+
+            this.setAttributes(element, attributes);
+            element.append(...children);
+
+            return element;
+        }
+
+        return undefined;
+    },
+
+    setAttributes(element, attributes = {}) {
+        if (element) {
+            const computedStyles = (rule, value) => {
+                const styles = element?.$attr?.[rule] ? [element?.$attr?.[rule]] : [];
+
+                return [value].flat().reduce((cv, v) => {
+                    if (v !== null && v !== undefined) {
+                        const type = typeof v;
+
+                        if (type === 'string' || type === 'number') {
+                            cv.push(v);
+                        } else if (type === 'object') {
+                            const _cv = Array.isArray(v)
+                                ? computedStyles(rule, v)
+                                : Object.entries(v).map(([_k, _v]) => (rule === 'style' && (!!_v || _v === 0) ? `${_k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()}:${_v}` : !!_v ? _k : undefined));
+
+                            cv = _cv.length ? cv.concat(_cv.filter((c) => !!c)) : cv;
+                        }
+                    }
+
+                    return cv;
+                }, styles);
+            };
+
+            Object.entries(attributes).forEach(([key, value]) => {
+                if (value !== undefined && value !== null) {
+                    const matchedEvent = key.match(/^on(.+)/);
+
+                    if (matchedEvent) {
+                        element.addEventListener(matchedEvent[1].toLowerCase(), value);
+                    } else if (key === 'p-bind') {
+                        this.setAttributes(element, value);
+                    } else {
+                        value = key === 'class' ? [...new Set(computedStyles('class', value))].join(' ').trim() : key === 'style' ? computedStyles('style', value).join(';').trim() : value;
+                        (element.$attr = element.$attr || {}) && (element.$attr[key] = value);
+                        element.setAttribute(key, value);
+                    }
+                }
+            });
+        }
+    },
+
     getAttribute(element, name) {
         if (element) {
             const value = element.getAttribute(name);
@@ -493,7 +536,13 @@ export default {
 
         let scrollDiv = document.createElement('div');
 
-        scrollDiv.className = 'p-scrollbar-measure';
+        this.addStyles(scrollDiv, {
+            width: '100px',
+            height: '100px',
+            overflow: 'scroll',
+            position: 'absolute',
+            top: '-9999px'
+        });
         document.body.appendChild(scrollDiv);
 
         let scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
diff --git a/components/lib/utils/test/DomHandler.spec.js b/components/lib/utils/test/DomHandler.spec.js
index 07c079581..a383d28c5 100644
--- a/components/lib/utils/test/DomHandler.spec.js
+++ b/components/lib/utils/test/DomHandler.spec.js
@@ -654,7 +654,13 @@ describe('DomHandler', () => {
         it('When getSelection is not empty', () => {
             const scrollDiv = document.createElement('div');
 
-            scrollDiv.className = 'p-scrollbar-measure';
+            DomHandler.addStyles(scrollDiv, {
+                width: '100px',
+                height: '100px',
+                overflow: 'scroll',
+                position: 'absolute',
+                top: '-9999px'
+            });
             document.body.appendChild(scrollDiv);
             const scrollbarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;
 
diff --git a/components/lib/virtualscroller/BaseVirtualScroller.vue b/components/lib/virtualscroller/BaseVirtualScroller.vue
index eafacb461..313e626b8 100644
--- a/components/lib/virtualscroller/BaseVirtualScroller.vue
+++ b/components/lib/virtualscroller/BaseVirtualScroller.vue
@@ -93,7 +93,7 @@ const classes = {
     loadingIcon: 'p-virtualscroller-loading-icon'
 };
 
-const { load: loadStyle } = useStyle(styles, { id: 'primevue_virtualscroller_style', manual: true });
+const { load: loadStyle } = useStyle(styles, { name: 'virtualscroller', manual: true });
 
 export default {
     name: 'BaseVirtualScroller',
diff --git a/gulpfile.js b/gulpfile.js
index 8b3be50ce..5323a9beb 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -6,6 +6,7 @@ var gulp = require('gulp'),
     rename = require('gulp-rename'),
     flatten = require('gulp-flatten');
 
+/** @deprecated */
 gulp.task('build-css', function () {
     return gulp
         .src(['./components/lib/common/Common.css', './components/**/*.css'])
@@ -20,9 +21,10 @@ gulp.task('build-themes', function () {
     return gulp.src(['public/themes/**/*']).pipe(gulp.dest('dist/resources/themes'));
 });
 
+/** @deprecated */
 gulp.task('images', function () {
     return gulp.src(['./components/lib/**/images/*.png', './components/lib/**/images/*.gif']).pipe(flatten()).pipe(gulp.dest('dist/resources/images'));
 });
 
 //Building project with run sequence
-gulp.task('build-styles', gulp.series('build-css', 'images', 'build-themes'));
+gulp.task('build-styles', gulp.series('build-themes'));
diff --git a/nuxt.config.js b/nuxt.config.js
index 0a1816d13..098d00987 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -60,5 +60,5 @@ export default defineNuxtConfig({
             contextPath: baseUrl
         }
     },
-    css: ['@/assets/styles/primevue.css', '/node_modules/primeflex/primeflex.css', '/node_modules/primeicons/primeicons.css', '@/assets/styles/flags.css', '@/components/lib/colorpicker/ColorPicker.css']
+    css: ['/node_modules/primeflex/primeflex.css', '/node_modules/primeicons/primeicons.css', '@/assets/styles/flags.css']
 });
diff --git a/package-lock.json b/package-lock.json
index 47f0f2a6a..0d3a10445 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,8 @@
             },
             "devDependencies": {
                 "@babel/eslint-parser": "^7.18.9",
+                "@babel/preset-env": "^7.21.5",
+                "@rollup/plugin-babel": "^6.0.3",
                 "@stackblitz/sdk": "^1.8.2",
                 "@vitejs/plugin-vue": "4.1.0",
                 "@vitest/coverage-istanbul": "^0.29.8",
@@ -201,21 +203,21 @@
             }
         },
         "node_modules/@babel/code-frame": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
-            "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
+            "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
             "dev": true,
             "dependencies": {
-                "@babel/highlight": "^7.18.6"
+                "@babel/highlight": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/compat-data": {
-            "version": "7.22.3",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.3.tgz",
-            "integrity": "sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.5.tgz",
+            "integrity": "sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
@@ -270,12 +272,12 @@
             }
         },
         "node_modules/@babel/generator": {
-            "version": "7.22.3",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.3.tgz",
-            "integrity": "sha512-C17MW4wlk//ES/CJDL51kPNwl+qiBQyN7b9SKyVp11BLGFeSPoVaHrv+MNt8jwQFhQWowW88z1eeBx3pFz9v8A==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.5.tgz",
+            "integrity": "sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.22.3",
+                "@babel/types": "^7.22.5",
                 "@jridgewell/gen-mapping": "^0.3.2",
                 "@jridgewell/trace-mapping": "^0.3.17",
                 "jsesc": "^2.5.1"
@@ -285,25 +287,37 @@
             }
         },
         "node_modules/@babel/helper-annotate-as-pure": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
-            "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+            "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.18.6"
+                "@babel/types": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
+        "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.5.tgz",
+            "integrity": "sha512-m1EP3lVOPptR+2DwD125gziZNcmoNSHGmJROKoy87loWUQyJaVXDgpmruWqDARZSmtYQ+Dl25okU8+qhVzuykw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/types": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-compilation-targets": {
-            "version": "7.22.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.1.tgz",
-            "integrity": "sha512-Rqx13UM3yVB5q0D/KwQ8+SPfX/+Rnsy1Lw1k/UwOC4KC6qrzIQoY3lYnBu5EHKBlEHHcj0M0W8ltPSkD8rqfsQ==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz",
+            "integrity": "sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==",
             "dev": true,
             "dependencies": {
-                "@babel/compat-data": "^7.22.0",
-                "@babel/helper-validator-option": "^7.21.0",
+                "@babel/compat-data": "^7.22.5",
+                "@babel/helper-validator-option": "^7.22.5",
                 "browserslist": "^4.21.3",
                 "lru-cache": "^5.1.1",
                 "semver": "^6.3.0"
@@ -316,19 +330,19 @@
             }
         },
         "node_modules/@babel/helper-create-class-features-plugin": {
-            "version": "7.22.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.1.tgz",
-            "integrity": "sha512-SowrZ9BWzYFgzUMwUmowbPSGu6CXL5MSuuCkG3bejahSpSymioPmuLdhPxNOc9MjuNGjy7M/HaXvJ8G82Lywlw==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.5.tgz",
+            "integrity": "sha512-xkb58MyOYIslxu3gKmVXmjTtUPvBU4odYzbiIQbWwLKIHCsx6UGZGX6F1IznMFVnDdirseUZopzN+ZRt8Xb33Q==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-annotate-as-pure": "^7.18.6",
-                "@babel/helper-environment-visitor": "^7.22.1",
-                "@babel/helper-function-name": "^7.21.0",
-                "@babel/helper-member-expression-to-functions": "^7.22.0",
-                "@babel/helper-optimise-call-expression": "^7.18.6",
-                "@babel/helper-replace-supers": "^7.22.1",
-                "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-                "@babel/helper-split-export-declaration": "^7.18.6",
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/helper-member-expression-to-functions": "^7.22.5",
+                "@babel/helper-optimise-call-expression": "^7.22.5",
+                "@babel/helper-replace-supers": "^7.22.5",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.5",
                 "semver": "^6.3.0"
             },
             "engines": {
@@ -338,184 +352,251 @@
                 "@babel/core": "^7.0.0"
             }
         },
+        "node_modules/@babel/helper-create-regexp-features-plugin": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.5.tgz",
+            "integrity": "sha512-1VpEFOIbMRaXyDeUwUfmTIxExLwQ+zkW+Bh5zXpApA3oQedBx9v/updixWxnx/bZpKw7u8VxWjb/qWpIcmPq8A==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "regexpu-core": "^5.3.1",
+                "semver": "^6.3.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/helper-define-polyfill-provider": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.0.tgz",
+            "integrity": "sha512-RnanLx5ETe6aybRi1cO/edaRH+bNYWaryCEmjDDYyNr4wnSzyOp8T0dWipmqVHKEY3AbVKUom50AKSlj1zmKbg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-compilation-targets": "^7.17.7",
+                "@babel/helper-plugin-utils": "^7.16.7",
+                "debug": "^4.1.1",
+                "lodash.debounce": "^4.0.8",
+                "resolve": "^1.14.2",
+                "semver": "^6.1.2"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.4.0-0"
+            }
+        },
         "node_modules/@babel/helper-environment-visitor": {
-            "version": "7.22.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.1.tgz",
-            "integrity": "sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+            "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-function-name": {
-            "version": "7.21.0",
-            "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
-            "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+            "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
             "dev": true,
             "dependencies": {
-                "@babel/template": "^7.20.7",
-                "@babel/types": "^7.21.0"
+                "@babel/template": "^7.22.5",
+                "@babel/types": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-hoist-variables": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
-            "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+            "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.18.6"
+                "@babel/types": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-member-expression-to-functions": {
-            "version": "7.22.3",
-            "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.3.tgz",
-            "integrity": "sha512-Gl7sK04b/2WOb6OPVeNy9eFKeD3L6++CzL3ykPOWqTn08xgYYK0wz4TUh2feIImDXxcVW3/9WQ1NMKY66/jfZA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz",
+            "integrity": "sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.22.3"
+                "@babel/types": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-module-imports": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
-            "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
+            "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.21.4"
+                "@babel/types": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-module-transforms": {
-            "version": "7.22.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.1.tgz",
-            "integrity": "sha512-dxAe9E7ySDGbQdCVOY/4+UcD8M9ZFqZcZhSPsPacvCG4M+9lwtDDQfI2EoaSvmf7W/8yCBkGU0m7Pvt1ru3UZw==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.5.tgz",
+            "integrity": "sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-environment-visitor": "^7.22.1",
-                "@babel/helper-module-imports": "^7.21.4",
-                "@babel/helper-simple-access": "^7.21.5",
-                "@babel/helper-split-export-declaration": "^7.18.6",
-                "@babel/helper-validator-identifier": "^7.19.1",
-                "@babel/template": "^7.21.9",
-                "@babel/traverse": "^7.22.1",
-                "@babel/types": "^7.22.0"
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-module-imports": "^7.22.5",
+                "@babel/helper-simple-access": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.5",
+                "@babel/helper-validator-identifier": "^7.22.5",
+                "@babel/template": "^7.22.5",
+                "@babel/traverse": "^7.22.5",
+                "@babel/types": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-optimise-call-expression": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz",
-            "integrity": "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+            "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.18.6"
+                "@babel/types": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-plugin-utils": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz",
-            "integrity": "sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+            "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
             }
         },
-        "node_modules/@babel/helper-replace-supers": {
-            "version": "7.22.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.1.tgz",
-            "integrity": "sha512-ut4qrkE4AuSfrwHSps51ekR1ZY/ygrP1tp0WFm8oVq6nzc/hvfV/22JylndIbsf2U2M9LOMwiSddr6y+78j+OQ==",
+        "node_modules/@babel/helper-remap-async-to-generator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.5.tgz",
+            "integrity": "sha512-cU0Sq1Rf4Z55fgz7haOakIyM7+x/uCFwXpLPaeRzfoUtAEAuUZjZvFPjL/rk5rW693dIgn2hng1W7xbT7lWT4g==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-environment-visitor": "^7.22.1",
-                "@babel/helper-member-expression-to-functions": "^7.22.0",
-                "@babel/helper-optimise-call-expression": "^7.18.6",
-                "@babel/template": "^7.21.9",
-                "@babel/traverse": "^7.22.1",
-                "@babel/types": "^7.22.0"
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-wrap-function": "^7.22.5",
+                "@babel/types": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/helper-replace-supers": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.5.tgz",
+            "integrity": "sha512-aLdNM5I3kdI/V9xGNyKSF3X/gTyMUBohTZ+/3QdQKAA9vxIiy12E+8E2HoOP1/DjeqU+g6as35QHJNMDDYpuCg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-member-expression-to-functions": "^7.22.5",
+                "@babel/helper-optimise-call-expression": "^7.22.5",
+                "@babel/template": "^7.22.5",
+                "@babel/traverse": "^7.22.5",
+                "@babel/types": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-simple-access": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz",
-            "integrity": "sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+            "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.21.5"
+                "@babel/types": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-skip-transparent-expression-wrappers": {
-            "version": "7.20.0",
-            "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
-            "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+            "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.20.0"
+                "@babel/types": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-split-export-declaration": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
-            "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz",
+            "integrity": "sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==",
             "dev": true,
             "dependencies": {
-                "@babel/types": "^7.18.6"
+                "@babel/types": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-string-parser": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
-            "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+            "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-validator-identifier": {
-            "version": "7.19.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-            "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+            "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/helper-validator-option": {
-            "version": "7.21.0",
-            "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
-            "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
+            "integrity": "sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==",
             "dev": true,
             "engines": {
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@babel/helper-wrap-function": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.5.tgz",
+            "integrity": "sha512-bYqLIBSEshYcYQyfks8ewYA8S30yaGSeRslcvKMvoUk6HHPySbxHq9YRi6ghhzEU+yhQv9bP/jXnygkStOcqZw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/template": "^7.22.5",
+                "@babel/traverse": "^7.22.5",
+                "@babel/types": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@babel/helpers": {
             "version": "7.22.3",
             "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.3.tgz",
@@ -531,12 +612,12 @@
             }
         },
         "node_modules/@babel/highlight": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
-            "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
+            "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-validator-identifier": "^7.18.6",
+                "@babel/helper-validator-identifier": "^7.22.5",
                 "chalk": "^2.0.0",
                 "js-tokens": "^4.0.0"
             },
@@ -545,9 +626,9 @@
             }
         },
         "node_modules/@babel/parser": {
-            "version": "7.22.4",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.4.tgz",
-            "integrity": "sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
+            "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==",
             "bin": {
                 "parser": "bin/babel-parser.js"
             },
@@ -555,6 +636,183 @@
                 "node": ">=6.0.0"
             }
         },
+        "node_modules/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz",
+            "integrity": "sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.5.tgz",
+            "integrity": "sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+                "@babel/plugin-transform-optional-chaining": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.13.0"
+            }
+        },
+        "node_modules/@babel/plugin-proposal-private-property-in-object": {
+            "version": "7.21.0-placeholder-for-preset-env.2",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+            "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+            "dev": true,
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-proposal-unicode-property-regex": {
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
+            "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+                "@babel/helper-plugin-utils": "^7.18.6"
+            },
+            "engines": {
+                "node": ">=4"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-async-generators": {
+            "version": "7.8.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+            "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-class-properties": {
+            "version": "7.12.13",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+            "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.12.13"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-class-static-block": {
+            "version": "7.14.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+            "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-dynamic-import": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+            "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-export-namespace-from": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+            "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.3"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-import-assertions": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.22.5.tgz",
+            "integrity": "sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-import-attributes": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.5.tgz",
+            "integrity": "sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-import-meta": {
+            "version": "7.10.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+            "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.10.4"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-json-strings": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+            "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
         "node_modules/@babel/plugin-syntax-jsx": {
             "version": "7.21.4",
             "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz",
@@ -570,6 +828,108 @@
                 "@babel/core": "^7.0.0-0"
             }
         },
+        "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
+            "version": "7.10.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+            "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.10.4"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-nullish-coalescing-operator": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+            "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-numeric-separator": {
+            "version": "7.10.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+            "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.10.4"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-object-rest-spread": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+            "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-optional-catch-binding": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+            "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-optional-chaining": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+            "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-private-property-in-object": {
+            "version": "7.14.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+            "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-syntax-top-level-await": {
+            "version": "7.14.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+            "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
         "node_modules/@babel/plugin-syntax-typescript": {
             "version": "7.21.4",
             "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.21.4.tgz",
@@ -585,6 +945,731 @@
                 "@babel/core": "^7.0.0-0"
             }
         },
+        "node_modules/@babel/plugin-syntax-unicode-sets-regex": {
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+            "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+                "@babel/helper-plugin-utils": "^7.18.6"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-arrow-functions": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.22.5.tgz",
+            "integrity": "sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-async-generator-functions": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.5.tgz",
+            "integrity": "sha512-gGOEvFzm3fWoyD5uZq7vVTD57pPJ3PczPUD/xCFGjzBpUosnklmXyKnGQbbbGs1NPNPskFex0j93yKbHt0cHyg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-remap-async-to-generator": "^7.22.5",
+                "@babel/plugin-syntax-async-generators": "^7.8.4"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-async-to-generator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz",
+            "integrity": "sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-remap-async-to-generator": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-block-scoped-functions": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.22.5.tgz",
+            "integrity": "sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-block-scoping": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.5.tgz",
+            "integrity": "sha512-EcACl1i5fSQ6bt+YGuU/XGCeZKStLmyVGytWkpyhCLeQVA0eu6Wtiw92V+I1T/hnezUv7j74dA/Ro69gWcU+hg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-class-properties": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.5.tgz",
+            "integrity": "sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-create-class-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-class-static-block": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz",
+            "integrity": "sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-create-class-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-class-static-block": "^7.14.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.12.0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-classes": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.5.tgz",
+            "integrity": "sha512-2edQhLfibpWpsVBx2n/GKOz6JdGQvLruZQfGr9l1qes2KQaWswjBzhQF7UDUZMNaMMQeYnQzxwOMPsbYF7wqPQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-compilation-targets": "^7.22.5",
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/helper-optimise-call-expression": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-replace-supers": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.5",
+                "globals": "^11.1.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-computed-properties": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz",
+            "integrity": "sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/template": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-destructuring": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.5.tgz",
+            "integrity": "sha512-GfqcFuGW8vnEqTUBM7UtPd5A4q797LTvvwKxXTgRsFjoqaJiEg9deBG6kWeQYkVEL569NpnmpC0Pkr/8BLKGnQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-dotall-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz",
+            "integrity": "sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-duplicate-keys": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.22.5.tgz",
+            "integrity": "sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-dynamic-import": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz",
+            "integrity": "sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-exponentiation-operator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.22.5.tgz",
+            "integrity": "sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-export-namespace-from": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz",
+            "integrity": "sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-for-of": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.5.tgz",
+            "integrity": "sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-function-name": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.22.5.tgz",
+            "integrity": "sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-compilation-targets": "^7.22.5",
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-json-strings": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz",
+            "integrity": "sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-json-strings": "^7.8.3"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-literals": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.22.5.tgz",
+            "integrity": "sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-logical-assignment-operators": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz",
+            "integrity": "sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-member-expression-literals": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.22.5.tgz",
+            "integrity": "sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-modules-amd": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz",
+            "integrity": "sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-module-transforms": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-modules-commonjs": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz",
+            "integrity": "sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-module-transforms": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-simple-access": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-modules-systemjs": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz",
+            "integrity": "sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-hoist-variables": "^7.22.5",
+                "@babel/helper-module-transforms": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-validator-identifier": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-modules-umd": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.22.5.tgz",
+            "integrity": "sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-module-transforms": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-named-capturing-groups-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
+            "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-new-target": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.5.tgz",
+            "integrity": "sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-nullish-coalescing-operator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz",
+            "integrity": "sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-numeric-separator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz",
+            "integrity": "sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-object-rest-spread": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz",
+            "integrity": "sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/compat-data": "^7.22.5",
+                "@babel/helper-compilation-targets": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+                "@babel/plugin-transform-parameters": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-object-super": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.22.5.tgz",
+            "integrity": "sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-replace-supers": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-optional-catch-binding": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz",
+            "integrity": "sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-optional-chaining": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.5.tgz",
+            "integrity": "sha512-AconbMKOMkyG+xCng2JogMCDcqW8wedQAqpVIL4cOSescZ7+iW8utC6YDZLMCSUIReEA733gzRSaOSXMAt/4WQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+                "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-parameters": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz",
+            "integrity": "sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-private-methods": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.5.tgz",
+            "integrity": "sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-create-class-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-private-property-in-object": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz",
+            "integrity": "sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-create-class-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-property-literals": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.22.5.tgz",
+            "integrity": "sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-regenerator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.5.tgz",
+            "integrity": "sha512-rR7KePOE7gfEtNTh9Qw+iO3Q/e4DEsoQ+hdvM6QUDH7JRJ5qxq5AA52ZzBWbI5i9lfNuvySgOGP8ZN7LAmaiPw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "regenerator-transform": "^0.15.1"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-reserved-words": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.22.5.tgz",
+            "integrity": "sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-shorthand-properties": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.22.5.tgz",
+            "integrity": "sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-spread": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.22.5.tgz",
+            "integrity": "sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-sticky-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.22.5.tgz",
+            "integrity": "sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-template-literals": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.22.5.tgz",
+            "integrity": "sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-typeof-symbol": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.22.5.tgz",
+            "integrity": "sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
         "node_modules/@babel/plugin-transform-typescript": {
             "version": "7.22.3",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.3.tgz",
@@ -603,6 +1688,197 @@
                 "@babel/core": "^7.0.0-0"
             }
         },
+        "node_modules/@babel/plugin-transform-unicode-escapes": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.5.tgz",
+            "integrity": "sha512-biEmVg1IYB/raUO5wT1tgfacCef15Fbzhkx493D3urBI++6hpJ+RFG4SrWMn0NEZLfvilqKf3QDrRVZHo08FYg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-unicode-property-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.5.tgz",
+            "integrity": "sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-unicode-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.22.5.tgz",
+            "integrity": "sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/plugin-transform-unicode-sets-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.5.tgz",
+            "integrity": "sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0"
+            }
+        },
+        "node_modules/@babel/preset-env": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.5.tgz",
+            "integrity": "sha512-fj06hw89dpiZzGZtxn+QybifF07nNiZjZ7sazs2aVDcysAZVGjW7+7iFYxg6GLNM47R/thYfLdrXc+2f11Vi9A==",
+            "dev": true,
+            "dependencies": {
+                "@babel/compat-data": "^7.22.5",
+                "@babel/helper-compilation-targets": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-validator-option": "^7.22.5",
+                "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.22.5",
+                "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.22.5",
+                "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+                "@babel/plugin-syntax-async-generators": "^7.8.4",
+                "@babel/plugin-syntax-class-properties": "^7.12.13",
+                "@babel/plugin-syntax-class-static-block": "^7.14.5",
+                "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+                "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+                "@babel/plugin-syntax-import-assertions": "^7.22.5",
+                "@babel/plugin-syntax-import-attributes": "^7.22.5",
+                "@babel/plugin-syntax-import-meta": "^7.10.4",
+                "@babel/plugin-syntax-json-strings": "^7.8.3",
+                "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+                "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+                "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+                "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+                "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+                "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+                "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+                "@babel/plugin-syntax-top-level-await": "^7.14.5",
+                "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+                "@babel/plugin-transform-arrow-functions": "^7.22.5",
+                "@babel/plugin-transform-async-generator-functions": "^7.22.5",
+                "@babel/plugin-transform-async-to-generator": "^7.22.5",
+                "@babel/plugin-transform-block-scoped-functions": "^7.22.5",
+                "@babel/plugin-transform-block-scoping": "^7.22.5",
+                "@babel/plugin-transform-class-properties": "^7.22.5",
+                "@babel/plugin-transform-class-static-block": "^7.22.5",
+                "@babel/plugin-transform-classes": "^7.22.5",
+                "@babel/plugin-transform-computed-properties": "^7.22.5",
+                "@babel/plugin-transform-destructuring": "^7.22.5",
+                "@babel/plugin-transform-dotall-regex": "^7.22.5",
+                "@babel/plugin-transform-duplicate-keys": "^7.22.5",
+                "@babel/plugin-transform-dynamic-import": "^7.22.5",
+                "@babel/plugin-transform-exponentiation-operator": "^7.22.5",
+                "@babel/plugin-transform-export-namespace-from": "^7.22.5",
+                "@babel/plugin-transform-for-of": "^7.22.5",
+                "@babel/plugin-transform-function-name": "^7.22.5",
+                "@babel/plugin-transform-json-strings": "^7.22.5",
+                "@babel/plugin-transform-literals": "^7.22.5",
+                "@babel/plugin-transform-logical-assignment-operators": "^7.22.5",
+                "@babel/plugin-transform-member-expression-literals": "^7.22.5",
+                "@babel/plugin-transform-modules-amd": "^7.22.5",
+                "@babel/plugin-transform-modules-commonjs": "^7.22.5",
+                "@babel/plugin-transform-modules-systemjs": "^7.22.5",
+                "@babel/plugin-transform-modules-umd": "^7.22.5",
+                "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
+                "@babel/plugin-transform-new-target": "^7.22.5",
+                "@babel/plugin-transform-nullish-coalescing-operator": "^7.22.5",
+                "@babel/plugin-transform-numeric-separator": "^7.22.5",
+                "@babel/plugin-transform-object-rest-spread": "^7.22.5",
+                "@babel/plugin-transform-object-super": "^7.22.5",
+                "@babel/plugin-transform-optional-catch-binding": "^7.22.5",
+                "@babel/plugin-transform-optional-chaining": "^7.22.5",
+                "@babel/plugin-transform-parameters": "^7.22.5",
+                "@babel/plugin-transform-private-methods": "^7.22.5",
+                "@babel/plugin-transform-private-property-in-object": "^7.22.5",
+                "@babel/plugin-transform-property-literals": "^7.22.5",
+                "@babel/plugin-transform-regenerator": "^7.22.5",
+                "@babel/plugin-transform-reserved-words": "^7.22.5",
+                "@babel/plugin-transform-shorthand-properties": "^7.22.5",
+                "@babel/plugin-transform-spread": "^7.22.5",
+                "@babel/plugin-transform-sticky-regex": "^7.22.5",
+                "@babel/plugin-transform-template-literals": "^7.22.5",
+                "@babel/plugin-transform-typeof-symbol": "^7.22.5",
+                "@babel/plugin-transform-unicode-escapes": "^7.22.5",
+                "@babel/plugin-transform-unicode-property-regex": "^7.22.5",
+                "@babel/plugin-transform-unicode-regex": "^7.22.5",
+                "@babel/plugin-transform-unicode-sets-regex": "^7.22.5",
+                "@babel/preset-modules": "^0.1.5",
+                "@babel/types": "^7.22.5",
+                "babel-plugin-polyfill-corejs2": "^0.4.3",
+                "babel-plugin-polyfill-corejs3": "^0.8.1",
+                "babel-plugin-polyfill-regenerator": "^0.5.0",
+                "core-js-compat": "^3.30.2",
+                "semver": "^6.3.0"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/preset-modules": {
+            "version": "0.1.5",
+            "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
+            "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-plugin-utils": "^7.0.0",
+                "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+                "@babel/plugin-transform-dotall-regex": "^7.4.4",
+                "@babel/types": "^7.4.4",
+                "esutils": "^2.0.2"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/@babel/regjsgen": {
+            "version": "0.8.0",
+            "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+            "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
+            "dev": true
+        },
+        "node_modules/@babel/runtime": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
+            "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+            "dev": true,
+            "dependencies": {
+                "regenerator-runtime": "^0.13.11"
+            },
+            "engines": {
+                "node": ">=6.9.0"
+            }
+        },
         "node_modules/@babel/standalone": {
             "version": "7.22.4",
             "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.22.4.tgz",
@@ -613,33 +1889,33 @@
             }
         },
         "node_modules/@babel/template": {
-            "version": "7.21.9",
-            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.21.9.tgz",
-            "integrity": "sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+            "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
             "dev": true,
             "dependencies": {
-                "@babel/code-frame": "^7.21.4",
-                "@babel/parser": "^7.21.9",
-                "@babel/types": "^7.21.5"
+                "@babel/code-frame": "^7.22.5",
+                "@babel/parser": "^7.22.5",
+                "@babel/types": "^7.22.5"
             },
             "engines": {
                 "node": ">=6.9.0"
             }
         },
         "node_modules/@babel/traverse": {
-            "version": "7.22.4",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.4.tgz",
-            "integrity": "sha512-Tn1pDsjIcI+JcLKq1AVlZEr4226gpuAQTsLMorsYg9tuS/kG7nuwwJ4AB8jfQuEgb/COBwR/DqJxmoiYFu5/rQ==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz",
+            "integrity": "sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==",
             "dev": true,
             "dependencies": {
-                "@babel/code-frame": "^7.21.4",
-                "@babel/generator": "^7.22.3",
-                "@babel/helper-environment-visitor": "^7.22.1",
-                "@babel/helper-function-name": "^7.21.0",
-                "@babel/helper-hoist-variables": "^7.18.6",
-                "@babel/helper-split-export-declaration": "^7.18.6",
-                "@babel/parser": "^7.22.4",
-                "@babel/types": "^7.22.4",
+                "@babel/code-frame": "^7.22.5",
+                "@babel/generator": "^7.22.5",
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/helper-hoist-variables": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.5",
+                "@babel/parser": "^7.22.5",
+                "@babel/types": "^7.22.5",
                 "debug": "^4.1.0",
                 "globals": "^11.1.0"
             },
@@ -648,13 +1924,13 @@
             }
         },
         "node_modules/@babel/types": {
-            "version": "7.22.4",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.4.tgz",
-            "integrity": "sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+            "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
             "dev": true,
             "dependencies": {
-                "@babel/helper-string-parser": "^7.21.5",
-                "@babel/helper-validator-identifier": "^7.19.1",
+                "@babel/helper-string-parser": "^7.22.5",
+                "@babel/helper-validator-identifier": "^7.22.5",
                 "to-fast-properties": "^2.0.0"
             },
             "engines": {
@@ -1978,6 +3254,32 @@
                 }
             }
         },
+        "node_modules/@rollup/plugin-babel": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.0.3.tgz",
+            "integrity": "sha512-fKImZKppa1A/gX73eg4JGo+8kQr/q1HBQaCGKECZ0v4YBBv3lFqi14+7xyApECzvkLTHCifx+7ntcrvtBIRcpg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-module-imports": "^7.18.6",
+                "@rollup/pluginutils": "^5.0.1"
+            },
+            "engines": {
+                "node": ">=14.0.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0",
+                "@types/babel__core": "^7.1.9",
+                "rollup": "^1.20.0||^2.0.0||^3.0.0"
+            },
+            "peerDependenciesMeta": {
+                "@types/babel__core": {
+                    "optional": true
+                },
+                "rollup": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/@rollup/plugin-commonjs": {
             "version": "24.1.0",
             "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.1.0.tgz",
@@ -3563,6 +4865,45 @@
                 "postcss": "^8.1.0"
             }
         },
+        "node_modules/babel-plugin-polyfill-corejs2": {
+            "version": "0.4.3",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz",
+            "integrity": "sha512-bM3gHc337Dta490gg+/AseNB9L4YLHxq1nGKZZSHbhXv4aTYU2MD2cjza1Ru4S6975YLTaL1K8uJf6ukJhhmtw==",
+            "dev": true,
+            "dependencies": {
+                "@babel/compat-data": "^7.17.7",
+                "@babel/helper-define-polyfill-provider": "^0.4.0",
+                "semver": "^6.1.1"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/babel-plugin-polyfill-corejs3": {
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.1.tgz",
+            "integrity": "sha512-ikFrZITKg1xH6pLND8zT14UPgjKHiGLqex7rGEZCH2EvhsneJaJPemmpQaIZV5AL03II+lXylw3UmddDK8RU5Q==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-define-polyfill-provider": "^0.4.0",
+                "core-js-compat": "^3.30.1"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
+        "node_modules/babel-plugin-polyfill-regenerator": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.0.tgz",
+            "integrity": "sha512-hDJtKjMLVa7Z+LwnTCxoDLQj6wdc+B8dun7ayF2fYieI6OzfuvcLMB32ihJZ4UhCBwNYGl5bg/x/P9cMdnkc2g==",
+            "dev": true,
+            "dependencies": {
+                "@babel/helper-define-polyfill-provider": "^0.4.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
         "node_modules/bach": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/bach/-/bach-1.2.0.tgz",
@@ -4806,6 +6147,19 @@
                 "is-plain-object": "^5.0.0"
             }
         },
+        "node_modules/core-js-compat": {
+            "version": "3.31.0",
+            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.31.0.tgz",
+            "integrity": "sha512-hM7YCu1cU6Opx7MXNu0NuumM0ezNeAeRKadixyiQELWY3vT3De9S4J5ZBMraWV2vZnrE1Cirl0GtFtDtMUXzPw==",
+            "dev": true,
+            "dependencies": {
+                "browserslist": "^4.21.5"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/core-js"
+            }
+        },
         "node_modules/core-util-is": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -12674,6 +14028,39 @@
                 "node": ">=4"
             }
         },
+        "node_modules/regenerate": {
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+            "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+            "dev": true
+        },
+        "node_modules/regenerate-unicode-properties": {
+            "version": "10.1.0",
+            "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+            "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
+            "dev": true,
+            "dependencies": {
+                "regenerate": "^1.4.2"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/regenerator-runtime": {
+            "version": "0.13.11",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+            "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+            "dev": true
+        },
+        "node_modules/regenerator-transform": {
+            "version": "0.15.1",
+            "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz",
+            "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==",
+            "dev": true,
+            "dependencies": {
+                "@babel/runtime": "^7.8.4"
+            }
+        },
         "node_modules/regex-not": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -12741,6 +14128,44 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/regexpu-core": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+            "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+            "dev": true,
+            "dependencies": {
+                "@babel/regjsgen": "^0.8.0",
+                "regenerate": "^1.4.2",
+                "regenerate-unicode-properties": "^10.1.0",
+                "regjsparser": "^0.9.1",
+                "unicode-match-property-ecmascript": "^2.0.0",
+                "unicode-match-property-value-ecmascript": "^2.1.0"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/regjsparser": {
+            "version": "0.9.1",
+            "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+            "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+            "dev": true,
+            "dependencies": {
+                "jsesc": "~0.5.0"
+            },
+            "bin": {
+                "regjsparser": "bin/parser"
+            }
+        },
+        "node_modules/regjsparser/node_modules/jsesc": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+            "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+            "dev": true,
+            "bin": {
+                "jsesc": "bin/jsesc"
+            }
+        },
         "node_modules/remove-bom-buffer": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz",
@@ -15256,6 +16681,46 @@
                 "url": "https://github.com/sponsors/harlan-zw"
             }
         },
+        "node_modules/unicode-canonical-property-names-ecmascript": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+            "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+            "dev": true,
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/unicode-match-property-ecmascript": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+            "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+            "dev": true,
+            "dependencies": {
+                "unicode-canonical-property-names-ecmascript": "^2.0.0",
+                "unicode-property-aliases-ecmascript": "^2.0.0"
+            },
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/unicode-match-property-value-ecmascript": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+            "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
+            "dev": true,
+            "engines": {
+                "node": ">=4"
+            }
+        },
+        "node_modules/unicode-property-aliases-ecmascript": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+            "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+            "dev": true,
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/unimport": {
             "version": "3.0.7",
             "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.0.7.tgz",
@@ -17378,18 +18843,18 @@
             }
         },
         "@babel/code-frame": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
-            "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.22.5.tgz",
+            "integrity": "sha512-Xmwn266vad+6DAqEB2A6V/CcZVp62BbwVmcOJc2RPuwih1kw02TjQvWVWlcKGbBPd+8/0V5DEkOcizRGYsspYQ==",
             "dev": true,
             "requires": {
-                "@babel/highlight": "^7.18.6"
+                "@babel/highlight": "^7.22.5"
             }
         },
         "@babel/compat-data": {
-            "version": "7.22.3",
-            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.3.tgz",
-            "integrity": "sha512-aNtko9OPOwVESUFp3MZfD8Uzxl7JzSeJpd7npIoxCasU37PFbAQRpKglkaKwlHOyeJdrREpo8TW8ldrkYWwvIQ==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.22.5.tgz",
+            "integrity": "sha512-4Jc/YuIaYqKnDDz892kPIledykKg12Aw1PYX5i/TY28anJtacvM1Rrr8wbieB9GfEJwlzqT0hUEao0CxEebiDA==",
             "dev": true
         },
         "@babel/core": {
@@ -17427,189 +18892,247 @@
             }
         },
         "@babel/generator": {
-            "version": "7.22.3",
-            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.3.tgz",
-            "integrity": "sha512-C17MW4wlk//ES/CJDL51kPNwl+qiBQyN7b9SKyVp11BLGFeSPoVaHrv+MNt8jwQFhQWowW88z1eeBx3pFz9v8A==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.22.5.tgz",
+            "integrity": "sha512-+lcUbnTRhd0jOewtFSedLyiPsD5tswKkbgcezOqqWFUVNEwoUTlpPOBmvhG7OXWLR4jMdv0czPGH5XbflnD1EA==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.22.3",
+                "@babel/types": "^7.22.5",
                 "@jridgewell/gen-mapping": "^0.3.2",
                 "@jridgewell/trace-mapping": "^0.3.17",
                 "jsesc": "^2.5.1"
             }
         },
         "@babel/helper-annotate-as-pure": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz",
-            "integrity": "sha512-duORpUiYrEpzKIop6iNbjnwKLAKnJ47csTyRACyEmWj0QdUrm5aqNJGHSSEQSUAvNW0ojX0dOmK9dZduvkfeXA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz",
+            "integrity": "sha512-LvBTxu8bQSQkcyKOU+a1btnNFQ1dMAd0R6PyW3arXes06F6QLWLIrd681bxRPIXlrMGR3XYnW9JyML7dP3qgxg==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.18.6"
+                "@babel/types": "^7.22.5"
+            }
+        },
+        "@babel/helper-builder-binary-assignment-operator-visitor": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.5.tgz",
+            "integrity": "sha512-m1EP3lVOPptR+2DwD125gziZNcmoNSHGmJROKoy87loWUQyJaVXDgpmruWqDARZSmtYQ+Dl25okU8+qhVzuykw==",
+            "dev": true,
+            "requires": {
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-compilation-targets": {
-            "version": "7.22.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.1.tgz",
-            "integrity": "sha512-Rqx13UM3yVB5q0D/KwQ8+SPfX/+Rnsy1Lw1k/UwOC4KC6qrzIQoY3lYnBu5EHKBlEHHcj0M0W8ltPSkD8rqfsQ==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.22.5.tgz",
+            "integrity": "sha512-Ji+ywpHeuqxB8WDxraCiqR0xfhYjiDE/e6k7FuIaANnoOFxAHskHChz4vA1mJC9Lbm01s1PVAGhQY4FUKSkGZw==",
             "dev": true,
             "requires": {
-                "@babel/compat-data": "^7.22.0",
-                "@babel/helper-validator-option": "^7.21.0",
+                "@babel/compat-data": "^7.22.5",
+                "@babel/helper-validator-option": "^7.22.5",
                 "browserslist": "^4.21.3",
                 "lru-cache": "^5.1.1",
                 "semver": "^6.3.0"
             }
         },
         "@babel/helper-create-class-features-plugin": {
-            "version": "7.22.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.1.tgz",
-            "integrity": "sha512-SowrZ9BWzYFgzUMwUmowbPSGu6CXL5MSuuCkG3bejahSpSymioPmuLdhPxNOc9MjuNGjy7M/HaXvJ8G82Lywlw==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.22.5.tgz",
+            "integrity": "sha512-xkb58MyOYIslxu3gKmVXmjTtUPvBU4odYzbiIQbWwLKIHCsx6UGZGX6F1IznMFVnDdirseUZopzN+ZRt8Xb33Q==",
             "dev": true,
             "requires": {
-                "@babel/helper-annotate-as-pure": "^7.18.6",
-                "@babel/helper-environment-visitor": "^7.22.1",
-                "@babel/helper-function-name": "^7.21.0",
-                "@babel/helper-member-expression-to-functions": "^7.22.0",
-                "@babel/helper-optimise-call-expression": "^7.18.6",
-                "@babel/helper-replace-supers": "^7.22.1",
-                "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
-                "@babel/helper-split-export-declaration": "^7.18.6",
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/helper-member-expression-to-functions": "^7.22.5",
+                "@babel/helper-optimise-call-expression": "^7.22.5",
+                "@babel/helper-replace-supers": "^7.22.5",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.5",
                 "semver": "^6.3.0"
             }
         },
+        "@babel/helper-create-regexp-features-plugin": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.5.tgz",
+            "integrity": "sha512-1VpEFOIbMRaXyDeUwUfmTIxExLwQ+zkW+Bh5zXpApA3oQedBx9v/updixWxnx/bZpKw7u8VxWjb/qWpIcmPq8A==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "regexpu-core": "^5.3.1",
+                "semver": "^6.3.0"
+            }
+        },
+        "@babel/helper-define-polyfill-provider": {
+            "version": "0.4.0",
+            "resolved": "https://registry.npmjs.org/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.0.tgz",
+            "integrity": "sha512-RnanLx5ETe6aybRi1cO/edaRH+bNYWaryCEmjDDYyNr4wnSzyOp8T0dWipmqVHKEY3AbVKUom50AKSlj1zmKbg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-compilation-targets": "^7.17.7",
+                "@babel/helper-plugin-utils": "^7.16.7",
+                "debug": "^4.1.1",
+                "lodash.debounce": "^4.0.8",
+                "resolve": "^1.14.2",
+                "semver": "^6.1.2"
+            }
+        },
         "@babel/helper-environment-visitor": {
-            "version": "7.22.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.1.tgz",
-            "integrity": "sha512-Z2tgopurB/kTbidvzeBrc2To3PUP/9i5MUe+fU6QJCQDyPwSH2oRapkLw3KGECDYSjhQZCNxEvNvZlLw8JjGwA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz",
+            "integrity": "sha512-XGmhECfVA/5sAt+H+xpSg0mfrHq6FzNr9Oxh7PSEBBRUb/mL7Kz3NICXb194rCqAEdxkhPT1a88teizAFyvk8Q==",
             "dev": true
         },
         "@babel/helper-function-name": {
-            "version": "7.21.0",
-            "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
-            "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.22.5.tgz",
+            "integrity": "sha512-wtHSq6jMRE3uF2otvfuD3DIvVhOsSNshQl0Qrd7qC9oQJzHvOL4qQXlQn2916+CXGywIjpGuIkoyZRRxHPiNQQ==",
             "dev": true,
             "requires": {
-                "@babel/template": "^7.20.7",
-                "@babel/types": "^7.21.0"
+                "@babel/template": "^7.22.5",
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-hoist-variables": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.18.6.tgz",
-            "integrity": "sha512-UlJQPkFqFULIcyW5sbzgbkxn2FKRgwWiRexcuaR8RNJRy8+LLveqPjwZV/bwrLZCN0eUHD/x8D0heK1ozuoo6Q==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz",
+            "integrity": "sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.18.6"
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-member-expression-to-functions": {
-            "version": "7.22.3",
-            "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.3.tgz",
-            "integrity": "sha512-Gl7sK04b/2WOb6OPVeNy9eFKeD3L6++CzL3ykPOWqTn08xgYYK0wz4TUh2feIImDXxcVW3/9WQ1NMKY66/jfZA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.22.5.tgz",
+            "integrity": "sha512-aBiH1NKMG0H2cGZqspNvsaBe6wNGjbJjuLy29aU+eDZjSbbN53BaxlpB02xm9v34pLTZ1nIQPFYn2qMZoa5BQQ==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.22.3"
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-module-imports": {
-            "version": "7.21.4",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
-            "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.22.5.tgz",
+            "integrity": "sha512-8Dl6+HD/cKifutF5qGd/8ZJi84QeAKh+CEe1sBzz8UayBBGg1dAIJrdHOcOM5b2MpzWL2yuotJTtGjETq0qjXg==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.21.4"
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-module-transforms": {
-            "version": "7.22.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.1.tgz",
-            "integrity": "sha512-dxAe9E7ySDGbQdCVOY/4+UcD8M9ZFqZcZhSPsPacvCG4M+9lwtDDQfI2EoaSvmf7W/8yCBkGU0m7Pvt1ru3UZw==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.22.5.tgz",
+            "integrity": "sha512-+hGKDt/Ze8GFExiVHno/2dvG5IdstpzCq0y4Qc9OJ25D4q3pKfiIP/4Vp3/JvhDkLKsDK2api3q3fpIgiIF5bw==",
             "dev": true,
             "requires": {
-                "@babel/helper-environment-visitor": "^7.22.1",
-                "@babel/helper-module-imports": "^7.21.4",
-                "@babel/helper-simple-access": "^7.21.5",
-                "@babel/helper-split-export-declaration": "^7.18.6",
-                "@babel/helper-validator-identifier": "^7.19.1",
-                "@babel/template": "^7.21.9",
-                "@babel/traverse": "^7.22.1",
-                "@babel/types": "^7.22.0"
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-module-imports": "^7.22.5",
+                "@babel/helper-simple-access": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.5",
+                "@babel/helper-validator-identifier": "^7.22.5",
+                "@babel/template": "^7.22.5",
+                "@babel/traverse": "^7.22.5",
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-optimise-call-expression": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.18.6.tgz",
-            "integrity": "sha512-HP59oD9/fEHQkdcbgFCnbmgH5vIQTJbxh2yf+CdM89/glUNnuzr87Q8GIjGEnOktTROemO0Pe0iPAYbqZuOUiA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz",
+            "integrity": "sha512-HBwaojN0xFRx4yIvpwGqxiV2tUfl7401jlok564NgB9EHS1y6QT17FmKWm4ztqjeVdXLuC4fSvHc5ePpQjoTbw==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.18.6"
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-plugin-utils": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz",
-            "integrity": "sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz",
+            "integrity": "sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==",
             "dev": true
         },
-        "@babel/helper-replace-supers": {
-            "version": "7.22.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.1.tgz",
-            "integrity": "sha512-ut4qrkE4AuSfrwHSps51ekR1ZY/ygrP1tp0WFm8oVq6nzc/hvfV/22JylndIbsf2U2M9LOMwiSddr6y+78j+OQ==",
+        "@babel/helper-remap-async-to-generator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.5.tgz",
+            "integrity": "sha512-cU0Sq1Rf4Z55fgz7haOakIyM7+x/uCFwXpLPaeRzfoUtAEAuUZjZvFPjL/rk5rW693dIgn2hng1W7xbT7lWT4g==",
             "dev": true,
             "requires": {
-                "@babel/helper-environment-visitor": "^7.22.1",
-                "@babel/helper-member-expression-to-functions": "^7.22.0",
-                "@babel/helper-optimise-call-expression": "^7.18.6",
-                "@babel/template": "^7.21.9",
-                "@babel/traverse": "^7.22.1",
-                "@babel/types": "^7.22.0"
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-wrap-function": "^7.22.5",
+                "@babel/types": "^7.22.5"
+            }
+        },
+        "@babel/helper-replace-supers": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.22.5.tgz",
+            "integrity": "sha512-aLdNM5I3kdI/V9xGNyKSF3X/gTyMUBohTZ+/3QdQKAA9vxIiy12E+8E2HoOP1/DjeqU+g6as35QHJNMDDYpuCg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-member-expression-to-functions": "^7.22.5",
+                "@babel/helper-optimise-call-expression": "^7.22.5",
+                "@babel/template": "^7.22.5",
+                "@babel/traverse": "^7.22.5",
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-simple-access": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.21.5.tgz",
-            "integrity": "sha512-ENPDAMC1wAjR0uaCUwliBdiSl1KBJAVnMTzXqi64c2MG8MPR6ii4qf7bSXDqSFbr4W6W028/rf5ivoHop5/mkg==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz",
+            "integrity": "sha512-n0H99E/K+Bika3++WNL17POvo4rKWZ7lZEp1Q+fStVbUi8nxPQEBOlTmCOxW/0JsS56SKKQ+ojAe2pHKJHN35w==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.21.5"
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-skip-transparent-expression-wrappers": {
-            "version": "7.20.0",
-            "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.20.0.tgz",
-            "integrity": "sha512-5y1JYeNKfvnT8sZcK9DVRtpTbGiomYIHviSP3OQWmDPU3DeH4a1ZlT/N2lyQ5P8egjcRaT/Y9aNqUxK0WsnIIg==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz",
+            "integrity": "sha512-tK14r66JZKiC43p8Ki33yLBVJKlQDFoA8GYN67lWCDCqoL6EMMSuM9b+Iff2jHaM/RRFYl7K+iiru7hbRqNx8Q==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.20.0"
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-split-export-declaration": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz",
-            "integrity": "sha512-bde1etTx6ZyTmobl9LLMMQsaizFVZrquTEHOqKeQESMKo4PlObf+8+JA25ZsIpZhT/WEd39+vOdLXAFG/nELpA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.5.tgz",
+            "integrity": "sha512-thqK5QFghPKWLhAV321lxF95yCg2K3Ob5yw+M3VHWfdia0IkPXUtoLH8x/6Fh486QUvzhb8YOWHChTVen2/PoQ==",
             "dev": true,
             "requires": {
-                "@babel/types": "^7.18.6"
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/helper-string-parser": {
-            "version": "7.21.5",
-            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz",
-            "integrity": "sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz",
+            "integrity": "sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==",
             "dev": true
         },
         "@babel/helper-validator-identifier": {
-            "version": "7.19.1",
-            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz",
-            "integrity": "sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz",
+            "integrity": "sha512-aJXu+6lErq8ltp+JhkJUfk1MTGyuA4v7f3pA+BJ5HLfNC6nAQ0Cpi9uOquUj8Hehg0aUiHzWQbOVJGao6ztBAQ==",
             "dev": true
         },
         "@babel/helper-validator-option": {
-            "version": "7.21.0",
-            "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
-            "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.22.5.tgz",
+            "integrity": "sha512-R3oB6xlIVKUnxNUxbmgq7pKjxpru24zlimpE8WK47fACIlM0II/Hm1RS8IaOI7NgCr6LNS+jl5l75m20npAziw==",
             "dev": true
         },
+        "@babel/helper-wrap-function": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/helper-wrap-function/-/helper-wrap-function-7.22.5.tgz",
+            "integrity": "sha512-bYqLIBSEshYcYQyfks8ewYA8S30yaGSeRslcvKMvoUk6HHPySbxHq9YRi6ghhzEU+yhQv9bP/jXnygkStOcqZw==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/template": "^7.22.5",
+                "@babel/traverse": "^7.22.5",
+                "@babel/types": "^7.22.5"
+            }
+        },
         "@babel/helpers": {
             "version": "7.22.3",
             "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.22.3.tgz",
@@ -17622,20 +19145,138 @@
             }
         },
         "@babel/highlight": {
-            "version": "7.18.6",
-            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.18.6.tgz",
-            "integrity": "sha512-u7stbOuYjaPezCuLj29hNW1v64M2Md2qupEKP1fHc7WdOA3DgLh37suiSrZYY7haUB7iBeQZ9P1uiRF359do3g==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.22.5.tgz",
+            "integrity": "sha512-BSKlD1hgnedS5XRnGOljZawtag7H1yPfQp0tdNJCHoH6AZ+Pcm9VvkrK59/Yy593Ypg0zMxH2BxD1VPYUQ7UIw==",
             "dev": true,
             "requires": {
-                "@babel/helper-validator-identifier": "^7.18.6",
+                "@babel/helper-validator-identifier": "^7.22.5",
                 "chalk": "^2.0.0",
                 "js-tokens": "^4.0.0"
             }
         },
         "@babel/parser": {
-            "version": "7.22.4",
-            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.4.tgz",
-            "integrity": "sha512-VLLsx06XkEYqBtE5YGPwfSGwfrjnyPP5oiGty3S8pQLFDFLaS8VwWSIxkTXpcvr5zeYLE6+MBNl2npl/YnfofA=="
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.22.5.tgz",
+            "integrity": "sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q=="
+        },
+        "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.22.5.tgz",
+            "integrity": "sha512-NP1M5Rf+u2Gw9qfSO4ihjcTGW5zXTi36ITLd4/EoAcEhIZ0yjMqmftDNl3QC19CX7olhrjpyU454g/2W7X0jvQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.22.5.tgz",
+            "integrity": "sha512-31Bb65aZaUwqCbWMnZPduIZxCBngHFlzyN6Dq6KAJjtx+lx6ohKHubc61OomYi7XwVD4Ol0XCVz4h+pYFR048g==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+                "@babel/plugin-transform-optional-chaining": "^7.22.5"
+            }
+        },
+        "@babel/plugin-proposal-private-property-in-object": {
+            "version": "7.21.0-placeholder-for-preset-env.2",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+            "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+            "dev": true,
+            "requires": {}
+        },
+        "@babel/plugin-proposal-unicode-property-regex": {
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.18.6.tgz",
+            "integrity": "sha512-2BShG/d5yoZyXZfVePH91urL5wTG6ASZU9M4o03lKK8u8UW1y08OMttBSOADTcJrnPMpvDXRG3G8fyLh4ovs8w==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+                "@babel/helper-plugin-utils": "^7.18.6"
+            }
+        },
+        "@babel/plugin-syntax-async-generators": {
+            "version": "7.8.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-async-generators/-/plugin-syntax-async-generators-7.8.4.tgz",
+            "integrity": "sha512-tycmZxkGfZaxhMRbXlPXuVFpdWlXpir2W4AMhSJgRKzk/eDlIXOhb2LHWoLpDF7TEHylV5zNhykX6KAgHJmTNw==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
+        },
+        "@babel/plugin-syntax-class-properties": {
+            "version": "7.12.13",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-properties/-/plugin-syntax-class-properties-7.12.13.tgz",
+            "integrity": "sha512-fm4idjKla0YahUNgFNLCB0qySdsoPiZP3iQE3rky0mBUtMZ23yDJ9SJdg6dXTSDnulOVqiF3Hgr9nbXvXTQZYA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.12.13"
+            }
+        },
+        "@babel/plugin-syntax-class-static-block": {
+            "version": "7.14.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-class-static-block/-/plugin-syntax-class-static-block-7.14.5.tgz",
+            "integrity": "sha512-b+YyPmr6ldyNnM6sqYeMWE+bgJcJpO6yS4QD7ymxgH34GBPNDM/THBh8iunyvKIZztiwLH4CJZ0RxTk9emgpjw==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+            }
+        },
+        "@babel/plugin-syntax-dynamic-import": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-dynamic-import/-/plugin-syntax-dynamic-import-7.8.3.tgz",
+            "integrity": "sha512-5gdGbFon+PszYzqs83S3E5mpi7/y/8M9eC90MRTZfduQOYW76ig6SOSPNe41IG5LoP3FGBn2N0RjVDSQiS94kQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
+        },
+        "@babel/plugin-syntax-export-namespace-from": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-export-namespace-from/-/plugin-syntax-export-namespace-from-7.8.3.tgz",
+            "integrity": "sha512-MXf5laXo6c1IbEbegDmzGPwGNTsHZmEy6QGznu5Sh2UCWvueywb2ee+CCE4zQiZstxU9BMoQO9i6zUFSY0Kj0Q==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.3"
+            }
+        },
+        "@babel/plugin-syntax-import-assertions": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.22.5.tgz",
+            "integrity": "sha512-rdV97N7KqsRzeNGoWUOK6yUsWarLjE5Su/Snk9IYPU9CwkWHs4t+rTGOvffTR8XGkJMTAdLfO0xVnXm8wugIJg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-syntax-import-attributes": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.22.5.tgz",
+            "integrity": "sha512-KwvoWDeNKPETmozyFE0P2rOLqh39EoQHNjqizrI5B8Vt0ZNS7M56s7dAiAqbYfiAYOuIzIh96z3iR2ktgu3tEg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-syntax-import-meta": {
+            "version": "7.10.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz",
+            "integrity": "sha512-Yqfm+XDx0+Prh3VSeEQCPU81yC+JWZ2pDPFSS4ZdpfZhp4MkFMaDC1UqseovEKwSUpnIL7+vK+Clp7bfh0iD7g==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.10.4"
+            }
+        },
+        "@babel/plugin-syntax-json-strings": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-json-strings/-/plugin-syntax-json-strings-7.8.3.tgz",
+            "integrity": "sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
         },
         "@babel/plugin-syntax-jsx": {
             "version": "7.21.4",
@@ -17646,6 +19287,78 @@
                 "@babel/helper-plugin-utils": "^7.20.2"
             }
         },
+        "@babel/plugin-syntax-logical-assignment-operators": {
+            "version": "7.10.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
+            "integrity": "sha512-d8waShlpFDinQ5MtvGU9xDAOzKH47+FFoney2baFIoMr952hKOLp1HR7VszoZvOsV/4+RRszNY7D17ba0te0ig==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.10.4"
+            }
+        },
+        "@babel/plugin-syntax-nullish-coalescing-operator": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-nullish-coalescing-operator/-/plugin-syntax-nullish-coalescing-operator-7.8.3.tgz",
+            "integrity": "sha512-aSff4zPII1u2QD7y+F8oDsz19ew4IGEJg9SVW+bqwpwtfFleiQDMdzA/R+UlWDzfnHFCxxleFT0PMIrR36XLNQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
+        },
+        "@babel/plugin-syntax-numeric-separator": {
+            "version": "7.10.4",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.10.4.tgz",
+            "integrity": "sha512-9H6YdfkcK/uOnY/K7/aA2xpzaAgkQn37yzWUMRK7OaPOqOpGS1+n0H5hxT9AUw9EsSjPW8SVyMJwYRtWs3X3ug==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.10.4"
+            }
+        },
+        "@babel/plugin-syntax-object-rest-spread": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-object-rest-spread/-/plugin-syntax-object-rest-spread-7.8.3.tgz",
+            "integrity": "sha512-XoqMijGZb9y3y2XskN+P1wUGiVwWZ5JmoDRwx5+3GmEplNyVM2s2Dg8ILFQm8rWM48orGy5YpI5Bl8U1y7ydlA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
+        },
+        "@babel/plugin-syntax-optional-catch-binding": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-catch-binding/-/plugin-syntax-optional-catch-binding-7.8.3.tgz",
+            "integrity": "sha512-6VPD0Pc1lpTqw0aKoeRTMiB+kWhAoT24PA+ksWSBrFtl5SIRVpZlwN3NNPQjehA2E/91FV3RjLWoVTglWcSV3Q==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
+        },
+        "@babel/plugin-syntax-optional-chaining": {
+            "version": "7.8.3",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-optional-chaining/-/plugin-syntax-optional-chaining-7.8.3.tgz",
+            "integrity": "sha512-KoK9ErH1MBlCPxV0VANkXW2/dw4vlbGDrFgz8bmUsBGYkFRcbRwMh6cIJubdPrkxRwuGdtCk0v/wPTKbQgBjkg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.8.0"
+            }
+        },
+        "@babel/plugin-syntax-private-property-in-object": {
+            "version": "7.14.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-private-property-in-object/-/plugin-syntax-private-property-in-object-7.14.5.tgz",
+            "integrity": "sha512-0wVnp9dxJ72ZUJDV27ZfbSj6iHLoytYZmh3rFcxNnvsJF3ktkzLDZPy/mA17HGsaQT3/DQsWYX1f1QGWkCoVUg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+            }
+        },
+        "@babel/plugin-syntax-top-level-await": {
+            "version": "7.14.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-top-level-await/-/plugin-syntax-top-level-await-7.14.5.tgz",
+            "integrity": "sha512-hx++upLv5U1rgYfwe1xBQUhRmU41NEvpUvrp8jkrSCdvGSnM5/qdRMtylJ6PG5OFkBaHkbTAKTnd3/YyESRHFw==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.14.5"
+            }
+        },
         "@babel/plugin-syntax-typescript": {
             "version": "7.21.4",
             "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.21.4.tgz",
@@ -17655,6 +19368,461 @@
                 "@babel/helper-plugin-utils": "^7.20.2"
             }
         },
+        "@babel/plugin-syntax-unicode-sets-regex": {
+            "version": "7.18.6",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz",
+            "integrity": "sha512-727YkEAPwSIQTv5im8QHz3upqp92JTWhidIC81Tdx4VJYIte/VndKf1qKrfnnhPLiPghStWfvC/iFaMCQu7Nqg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.18.6",
+                "@babel/helper-plugin-utils": "^7.18.6"
+            }
+        },
+        "@babel/plugin-transform-arrow-functions": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.22.5.tgz",
+            "integrity": "sha512-26lTNXoVRdAnsaDXPpvCNUq+OVWEVC6bx7Vvz9rC53F2bagUWW4u4ii2+h8Fejfh7RYqPxn+libeFBBck9muEw==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-async-generator-functions": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.22.5.tgz",
+            "integrity": "sha512-gGOEvFzm3fWoyD5uZq7vVTD57pPJ3PczPUD/xCFGjzBpUosnklmXyKnGQbbbGs1NPNPskFex0j93yKbHt0cHyg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-remap-async-to-generator": "^7.22.5",
+                "@babel/plugin-syntax-async-generators": "^7.8.4"
+            }
+        },
+        "@babel/plugin-transform-async-to-generator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.22.5.tgz",
+            "integrity": "sha512-b1A8D8ZzE/VhNDoV1MSJTnpKkCG5bJo+19R4o4oy03zM7ws8yEMK755j61Dc3EyvdysbqH5BOOTquJ7ZX9C6vQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-module-imports": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-remap-async-to-generator": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-block-scoped-functions": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.22.5.tgz",
+            "integrity": "sha512-tdXZ2UdknEKQWKJP1KMNmuF5Lx3MymtMN/pvA+p/VEkhK8jVcQ1fzSy8KM9qRYhAf2/lV33hoMPKI/xaI9sADA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-block-scoping": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.22.5.tgz",
+            "integrity": "sha512-EcACl1i5fSQ6bt+YGuU/XGCeZKStLmyVGytWkpyhCLeQVA0eu6Wtiw92V+I1T/hnezUv7j74dA/Ro69gWcU+hg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-class-properties": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.22.5.tgz",
+            "integrity": "sha512-nDkQ0NfkOhPTq8YCLiWNxp1+f9fCobEjCb0n8WdbNUBc4IB5V7P1QnX9IjpSoquKrXF5SKojHleVNs2vGeHCHQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-create-class-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-class-static-block": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.22.5.tgz",
+            "integrity": "sha512-SPToJ5eYZLxlnp1UzdARpOGeC2GbHvr9d/UV0EukuVx8atktg194oe+C5BqQ8jRTkgLRVOPYeXRSBg1IlMoVRA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-create-class-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-class-static-block": "^7.14.5"
+            }
+        },
+        "@babel/plugin-transform-classes": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.22.5.tgz",
+            "integrity": "sha512-2edQhLfibpWpsVBx2n/GKOz6JdGQvLruZQfGr9l1qes2KQaWswjBzhQF7UDUZMNaMMQeYnQzxwOMPsbYF7wqPQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-compilation-targets": "^7.22.5",
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/helper-optimise-call-expression": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-replace-supers": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.5",
+                "globals": "^11.1.0"
+            }
+        },
+        "@babel/plugin-transform-computed-properties": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.22.5.tgz",
+            "integrity": "sha512-4GHWBgRf0krxPX+AaPtgBAlTgTeZmqDynokHOX7aqqAB4tHs3U2Y02zH6ETFdLZGcg9UQSD1WCmkVrE9ErHeOg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/template": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-destructuring": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.22.5.tgz",
+            "integrity": "sha512-GfqcFuGW8vnEqTUBM7UtPd5A4q797LTvvwKxXTgRsFjoqaJiEg9deBG6kWeQYkVEL569NpnmpC0Pkr/8BLKGnQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-dotall-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.22.5.tgz",
+            "integrity": "sha512-5/Yk9QxCQCl+sOIB1WelKnVRxTJDSAIxtJLL2/pqL14ZVlbH0fUQUZa/T5/UnQtBNgghR7mfB8ERBKyKPCi7Vw==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-duplicate-keys": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.22.5.tgz",
+            "integrity": "sha512-dEnYD+9BBgld5VBXHnF/DbYGp3fqGMsyxKbtD1mDyIA7AkTSpKXFhCVuj/oQVOoALfBs77DudA0BE4d5mcpmqw==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-dynamic-import": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.22.5.tgz",
+            "integrity": "sha512-0MC3ppTB1AMxd8fXjSrbPa7LT9hrImt+/fcj+Pg5YMD7UQyWp/02+JWpdnCymmsXwIx5Z+sYn1bwCn4ZJNvhqQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-dynamic-import": "^7.8.3"
+            }
+        },
+        "@babel/plugin-transform-exponentiation-operator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.22.5.tgz",
+            "integrity": "sha512-vIpJFNM/FjZ4rh1myqIya9jXwrwwgFRHPjT3DkUA9ZLHuzox8jiXkOLvwm1H+PQIP3CqfC++WPKeuDi0Sjdj1g==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-builder-binary-assignment-operator-visitor": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-export-namespace-from": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.22.5.tgz",
+            "integrity": "sha512-X4hhm7FRnPgd4nDA4b/5V280xCx6oL7Oob5+9qVS5C13Zq4bh1qq7LU0GgRU6b5dBWBvhGaXYVB4AcN6+ol6vg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-export-namespace-from": "^7.8.3"
+            }
+        },
+        "@babel/plugin-transform-for-of": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.22.5.tgz",
+            "integrity": "sha512-3kxQjX1dU9uudwSshyLeEipvrLjBCVthCgeTp6CzE/9JYrlAIaeekVxRpCWsDDfYTfRZRoCeZatCQvwo+wvK8A==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-function-name": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.22.5.tgz",
+            "integrity": "sha512-UIzQNMS0p0HHiQm3oelztj+ECwFnj+ZRV4KnguvlsD2of1whUeM6o7wGNj6oLwcDoAXQ8gEqfgC24D+VdIcevg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-compilation-targets": "^7.22.5",
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-json-strings": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.22.5.tgz",
+            "integrity": "sha512-DuCRB7fu8MyTLbEQd1ew3R85nx/88yMoqo2uPSjevMj3yoN7CDM8jkgrY0wmVxfJZyJ/B9fE1iq7EQppWQmR5A==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-json-strings": "^7.8.3"
+            }
+        },
+        "@babel/plugin-transform-literals": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-literals/-/plugin-transform-literals-7.22.5.tgz",
+            "integrity": "sha512-fTLj4D79M+mepcw3dgFBTIDYpbcB9Sm0bpm4ppXPaO+U+PKFFyV9MGRvS0gvGw62sd10kT5lRMKXAADb9pWy8g==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-logical-assignment-operators": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.22.5.tgz",
+            "integrity": "sha512-MQQOUW1KL8X0cDWfbwYP+TbVbZm16QmQXJQ+vndPtH/BoO0lOKpVoEDMI7+PskYxH+IiE0tS8xZye0qr1lGzSA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
+            }
+        },
+        "@babel/plugin-transform-member-expression-literals": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.22.5.tgz",
+            "integrity": "sha512-RZEdkNtzzYCFl9SE9ATaUMTj2hqMb4StarOJLrZRbqqU4HSBE7UlBw9WBWQiDzrJZJdUWiMTVDI6Gv/8DPvfew==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-modules-amd": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.22.5.tgz",
+            "integrity": "sha512-R+PTfLTcYEmb1+kK7FNkhQ1gP4KgjpSO6HfH9+f8/yfp2Nt3ggBjiVpRwmwTlfqZLafYKJACy36yDXlEmI9HjQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-module-transforms": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-modules-commonjs": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.22.5.tgz",
+            "integrity": "sha512-B4pzOXj+ONRmuaQTg05b3y/4DuFz3WcCNAXPLb2Q0GT0TrGKGxNKV4jwsXts+StaM0LQczZbOpj8o1DLPDJIiA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-module-transforms": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-simple-access": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-modules-systemjs": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.22.5.tgz",
+            "integrity": "sha512-emtEpoaTMsOs6Tzz+nbmcePl6AKVtS1yC4YNAeMun9U8YCsgadPNxnOPQ8GhHFB2qdx+LZu9LgoC0Lthuu05DQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-hoist-variables": "^7.22.5",
+                "@babel/helper-module-transforms": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-validator-identifier": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-modules-umd": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.22.5.tgz",
+            "integrity": "sha512-+S6kzefN/E1vkSsKx8kmQuqeQsvCKCd1fraCM7zXm4SFoggI099Tr4G8U81+5gtMdUeMQ4ipdQffbKLX0/7dBQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-module-transforms": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-named-capturing-groups-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz",
+            "integrity": "sha512-YgLLKmS3aUBhHaxp5hi1WJTgOUb/NCuDHzGT9z9WTt3YG+CPRhJs6nprbStx6DnWM4dh6gt7SU3sZodbZ08adQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-new-target": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.22.5.tgz",
+            "integrity": "sha512-AsF7K0Fx/cNKVyk3a+DW0JLo+Ua598/NxMRvxDnkpCIGFh43+h/v2xyhRUYf6oD8gE4QtL83C7zZVghMjHd+iw==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-nullish-coalescing-operator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.22.5.tgz",
+            "integrity": "sha512-6CF8g6z1dNYZ/VXok5uYkkBBICHZPiGEl7oDnAx2Mt1hlHVHOSIKWJaXHjQJA5VB43KZnXZDIexMchY4y2PGdA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3"
+            }
+        },
+        "@babel/plugin-transform-numeric-separator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.22.5.tgz",
+            "integrity": "sha512-NbslED1/6M+sXiwwtcAB/nieypGw02Ejf4KtDeMkCEpP6gWFMX1wI9WKYua+4oBneCCEmulOkRpwywypVZzs/g==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-numeric-separator": "^7.10.4"
+            }
+        },
+        "@babel/plugin-transform-object-rest-spread": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.5.tgz",
+            "integrity": "sha512-Kk3lyDmEslH9DnvCDA1s1kkd3YWQITiBOHngOtDL9Pt6BZjzqb6hiOlb8VfjiiQJ2unmegBqZu0rx5RxJb5vmQ==",
+            "dev": true,
+            "requires": {
+                "@babel/compat-data": "^7.22.5",
+                "@babel/helper-compilation-targets": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+                "@babel/plugin-transform-parameters": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-object-super": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.22.5.tgz",
+            "integrity": "sha512-klXqyaT9trSjIUrcsYIfETAzmOEZL3cBYqOYLJxBHfMFFggmXOv+NYSX/Jbs9mzMVESw/WycLFPRx8ba/b2Ipw==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-replace-supers": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-optional-catch-binding": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.22.5.tgz",
+            "integrity": "sha512-pH8orJahy+hzZje5b8e2QIlBWQvGpelS76C63Z+jhZKsmzfNaPQ+LaW6dcJ9bxTpo1mtXbgHwy765Ro3jftmUg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-optional-catch-binding": "^7.8.3"
+            }
+        },
+        "@babel/plugin-transform-optional-chaining": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.22.5.tgz",
+            "integrity": "sha512-AconbMKOMkyG+xCng2JogMCDcqW8wedQAqpVIL4cOSescZ7+iW8utC6YDZLMCSUIReEA733gzRSaOSXMAt/4WQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5",
+                "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+            }
+        },
+        "@babel/plugin-transform-parameters": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.22.5.tgz",
+            "integrity": "sha512-AVkFUBurORBREOmHRKo06FjHYgjrabpdqRSwq6+C7R5iTCZOsM4QbcB27St0a4U6fffyAOqh3s/qEfybAhfivg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-private-methods": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.22.5.tgz",
+            "integrity": "sha512-PPjh4gyrQnGe97JTalgRGMuU4icsZFnWkzicB/fUtzlKUqvsWBKEpPPfr5a2JiyirZkHxnAqkQMO5Z5B2kK3fA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-create-class-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-private-property-in-object": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.22.5.tgz",
+            "integrity": "sha512-/9xnaTTJcVoBtSSmrVyhtSvO3kbqS2ODoh2juEU72c3aYonNF0OMGiaz2gjukyKM2wBBYJP38S4JiE0Wfb5VMQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-annotate-as-pure": "^7.22.5",
+                "@babel/helper-create-class-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+            }
+        },
+        "@babel/plugin-transform-property-literals": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.22.5.tgz",
+            "integrity": "sha512-TiOArgddK3mK/x1Qwf5hay2pxI6wCZnvQqrFSqbtg1GLl2JcNMitVH/YnqjP+M31pLUeTfzY1HAXFDnUBV30rQ==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-regenerator": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.22.5.tgz",
+            "integrity": "sha512-rR7KePOE7gfEtNTh9Qw+iO3Q/e4DEsoQ+hdvM6QUDH7JRJ5qxq5AA52ZzBWbI5i9lfNuvySgOGP8ZN7LAmaiPw==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "regenerator-transform": "^0.15.1"
+            }
+        },
+        "@babel/plugin-transform-reserved-words": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.22.5.tgz",
+            "integrity": "sha512-DTtGKFRQUDm8svigJzZHzb/2xatPc6TzNvAIJ5GqOKDsGFYgAskjRulbR/vGsPKq3OPqtexnz327qYpP57RFyA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-shorthand-properties": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.22.5.tgz",
+            "integrity": "sha512-vM4fq9IXHscXVKzDv5itkO1X52SmdFBFcMIBZ2FRn2nqVYqw6dBexUgMvAjHW+KXpPPViD/Yo3GrDEBaRC0QYA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-spread": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.22.5.tgz",
+            "integrity": "sha512-5ZzDQIGyvN4w8+dMmpohL6MBo+l2G7tfC/O2Dg7/hjpgeWvUx8FzfeOKxGog9IimPa4YekaQ9PlDqTLOljkcxg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-skip-transparent-expression-wrappers": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-sticky-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.22.5.tgz",
+            "integrity": "sha512-zf7LuNpHG0iEeiyCNwX4j3gDg1jgt1k3ZdXBKbZSoA3BbGQGvMiSvfbZRR3Dr3aeJe3ooWFZxOOG3IRStYp2Bw==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-template-literals": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.22.5.tgz",
+            "integrity": "sha512-5ciOehRNf+EyUeewo8NkbQiUs4d6ZxiHo6BcBcnFlgiJfu16q0bQUw9Jvo0b0gBKFG1SMhDSjeKXSYuJLeFSMA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-typeof-symbol": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.22.5.tgz",
+            "integrity": "sha512-bYkI5lMzL4kPii4HHEEChkD0rkc+nvnlR6+o/qdqR6zrm0Sv/nodmyLhlq2DO0YKLUNd2VePmPRjJXSBh9OIdA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
         "@babel/plugin-transform-typescript": {
             "version": "7.22.3",
             "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.22.3.tgz",
@@ -17667,6 +19835,161 @@
                 "@babel/plugin-syntax-typescript": "^7.21.4"
             }
         },
+        "@babel/plugin-transform-unicode-escapes": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.22.5.tgz",
+            "integrity": "sha512-biEmVg1IYB/raUO5wT1tgfacCef15Fbzhkx493D3urBI++6hpJ+RFG4SrWMn0NEZLfvilqKf3QDrRVZHo08FYg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-unicode-property-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.22.5.tgz",
+            "integrity": "sha512-HCCIb+CbJIAE6sXn5CjFQXMwkCClcOfPCzTlilJ8cUatfzwHlWQkbtV0zD338u9dZskwvuOYTuuaMaA8J5EI5A==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-unicode-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.22.5.tgz",
+            "integrity": "sha512-028laaOKptN5vHJf9/Arr/HiJekMd41hOEZYvNsrsXqJ7YPYuX2bQxh31fkZzGmq3YqHRJzYFFAVYvKfMPKqyg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/plugin-transform-unicode-sets-regex": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.22.5.tgz",
+            "integrity": "sha512-lhMfi4FC15j13eKrh3DnYHjpGj6UKQHtNKTbtc1igvAhRy4+kLhV07OpLcsN0VgDEw/MjAvJO4BdMJsHwMhzCg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-create-regexp-features-plugin": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5"
+            }
+        },
+        "@babel/preset-env": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.22.5.tgz",
+            "integrity": "sha512-fj06hw89dpiZzGZtxn+QybifF07nNiZjZ7sazs2aVDcysAZVGjW7+7iFYxg6GLNM47R/thYfLdrXc+2f11Vi9A==",
+            "dev": true,
+            "requires": {
+                "@babel/compat-data": "^7.22.5",
+                "@babel/helper-compilation-targets": "^7.22.5",
+                "@babel/helper-plugin-utils": "^7.22.5",
+                "@babel/helper-validator-option": "^7.22.5",
+                "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.22.5",
+                "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.22.5",
+                "@babel/plugin-proposal-private-property-in-object": "7.21.0-placeholder-for-preset-env.2",
+                "@babel/plugin-syntax-async-generators": "^7.8.4",
+                "@babel/plugin-syntax-class-properties": "^7.12.13",
+                "@babel/plugin-syntax-class-static-block": "^7.14.5",
+                "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+                "@babel/plugin-syntax-export-namespace-from": "^7.8.3",
+                "@babel/plugin-syntax-import-assertions": "^7.22.5",
+                "@babel/plugin-syntax-import-attributes": "^7.22.5",
+                "@babel/plugin-syntax-import-meta": "^7.10.4",
+                "@babel/plugin-syntax-json-strings": "^7.8.3",
+                "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4",
+                "@babel/plugin-syntax-nullish-coalescing-operator": "^7.8.3",
+                "@babel/plugin-syntax-numeric-separator": "^7.10.4",
+                "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
+                "@babel/plugin-syntax-optional-catch-binding": "^7.8.3",
+                "@babel/plugin-syntax-optional-chaining": "^7.8.3",
+                "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
+                "@babel/plugin-syntax-top-level-await": "^7.14.5",
+                "@babel/plugin-syntax-unicode-sets-regex": "^7.18.6",
+                "@babel/plugin-transform-arrow-functions": "^7.22.5",
+                "@babel/plugin-transform-async-generator-functions": "^7.22.5",
+                "@babel/plugin-transform-async-to-generator": "^7.22.5",
+                "@babel/plugin-transform-block-scoped-functions": "^7.22.5",
+                "@babel/plugin-transform-block-scoping": "^7.22.5",
+                "@babel/plugin-transform-class-properties": "^7.22.5",
+                "@babel/plugin-transform-class-static-block": "^7.22.5",
+                "@babel/plugin-transform-classes": "^7.22.5",
+                "@babel/plugin-transform-computed-properties": "^7.22.5",
+                "@babel/plugin-transform-destructuring": "^7.22.5",
+                "@babel/plugin-transform-dotall-regex": "^7.22.5",
+                "@babel/plugin-transform-duplicate-keys": "^7.22.5",
+                "@babel/plugin-transform-dynamic-import": "^7.22.5",
+                "@babel/plugin-transform-exponentiation-operator": "^7.22.5",
+                "@babel/plugin-transform-export-namespace-from": "^7.22.5",
+                "@babel/plugin-transform-for-of": "^7.22.5",
+                "@babel/plugin-transform-function-name": "^7.22.5",
+                "@babel/plugin-transform-json-strings": "^7.22.5",
+                "@babel/plugin-transform-literals": "^7.22.5",
+                "@babel/plugin-transform-logical-assignment-operators": "^7.22.5",
+                "@babel/plugin-transform-member-expression-literals": "^7.22.5",
+                "@babel/plugin-transform-modules-amd": "^7.22.5",
+                "@babel/plugin-transform-modules-commonjs": "^7.22.5",
+                "@babel/plugin-transform-modules-systemjs": "^7.22.5",
+                "@babel/plugin-transform-modules-umd": "^7.22.5",
+                "@babel/plugin-transform-named-capturing-groups-regex": "^7.22.5",
+                "@babel/plugin-transform-new-target": "^7.22.5",
+                "@babel/plugin-transform-nullish-coalescing-operator": "^7.22.5",
+                "@babel/plugin-transform-numeric-separator": "^7.22.5",
+                "@babel/plugin-transform-object-rest-spread": "^7.22.5",
+                "@babel/plugin-transform-object-super": "^7.22.5",
+                "@babel/plugin-transform-optional-catch-binding": "^7.22.5",
+                "@babel/plugin-transform-optional-chaining": "^7.22.5",
+                "@babel/plugin-transform-parameters": "^7.22.5",
+                "@babel/plugin-transform-private-methods": "^7.22.5",
+                "@babel/plugin-transform-private-property-in-object": "^7.22.5",
+                "@babel/plugin-transform-property-literals": "^7.22.5",
+                "@babel/plugin-transform-regenerator": "^7.22.5",
+                "@babel/plugin-transform-reserved-words": "^7.22.5",
+                "@babel/plugin-transform-shorthand-properties": "^7.22.5",
+                "@babel/plugin-transform-spread": "^7.22.5",
+                "@babel/plugin-transform-sticky-regex": "^7.22.5",
+                "@babel/plugin-transform-template-literals": "^7.22.5",
+                "@babel/plugin-transform-typeof-symbol": "^7.22.5",
+                "@babel/plugin-transform-unicode-escapes": "^7.22.5",
+                "@babel/plugin-transform-unicode-property-regex": "^7.22.5",
+                "@babel/plugin-transform-unicode-regex": "^7.22.5",
+                "@babel/plugin-transform-unicode-sets-regex": "^7.22.5",
+                "@babel/preset-modules": "^0.1.5",
+                "@babel/types": "^7.22.5",
+                "babel-plugin-polyfill-corejs2": "^0.4.3",
+                "babel-plugin-polyfill-corejs3": "^0.8.1",
+                "babel-plugin-polyfill-regenerator": "^0.5.0",
+                "core-js-compat": "^3.30.2",
+                "semver": "^6.3.0"
+            }
+        },
+        "@babel/preset-modules": {
+            "version": "0.1.5",
+            "resolved": "https://registry.npmjs.org/@babel/preset-modules/-/preset-modules-0.1.5.tgz",
+            "integrity": "sha512-A57th6YRG7oR3cq/yt/Y84MvGgE0eJG2F1JLhKuyG+jFxEgrd/HAMJatiFtmOiZurz+0DkrvbheCLaV5f2JfjA==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-plugin-utils": "^7.0.0",
+                "@babel/plugin-proposal-unicode-property-regex": "^7.4.4",
+                "@babel/plugin-transform-dotall-regex": "^7.4.4",
+                "@babel/types": "^7.4.4",
+                "esutils": "^2.0.2"
+            }
+        },
+        "@babel/regjsgen": {
+            "version": "0.8.0",
+            "resolved": "https://registry.npmjs.org/@babel/regjsgen/-/regjsgen-0.8.0.tgz",
+            "integrity": "sha512-x/rqGMdzj+fWZvCOYForTghzbtqPDZ5gPwaoNGHdgDfF2QA/XZbCBp4Moo5scrkAMPhB7z26XM/AaHuIJdgauA==",
+            "dev": true
+        },
+        "@babel/runtime": {
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.5.tgz",
+            "integrity": "sha512-ecjvYlnAaZ/KVneE/OdKYBYfgXV3Ptu6zQWmgEF7vwKhQnvVS6bjMD2XYgj+SNvQ1GfK/pjgokfPkC/2CO8CuA==",
+            "dev": true,
+            "requires": {
+                "regenerator-runtime": "^0.13.11"
+            }
+        },
         "@babel/standalone": {
             "version": "7.22.4",
             "resolved": "https://registry.npmjs.org/@babel/standalone/-/standalone-7.22.4.tgz",
@@ -17674,42 +19997,42 @@
             "dev": true
         },
         "@babel/template": {
-            "version": "7.21.9",
-            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.21.9.tgz",
-            "integrity": "sha512-MK0X5k8NKOuWRamiEfc3KEJiHMTkGZNUjzMipqCGDDc6ijRl/B7RGSKVGncu4Ro/HdyzzY6cmoXuKI2Gffk7vQ==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.22.5.tgz",
+            "integrity": "sha512-X7yV7eiwAxdj9k94NEylvbVHLiVG1nvzCV2EAowhxLTwODV1jl9UzZ48leOC0sH7OnuHrIkllaBgneUykIcZaw==",
             "dev": true,
             "requires": {
-                "@babel/code-frame": "^7.21.4",
-                "@babel/parser": "^7.21.9",
-                "@babel/types": "^7.21.5"
+                "@babel/code-frame": "^7.22.5",
+                "@babel/parser": "^7.22.5",
+                "@babel/types": "^7.22.5"
             }
         },
         "@babel/traverse": {
-            "version": "7.22.4",
-            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.4.tgz",
-            "integrity": "sha512-Tn1pDsjIcI+JcLKq1AVlZEr4226gpuAQTsLMorsYg9tuS/kG7nuwwJ4AB8jfQuEgb/COBwR/DqJxmoiYFu5/rQ==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.22.5.tgz",
+            "integrity": "sha512-7DuIjPgERaNo6r+PZwItpjCZEa5vyw4eJGufeLxrPdBXBoLcCJCIasvK6pK/9DVNrLZTLFhUGqaC6X/PA007TQ==",
             "dev": true,
             "requires": {
-                "@babel/code-frame": "^7.21.4",
-                "@babel/generator": "^7.22.3",
-                "@babel/helper-environment-visitor": "^7.22.1",
-                "@babel/helper-function-name": "^7.21.0",
-                "@babel/helper-hoist-variables": "^7.18.6",
-                "@babel/helper-split-export-declaration": "^7.18.6",
-                "@babel/parser": "^7.22.4",
-                "@babel/types": "^7.22.4",
+                "@babel/code-frame": "^7.22.5",
+                "@babel/generator": "^7.22.5",
+                "@babel/helper-environment-visitor": "^7.22.5",
+                "@babel/helper-function-name": "^7.22.5",
+                "@babel/helper-hoist-variables": "^7.22.5",
+                "@babel/helper-split-export-declaration": "^7.22.5",
+                "@babel/parser": "^7.22.5",
+                "@babel/types": "^7.22.5",
                 "debug": "^4.1.0",
                 "globals": "^11.1.0"
             }
         },
         "@babel/types": {
-            "version": "7.22.4",
-            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.4.tgz",
-            "integrity": "sha512-Tx9x3UBHTTsMSW85WB2kphxYQVvrZ/t1FxD88IpSgIjiUJlCm9z+xWIDwyo1vffTwSqteqyznB8ZE9vYYk16zA==",
+            "version": "7.22.5",
+            "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.22.5.tgz",
+            "integrity": "sha512-zo3MIHGOkPOfoRXitsgHLjEXmlDaD/5KU1Uzuc9GNiZPhSqVxVRtxuPaSBZDsYZ9qV88AjtMtWW7ww98loJ9KA==",
             "dev": true,
             "requires": {
-                "@babel/helper-string-parser": "^7.21.5",
-                "@babel/helper-validator-identifier": "^7.19.1",
+                "@babel/helper-string-parser": "^7.22.5",
+                "@babel/helper-validator-identifier": "^7.22.5",
                 "to-fast-properties": "^2.0.0"
             }
         },
@@ -18578,6 +20901,16 @@
                 "slash": "^4.0.0"
             }
         },
+        "@rollup/plugin-babel": {
+            "version": "6.0.3",
+            "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-6.0.3.tgz",
+            "integrity": "sha512-fKImZKppa1A/gX73eg4JGo+8kQr/q1HBQaCGKECZ0v4YBBv3lFqi14+7xyApECzvkLTHCifx+7ntcrvtBIRcpg==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-module-imports": "^7.18.6",
+                "@rollup/pluginutils": "^5.0.1"
+            }
+        },
         "@rollup/plugin-commonjs": {
             "version": "24.1.0",
             "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-24.1.0.tgz",
@@ -19815,6 +22148,36 @@
                 "postcss-value-parser": "^4.2.0"
             }
         },
+        "babel-plugin-polyfill-corejs2": {
+            "version": "0.4.3",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.4.3.tgz",
+            "integrity": "sha512-bM3gHc337Dta490gg+/AseNB9L4YLHxq1nGKZZSHbhXv4aTYU2MD2cjza1Ru4S6975YLTaL1K8uJf6ukJhhmtw==",
+            "dev": true,
+            "requires": {
+                "@babel/compat-data": "^7.17.7",
+                "@babel/helper-define-polyfill-provider": "^0.4.0",
+                "semver": "^6.1.1"
+            }
+        },
+        "babel-plugin-polyfill-corejs3": {
+            "version": "0.8.1",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-corejs3/-/babel-plugin-polyfill-corejs3-0.8.1.tgz",
+            "integrity": "sha512-ikFrZITKg1xH6pLND8zT14UPgjKHiGLqex7rGEZCH2EvhsneJaJPemmpQaIZV5AL03II+lXylw3UmddDK8RU5Q==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-define-polyfill-provider": "^0.4.0",
+                "core-js-compat": "^3.30.1"
+            }
+        },
+        "babel-plugin-polyfill-regenerator": {
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/babel-plugin-polyfill-regenerator/-/babel-plugin-polyfill-regenerator-0.5.0.tgz",
+            "integrity": "sha512-hDJtKjMLVa7Z+LwnTCxoDLQj6wdc+B8dun7ayF2fYieI6OzfuvcLMB32ihJZ4UhCBwNYGl5bg/x/P9cMdnkc2g==",
+            "dev": true,
+            "requires": {
+                "@babel/helper-define-polyfill-provider": "^0.4.0"
+            }
+        },
         "bach": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/bach/-/bach-1.2.0.tgz",
@@ -20762,6 +23125,15 @@
                 "is-plain-object": "^5.0.0"
             }
         },
+        "core-js-compat": {
+            "version": "3.31.0",
+            "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.31.0.tgz",
+            "integrity": "sha512-hM7YCu1cU6Opx7MXNu0NuumM0ezNeAeRKadixyiQELWY3vT3De9S4J5ZBMraWV2vZnrE1Cirl0GtFtDtMUXzPw==",
+            "dev": true,
+            "requires": {
+                "browserslist": "^4.21.5"
+            }
+        },
         "core-util-is": {
             "version": "1.0.3",
             "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz",
@@ -26692,6 +29064,36 @@
                 "redis-errors": "^1.0.0"
             }
         },
+        "regenerate": {
+            "version": "1.4.2",
+            "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
+            "integrity": "sha512-zrceR/XhGYU/d/opr2EKO7aRHUeiBI8qjtfHqADTwZd6Szfy16la6kqD0MIUs5z5hx6AaKa+PixpPrR289+I0A==",
+            "dev": true
+        },
+        "regenerate-unicode-properties": {
+            "version": "10.1.0",
+            "resolved": "https://registry.npmjs.org/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz",
+            "integrity": "sha512-d1VudCLoIGitcU/hEg2QqvyGZQmdC0Lf8BqdOMXGFSvJP4bNV1+XqbPQeHHLD51Jh4QJJ225dlIFvY4Ly6MXmQ==",
+            "dev": true,
+            "requires": {
+                "regenerate": "^1.4.2"
+            }
+        },
+        "regenerator-runtime": {
+            "version": "0.13.11",
+            "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
+            "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+            "dev": true
+        },
+        "regenerator-transform": {
+            "version": "0.15.1",
+            "resolved": "https://registry.npmjs.org/regenerator-transform/-/regenerator-transform-0.15.1.tgz",
+            "integrity": "sha512-knzmNAcuyxV+gQCufkYcvOqX/qIIfHLv0u5x79kRxuGojfYVky1f15TzZEu2Avte8QGepvUNTnLskf8E6X6Vyg==",
+            "dev": true,
+            "requires": {
+                "@babel/runtime": "^7.8.4"
+            }
+        },
         "regex-not": {
             "version": "1.0.2",
             "resolved": "https://registry.npmjs.org/regex-not/-/regex-not-1.0.2.tgz",
@@ -26743,6 +29145,37 @@
                 "functions-have-names": "^1.2.3"
             }
         },
+        "regexpu-core": {
+            "version": "5.3.2",
+            "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.3.2.tgz",
+            "integrity": "sha512-RAM5FlZz+Lhmo7db9L298p2vHP5ZywrVXmVXpmAD9GuL5MPH6t9ROw1iA/wfHkQ76Qe7AaPF0nGuim96/IrQMQ==",
+            "dev": true,
+            "requires": {
+                "@babel/regjsgen": "^0.8.0",
+                "regenerate": "^1.4.2",
+                "regenerate-unicode-properties": "^10.1.0",
+                "regjsparser": "^0.9.1",
+                "unicode-match-property-ecmascript": "^2.0.0",
+                "unicode-match-property-value-ecmascript": "^2.1.0"
+            }
+        },
+        "regjsparser": {
+            "version": "0.9.1",
+            "resolved": "https://registry.npmjs.org/regjsparser/-/regjsparser-0.9.1.tgz",
+            "integrity": "sha512-dQUtn90WanSNl+7mQKcXAgZxvUe7Z0SqXlgzv0za4LwiUhyzBC58yQO3liFoUgu8GiJVInAhJjkj1N0EtQ5nkQ==",
+            "dev": true,
+            "requires": {
+                "jsesc": "~0.5.0"
+            },
+            "dependencies": {
+                "jsesc": {
+                    "version": "0.5.0",
+                    "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-0.5.0.tgz",
+                    "integrity": "sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==",
+                    "dev": true
+                }
+            }
+        },
         "remove-bom-buffer": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/remove-bom-buffer/-/remove-bom-buffer-3.0.0.tgz",
@@ -28682,6 +31115,34 @@
                 "hookable": "^5.5.3"
             }
         },
+        "unicode-canonical-property-names-ecmascript": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
+            "integrity": "sha512-yY5PpDlfVIU5+y/BSCxAJRBIS1Zc2dDG3Ujq+sR0U+JjUevW2JhocOF+soROYDSaAezOzOKuyyixhD6mBknSmQ==",
+            "dev": true
+        },
+        "unicode-match-property-ecmascript": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/unicode-match-property-ecmascript/-/unicode-match-property-ecmascript-2.0.0.tgz",
+            "integrity": "sha512-5kaZCrbp5mmbz5ulBkDkbY0SsPOjKqVS35VpL9ulMPfSl0J0Xsm+9Evphv9CoIZFwre7aJoa94AY6seMKGVN5Q==",
+            "dev": true,
+            "requires": {
+                "unicode-canonical-property-names-ecmascript": "^2.0.0",
+                "unicode-property-aliases-ecmascript": "^2.0.0"
+            }
+        },
+        "unicode-match-property-value-ecmascript": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-2.1.0.tgz",
+            "integrity": "sha512-qxkjQt6qjg/mYscYMC0XKRn3Rh0wFPlfxB0xkt9CfyTvpX1Ra0+rAmdX2QyAobptSEvuy4RtpPRui6XkV+8wjA==",
+            "dev": true
+        },
+        "unicode-property-aliases-ecmascript": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-2.1.0.tgz",
+            "integrity": "sha512-6t3foTQI9qne+OZoVQB/8x8rk2k1eVy1gRXhV3oFQ5T6R1dqQ1xtin3XqSlx3+ATBkliTaR/hHyJBm+LVPNM8w==",
+            "dev": true
+        },
         "unimport": {
             "version": "3.0.7",
             "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.0.7.tgz",
diff --git a/package.json b/package.json
index 590d72f19..fac84af29 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,8 @@
     ],
     "devDependencies": {
         "@babel/eslint-parser": "^7.18.9",
+        "@babel/preset-env": "^7.21.5",
+        "@rollup/plugin-babel": "^6.0.3",
         "@stackblitz/sdk": "^1.8.2",
         "@vitest/coverage-istanbul": "^0.29.8",
         "@vue/test-utils": "^2.0.0",
diff --git a/rollup.config.js b/rollup.config.js
index bd5cc5410..27efd7f25 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -1,3 +1,4 @@
+import { babel } from '@rollup/plugin-babel';
 import postcss from 'rollup-plugin-postcss';
 import { terser } from 'rollup-plugin-terser';
 import vue from 'rollup-plugin-vue';
@@ -62,6 +63,7 @@ const CORE_DEPENDENCIES = {
     'primevue/utils': 'primevue.utils',
     'primevue/api': 'primevue.api',
     'primevue/config': 'primevue.config',
+    'primevue/base': 'primevue.base',
     'primevue/basedirective': 'primevue.basedirective',
     'primevue/ripple': 'primevue.ripple',
     'primevue/portal': 'primevue.portal',
@@ -109,6 +111,16 @@ const EXTERNAL = ['vue', 'chart.js/auto', 'quill'];
 const EXTERNAL_COMPONENT = [...EXTERNAL, ...Object.keys(CORE_DEPENDENCIES)];
 
 // plugins
+const BABEL_PLUGIN_OPTIONS = {
+    extensions: ['.js', '.vue'],
+    exclude: 'node_modules/**',
+    presets: ['@babel/preset-env'],
+    plugins: [],
+    skipPreflightCheck: true,
+    babelHelpers: 'runtime',
+    babelrc: false
+};
+
 const POSTCSS_PLUGIN_OPTIONS = {
     sourceMap: false
 };
@@ -121,7 +133,7 @@ const TERSER_PLUGIN_OPTIONS = {
     }
 };
 
-const PLUGINS = [vue(), postcss(POSTCSS_PLUGIN_OPTIONS)];
+const PLUGINS = [vue(), postcss(POSTCSS_PLUGIN_OPTIONS), babel(BABEL_PLUGIN_OPTIONS)];
 
 function addEntry(folder, inFile, outFile) {
     const exports = inFile === 'PrimeVue.js' ? 'named' : 'auto';
@@ -258,6 +270,7 @@ function addIcon() {
 }
 
 function addDirectives() {
+    addEntry('basedirective', 'BaseDirective.js', 'basedirective');
     addEntry('badgedirective', 'BadgeDirective.js', 'badgedirective');
     addEntry('ripple', 'Ripple.js', 'ripple');
     addEntry('tooltip', 'Tooltip.js', 'tooltip');
@@ -277,6 +290,10 @@ function addApi() {
     addEntry('api', 'Api.js', 'api');
 }
 
+function addBase() {
+    addEntry('base', 'Base.js', 'base');
+}
+
 function addServices() {
     addEntry('confirmationservice', 'ConfirmationService.js', 'confirmationservice');
     addEntry('confirmationeventbus', 'ConfirmationEventBus.js', 'confirmationeventbus');
@@ -293,6 +310,7 @@ function addServices() {
 }
 
 addUtils();
+addBase();
 addApi();
 addConfig();
 addDirectives();
diff --git a/vite.config.js b/vite.config.js
index 035856409..40a29c413 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -3,6 +3,7 @@ import path from 'path';
 export default {
     resolve: {
         alias: {
+            'primevue/base': path.resolve(__dirname, './components/lib/base/Base.js'),
             'primevue/basedirective': path.resolve(__dirname, './components/lib/basedirective/BaseDirective.js'),
             'primevue/ripple': path.resolve(__dirname, './components/lib/ripple/Ripple.js'),
             'primevue/tooltip': path.resolve(__dirname, './components/lib/tooltip/Tooltip.js'),