diff --git a/components/doc/calendar/theming/tailwinddoc.js b/components/doc/calendar/theming/tailwinddoc.js
index fd4cf5a2b6..6054d24860 100644
--- a/components/doc/calendar/theming/tailwinddoc.js
+++ b/components/doc/calendar/theming/tailwinddoc.js
@@ -29,11 +29,11 @@ const Tailwind = {
                 })
             })
         },
-        dropdownbutton: ({ props }) => ({
-            root: {
-                className: classNames({ 'rounded-l-none': props.showIcon })
-            }
-        }),
+        dropdownButton: {
+            root: ({ props }) => ({
+                className: classNames({ 'rounded-l-none': props.icon })
+            })
+        },
         panel: ({ props }) => ({
             className: classNames('bg-white dark:bg-gray-900', 'min-w-[350px]', {
                 'shadow-md border-0 absolute': !props.inline,
@@ -43,12 +43,14 @@ const Tailwind = {
         header: {
             className: classNames('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')
         },
-        previousbutton: {
-            className: classNames(
-                'flex items-center justify-center cursor-pointer overflow-hidden relative',
-                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
-                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
-            )
+        previousButton: {
+            root: ({ props }) => ({
+                className: classNames(
+                    'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                    'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                    'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+                )
+            })
         },
         title: 'leading-8 mx-auto',
         monthTitle: {
@@ -57,20 +59,22 @@ const Tailwind = {
         yearTitle: {
             className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'hover:text-blue-500')
         },
-        nextbutton: {
-            className: classNames(
-                'flex items-center justify-center cursor-pointer overflow-hidden relative',
-                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
-                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
-            )
+        nextButton: {
+            root: ({ props }) => ({
+                className: classNames(
+                    'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                    'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                    'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+                )
+            })
         },
         table: {
             className: classNames('border-collapse w-full', 'my-2')
         },
-        tableheadercell: 'p-2',
+        tableHeaderCell: 'p-2',
         weekday: 'text-gray-600 dark:text-white/70',
         day: 'p-2',
-        daylabel: ({ context }) => ({
+        dayLabel: ({ context }) => ({
             className: classNames(
                 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border',
                 'flex items-center justify-center mx-auto overflow-hidden relative',
@@ -85,7 +89,7 @@ const Tailwind = {
                 }
             )
         }),
-        monthpicker: 'my-2',
+        monthPicker: 'my-2',
         month: ({ context }) => ({
             className: classNames(
                 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
@@ -94,7 +98,7 @@ const Tailwind = {
                 { '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 }
             )
         }),
-        yearpicker: {
+        yearPicker: {
             className: classNames('my-2')
         },
         year: ({ context }) => ({
@@ -108,33 +112,67 @@ const Tailwind = {
                 }
             )
         }),
-        timepicker: {
+        timePicker: {
             className: classNames('flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2')
         },
-        separatorcontainer: '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: {
+        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: {
             className: classNames(
                 'flex items-center justify-center cursor-pointer overflow-hidden relative',
                 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
                 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
             )
         },
-        decrementbutton: {
+        decrementButton: {
             className: classNames(
                 'flex items-center justify-center cursor-pointer overflow-hidden relative',
                 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
                 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
             )
         },
-        groupcontainer: 'flex',
+        groupContainer: 'flex',
         group: {
             className: classNames('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: {
+            className: classNames('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: 'overflow-auto',
+        list: 'py-3 list-none m-0',
+        item: ({ context }) => ({
+            className: classNames('cursor-pointer font-normal overflow-hidden relative whitespace-nowrap', 'm-0 p-3 border-0  transition-shadow duration-200 rounded-none', {
+                'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': !context.focused && !context.selected,
+                'bg-gray-300 text-gray-700 dark:text-white/80 dark:bg-gray-800/90 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:bg-gray-800': context.focused && !context.selected,
+                'bg-blue-100 text-blue-700 dark:bg-blue-400 dark:text-white/80': context.focused && context.selected,
+                'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': !context.focused && context.selected
+            })
+        }),
+        itemgroup: {
+            className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
+        },
+        header: {
+            className: classNames('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: 'relative',
+        filterinput: {
+            root: {
+                className: classNames(
+                    'pr-7 -mr-7',
+                    'w-full',
+                    'font-sans text-base text-gray-700 bg-white py-3 px-3 border border-gray-300 transition duration-200 rounded-lg appearance-none',
+                    'dark:bg-gray-900 dark:border-blue-900/40 dark:hover:border-blue-300 dark:text-white/80',
+                    '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: '-mt-2 absolute top-1/2'
     }
         `
     };
diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js
index cbf1728d5f..7dd1ebc461 100644
--- a/components/lib/calendar/Calendar.js
+++ b/components/lib/calendar/Calendar.js
@@ -2682,12 +2682,7 @@ export const Calendar = React.memo(
                 ptm('previousButton')
             );
 
-            return (
-                <button ref={previousButton} {...previousButtonProps}>
-                    {backwardNavigatorIcon}
-                    <Ripple />
-                </button>
-            );
+            return <Button type="button" ref={previousButton} icon={backwardNavigatorIcon} {...previousButtonProps} />;
         };
 
         const createForwardNavigator = (isVisible) => {
@@ -2709,12 +2704,7 @@ export const Calendar = React.memo(
                 ptm('nextButton')
             );
 
-            return (
-                <button ref={nextButton} {...nextButtonProps}>
-                    {forwardNavigatorIcon}
-                    <Ripple />
-                </button>
-            );
+            return <Button type="button" ref={nextButton} icon={forwardNavigatorIcon} {...nextButtonProps} />;
         };
 
         const renderMonthsNavigator = (index) => {
diff --git a/components/lib/passthrough/tailwind/index.js b/components/lib/passthrough/tailwind/index.js
index 9a2c646a36..45c17c669e 100644
--- a/components/lib/passthrough/tailwind/index.js
+++ b/components/lib/passthrough/tailwind/index.js
@@ -1132,11 +1132,11 @@ const Tailwind = {
                 })
             })
         },
-        dropdownbutton: ({ props }) => ({
-            root: {
-                className: classNames({ 'rounded-l-none': props.showIcon })
-            }
-        }),
+        dropdownButton: {
+            root: ({ props }) => ({
+                className: classNames({ 'rounded-l-none': props.icon })
+            })
+        },
         panel: ({ props }) => ({
             className: classNames('bg-white dark:bg-gray-900', 'min-w-[350px]', {
                 'shadow-md border-0 absolute': !props.inline,
@@ -1146,12 +1146,14 @@ const Tailwind = {
         header: {
             className: classNames('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')
         },
-        previousbutton: {
-            className: classNames(
-                'flex items-center justify-center cursor-pointer overflow-hidden relative',
-                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
-                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
-            )
+        previousButton: {
+            root: ({ props }) => ({
+                className: classNames(
+                    'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                    'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                    'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+                )
+            })
         },
         title: 'leading-8 mx-auto',
         monthTitle: {
@@ -1160,20 +1162,22 @@ const Tailwind = {
         yearTitle: {
             className: classNames('text-gray-700 dark:text-white/80 transition duration-200 font-semibold p-2', 'hover:text-blue-500')
         },
-        nextbutton: {
-            className: classNames(
-                'flex items-center justify-center cursor-pointer overflow-hidden relative',
-                'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
-                'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
-            )
+        nextButton: {
+            root: ({ props }) => ({
+                className: classNames(
+                    'flex items-center justify-center cursor-pointer overflow-hidden relative',
+                    'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
+                    'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
+                )
+            })
         },
         table: {
             className: classNames('border-collapse w-full', 'my-2')
         },
-        tableheadercell: 'p-2',
+        tableHeaderCell: 'p-2',
         weekday: 'text-gray-600 dark:text-white/70',
         day: 'p-2',
-        daylabel: ({ context }) => ({
+        dayLabel: ({ context }) => ({
             className: classNames(
                 'w-10 h-10 rounded-full transition-shadow duration-200 border-transparent border',
                 'flex items-center justify-center mx-auto overflow-hidden relative',
@@ -1188,7 +1192,7 @@ const Tailwind = {
                 }
             )
         }),
-        monthpicker: 'my-2',
+        monthPicker: 'my-2',
         month: ({ context }) => ({
             className: classNames(
                 'w-1/3 inline-flex items-center justify-center cursor-pointer overflow-hidden relative',
@@ -1197,7 +1201,7 @@ const Tailwind = {
                 { '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 }
             )
         }),
-        yearpicker: {
+        yearPicker: {
             className: classNames('my-2')
         },
         year: ({ context }) => ({
@@ -1211,29 +1215,29 @@ const Tailwind = {
                 }
             )
         }),
-        timepicker: {
+        timePicker: {
             className: classNames('flex justify-center items-center', 'border-t-1 border-solid border-gray-300 p-2')
         },
-        separatorcontainer: '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: {
+        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: {
             className: classNames(
                 'flex items-center justify-center cursor-pointer overflow-hidden relative',
                 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
                 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
             )
         },
-        decrementbutton: {
+        decrementButton: {
             className: classNames(
                 'flex items-center justify-center cursor-pointer overflow-hidden relative',
                 'w-8 h-8 text-gray-600 dark:text-white/70 border-0 bg-transparent rounded-full transition-colors duration-200 ease-in-out',
                 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 '
             )
         },
-        groupcontainer: 'flex',
+        groupContainer: 'flex',
         group: {
             className: classNames('flex-1', 'border-l border-gray-300 pr-0.5 pl-0.5 pt-0 pb-0', 'first:pl-0 first:border-l-0')
         },