diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index a92927b50..c0977dc2f 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -95,10 +95,10 @@ export default {
     },
     directives: {
         ripple: {
-            root: ({ context }) => ({
+            root: {
                 class: ['block absolute bg-white/50 rounded-full pointer-events-none'],
                 style: 'transform: scale(0)'
-            })
+            }
         },
         badge: {
             root: ({ context }) => ({
@@ -157,9 +157,7 @@ export default {
                 { 'p-5': !props.toggleable, 'py-3 px-5': props.toggleable } // condition
             ]
         }),
-        title: {
-            class: ['leading-none font-bold']
-        },
+        title: 'leading-none font-bold',
         toggler: {
             class: [
                 'inline-flex items-center justify-center overflow-hidden relative no-underline', // alignments
@@ -168,9 +166,7 @@ export default {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]' // focus
             ]
         },
-        togglerIcon: {
-            class: ['inline-block']
-        },
+        togglerIcon: 'inline-block',
         content: {
             class: [
                 'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 last:rounded-br-lg last:rounded-bl-lg',
@@ -180,13 +176,9 @@ export default {
         transition: TRANSITIONS.toggleable
     },
     accordion: {
-        root: {
-            class: ['mb-1']
-        },
+        root: 'mb-1',
         accordiontab: {
-            root: {
-                class: ['mb-1']
-            },
+            root: 'mb-1',
             header: ({ props }) => ({
                 class: [
                     { 'select-none pointer-events-none cursor-default opacity-60': props?.disabled } // Condition
@@ -203,12 +195,8 @@ export default {
                     { 'rounded-br-md rounded-bl-md': !context.active, 'rounded-br-0 rounded-bl-0 text-gray-800': context.active } // Condition
                 ]
             }),
-            headerIcon: {
-                class: ['inline-block mr-2']
-            },
-            headerTitle: {
-                class: ['leading-none']
-            },
+            headerIcon: 'inline-block mr-2',
+            headerTitle: 'leading-none',
             content: {
                 class: [
                     'p-5 border border-gray-300 bg-white text-gray-700 border-t-0 rounded-tl-none rounded-tr-none rounded-br-lg rounded-bl-lg',
@@ -225,24 +213,16 @@ export default {
                 'dark:bg-gray-900 dark:text-white ' //dark
             ]
         },
-        body: {
-            class: 'p-5' // Padding.
-        },
-        title: {
-            class: 'text-2xl font-bold mb-2' // Font size, font weight, and margin bottom.
-        },
+        body: 'p-5', // Padding.
+        title: 'text-2xl font-bold mb-2', // Font size, font weight, and margin bottom.
         subtitle: {
             class: [
                 'font-normal mb-2 text-gray-600', // Font weight, margin bottom, and text color.
                 'dark:text-white/60 ' //dark
             ]
         },
-        content: {
-            class: 'py-5' // Vertical padding.
-        },
-        footer: {
-            class: 'pt-5' // Top padding.
-        }
+        content: 'py-5', // Vertical padding.
+        footer: 'pt-5' // Top padding.
     },
     divider: {
         root: ({ props }) => ({
@@ -253,12 +233,14 @@ export default {
                     'min-h-full mx-4 md:mx-5 py-5 before:block before:min-h-full before:absolute before:left-1/2 before:top-0 before:transform before:-translate-x-1/2 before:border-l before:border-gray-300 before:dark:border-blue-900/40':
                         props.layout == 'vertical' // Padding and borders for vertical layout.
                 },
-                { 'before:border-solid': props.type == 'solid', 'before:border-dotted': props.type == 'dotted', 'before:border-dashed': props.type == 'dashed' } // Border type condition.
+                {
+                    'before:border-solid': props.type == 'solid',
+                    'before:border-dotted': props.type == 'dotted',
+                    'before:border-dashed': props.type == 'dashed'
+                } // Border type condition.
             ]
         }),
-        content: {
-            class: 'px-1 bg-white z-10 dark:bg-gray-900' // Padding and background color.
-        }
+        content: 'px-1 bg-white z-10 dark:bg-gray-900' // Padding and background color.
     },
     fieldset: {
         root: {
@@ -286,24 +268,14 @@ export default {
                 }
             ]
         }),
-        togglerIcon: {
-            class: 'mr-2 inline-block' // Margin and display style.
-        },
-        legendTitle: {
-            class: 'flex items-center justify-center leading-none' // alignments, and leading style.
-        },
-        content: {
-            class: 'p-5' // Padding.
-        },
+        togglerIcon: 'mr-2 inline-block', // Margin and display style.
+        legendTitle: 'flex items-center justify-center leading-none', // alignments, and leading style.
+        content: 'p-5', // Padding.
         transition: TRANSITIONS.toggleable
     },
     scrollpanel: {
-        wrapper: {
-            class: 'overflow-hidden relative float-left h-full w-full z-[1]'
-        },
-        content: {
-            class: 'box-border h-[calc(100%+18px)] overflow-scroll pr-[18px] pb-[18px] pl-0 pt-0 relative scrollbar-none w-[calc(100%+18px)] [&::-webkit-scrollbar]:hidden'
-        },
+        wrapper: 'overflow-hidden relative float-left h-full w-full z-[1]',
+        content: 'box-border h-[calc(100%+18px)] overflow-scroll pr-[18px] pb-[18px] pl-0 pt-0 relative scrollbar-none w-[calc(100%+18px)] [&::-webkit-scrollbar]:hidden',
         barX: {
             class: ['relative bg-gray-100 invisible rounded cursor-pointer h-[9px] bottom-0 z-[2]', 'transition duration-[250ms] ease-linear']
         },
@@ -318,9 +290,7 @@ export default {
                 { 'overflow-hidden': props.scrollable } // Overflow condition.
             ]
         }),
-        navContent: {
-            class: ['overflow-y-hidden overscroll-contain overscroll-auto scroll-smooth [&::-webkit-scrollbar]:hidden'] // Overflow and scrollbar styles.
-        },
+        navContent: 'overflow-y-hidden overscroll-contain overscroll-auto scroll-smooth [&::-webkit-scrollbar]:hidden', // Overflow and scrollbar styles.
         previousButton: {
             class: ['h-full flex items-center justify-center absolute top-0 z-20', 'left-0', 'bg-white text-blue-500 w-12 shadow-md rounded-none', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 ]'] // Flex and absolute positioning styles.
         },
@@ -358,34 +328,61 @@ export default {
     },
     splitter: {
         root: ({ context }) => ({
-            class: ['bg-white dark:bg-gray-900 rounded-lg text-gray-700 dark:text-white/80', { 'border border-solid border-gray-300 dark:border-blue-900/40': !context.nested, '': context.nested }]
+            class: [
+                'bg-white dark:bg-gray-900 rounded-lg text-gray-700 dark:text-white/80',
+                {
+                    'border border-solid border-gray-300 dark:border-blue-900/40': !context.nested
+                }
+            ]
         }),
 
         gutter: ({ props }) => ({
-            class: ['flex items-center justify-center  shrink-0', 'transition-all duration-200 bg-gray-100 dark:bg-gray-800', { 'cursor-col-resize': props.layout == 'horizontal', 'cursor-row-resize': props.layout !== 'horizontal' }]
+            class: [
+                'flex items-center justify-center shrink-0',
+                'transition-all duration-200 bg-gray-100 dark:bg-gray-800',
+                {
+                    'cursor-col-resize': props.layout == 'horizontal',
+                    'cursor-row-resize': props.layout !== 'horizontal'
+                }
+            ]
         }),
         gutterhandler: ({ props }) => ({
-            class: ['bg-gray-300 dark:bg-gray-600 transition-all duration-200', { 'h-7': props.layout == 'horizontal', 'w-7 h-2': props.layout !== 'horizontal' }]
+            class: [
+                'bg-gray-300 dark:bg-gray-600 transition-all duration-200',
+                {
+                    'h-7': props.layout == 'horizontal',
+                    'w-7 h-2': props.layout !== 'horizontal'
+                }
+            ]
         })
     },
     splitterpanel: {
         root: ({ context }) => ({
-            class: ['grow', 'flex', { 'justify-center items-center': !context.nested, '': context.nested }]
+            class: [
+                'grow flex',
+                {
+                    'justify-center items-center': !context.nested
+                }
+            ]
         })
     },
     dialog: {
         root: ({ state }) => ({
-            class: ['rounded-lg shadow-lg border-0', 'max-h-90 transform scale-100', 'm-0 w-[50vw]', 'dark:border dark:border-blue-900/40', { 'transition-none transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': state.maximized }]
+            class: [
+                'rounded-lg shadow-lg border-0',
+                'max-h-90 transform scale-100',
+                'm-0 w-[50vw]',
+                'dark:border dark:border-blue-900/40',
+                {
+                    'transition-none transform-none !w-screen !h-screen !max-h-full !top-0 !left-0': state.maximized
+                }
+            ]
         }),
         header: {
             class: ['flex items-center justify-between shrink-0', 'bg-white text-gray-800 border-t-0  rounded-tl-lg rounded-tr-lg p-6', 'dark:bg-gray-900  dark:text-white/80']
         },
-        headerTitle: {
-            class: ['font-bold text-lg']
-        },
-        headerIcons: {
-            class: ['flex items-center']
-        },
+        headerTitle: 'font-bold text-lg',
+        headerIcons: 'flex items-center',
         closeButton: {
             class: [
                 'flex items-center justify-center overflow-hidden relative',
@@ -395,11 +392,17 @@ export default {
                 'dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             ]
         },
-        closeButtonIcon: {
-            class: ['w-4 h-4 inline-block']
-        },
+        closeButtonIcon: 'w-4 h-4 inline-block',
         content: ({ state }) => ({
-            class: ['overflow-y-auto', 'bg-white text-gray-700 px-6 pb-8 pt-0', 'rounded-bl-lg rounded-br-lg', 'dark:bg-gray-900  dark:text-white/80 ', { grow: state.maximized }]
+            class: [
+                'overflow-y-auto',
+                'bg-white text-gray-700 px-6 pb-8 pt-0',
+                'rounded-bl-lg rounded-br-lg',
+                'dark:bg-gray-900  dark:text-white/80 ',
+                {
+                    grow: state.maximized
+                }
+            ]
         }),
         footer: {
             class: ['shrink-0 ', 'border-t-0 bg-white text-gray-700 px-6 pb-6 text-right rounded-b-lg', 'dark:bg-gray-900  dark:text-white/80']
@@ -445,7 +448,7 @@ export default {
         }
     },
     confirmpopup: {
-        root: ({ props, state }) => ({
+        root: {
             class: [
                 'bg-white text-gray-700 border-0 rounded-md shadow-lg',
                 'z-40 transform origin-center',
@@ -453,23 +456,15 @@ export default {
                 'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
                 'dark:border dark:border-blue-900/40 dark:bg-gray-900  dark:text-white/80'
             ]
-        }),
-        content: {
-            class: ['p-5 items-center flex']
-        },
-        icon: {
-            class: ['text-2xl']
-        },
-        message: {
-            class: ['ml-4']
-        },
-        footer: {
-            class: ['text-right px-5 py-5 pt-0 ']
         },
+        content: 'p-5 items-center flex',
+        icon: 'text-2xl',
+        message: 'ml-4',
+        footer: 'text-right px-5 py-5 pt-0 ',
         transition: TRANSITIONS.overlay
     },
     overlaypanel: {
-        root: ({ props, state }) => ({
+        root: {
             class: [
                 'bg-white text-gray-700 border-0 rounded-md shadow-lg',
                 'z-40 transform origin-center',
@@ -477,14 +472,12 @@ export default {
                 'before:absolute before:w-0 before:-top-3 before:h-0 before:border-transparent before:border-solid before:ml-6 before:border-x-[0.75rem] before:border-b-[0.75rem] before:border-t-0 before:border-b-white dark:before:border-b-gray-900',
                 'dark:border dark:border-blue-900/40 dark:bg-gray-900  dark:text-white/80'
             ]
-        }),
-        content: {
-            class: ['p-5 items-center flex']
         },
+        content: 'p-5 items-center flex',
         transition: TRANSITIONS.overlay
     },
     sidebar: {
-        root: ({ props, state }) => ({
+        root: ({ props }) => ({
             class: [
                 'flex flex-col pointer-events-auto relative transform translate-x-0 translate-y-0 translate-z-0 relative transition-transform duration-300',
                 'bg-white text-gray-700 border-0 shadow-lg',
@@ -508,17 +501,19 @@ export default {
                 'dark:hover:text-white/80 dark:hover:text-white/80 dark:hover:border-transparent dark:hover:bg-gray-800/80 dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             ]
         },
-        closeButtonIcon: {
-            class: ['w-4 h-4 inline-block']
-        },
+        closeButtonIcon: 'w-4 h-4 inline-block',
         content: {
             class: ['p-5 pt-0 h-full w-full', 'grow overflow-y-auto']
         },
-        mask: ({ props, state }) => ({
+        mask: ({ props }) => ({
             class: [
                 'fixed top-0 left-0 w-full h-full flex  pointer-events-auto',
                 'bg-black bg-opacity-40 transition duration-200 z-20 transition-colors',
-                { 'justify-end': props.position == 'right', 'items-start': props.position == 'top', 'items-end': props.position == 'bottom' }
+                {
+                    'justify-end': props.position == 'right',
+                    'items-start': props.position == 'top',
+                    'items-end': props.position == 'bottom'
+                }
             ]
         }),
         transition: ({ props }) => {
@@ -554,67 +549,41 @@ export default {
         root: {
             class: ['flex items-center justify-between flex-wrap', 'bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-blue-900/40  p-5 rounded-md gap-2']
         },
-        start: {
-            class: ['flex items-center']
-        },
-        center: {
-            class: ['flex items-center']
-        },
-        end: {
-            class: ['flex items-center']
-        }
+        start: 'flex items-center',
+        center: 'flex items-center',
+        end: 'flex items-center'
     },
-
     //UPLOAD
-
     fileupload: {
-        input: {
-            class: ['hidden']
-        },
+        input: 'hidden',
         buttonbar: {
             class: ['flex flex-wrap', 'bg-gray-50 dark:bg-gray-800 p-5 border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 rounded-tr-lg rounded-tl-lg gap-2 border-b-0']
         },
         chooseButton: {
             class: ['text-white bg-blue-500 border border-blue-500 p-3 px-5 rounded-md text-base', 'overflow-hidden relative']
         },
-        chooseIcon: {
-            class: ['mr-2 inline-block']
-        },
-        chooseButtonLabel: {
-            class: ['flex-1 font-bold']
-        },
+        chooseIcon: 'mr-2 inline-block',
+        chooseButtonLabel: 'flex-1 font-bold',
         uploadbutton: {
-            icon: {
-                class: 'mr-2'
-            }
+            icon: 'mr-2'
         },
         cancelbutton: {
-            icon: {
-                class: 'mr-2'
-            }
+            icon: 'mr-2'
         },
-        content: ({ props }) => ({
+        content: {
             class: ['relative', 'bg-white dark:bg-gray-900 p-8 border border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 rounded-b-lg']
-        }),
+        },
         file: {
             class: ['flex items-center flex-wrap', 'p-4 border border-gray-300 dark:border-blue-900/40 rounded gap-2 mb-2', 'last:mb-0']
         },
-        thumbnail: {
-            class: ['shrink-0']
-        },
-        fileName: {
-            class: ['mb-2']
-        },
-        fileSize: {
-            class: ['mr-2']
-        },
+        thumbnail: 'shrink-0',
+        fileName: 'mb-2',
+        fileSize: 'mr-2',
         uploadicon: 'mr-2'
     },
-
     //Messages
-
     message: {
-        root: ({ props, context }) => ({
+        root: ({ props }) => ({
             class: [
                 'my-4 rounded-md',
                 {
@@ -625,21 +594,17 @@ export default {
                 }
             ]
         }),
-        wrapper: {
-            class: ['flex items-center py-5 px-7']
-        },
+        wrapper: 'flex items-center py-5 px-7',
         icon: {
             class: ['w-6 h-6', 'text-lg mr-2']
         },
-        text: {
-            class: ['text-base font-normal']
-        },
+        text: 'text-base font-normal',
         button: {
             class: ['w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30']
         }
     },
     inlinemessage: {
-        root: ({ props, context }) => ({
+        root: ({ props }) => ({
             class: [
                 'inline-flex items-center justify-center align-top',
                 'p-3 m-0 rounded-md',
@@ -651,15 +616,13 @@ export default {
                 }
             ]
         }),
-        icon: {
-            class: ['text-base mr-2']
-        }
+        icon: 'text-base mr-2'
     },
     toast: {
-        root: ({ props, context }) => ({
+        root: {
             class: ['w-96', 'opacity-90']
-        }),
-        container: ({ props, context }) => ({
+        },
+        container: ({ props }) => ({
             class: [
                 'my-4 rounded-md w-full',
                 {
@@ -670,21 +633,13 @@ export default {
                 }
             ]
         }),
-        content: {
-            class: ['flex items-center py-5 px-7']
-        },
+        content: 'flex items-center py-5 px-7',
         icon: {
             class: ['w-6 h-6', 'text-lg mr-2']
         },
-        text: {
-            class: ['text-base font-normal flex flex-col flex-1 grow shrink ml-4']
-        },
-        summary: {
-            class: ['font-bold block']
-        },
-        detail: {
-            class: ['mt-1 block']
-        },
+        text: 'text-base font-normal flex flex-col flex-1 grow shrink ml-4',
+        summary: 'font-bold block',
+        detail: 'mt-1 block',
         closebutton: {
             class: ['w-8 h-8 rounded-full bg-transparent transition duration-200 ease-in-out', 'ml-auto overflow-hidden relative', 'flex items-center justify-center', 'hover:bg-white/30']
         },
@@ -746,12 +701,24 @@ export default {
             ]
         }),
         label: ({ props }) => ({
-            class: ['flex-1', 'duration-200', 'font-bold', { 'hover:underline': props.link }]
+            class: [
+                'flex-1',
+                'duration-200',
+                'font-bold',
+                {
+                    'hover:underline': props.link
+                }
+            ]
         }),
         icon: ({ props }) => ({
             class: [
                 'mx-0',
-                { 'mr-2': props.iconPos == 'left' && props.label != null, 'ml-2': props.iconPos == 'right' && props.label != null, 'mb-2': props.iconPos == 'top' && props.label != null, 'mt-2': props.iconPos == 'bottom' && props.label != null }
+                {
+                    'mr-2': props.iconPos == 'left' && props.label != null,
+                    'ml-2': props.iconPos == 'right' && props.label != null,
+                    'mb-2': props.iconPos == 'top' && props.label != null,
+                    'mt-2': props.iconPos == 'bottom' && props.label != null
+                }
             ]
         }),
         badge: ({ props }) => ({
@@ -806,7 +773,13 @@ export default {
             class: ['flex items-center justify-center rounded-full relative overflow-hidden', 'w-12 h-12 bg-gray-700 hover:bg-gray-800 text-white']
         },
         mask: ({ state }) => ({
-            class: ['absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0', { 'opacity-0': !state.d_visible, 'pointer-events-none opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible }]
+            class: [
+                'absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0',
+                {
+                    'opacity-0': !state.d_visible,
+                    'pointer-events-none opacity-100 transition-opacity duration-400 ease-in-out': state.d_visible
+                }
+            ]
         })
     },
     splitbutton: {
@@ -817,21 +790,16 @@ export default {
             root: ({ parent }) => ({
                 class: ['rounded-r-none border-r-0', { 'rounded-l-full': parent.props.rounded }]
             }),
-            icon: {
-                class: 'mr-2'
-            }
+            icon: 'mr-2'
         },
         menubutton: {
             root: ({ parent }) => ({
                 class: ['rounded-l-none', { 'rounded-r-full': parent.props.rounded }]
             }),
-            label: {
-                class: 'hidden'
-            }
+            label: 'hidden'
         }
     },
     //FORMS
-
     inputtext: {
         root: ({ props, context }) => ({
             class: [
@@ -841,47 +809,62 @@ export default {
                     'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': !context.disabled,
                     'opacity-60 select-none pointer-events-none cursor-default': context.disabled
                 },
-                { 'text-lg px-4 py-4': props.size == 'large', 'text-xs px-2 py-2': props.size == 'small', 'p-3 text-base': props.size == null }
+                {
+                    'text-lg px-4 py-4': props.size == 'large',
+                    'text-xs px-2 py-2': props.size == 'small',
+                    'p-3 text-base': props.size == null
+                }
             ]
         })
     },
     inputnumber: {
-        root: ({ props, context }) => ({
-            class: ['w-full inline-flex']
+        root: 'w-full inline-flex',
+        input: ({ props }) => ({
+            class: [{ 'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked' }]
         }),
-        input: ({ props, context }) => ({
-            class: ['', { 'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked' }]
-        }),
-        buttongroup: ({ props, context }) => ({
+        buttongroup: ({ props }) => ({
             class: [{ 'flex flex-col': props.showButtons && props.buttonLayout == 'stacked' }]
         }),
-        incrementbutton: ({ props, context }) => ({
-            class: ['flex !items-center !justify-center', { 'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked' }]
+        incrementbutton: ({ props }) => ({
+            class: [
+                'flex !items-center !justify-center',
+                {
+                    'rounded-br-none rounded-bl-none rounded-bl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+                }
+            ]
         }),
-        label: {
-            class: ['hidden']
-        },
-        decrementbutton: ({ props, context }) => ({
-            class: ['flex !items-center !justify-center', { 'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked' }]
+        label: 'hidden',
+        decrementbutton: ({ props }) => ({
+            class: [
+                'flex !items-center !justify-center',
+                {
+                    'rounded-tr-none rounded-tl-none rounded-tl-none !p-0 flex-1 w-[3rem]': props.showButtons && props.buttonLayout == 'stacked'
+                }
+            ]
         })
     },
     knob: {
         root: ({ props }) => ({
-            class: ['focus:outline-none focus:outline-offset-0 focus:shadow-0', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+            class: [
+                'focus:outline-none focus:outline-offset-0 focus:shadow-0',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
         }),
-        range: {
-            class: ['stroke-current transition duration-100 ease-in stroke-gray-200 dark:stroke-gray-700 fill-none']
-        },
-        value: {
-            class: ['animate-dash-frame  stroke-blue-500 fill-none']
-        },
-        label: {
-            class: ['text-center text-xl']
-        }
+        range: 'stroke-current transition duration-100 ease-in stroke-gray-200 dark:stroke-gray-700 fill-none',
+        value: 'animate-dash-frame  stroke-blue-500 fill-none',
+        label: 'text-center text-xl'
     },
     inputswitch: {
         root: ({ props }) => ({
-            class: ['inline-block relative', 'w-12 h-7', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+            class: [
+                'inline-block relative',
+                'w-12 h-7',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
         }),
         slider: ({ props }) => ({
             class: [
@@ -889,7 +872,10 @@ export default {
                 'transition-colors duration-200 rounded-2xl',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
                 "before:absolute before:content-'' before:top-1/2 before:bg-white before:dark:bg-gray-900 before:w-5 before:h-5 before:left-1 before:-mt-2.5 before:rounded-full before:transition-duration-200",
-                { 'bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 hover:dark:bg-gray-700 ': !props.modelValue, 'bg-blue-500 before:transform before:translate-x-5': props.modelValue }
+                {
+                    'bg-gray-200 dark:bg-gray-800 hover:bg-gray-300 hover:dark:bg-gray-700 ': !props.modelValue,
+                    'bg-blue-500 before:transform before:translate-x-5': props.modelValue
+                }
             ]
         })
     },
@@ -907,40 +893,36 @@ export default {
         dropdownbutton: {
             class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/80 w-[3rem] rounded-tr-6 rounded-br-6']
         },
-        panel: {
-            class: ['absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md']
-        },
-        list: {
-            class: ['m-0 sm:p-0 list-none']
-        },
-        item: ({ props }) => ({
+        panel: 'absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md',
+        list: 'm-0 sm:p-0 list-none',
+        item: {
             class: [
                 'cursor-pointer font-normal whitespace-nowrap',
                 'm-0 border-0 bg-transparent transition-shadow rounded-none',
                 'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80'
             ]
-        }),
+        },
         content: {
             class: ['flex items-center overflow-hidden relative', 'py-3 px-5']
         },
-        groupicon: {
-            class: ['ml-auto']
-        },
+        groupicon: 'ml-auto',
         sublist: {
             class: ['block absolute left-full top-0', 'min-w-full z-10', 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md']
         },
         transition: TRANSITIONS.overlay
     },
     inputmask: {
-        root: ({ props, context }) => ({
-            class: [
-                'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md'
-            ]
-        })
+        root: 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 py-3 px-3 border border-gray-300 dark:border-blue-900/40 hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] transition duration-200 ease-in-out appearance-none rounded-md'
     },
     rating: {
         root: ({ props }) => ({
-            class: ['relative flex items-center', 'gap-2', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+            class: [
+                'relative flex items-center',
+                'gap-2',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
         }),
         cancelitem: ({ context }) => ({
             class: [
@@ -976,7 +958,7 @@ export default {
         root: ({ props }) => ({
             class: [{ 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
         }),
-        button: ({ context, props }) => ({
+        button: ({ context }) => ({
             class: [
                 'inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative',
                 'px-4 py-3',
@@ -990,9 +972,7 @@ export default {
                 }
             ]
         }),
-        label: {
-            class: ['font-bold']
-        }
+        label: 'font-bold'
     },
     slider: {
         root: ({ props }) => ({
@@ -1004,7 +984,14 @@ export default {
             ]
         }),
         range: ({ props }) => ({
-            class: ['bg-blue-500', 'block absolute', { 'top-0 left-0 h-full': props.orientation == 'horizontal', 'bottom-0 left-0 w-full': props.orientation == 'vertical' }]
+            class: [
+                'bg-blue-500',
+                'block absolute',
+                {
+                    'top-0 left-0 h-full': props.orientation == 'horizontal',
+                    'bottom-0 left-0 w-full': props.orientation == 'vertical'
+                }
+            ]
         }),
         handle: ({ props }) => ({
             class: [
@@ -1012,7 +999,10 @@ export default {
                 'cursor-grab touch-action-none block',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
                 'hover:bg-blue-500 hover:border hover:border-blue-500',
-                { 'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal', 'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical' }
+                {
+                    'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                    'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+                }
             ]
         }),
         starthandler: ({ props }) => ({
@@ -1021,7 +1011,10 @@ export default {
                 'cursor-grab touch-action-none block',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
                 'hover:bg-blue-500 hover:border hover:border-blue-500',
-                { 'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal', 'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical' }
+                {
+                    'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                    'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+                }
             ]
         }),
         endhandler: ({ props }) => ({
@@ -1030,24 +1023,32 @@ export default {
                 'cursor-grab touch-action-none block',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
                 'hover:bg-blue-500 hover:border hover:border-blue-500',
-                { 'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal', 'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical' }
+                {
+                    'top-[50%] mt-[-0.5715rem] ml-[-0.5715rem]': props.orientation == 'horizontal',
+                    'left-[50%] mb-[-0.5715rem] ml-[-0.4715rem]': props.orientation == 'vertical'
+                }
             ]
         })
     },
     password: {
         root: ({ props }) => ({
-            class: ['inline-flex relative', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+            class: [
+                'inline-flex relative',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
         }),
-        panel: {
-            class: ['p-5 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 shadow-md rounded-md']
-        },
-        meter: {
-            class: ['mb-2 bg-gray-300 dark:bg-gray-700 h-3']
-        },
+        panel: 'p-5 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 shadow-md rounded-md',
+        meter: 'mb-2 bg-gray-300 dark:bg-gray-700 h-3',
         meterlabel: ({ instance, props }) => ({
             class: [
                 'transition-width duration-1000 ease-in-out h-full',
-                { 'bg-red-500': instance?.meter?.strength == 'weak', 'bg-orange-500': instance?.meter?.strength == 'medium', 'bg-green-500': instance?.meter?.strength == 'strong' },
+                {
+                    'bg-red-500': instance?.meter?.strength == 'weak',
+                    'bg-orange-500': instance?.meter?.strength == 'medium',
+                    'bg-green-500': instance?.meter?.strength == 'strong'
+                },
                 { 'pr-[2.5rem] ': props.toggleMask }
             ]
         }),
@@ -1076,11 +1077,15 @@ export default {
                 { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }
             ]
         }),
-        label: {
-            class: ['font-bold text-center w-full']
-        },
+        label: 'font-bold text-center w-full',
         icon: ({ props }) => ({
-            class: [' mr-2', { 'text-gray-600 dark:text-white/70': !props.modelValue, 'text-white': props.modelValue }]
+            class: [
+                ' mr-2',
+                {
+                    'text-gray-600 dark:text-white/70': !props.modelValue,
+                    'text-white': props.modelValue
+                }
+            ]
         })
     },
     tristatecheckbox: {
@@ -1091,7 +1096,10 @@ export default {
             class: [
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 rounded-lg transition-colors duration-200',
-                { 'border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400': props.modelValue || !props.modelValue, 'border-gray-300 text-gray-600 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.modelValue == null },
+                {
+                    'border-blue-500 bg-blue-500 text-white dark:border-blue-400 dark:bg-blue-400': props.modelValue || !props.modelValue,
+                    'border-gray-300 text-gray-600 bg-white dark:border-blue-900/40 dark:bg-gray-900': props.modelValue == null
+                },
                 {
                     'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
                     'cursor-default opacity-60': props.disabled
@@ -1100,23 +1108,24 @@ export default {
         })
     },
     checkbox: {
-        root: ({ props }) => ({
+        root: {
             class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
-        }),
+        },
         input: ({ props, context }) => ({
             class: [
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200',
-                { 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked, 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked },
+                {
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked,
+                    'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked
+                },
                 {
                     'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
                     'cursor-default opacity-60': props.disabled
                 }
             ]
         }),
-        icon: {
-            class: ['w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900']
-        }
+        icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
     },
     radiobutton: {
         root: ({ props }) => ({
@@ -1126,7 +1135,10 @@ export default {
             class: [
                 'flex justify-center items-center',
                 'border-2 w-6 h-6 text-gray-700 rounded-full transition duration-200 ease-in-out',
-                { 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80': props.value !== props.modelValue, 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.value == props.modelValue },
+                {
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80': props.value !== props.modelValue,
+                    'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400': props.value == props.modelValue
+                },
                 {
                     'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
                     'cursor-default opacity-60': props.disabled
@@ -1137,7 +1149,10 @@ export default {
             class: [
                 'transform rounded-full',
                 'block w-3 h-3 transition duration-200 bg-white dark:bg-gray-900',
-                { 'backface-hidden scale-10 invisible': props.value !== props.modelValue, 'transform scale-100 visible': props.value == props.modelValue }
+                {
+                    'backface-hidden scale-10 invisible': props.value !== props.modelValue,
+                    'transform scale-100 visible': props.value == props.modelValue
+                }
             ]
         })
     },
@@ -1168,9 +1183,7 @@ export default {
         wrapper: {
             class: ['max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
         },
-        list: {
-            class: ['py-3 list-none m-0']
-        },
+        list: 'py-3 list-none m-0',
         item: ({ context }) => ({
             class: [
                 'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
@@ -1191,9 +1204,7 @@ export default {
         header: {
             class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40']
         },
-        filtercontainer: {
-            class: ['relative']
-        },
+        filtercontainer: 'relative',
         filterinput: {
             class: [
                 'pr-7 -mr-7',
@@ -1203,23 +1214,34 @@ export default {
                 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             ]
         },
-        filtericon: {
-            class: ['-mt-2 absolute top-1/2']
-        },
-        clearicon: {
-            class: ['text-gray-500 right-12 -mt-2 absolute top-1/2']
-        },
+        filtericon: '-mt-2 absolute top-1/2',
+        clearicon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
         transition: TRANSITIONS.overlay
     },
     calendar: {
         root: ({ props }) => ({
-            class: ['inline-flex max-w-full relative', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+            class: [
+                'inline-flex max-w-full relative',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
         }),
         input: {
-            class: ['font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg', 'hover:border-blue-500 ']
+            class: [
+                'font-sans text-base text-gray-600 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
+                'hover:border-blue-500' //Hover
+            ]
         },
         panel: ({ props }) => ({
-            class: ['bg-white dark:bg-gray-900', 'min-w-[350px]', { 'shadow-md border-0 absolute': !props.inline, 'inline-block overflow-x-auto border border-gray-300 dark:border-blue-900/40 p-2 rounded-lg': props.inline }]
+            class: [
+                'bg-white dark:bg-gray-900',
+                'min-w-[350px]',
+                {
+                    'shadow-md border-0 absolute': !props.inline,
+                    'inline-block overflow-x-auto border border-gray-300 dark:border-blue-900/40 p-2 rounded-lg': props.inline
+                }
+            ]
         }),
         header: {
             class: ['flex items-center justify-between', 'p-2 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold m-0 border-b border-gray-300 dark:border-blue-900/40 rounded-t-lg']
@@ -1231,9 +1253,7 @@ export default {
                 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
             ]
         },
-        title: {
-            class: ['leading-8 mx-auto']
-        },
+        title: 'leading-8 mx-auto',
         monthTitle: {
             class: ['text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'mr-2', 'hover:text-blue-500']
         },
@@ -1250,27 +1270,25 @@ export default {
         table: {
             class: ['border-collapse w-full', 'my-2']
         },
-        tableheadercell: {
-            class: ['p-2']
-        },
-        weekday: {
-            class: ['text-gray-600 dark:text-white/70']
-        },
-        day: {
-            class: ['p-2']
-        },
+        tableheadercell: 'p-2',
+        weekday: 'text-gray-600 dark:text-white/70',
+        day: 'p-2',
         daylabel: ({ context }) => ({
             class: [
                 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border',
                 'flex items-center justify-center mx-auto overflow-hidden relative',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
-                { 'opacity-60 cursor-default': context.disabled, 'cursor-pointer': !context.disabled },
-                { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled }
+                {
+                    'opacity-60 cursor-default': context.disabled,
+                    'cursor-pointer': !context.disabled
+                },
+                {
+                    'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
+                    'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
+                }
             ]
         }),
-        monthpicker: {
-            class: ['my-2']
-        },
+        monthpicker: 'my-2',
         month: ({ context }) => ({
             class: [
                 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
@@ -1287,27 +1305,20 @@ export default {
                 'w-1/2 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
                 'p-2 transition-shadow duration-200 rounded-lg',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
-                { 'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled, 'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled }
+                {
+                    'text-gray-600 dark:text-white/70 bg-transprent hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.selected && !context.disabled,
+                    'text-blue-700 bg-blue-100 hover:bg-blue-200': context.selected && !context.disabled
+                }
             ]
         }),
         timepicker: {
             class: ['flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2']
         },
-        separatorcontainer: {
-            class: ['flex items-center flex-col px-2']
-        },
-        separator: {
-            class: ['text-xl']
-        },
-        hourpicker: {
-            class: ['flex items-center flex-col px-2']
-        },
-        minutepicker: {
-            class: ['flex items-center flex-col px-2']
-        },
-        ampmpicker: {
-            class: ['flex items-center flex-col px-2']
-        },
+        separatorcontainer: 'flex items-center flex-col px-2',
+        separator: 'text-xl',
+        hourpicker: 'flex items-center flex-col px-2',
+        minutepicker: 'flex items-center flex-col px-2',
+        ampmpicker: 'flex items-center flex-col px-2',
         incrementbutton: {
             class: [
                 'flex items-center justify-center cursor-pointer overflow-hidden relative',
@@ -1322,24 +1333,18 @@ export default {
                 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
             ]
         },
-        groupcontainer: {
-            class: ['flex']
-        },
+        groupcontainer: 'flex',
         group: {
             class: ['flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0']
         },
         transition: TRANSITIONS.overlay
     },
     listbox: {
-        root: ({ props }) => ({
+        root: {
             class: ['bg-white dark:bg-gray-900 border border-gray-400 dark:border-blue-900/40 transition-colors duration-200 ease-in-out rounded-md', 'w-full md:w-56']
-        }),
-        wrapper: {
-            class: ['overflow-auto']
-        },
-        list: {
-            class: ['py-3 list-none m-0']
         },
+        wrapper: 'overflow-auto',
+        list: 'py-3 list-none m-0',
         item: ({ context }) => ({
             class: [
                 'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
@@ -1360,9 +1365,7 @@ export default {
         header: {
             class: ['p-3 border-b border-gray-300 text-gray-700 bg-gray-100 mt-0 rounded-tl-lg rounded-tr-lg', 'dark:bg-gray-800 dark:text-white/80 dark:border-blue-900/40']
         },
-        filtercontainer: {
-            class: ['relative']
-        },
+        filtercontainer: 'relative',
         filterinput: {
             class: [
                 'pr-7 -mr-7',
@@ -1372,9 +1375,7 @@ export default {
                 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             ]
         },
-        filtericon: {
-            class: ['-mt-2 absolute top-1/2']
-        }
+        filtericon: '-mt-2 absolute top-1/2'
     },
     multiselect: {
         root: ({ props }) => ({
@@ -1385,10 +1386,8 @@ export default {
                 { 'opacity-60 select-none pointer-events-none cursor-default': props?.disabled }
             ]
         }),
-        labelContainer: {
-            class: ['overflow-hidden flex flex-auto cursor-pointer']
-        },
-        label: ({ props, parent, context }) => ({
+        labelContainer: 'overflow-hidden flex flex-auto cursor-pointer',
+        label: ({ props }) => ({
             class: [
                 'block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis',
                 'text-gray-800 dark:text-white/80',
@@ -1403,9 +1402,7 @@ export default {
         token: {
             class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
         },
-        removeTokenIcon: {
-            class: ['ml-2']
-        },
+        removeTokenIcon: 'ml-2',
         trigger: {
             class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
         },
@@ -1418,17 +1415,18 @@ export default {
         headerCheckboxContainer: {
             class: ['inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6']
         },
-        headerCheckbox: ({ props, context }) => ({
+        headerCheckbox: ({ context }) => ({
             class: [
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 text-gray-600 dark:text-white/70 rounded-lg transition-colors duration-200',
                 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
-                { 'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected, 'border-blue-500 bg-blue-500': context?.selected }
+                {
+                    'border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900': !context?.selected,
+                    'border-blue-500 bg-blue-500': context?.selected
+                }
             ]
         }),
-        headercheckboxicon: {
-            class: ['w-4 h-4 transition-all duration-200 text-white text-base']
-        },
+        headercheckboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base',
         closeButton: {
             class: [
                 'flex items-center justify-center overflow-hidden relative',
@@ -1437,15 +1435,11 @@ export default {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             ]
         },
-        closeButtonIcon: {
-            class: ['w-4 h-4 inline-block']
-        },
+        closeButtonIcon: 'w-4 h-4 inline-block',
         wrapper: {
             class: ['max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
         },
-        list: {
-            class: ['py-3 list-none m-0']
-        },
+        list: 'py-3 list-none m-0',
         item: ({ context }) => ({
             class: [
                 'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
@@ -1468,18 +1462,17 @@ export default {
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 text-gray-600 dark:text-white/80 rounded-lg transition-colors duration-200',
                 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
-                { 'border-gray-300 dark:border-blue-900/40  bg-white dark:bg-gray-900': !context?.selected, 'border-blue-500 bg-blue-500': context?.selected }
+                {
+                    'border-gray-300 dark:border-blue-900/40  bg-white dark:bg-gray-900': !context?.selected,
+                    'border-blue-500 bg-blue-500': context?.selected
+                }
             ]
         }),
-        checkboxicon: {
-            class: ['w-4 h-4 transition-all duration-200 text-white text-base']
-        },
+        checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base',
         itemgroup: {
             class: ['m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto']
         },
-        filtercontainer: {
-            class: ['relative']
-        },
+        filtercontainer: 'relative',
         filterinput: {
             class: [
                 'pr-7 -mr-7',
@@ -1489,12 +1482,8 @@ export default {
                 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             ]
         },
-        filtericon: {
-            class: ['-mt-2 absolute top-1/2']
-        },
-        clearicon: {
-            class: ['text-gray-500 right-12 -mt-2 absolute top-1/2']
-        },
+        filtericon: '-mt-2 absolute top-1/2',
+        clearicon: 'text-gray-500 right-12 -mt-2 absolute top-1/2',
         transition: TRANSITIONS.overlay
     },
     textarea: {
@@ -1519,9 +1508,9 @@ export default {
         labelContainer: {
             class: ['overflow-hidden flex flex-auto cursor-pointer']
         },
-        label: ({ props }) => ({
+        label: {
             class: ['block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis', 'text-gray-800 dark:text-white/80', 'p-3 transition duration-200']
-        }),
+        },
         trigger: {
             class: ['flex items-center justify-center shrink-0', 'bg-transparent text-gray-600 dark:text-white/70 w-12 rounded-tr-lg rounded-br-lg']
         },
@@ -1535,7 +1524,13 @@ export default {
     },
     autocomplete: {
         root: ({ props }) => ({
-            class: ['relative inline-flex', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }, { 'w-full': props.multiple }]
+            class: [
+                'relative inline-flex',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                },
+                { 'w-full': props.multiple }
+            ]
         }),
         container: {
             class: [
@@ -1552,7 +1547,6 @@ export default {
             class: [
                 'm-0',
                 ' transition-colors duration-200 appearance-none rounded-lg',
-                ' ',
                 { 'rounded-tr-none rounded-br-none': props.dropdown },
                 {
                     'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)] hover:border-blue-500 focus:outline-none':
@@ -1565,16 +1559,12 @@ export default {
             class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
         },
         dropdownbutton: {
-            root: {
-                class: ['rounded-tl-none rounded-bl-none']
-            }
+            root: 'rounded-tl-none rounded-bl-none'
         },
         panel: {
             class: ['bg-white text-gray-700 border-0 rounded-md shadow-lg', 'max-h-[200px] overflow-auto', 'bg-white text-gray-700 border-0 rounded-md shadow-lg', 'dark:bg-gray-900 dark:text-white/80']
         },
-        list: {
-            class: ['py-3 list-none m-0']
-        },
+        list: 'py-3 list-none m-0',
         item: ({ context }) => ({
             class: [
                 'cursor-pointer font-normal overflow-hidden relative whitespace-nowrap',
@@ -1595,13 +1585,17 @@ export default {
     },
     chips: {
         root: ({ props }) => ({
-            class: ['flex', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+            class: [
+                'flex',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
         }),
         container: {
             class: [
                 'm-0 py-1.5 px-3 list-none cursor-text overflow-hidden flex items-center flex-wrap',
                 'w-full',
-                'm-0',
                 'font-sans text-base text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 p-3 border border-gray-300 dark:border-blue-900/40 transition-colors duration-200 appearance-none rounded-lg',
                 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             ]
@@ -1616,13 +1610,16 @@ export default {
         token: {
             class: ['py-1 px-2 mr-2 bg-gray-300 dark:bg-gray-700 text-gray-700 dark:text-white/80 rounded-full', 'cursor-default inline-flex items-center']
         },
-        removeTokenIcon: {
-            class: ['ml-2']
-        }
+        removeTokenIcon: 'ml-2'
     },
     colorpicker: {
         root: ({ props }) => ({
-            class: ['inline-block', { 'opacity-60 select-none pointer-events-none cursor-default': props.disabled }]
+            class: [
+                'inline-block',
+                {
+                    'opacity-60 select-none pointer-events-none cursor-default': props.disabled
+                }
+            ]
         }),
         input: {
             class: [
@@ -1633,13 +1630,18 @@ export default {
             ]
         },
         panel: ({ props }) => ({
-            class: ['shadow-md', 'bg-gray-800 border-gray-900', { 'relative h-48 w-52': props.inline, 'absolute h-48 w-52': !props.inline }]
+            class: [
+                'shadow-md',
+                'bg-gray-800 border-gray-900',
+                {
+                    'relative h-48 w-52': props.inline,
+                    'absolute h-48 w-52': !props.inline
+                }
+            ]
         }),
-        selector: {
-            class: ['absolute h-44 w-40 top-2 left-2']
-        },
+        selector: 'absolute h-44 w-40 top-2 left-2',
         color: {
-            class: ['h-44 w-40'],
+            class: 'h-44 w-40',
             style: '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%)'
         },
         colorhandle: {
@@ -1649,9 +1651,7 @@ export default {
             class: ['h-44 w-6 absolute top-2 left-44 opacity-85'],
             style: 'background: linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)'
         },
-        huehandle: {
-            class: ['border-solid border-2 cursor-pointer h-2 w-8 left-0 -ml-1 -mt-1 opacity-85 absolute']
-        },
+        huehandle: 'border-solid border-2 cursor-pointer h-2 w-8 left-0 -ml-1 -mt-1 opacity-85 absolute',
         transition: TRANSITIONS.overlay
     },
     editor: {
@@ -1666,7 +1666,6 @@ export default {
         }
     },
     //MISC
-
     badge: {
         root: ({ props }) => ({
             class: [
@@ -1680,7 +1679,11 @@ export default {
                     'bg-purple-500 ': props.severity == 'help',
                     'bg-red-500 ': props.severity == 'danger'
                 },
-                { 'text-xs min-w-[1.5rem] h-[1.5rem] leading-[1.5rem]': props.size == null, 'text-lg min-w-[2.25rem] h-[2.25rem] leading-[2.25rem]': props.size == 'large', 'text-2xl min-w-[3rem] h-[3rem] leading-[3rem]': props.size == 'xlarge' }
+                {
+                    'text-xs min-w-[1.5rem] h-[1.5rem] leading-[1.5rem]': props.size == null,
+                    'text-lg min-w-[2.25rem] h-[2.25rem] leading-[2.25rem]': props.size == 'large',
+                    'text-2xl min-w-[3rem] h-[3rem] leading-[3rem]': props.size == 'xlarge'
+                }
             ]
         })
     },
@@ -1689,30 +1692,31 @@ export default {
             class: [
                 'flex items-center justify-center',
                 'bg-gray-300 dark:bg-gray-800',
-                { 'rounded-lg': props.shape == 'square', 'rounded-full': props.shape == 'circle' },
-                { 'text-base h-8 w-8': props.size == null || props.size == 'normal', 'w-12 h-12 text-xl': props.size == 'large', 'w-16 h-16 text-2xl': props.size == 'xlarge' },
-                { '-ml-4 border-2 border-white dark:border-gray-900': parent.instance.$css !== undefined, '': !(parent.instance.$css !== undefined) }
+                {
+                    'rounded-lg': props.shape == 'square',
+                    'rounded-full': props.shape == 'circle'
+                },
+                {
+                    'text-base h-8 w-8': props.size == null || props.size == 'normal',
+                    'w-12 h-12 text-xl': props.size == 'large',
+                    'w-16 h-16 text-2xl': props.size == 'xlarge'
+                },
+                {
+                    '-ml-4 border-2 border-white dark:border-gray-900': parent.instance.$css !== undefined
+                }
             ]
         }),
-        image: {
-            class: ['h-full w-full']
-        }
+        image: 'h-full w-full'
     },
     avatargroup: {
-        root: {
-            class: ['flex items-center']
-        }
+        root: 'flex items-center'
     },
     chip: {
         root: {
             class: ['inline-flex items-center', 'bg-gray-200 text-gray-800 rounded-[16px] px-3 dark:text-white/80 dark:bg-gray-900']
         },
-        label: {
-            class: ['leading-6 mt-1.5 mb-1.5']
-        },
-        icon: {
-            class: ['leading-6 mr-2']
-        },
+        label: 'leading-6 mt-1.5 mb-1.5',
+        icon: 'leading-6 mr-2',
         image: {
             class: ['w-9 h-9 ml-[-0.75rem] mr-2', 'rounded-full']
         },
@@ -1721,9 +1725,9 @@ export default {
         }
     },
     progressbar: {
-        root: ({ props }) => ({
+        root: {
             class: ['overflow-hidden relative', 'border-0 h-6 bg-gray-200 rounded-md dark:bg-gray-800']
-        }),
+        },
         value: ({ props }) => ({
             class: [
                 'border-0 m-0 bg-blue-500',
@@ -1741,12 +1745,8 @@ export default {
         root: {
             class: ['relative mx-auto w-28 h-28 inline-block', 'before:block before:pt-full']
         },
-        spinner: {
-            class: ['absolute top-0 bottom-0 left-0 right-0 m-auto w-full h-full transform origin-center animate-spin']
-        },
-        circle: {
-            class: ['text-red-500 progress-spinner-circle']
-        }
+        spinner: 'absolute top-0 bottom-0 left-0 right-0 m-auto w-full h-full transform origin-center animate-spin',
+        circle: 'text-red-500 progress-spinner-circle'
     },
     skeleton: {
         root: ({ props }) => ({
@@ -1755,7 +1755,10 @@ export default {
                 '!mb-2',
                 'bg-gray-300 dark:bg-gray-800',
                 'after:absolute after:top-0 after:left-0 after:right-0 after:bottom-0 after:content after:w-full after:h-full after:bg-blue-400 after:left-full after:transform after:translate-x-full after:z-10 after:bg-gradient-to-r after:from-transparent after:via-white after:to-transparent animate-pulse',
-                { 'rounded-md': props.shape !== 'circle', 'rounded-full': props.shape == 'circle' }
+                {
+                    'rounded-md': props.shape !== 'circle',
+                    'rounded-full': props.shape == 'circle'
+                }
             ]
         })
     },
@@ -1772,26 +1775,24 @@ export default {
                     'bg-purple-500 ': props.severity == 'help',
                     'bg-red-500 ': props.severity == 'danger'
                 },
-                { 'rounded-md': !props.rounded, 'rounded-full': props.rounded }
+                {
+                    'rounded-md': !props.rounded,
+                    'rounded-full': props.rounded
+                }
             ]
         }),
-        value: {
-            class: ['leading-6']
-        },
-        icon: {
-            class: ['mr-1 text-sm']
-        }
+        value: 'leading-6',
+        icon: 'mr-1 text-sm'
     },
     inplace: {
-        display: ({ props }) => ({
+        display: {
             class: ['p-3 rounded-md transition duration-200 text-gray-700 dark:text-white/80', 'inline cursor-pointer', 'hover:bg-gray-200 hover:text-gray-700 dark:hover:bg-gray-800/80 dark:hover:text-white/80']
-        })
+        }
     },
     scrolltop: {
         root: ({ props }) => ({
             class: [
                 'fixed bottom-20 right-20 flex items-center justify-center',
-                '',
                 'ml-auto',
                 {
                     '!bg-blue-500 hover:bg-blue-600 text-white rounded-md h-8 w-8': props.target == 'parent',
@@ -1801,32 +1802,23 @@ export default {
         })
     },
     terminal: {
-        root: ({ props }) => ({
+        root: {
             class: ['border border-gray-300 p-5', 'bg-gray-900 text-white dark:border-blue-900/40 ', 'h-72 overflow-auto']
-        }),
-        container: {
-            class: ['flex items-center']
         },
-        prompt: {
-            class: ['text-yellow-400']
-        },
-        commandtext: {
-            class: ['flex-1 shrink grow-0 border-0 bg-transparent text-inherit p-0 outline-none']
-        }
+        container: 'flex items-center',
+        prompt: 'text-yellow-400',
+        commandtext: 'flex-1 shrink grow-0 border-0 bg-transparent text-inherit p-0 outline-none'
     },
     blockui: {
         root: 'relative',
         mask: 'bg-black/40'
     },
-
     //MENU
     breadcrumb: {
         root: {
             class: ['overflow-x-auto', 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 rounded-md p-4']
         },
-        menu: {
-            class: ['m-0 p-0 list-none flex items-center flex-nowrap']
-        },
+        menu: 'm-0 p-0 list-none flex items-center flex-nowrap',
         action: {
             class: [
                 'text-decoration-none flex items-center',
@@ -1834,23 +1826,17 @@ export default {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             ]
         },
-        icon: {
-            class: ['text-gray-600 dark:text-white/70']
-        },
+        icon: 'text-gray-600 dark:text-white/70',
         separator: {
             class: ['mx-2 text-gray-600 dark:text-white/70', 'flex items-center']
         }
     },
     contextmenu: {
-        root: {
-            class: ['py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-none shadow-md rounded-lg w-52']
-        },
+        root: 'py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-none shadow-md rounded-lg w-52',
         menu: {
             class: ['m-0 p-0 list-none', 'outline-none']
         },
-        menuitem: {
-            class: ['relative']
-        },
+        menuitem: 'relative',
         content: ({ context }) => ({
             class: [
                 'transition-shadow duration-200 rounded-none',
@@ -1866,18 +1852,19 @@ export default {
         action: {
             class: ['cursor-pointer flex items-center no-underline overflow-hidden relative', 'text-gray-700 dark:text-white/80 py-3 px-5 select-none']
         },
-        icon: {
-            class: ['text-gray-600 dark:text-white/70 mr-2']
-        },
-        label: {
-            class: ['text-gray-600 dark:text-white/70']
-        }
+        icon: 'text-gray-600 dark:text-white/70 mr-2',
+        label: 'text-gray-600 dark:text-white/70'
     },
     dock: {
         root: ({ props }) => ({
             class: [
                 'absolute z-1 flex justify-center items-center pointer-events-none',
-                { 'left-0 bottom-0 w-full': props.position == 'bottom', 'left-0 top-0 w-full': props.position == 'top', 'left-0 top-0 h-full': props.position == 'left', 'right-0 top-0 h-full': props.position == 'right' }
+                {
+                    'left-0 bottom-0 w-full': props.position == 'bottom',
+                    'left-0 top-0 w-full': props.position == 'top',
+                    'left-0 top-0 h-full': props.position == 'left',
+                    'right-0 top-0 h-full': props.position == 'right'
+                }
             ]
         }),
         container: {
@@ -1913,11 +1900,8 @@ export default {
             class: ['flex flex-col items-center justify-center relative overflow-hidden cursor-default', 'w-16 h-16']
         }
     },
-
     menu: {
-        root: {
-            class: ['py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 rounded-md w-48']
-        },
+        root: 'py-1 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border border-gray-300 dark:border-blue-900/40 rounded-md w-48',
         menu: {
             class: ['m-0 p-0 list-none', 'outline-none']
         },
@@ -1933,9 +1917,7 @@ export default {
         action: {
             class: ['text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative']
         },
-        icon: {
-            class: ['text-gray-600 dark:text-white/70 mr-2']
-        },
+        icon: 'text-gray-600 dark:text-white/70 mr-2',
         submenuheader: {
             class: ['m-0 p-3 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-bold rounded-tl-none rounded-tr-none']
         },
@@ -1952,17 +1934,18 @@ export default {
                 'sm:flex items-center flex-wrap sm:flex-row sm:top-auto sm:left-auto sm:relative sm:bg-transparent sm:shadow-none sm:w-auto',
                 'flex-col top-full left-0',
                 'absolute py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-full',
-                { 'hidden ': !props?.mobileActive, 'flex ': props?.mobileActive }
+                {
+                    'hidden ': !props?.mobileActive,
+                    'flex ': props?.mobileActive
+                }
             ]
         }),
-        menuitem: ({ props, context }) => ({
-            class: ['sm:relative sm:w-auto', 'w-full static']
-        }),
+        menuitem: 'sm:relative sm:w-auto w-full static',
         content: ({ props, context }) => ({
             class: [
                 ' transition-shadow duration-200',
                 '',
-                { 'rounded-md': props.root, '': !props.root },
+                { 'rounded-md': props.root },
                 {
                     'text-gray-700 dark:text-white/80': !context.focused && !context.active,
                     'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90': context.focused && !context.active,
@@ -1986,18 +1969,28 @@ export default {
                 }
             ]
         }),
-        icon: {
-            class: 'mr-2'
-        },
-        submenuicon: ({ props, context }) => ({
-            class: ['max-[960px]:ml-auto', { 'ml-2': props.root, 'ml-auto': !props.root }]
+        icon: 'mr-2',
+        submenuicon: ({ props }) => ({
+            class: [
+                'max-[960px]:ml-auto',
+                {
+                    'ml-2': props.root,
+                    'ml-auto': !props.root
+                }
+            ]
         }),
-        submenu: ({ props, context }) => ({
-            class: ['py-1 bg-white dark:bg-gray-900 border-0  sm:shadow-md sm:w-48', 'w-full static shadow-none', 'sm:absolute z-10', 'm-0 list-none', { 'sm:absolute sm:left-full sm:top-0': props.level > 1 }]
+        submenu: ({ props }) => ({
+            class: [
+                'py-1 bg-white dark:bg-gray-900 border-0  sm:shadow-md sm:w-48',
+                'w-full static shadow-none',
+                'sm:absolute z-10',
+                'm-0 list-none',
+                {
+                    'sm:absolute sm:left-full sm:top-0': props.level > 1
+                }
+            ]
         }),
-        separator: {
-            class: ['border-t border-gray-300 dark:border-blue-900/40 my-1']
-        },
+        separator: 'border-t border-gray-300 dark:border-blue-900/40 my-1',
         button: {
             class: [
                 'flex sm:hidden w-8 h-8 rounded-full text-gray-600 dark:text-white/80 transition duration-200 ease-in-out',
@@ -2008,14 +2001,20 @@ export default {
         }
     },
     megamenu: {
-        root: ({ props, context }) => ({
+        root: ({ props }) => ({
             class: ['bg-gray-100 dark:bg-gray-900  border border-gray-300 dark:border-blue-900/40  rounded-md', 'flex relative', { 'p-2 items-center': props.orientation == 'horizontal', 'flex-col w-48 p-0 py-1': props.orientation !== 'horizontal' }]
         }),
-        menu: ({ props, context }) => ({
+        menu: {
             class: ['m-0 sm:p-0 list-none relative', 'outline-none', 'flex items-center flex-wrap flex-row top-auto left-auto relative bg-transparent shadow-none w-auto']
-        }),
-        menuitem: ({ props, context }) => ({
-            class: ['relative', { 'w-auto': props.horizontal, 'w-full': !props.horizontal }]
+        },
+        menuitem: ({ props }) => ({
+            class: [
+                'relative',
+                {
+                    'w-auto': props.horizontal,
+                    'w-full': !props.horizontal
+                }
+            ]
         }),
         content: ({ props, context }) => ({
             class: [
@@ -2033,24 +2032,31 @@ export default {
                 }
             ]
         }),
-        action: ({ props, context }) => ({
+        action: {
             class: ['select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none']
-        }),
+        },
         icon: {
             class: 'mr-2'
         },
-        submenuicon: ({ props, context }) => ({
-            class: [{ 'ml-2': props.horizontal, 'ml-auto': !props.horizontal }]
+        submenuicon: ({ props }) => ({
+            class: [
+                {
+                    'ml-2': props.horizontal,
+                    'ml-auto': !props.horizontal
+                }
+            ]
         }),
-        panel: ({ props, context }) => ({
-            class: ['py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-auto', 'absolute z-10', { 'left-full top-0': !props.horizontal }]
+        panel: ({ props }) => ({
+            class: [
+                'py-1 bg-white dark:bg-gray-900 border-0 shadow-md w-auto',
+                'absolute z-10',
+                {
+                    'left-full top-0': !props.horizontal
+                }
+            ]
         }),
-        grid: {
-            class: ['flex']
-        },
-        column: {
-            class: ['w-1/2']
-        },
+        grid: 'flex',
+        column: 'w-1/2',
         submenu: {
             class: ['m-0 list-none', 'py-1 w-48']
         },
@@ -2059,18 +2065,14 @@ export default {
         }
     },
     panelmenu: {
-        root: ({ props, instance }) => ({
-            class: ['w-full md:w-[25rem]']
-        }),
-        panel: {
-            class: ['mb-1']
-        },
-        header: ({ context }) => ({
+        root: 'w-full md:w-[25rem]',
+        panel: 'mb-1',
+        header: {
             class: [
                 'outline-none',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]' // Focus
             ]
-        }),
+        },
         headercontent: {
             class: [
                 'border border-solid border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 bg-gray-100 dark:bg-gray-900 rounded-md transition-shadow duration-200',
@@ -2080,15 +2082,9 @@ export default {
         headeraction: {
             class: ['flex items-center select-none cursor-pointer relative no-underline', 'text-gray-700 dark:text-white/80 p-5 font-bold']
         },
-        submenuicon: {
-            class: ['mr-2']
-        },
-        headericon: {
-            class: ['mr-2']
-        },
-        menucontent: {
-            class: ['py-1 border border-t-0 border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 rounded-t-none rounded-br-md rounded-bl-md']
-        },
+        submenuicon: 'mr-2',
+        headericon: 'mr-2',
+        menucontent: 'py-1 border border-t-0 border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 rounded-t-none rounded-br-md rounded-bl-md',
         menu: {
             class: ['outline-none', 'm-0 p-0 list-none']
         },
@@ -2104,24 +2100,16 @@ export default {
         action: {
             class: ['text-gray-700 dark:text-white/80 py-3 px-5 select-none', 'flex items-center cursor-pointer no-underline relative overflow-hidden']
         },
-        icon: {
-            class: ['mr-2']
-        },
-        submenu: {
-            class: ['p-0 pl-4 m-0 list-none']
-        },
+        icon: 'mr-2',
+        submenu: 'p-0 pl-4 m-0 list-none',
         transition: TRANSITIONS.toggleable
     },
     steps: {
-        root: {
-            class: ['relative']
-        },
-        menu: {
-            class: ['p-0 m-0 list-none flex']
-        },
-        menuitem: ({ props }) => ({
+        root: 'relative',
+        menu: 'p-0 m-0 list-none flex',
+        menuitem: {
             class: ['relative flex justify-center flex-1 overflow-hidden', 'before:border-t before:border-gray-300 before:dark:border-blue-900/40 before:w-full before:absolute before:top-1/4 before:left-0 before:transform before:-translate-y-1/2']
-        }),
+        },
         action: {
             class: [
                 'inline-flex flex-col items-center overflow-hidden',
@@ -2136,17 +2124,12 @@ export default {
             class: ['block', 'whitespace-nowrap overflow-hidden overflow-ellipsis max-w-full', 'mt-2 text-gray-500 dark:text-white/60']
         }
     },
-
     tabmenu: {
-        root: {
-            class: ['overflow-x-auto']
-        },
+        root: 'overflow-x-auto',
         menu: {
             class: ['flex m-0 p-0 list-none flex-nowrap', 'bg-white border-solid border-gray-300 border-b-2', 'outline-none no-underline text-base list-none']
         },
-        menuitem: {
-            class: ['mr-0']
-        },
+        menuitem: 'mr-0',
         action: ({ context, state }) => ({
             class: [
                 'cursor-pointer select-none flex items-center relative no-underline overflow-hidden',
@@ -2159,9 +2142,7 @@ export default {
             ],
             style: 'top:2px'
         }),
-        icon: {
-            class: ['mr-2']
-        }
+        icon: 'mr-2'
     },
     tieredmenu: {
         root: {
@@ -2170,9 +2151,7 @@ export default {
         menu: {
             class: ['outline-none', 'm-0 p-0 list-none']
         },
-        menuitem: {
-            class: ['relative']
-        },
+        menuitem: 'relative',
         content: ({ context }) => ({
             class: [
                 'transition-shadow duration-200 border-none rounded-none',
@@ -2189,30 +2168,28 @@ export default {
             class: [
                 'py-3 px-5 select-none',
                 'flex items-center cursor-pointer no-underline relative overflow-hidden',
-                { 'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active, 'text-blue-600 bg-blue-100': context.active }
+                {
+                    'text-gray-700 dark:text-white/80 hover:text-gray-700 dark:hover:text-white/80 hover:bg-gray-200 dark:hover:bg-gray-800/80': !context.active,
+                    'text-blue-600 bg-blue-100': context.active
+                }
             ]
         }),
-        icon: {
-            class: ['mr-2']
-        },
-        submenuicon: {
-            class: ['ml-auto']
-        },
-        separator: {
-            class: ['border-t border-gray-300 my-1 dark:border-blue-900/40']
-        },
+        icon: 'mr-2',
+        submenuicon: 'ml-auto',
+        separator: 'border-t border-gray-300 my-1 dark:border-blue-900/40',
         submenu: {
             class: ['py-1 bg-white dark:bg-gray-900 border-0 shadow-md min-w-full', 'absolute z-10', 'left-full top-0']
         }
     },
     //MEDIA
-
     image: {
-        root: {
-            class: ['relative inline-block']
-        },
+        root: 'relative inline-block',
         button: {
-            class: ['absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300', 'bg-transparent text-gray-100', 'hover:opacity-100 hover:cursor-pointer hover:bg-black hover:bg-opacity-50']
+            class: [
+                'absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300',
+                'bg-transparent text-gray-100',
+                'hover:opacity-100 hover:cursor-pointer hover:bg-black hover:bg-opacity-50' //Hover
+            ]
         },
         mask: {
             class: ['fixed top-0 left-0 w-full h-full', 'flex items-center justify-center', 'bg-black bg-opacity-90']
@@ -2228,9 +2205,7 @@ export default {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             ]
         },
-        rotaterighticon: {
-            class: ['w-6 h-6']
-        },
+        rotaterighticon: 'w-6 h-6',
         rotateleftbutton: {
             class: [
                 'flex justify-center items-center',
@@ -2239,9 +2214,7 @@ export default {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             ]
         },
-        rotatelefticon: {
-            class: ['w-6 h-6']
-        },
+        rotatelefticon: 'w-6 h-6',
         zoomoutbutton: {
             class: [
                 'flex justify-center items-center',
@@ -2250,9 +2223,7 @@ export default {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             ]
         },
-        zoomouticon: {
-            class: ['w-6 h-6']
-        },
+        zoomouticon: 'w-6 h-6',
         zoominbutton: {
             class: [
                 'flex justify-center items-center',
@@ -2261,9 +2232,7 @@ export default {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             ]
         },
-        zoominicon: {
-            class: ['w-6 h-6']
-        },
+        zoominicon: 'w-6 h-6',
         closebutton: {
             class: [
                 'flex justify-center items-center',
@@ -2272,29 +2241,15 @@ export default {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             ]
         },
-        closeicon: {
-            class: ['w-6 h-6']
-        }
+        closeicon: 'w-6 h-6'
     },
     galleria: {
-        root: ({ instance, props }) => ({
-            class: ['flex flex-col']
-        }),
-        content: {
-            class: ['flex flex-col']
-        },
-        itemwrapper: {
-            class: ['flex flex-col relative']
-        },
-        itemcontainer: {
-            class: ['relative flex h-full']
-        },
-        item: {
-            class: ['flex justify-center items-center h-full w-full']
-        },
-        thumbnailwrapper: {
-            class: ['flex flex-col overflow-auto shrink-0']
-        },
+        root: 'flex flex-col',
+        content: 'flex flex-col',
+        itemwrapper: 'flex flex-col relative',
+        itemcontainer: 'relative flex h-full',
+        item: 'flex justify-center items-center h-full w-full',
+        thumbnailwrapper: 'flex flex-col overflow-auto shrink-0',
         thumbnailcontainer: {
             class: ['flex flex-row', 'bg-black/90 p-4']
         },
@@ -2306,12 +2261,8 @@ export default {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             ]
         },
-        thumbnailitemscontainer: {
-            class: ['overflow-hidden w-full']
-        },
-        thumbnailitems: {
-            class: ['flex']
-        },
+        thumbnailitemscontainer: 'overflow-hidden w-full',
+        thumbnailitems: 'flex',
         thumbnailitem: {
             class: ['overflow-auto flex items-center justify-center cursor-pointer opacity-50', 'flex-1 grow-0 shrink-0 w-20', 'hover:opacity-100 hover:transition-opacity hover:duration-300']
         },
@@ -2326,14 +2277,15 @@ export default {
         indicators: {
             class: ['flex items-center justify-center', 'p-4']
         },
-        indicator: {
-            class: ['mr-2']
-        },
-        indicatorbutton: ({ props, context }) => ({
+        indicator: 'mr-2',
+        indicatorbutton: ({ context }) => ({
             class: [
                 'w-4 h-4 transition duration-200 rounded-full',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
-                { 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.highlighted, 'bg-blue-500 hover:bg-blue-600': context.highlighted }
+                {
+                    'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.highlighted,
+                    'bg-blue-500 hover:bg-blue-600': context.highlighted
+                }
             ]
         }),
         mask: {
@@ -2347,9 +2299,7 @@ export default {
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]'
             ]
         },
-        closeicon: {
-            class: ['w-6 h-6']
-        },
+        closeicon: 'w-6 h-6',
         previousitembutton: {
             class: [
                 'inline-flex justify-center items-center overflow-hidden',
@@ -2375,38 +2325,51 @@ export default {
         }
     },
     carousel: {
-        root: {
-            class: ['flex flex-col']
-        },
-        content: {
-            class: ['flex flex-col overflow-auto']
-        },
-        container: ({ props, context }) => ({
-            class: ['flex', { 'flex-row': props.orientation !== 'vertical', 'flex-col': props.orientation == 'vertical' }]
+        root: 'flex flex-col',
+        content: 'flex flex-col overflow-auto',
+        container: ({ props }) => ({
+            class: [
+                'flex',
+                {
+                    'flex-row': props.orientation !== 'vertical',
+                    'flex-col': props.orientation == 'vertical'
+                }
+            ]
         }),
-        previousbutton: ({ props, context }) => ({
+        previousbutton: {
             class: ['flex justify-center items-center self-center overflow-hidden relative shrink-0 grow-0', 'w-8 h-8 text-gray-600 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mx-2']
-        }),
-        itemscontent: {
-            class: ['overflow-hidden w-full']
         },
-        itemscontainer: ({ props, context }) => ({
-            class: ['flex ', { 'flex-row': props.orientation !== 'vertical', 'flex-col h-full': props.orientation == 'vertical' }]
+        itemscontent: 'overflow-hidden w-full',
+        itemscontainer: ({ props }) => ({
+            class: [
+                'flex ',
+                {
+                    'flex-row': props.orientation !== 'vertical',
+                    'flex-col h-full': props.orientation == 'vertical'
+                }
+            ]
         }),
-        item: ({ props, context }) => ({
-            class: ['flex shrink-0 grow', { 'w-1/3': props.orientation !== 'vertical', 'w-full': props.orientation == 'vertical' }]
+        item: ({ props }) => ({
+            class: [
+                'flex shrink-0 grow',
+                {
+                    'w-1/3': props.orientation !== 'vertical',
+                    'w-full': props.orientation == 'vertical'
+                }
+            ]
         }),
         indicators: {
             class: ['flex flex-row justify-center flex-wrap']
         },
-        indicator: ({ props, context }) => ({
-            class: ['mr-2 mb-2']
-        }),
-        indicatorbutton: ({ props, context }) => ({
+        indicator: 'mr-2 mb-2',
+        indicatorbutton: ({ context }) => ({
             class: [
                 'w-8 h-2 transition duration-200 rounded-0',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]',
-                { 'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.highlighted, 'bg-blue-500 hover:bg-blue-600': context.highlighted }
+                {
+                    'bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600': !context.highlighted,
+                    'bg-blue-500 hover:bg-blue-600': context.highlighted
+                }
             ]
         })
     },
@@ -2414,15 +2377,9 @@ export default {
         root: {
             class: ['max-w-[30rem] md:w-full', 'border border-solid border-gray-300 dark:border-blue-900/40 bg-white dark:bg-gray-900 text-gray-700 dark:text-white/80 p-5 rounded-md']
         },
-        wrapper: {
-            class: ['overflow-auto']
-        },
-        container: {
-            class: ['m-0 p-0 list-none overflow-auto']
-        },
-        node: {
-            class: ['p-1 outline-none']
-        },
+        wrapper: 'overflow-auto',
+        container: 'm-0 p-0 list-none overflow-auto',
+        node: 'p-1 outline-none',
         content: ({ context, props }) => ({
             class: [
                 'flex items-center',
@@ -2446,25 +2403,24 @@ export default {
                 }
             ]
         }),
-        checkboxcontainer: {
-            class: ['mr-2']
-        },
+        checkboxcontainer: 'mr-2',
         checkbox: ({ context, props }) => ({
             class: [
                 'cursor-pointer inline-flex relative select-none align-bottom',
                 'w-6 h-6',
                 'flex items-center justify-center',
                 'border-2 w-6 h-6 rounded-lg transition-colors duration-200 text-white text-base dark:text-gray-900',
-                { 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked, 'border-blue-500 text-white bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked },
+                {
+                    'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900': !context.checked,
+                    'border-blue-500 text-white bg-blue-500 dark:border-blue-400 dark:bg-blue-400': context.checked
+                },
                 {
                     'hover:border-blue-500 dark:hover:border-blue-400 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[inset_0_0_0_0.2rem_rgba(147,197,253,0.5)]': !props.disabled,
                     'cursor-default opacity-60': props.disabled
                 }
             ]
         }),
-        nodeicon: {
-            class: ['mr-2 text-gray-600 dark:text-white/70']
-        },
+        nodeicon: 'mr-2 text-gray-600 dark:text-white/70',
         subgroup: {
             class: ['m-0 list-none', 'p-0 pl-4']
         },
@@ -2478,9 +2434,7 @@ export default {
                 'hover:border-blue-500 focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]'
             ]
         },
-        searchicon: {
-            class: ['absolute top-1/2 -mt-2 right-3 text-gray-600 dark:hover:text-white/70']
-        }
+        searchicon: 'absolute top-1/2 -mt-2 right-3 text-gray-600 dark:hover:text-white/70'
     },
     // DATA
     timeline: {
@@ -2525,9 +2479,7 @@ export default {
                 }
             ]
         }),
-        marker: {
-            class: ['flex self-baseline w-4 h-4 rounded-full border-2 border-blue-500 bg-white dark:border-blue-300 dark:bg-blue-900/40']
-        },
+        marker: 'flex self-baseline w-4 h-4 rounded-full border-2 border-blue-500 bg-white dark:border-blue-300 dark:bg-blue-900/40',
         connector: ({ props }) => ({
             class: [
                 'grow bg-gray-300 dark:bg-blue-900/40',
@@ -2562,12 +2514,8 @@ export default {
                 'dark:bg-gray-900 dark:text-white/80' // Dark Mode
             ]
         },
-        grid: {
-            class: 'flex flex-wrap ml-0 mr-0 mt-0 bg-white dark:bg-gray-900'
-        },
-        header: {
-            class: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold'
-        }
+        grid: 'flex flex-wrap ml-0 mr-0 mt-0 bg-white dark:bg-gray-900',
+        header: 'bg-gray-100 dark:bg-gray-800 text-gray-800 dark:text-white/80 border-gray-200 dark:border-blue-900/40 border-t border-b p-4 font-bold'
     },
     dataviewlayoutoptions: {
         listbutton: ({ props }) => ({
@@ -2588,21 +2536,15 @@ export default {
         })
     },
     organizationchart: {
-        table: {
-            class: 'mx-auto my-0 border-spacing-0 border-separate'
-        },
-        cell: {
-            class: 'text-center align-top py-0 px-3'
-        },
+        table: 'mx-auto my-0 border-spacing-0 border-separate',
+        cell: 'text-center align-top py-0 px-3',
         node: {
             class: [
                 'relative inline-block bg-white border border-gray-300 text-gray-600 p-5',
                 'dark:border-blue-900/40 dark:bg-gray-900 dark:text-white/80' // Dark Mode
             ]
         },
-        linecell: {
-            class: 'text-center align-top py-0 px-3'
-        },
+        linecell: 'text-center align-top py-0 px-3',
         linedown: {
             class: [
                 'mx-auto my-0 w-px h-[20px] bg-gray-300',
@@ -2612,41 +2554,33 @@ export default {
         lineleft: ({ context }) => ({
             class: [
                 'text-center align-top py-0 px-3 rounded-none border-r border-gray-300',
+                'dark:border-blue-900/40', //Dark Mode
                 {
                     'border-t': context.lineTop
-                },
-                'dark:border-blue-900/40' //Dark Mode
+                }
             ]
         }),
         lineright: ({ context }) => ({
             class: [
                 'text-center align-top py-0 px-3 rounded-none',
+                'dark:border-blue-900/40', //Dark Mode
                 {
                     'border-t border-gray-300': context.lineTop
-                },
-                'dark:border-blue-900/40' //Dark Mode
+                }
             ]
         }),
-        nodecell: {
-            class: 'text-center align-top py-0 px-3'
-        },
+        nodecell: 'text-center align-top py-0 px-3',
         nodetoggler: {
             class: [
                 'absolute bottom-[-0.75rem] left-2/4 -ml-3 w-6 h-6 bg-inherit text-inherit rounded-full z-2 cursor-pointer no-underline select-none',
                 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]' // Focus styles
             ]
         },
-        nodetogglericon: {
-            class: 'relative inline-block w-4 h-4'
-        }
+        nodetogglericon: 'relative inline-block w-4 h-4'
     },
     orderlist: {
-        root: {
-            class: 'flex'
-        },
-        controls: {
-            class: 'flex flex-col justify-center p-5'
-        },
+        root: 'flex',
+        controls: 'flex flex-col justify-center p-5',
         moveupbutton: {
             root: ({ context }) => ({
                 class: [
@@ -2711,9 +2645,7 @@ export default {
             }),
             label: 'flex-initial w-0'
         },
-        container: {
-            class: 'flex-auto'
-        },
+        container: 'flex-auto',
         header: {
             class: [
                 'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
@@ -2741,12 +2673,8 @@ export default {
         })
     },
     picklist: {
-        root: {
-            class: 'flex'
-        },
-        sourcecontrols: {
-            class: 'flex flex-col justify-center p-5'
-        },
+        root: 'flex',
+        sourcecontrols: 'flex flex-col justify-center p-5',
         sourcemoveupbutton: {
             root: ({ context }) => ({
                 class: [
@@ -2811,9 +2739,7 @@ export default {
             }),
             label: 'flex-initial w-0'
         },
-        sourcewrapper: {
-            class: 'grow shrink basis-2/4'
-        },
+        sourcewrapper: 'grow shrink basis-2/4',
         sourceheader: {
             class: [
                 'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
@@ -2839,9 +2765,7 @@ export default {
                 }
             ]
         }),
-        buttons: {
-            class: 'flex flex-col justify-center p-5'
-        },
+        buttons: 'flex flex-col justify-center p-5',
         movetotargetbutton: {
             root: ({ context }) => ({
                 class: [
@@ -2906,9 +2830,7 @@ export default {
             }),
             label: 'flex-initial w-0'
         },
-        targetcontrols: {
-            class: 'flex flex-col justify-center p-5'
-        },
+        targetcontrols: 'flex flex-col justify-center p-5',
         targetmoveupbutton: {
             root: ({ context }) => ({
                 class: [
@@ -2973,9 +2895,7 @@ export default {
             }),
             label: 'flex-initial w-0'
         },
-        targetwrapper: {
-            class: 'grow shrink basis-2/4'
-        },
+        targetwrapper: 'grow shrink basis-2/4',
         targetheader: {
             class: [
                 'bg-slate-50 text-slate-700 border border-gray-300 p-5 font-bold border-b-0 rounded-t-md',
@@ -3090,12 +3010,8 @@ export default {
                     'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
                 ]
             },
-            wrapper: {
-                class: 'overflow-auto'
-            },
-            list: {
-                class: 'm-0 p-0 py-3 list-none'
-            },
+            wrapper: 'overflow-auto',
+            list: 'm-0 p-0 py-3 list-none',
             item: ({ context }) => ({
                 class: [
                     'relative font-normal cursor-pointer space-nowrap overflow-hidden',
@@ -3111,9 +3027,7 @@ export default {
             })
         },
         jumptopageinput: {
-            root: {
-                class: 'inline-flex mx-2'
-            },
+            root: 'inline-flex mx-2',
             input: {
                 class: [
                     'font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none',
@@ -3156,12 +3070,8 @@ export default {
                     'dark:bg-gray-900 dark:text-white/80 dark:border-blue-900/40' //Dark Mode
                 ]
             },
-            wrapper: {
-                class: 'overflow-auto'
-            },
-            list: {
-                class: 'm-0 p-0 py-3 list-none'
-            },
+            wrapper: 'overflow-auto',
+            list: 'm-0 p-0 py-3 list-none',
             item: ({ context }) => ({
                 class: [
                     'relative font-normal cursor-pointer space-nowrap overflow-hidden',
@@ -3194,9 +3104,7 @@ export default {
                 'dark:bg-gray-950/40' // Dark Mode
             ]
         },
-        loadingicon: {
-            class: 'w-8 h-8'
-        },
+        loadingicon: 'w-8 h-8',
         header: {
             class: [
                 'bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold',
@@ -3217,9 +3125,7 @@ export default {
                 'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
             ]
         },
-        table: {
-            class: 'border-collapse table-fixed w-full'
-        },
+        table: 'border-collapse table-fixed w-full',
         thead: ({ props }) => ({
             class: [
                 {
@@ -3308,9 +3214,7 @@ export default {
                     'dark:text-white/80 dark:bg-blue-500/40' // Dark Mode
                 ]
             },
-            columnresizer: {
-                class: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent'
-            },
+            columnresizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
             checkboxwrapper: {
                 class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6 mr-2']
             },
@@ -3333,9 +3237,7 @@ export default {
                 ]
             })
         },
-        resizehelper: {
-            class: ['absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300']
-        }
+        resizehelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
     },
     datatable: {
         root: ({ props }) => ({
@@ -3354,9 +3256,7 @@ export default {
                 'dark:bg-gray-950/40' // Dark Mode
             ]
         },
-        loadingicon: {
-            class: 'w-8 h-8'
-        },
+        loadingicon: 'w-8 h-8',
         wrapper: ({ props }) => ({
             class: [
                 {
@@ -3372,9 +3272,7 @@ export default {
                 props.showGridlines ? 'border-x border-t border-b-0' : 'border-y border-x-0'
             ]
         }),
-        table: {
-            class: 'w-full border-spacing-0'
-        },
+        table: 'w-full border-spacing-0',
         thead: ({ context }) => ({
             class: [
                 {
@@ -3417,9 +3315,7 @@ export default {
                     }
                 ]
             }),
-            headercontent: {
-                class: 'flex items-center'
-            },
+            headercontent: 'flex items-center',
             bodycell: ({ props, context }) => ({
                 class: [
                     'text-left border-0 border-b border-solid border-gray-300',
@@ -3454,9 +3350,7 @@ export default {
                     'dark:text-white/80 dark:bg-blue-400' // Dark Mode
                 ]
             },
-            columnfilter: {
-                class: 'inline-flex items-center ml-auto'
-            },
+            columnfilter: 'inline-flex items-center ml-auto',
             filteroverlay: {
                 class: [
                     'bg-white text-gray-600 border-0 rounded-md min-w-[12.5rem]',
@@ -3464,13 +3358,9 @@ export default {
                 ]
             },
             filtermatchmodedropdown: {
-                root: {
-                    class: 'min-[0px]:flex mb-2'
-                }
-            },
-            filterrowitems: {
-                class: 'm-0 p-0 py-3 list-none '
+                root: 'min-[0px]:flex mb-2'
             },
+            filterrowitems: 'm-0 p-0 py-3 list-none ',
             filterrowitem: ({ context }) => ({
                 class: ['m-0 py-3 px-5 bg-transparent', 'transition duration-200', context?.highlighted ? 'text-blue-700 bg-blue-100 dark:text-white/80 dark:bg-blue-300' : 'text-gray-600 bg-transparent dark:text-white/80 dark:bg-transparent']
             }),
@@ -3481,47 +3371,25 @@ export default {
                 ]
             },
             filteroperatordropdown: {
-                root: {
-                    class: 'min-[0px]:flex'
-                }
-            },
-            filterconstraint: {
-                class: 'p-5 border-b border-solid border-gray-300 dark:border-blue-900/40'
-            },
-            filteraddrule: {
-                class: 'py-3 px-5'
+                root: 'min-[0px]:flex'
             },
+            filterconstraint: 'p-5 border-b border-solid border-gray-300 dark:border-blue-900/40',
+            filteraddrule: 'py-3 px-5',
             filteraddrulebutton: {
-                root: {
-                    class: 'justify-center w-full min-[0px]:text-sm'
-                },
-                label: {
-                    class: 'flex-auto grow-0'
-                },
-                icon: {
-                    class: 'mr-2'
-                }
+                root: 'justify-center w-full min-[0px]:text-sm',
+                label: 'flex-auto grow-0',
+                icon: 'mr-2'
             },
             filterremovebutton: {
-                root: {
-                    class: 'ml-2'
-                },
-                label: {
-                    class: 'grow-0'
-                }
-            },
-            filterbuttonbar: {
-                class: 'flex items-center justify-between p-5'
+                root: 'ml-2',
+                label: 'grow-0'
             },
+            filterbuttonbar: 'flex items-center justify-between p-5',
             filterclearbutton: {
-                root: {
-                    class: 'w-auto min-[0px]:text-sm border-blue-500 text-blue-500 px-4 py-3'
-                }
+                root: 'w-auto min-[0px]:text-sm border-blue-500 text-blue-500 px-4 py-3'
             },
             filterapplybutton: {
-                root: {
-                    class: 'w-auto min-[0px]:text-sm px-4 py-3'
-                }
+                root: 'w-auto min-[0px]:text-sm px-4 py-3'
             },
             filtermenubutton: ({ context }) => ({
                 class: [
@@ -3545,12 +3413,8 @@ export default {
                     }
                 ]
             }),
-            columnresizer: {
-                class: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent'
-            },
-            rowreordericon: {
-                class: 'cursor-move'
-            },
+            columnresizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
+            rowreordericon: 'cursor-move',
             roweditorinitbutton: {
                 class: [
                     'inline-flex items-center justify-center overflow-hidden relative',
@@ -3618,9 +3482,7 @@ export default {
                     }
                 ]
             }),
-            headercheckboxicon: {
-                class: ['w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900']
-            },
+            headercheckboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
             checkboxwrapper: {
                 class: ['cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6']
             },
@@ -3635,9 +3497,7 @@ export default {
                     }
                 ]
             }),
-            checkboxicon: {
-                class: ['w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900']
-            }
+            checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
         },
         bodyrow: ({ context }) => ({
             class: [
@@ -3652,9 +3512,7 @@ export default {
                 }
             ]
         }),
-        rowexpansion: {
-            class: 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80'
-        },
+        rowexpansion: 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
         rowgroupheader: {
             class: ['sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200']
         },
@@ -3670,14 +3528,9 @@ export default {
                 'dark:text-white/70' // Dark Mode
             ]
         },
-        rowgrouptogglericon: {
-            class: 'inline-block w-4 h-4'
-        },
-        resizehelper: {
-            class: ['absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300']
-        }
+        rowgrouptogglericon: 'inline-block w-4 h-4',
+        resizehelper: 'absolute hidden w-px z-10 bg-blue-500 dark:bg-blue-300'
     },
-
     // CHART
     chart: {
         root: 'relative'