primereact 10.6.2 → 10.6.4

package/passthrough/tailwind/index.js

@@ -163,7 +163,7 @@ this.passthrough.tailwind = (function (exports) {
     },
     accordion: {
       root: 'mb-1',
-      tab: {
+      accordiontab: {
         root: 'mb-1',
         header: function header(_ref2) {
           var context = _ref2.context;
@@ -390,7 +390,7 @@ this.passthrough.tailwind = (function (exports) {
           })
         };
       },
-      gutterhandler: function gutterhandler(_ref12) {
+      gutterHandler: function gutterHandler(_ref12) {
         var props = _ref12.props;
         return {
           className: classNames('bg-gray-300 dark:bg-gray-600 transition-all duration-200', {
@@ -695,7 +695,7 @@ this.passthrough.tailwind = (function (exports) {
       text: 'text-base font-normal flex flex-col flex-1 grow shrink ml-4',
       summary: 'font-bold block',
       detail: 'mt-1 block',
-      closebutton: {
+      closeButton: {
         className: classNames('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')
       },
       transition: {
@@ -970,6 +970,9 @@ this.passthrough.tailwind = (function (exports) {
           })
         };
       },
+      input: {
+        className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+      },
       slider: function slider(_ref42) {
         var props = _ref42.props;
         return {
@@ -1179,7 +1182,10 @@ this.passthrough.tailwind = (function (exports) {
       root: {
         className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
       },
-      checkbox: function checkbox(_ref57) {
+      input: {
+        className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+      },
+      box: function box(_ref57) {
         var props = _ref57.props;
         return {
           className: classNames('flex items-center justify-center', 'border-2 w-6 h-6 rounded-lg transition-colors duration-200', {
@@ -1190,13 +1196,17 @@ this.passthrough.tailwind = (function (exports) {
             'cursor-default opacity-60': props.disabled
           })
         };
-      }
+      },
+      icon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900'
     },
     checkbox: {
       root: {
         className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
       },
-      input: function input(_ref58) {
+      input: {
+        className: classNames('absolute appearance-none top-0 left-0 size-full p-0 m-0 opacity-0 z-10 outline-none cursor-pointer')
+      },
+      box: function box(_ref58) {
         var props = _ref58.props,
           context = _ref58.context;
         return {
@@ -1346,7 +1356,7 @@ this.passthrough.tailwind = (function (exports) {
         className: classNames('border-collapse w-full', 'my-2')
       },
       tableHeaderCell: 'p-2',
-      weekday: 'text-gray-600 dark:text-white/70',
+      weekDay: 'text-gray-600 dark:text-white/70',
       day: 'p-2',
       dayLabel: function dayLabel(_ref68) {
         var context = _ref68.context;
@@ -1705,7 +1715,7 @@ this.passthrough.tailwind = (function (exports) {
           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: {
+      colorHandle: {
         className: classNames('rounded-full border border-solid cursor-pointer h-3 w-3 absolute  opacity-85', 'border-white')
       },
       hue: {
@@ -1714,7 +1724,7 @@ this.passthrough.tailwind = (function (exports) {
           background: 'linear-gradient(0deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red)'
         }
       },
-      huehandle: '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: {
@@ -1869,7 +1879,7 @@ this.passthrough.tailwind = (function (exports) {
       },
       container: 'flex items-center',
       prompt: 'text-yellow-400',
-      commandtext: 'flex-1 shrink grow-0 border-0 bg-transparent text-inherit p-0 outline-none'
+      commandText: 'flex-1 shrink grow-0 border-0 bg-transparent text-inherit p-0 outline-none'
     },
     blockui: {
       root: 'relative',
@@ -1997,7 +2007,7 @@ this.passthrough.tailwind = (function (exports) {
         className: classNames('hover:bg-gray-200')
       },
       icon: 'text-gray-600 dark:text-white/70 mr-2',
-      submenuheader: {
+      submenuHeader: {
         className: classNames('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')
       },
       separator: 'border-t border-gray-300 dark:border-blue-900/40 my-1',
@@ -2041,7 +2051,7 @@ this.passthrough.tailwind = (function (exports) {
         };
       },
       icon: 'mr-2',
-      submenuicon: function submenuicon(_ref101) {
+      submenuIcon: function submenuIcon(_ref101) {
         var props = _ref101.props;
         return {
           className: classNames({
@@ -2115,7 +2125,7 @@ this.passthrough.tailwind = (function (exports) {
           }, 'no-underline w-8 h-8 items-center justify-center rounded-full transition hover:bg-gray-200 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]')
         };
       },
-      headeraction: {
+      headerAction: {
         className: classNames('select-none', 'cursor-pointer flex items-center no-underline overflow-hidden relative', 'py-3 px-5 select-none')
       },
       action: {
@@ -2127,7 +2137,7 @@ this.passthrough.tailwind = (function (exports) {
       submenuItem: {
         className: classNames('text-gray-700 hover:bg-gray-200')
       },
-      submenuicon: function submenuicon(_ref107) {
+      submenuIcon: function submenuIcon(_ref107) {
         var props = _ref107.props;
         return {
           className: classNames({
@@ -2149,7 +2159,7 @@ this.passthrough.tailwind = (function (exports) {
       submenu: {
         className: classNames('m-0 list-none', 'py-1 w-48')
       },
-      submenuheader: {
+      submenuHeader: {
         className: classNames('m-0 py-3 px-5 text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 font-semibold rounded-tr-md rounded-tl-md')
       }
     },
@@ -2163,16 +2173,16 @@ this.passthrough.tailwind = (function (exports) {
         )
       },
 
-      headeraction: {
+      headerAction: {
         className: classNames('flex items-center select-none cursor-pointer relative no-underline', 'text-gray-700 dark:text-white/80 p-5 font-bold')
       },
-      headersubmenuicon: {
+      headerSubmenuIcon: {
         className: classNames('mr-2')
       },
-      headericon: {
+      headerIcon: {
         className: classNames('mr-2')
       },
-      menucontent: {
+      menuContent: {
         className: classNames('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: {
@@ -2197,7 +2207,7 @@ this.passthrough.tailwind = (function (exports) {
       submenu: {
         className: classNames('p-0 pl-4 m-0 list-none')
       },
-      submenuicon: {
+      submenuIcon: {
         className: classNames('mr-2')
       },
       transition: TRANSITIONS.toggleable
@@ -2274,7 +2284,7 @@ this.passthrough.tailwind = (function (exports) {
         };
       },
       icon: 'mr-2',
-      submenuicon: 'ml-auto',
+      submenuIcon: 'ml-auto',
       separator: 'border-t border-gray-300 my-1 dark:border-blue-900/40',
       submenu: {
         className: classNames('py-1 bg-white dark:bg-gray-900 border-0 shadow-md min-w-full', 'absolute z-10', 'left-full top-0')
@@ -2312,7 +2322,7 @@ this.passthrough.tailwind = (function (exports) {
         };
       },
       icon: 'mr-2',
-      submenuicon: 'ml-auto',
+      submenuIcon: 'ml-auto',
       separator: 'border-t border-gray-300 my-1 dark:border-blue-900/40',
       submenu: {
         className: classNames('py-1 bg-white dark:bg-gray-900 border-0 shadow-md min-w-full', 'absolute z-10', 'left-full top-0')
@@ -2323,93 +2333,57 @@ this.passthrough.tailwind = (function (exports) {
       root: function root(_ref116) {
         var props = _ref116.props;
         return {
-          "class": [
-          // Flexbox
-          'flex gap-4', {
+          className: classNames('flex gap-4', {
             'flex-col': props.orientation == 'horizontal',
             'flex-row': props.orientation == 'vertical'
-          }]
+          })
         };
       },
       metercontainer: function metercontainer(_ref117) {
         var props = _ref117.props;
         return {
-          "class": [
-          // Flexbox
-          'flex', {
+          className: classNames('flex', {
             'flex-col': props.orientation === 'vertical'
-          },
-          // Sizing
-          {
+          }, {
             'w-2 h-full': props.orientation === 'vertical'
           }, {
             'h-2': props.orientation === 'horizontal'
-          },
-          // Colors
-          'bg-gray-200 dark:bg-gray-700',
-          // Border Radius
-          'rounded-lg']
+          }, 'bg-gray-200 dark:bg-gray-700', 'rounded-lg')
         };
       },
       meter: function meter(_ref118) {
         var props = _ref118.props;
         return {
-          "class": [
-          // Shape
-          'border-0',
-          // Rounded Corners - Horizontal
-          {
+          className: classNames('border-0', {
             'first:rounded-l-lg last:rounded-r-lg': props.orientation === 'horizontal'
-          },
-          // Rounded Corners - Vertical
-          {
+          }, {
             'first:rounded-t-lg last:rounded-b-lg': props.orientation === 'vertical'
-          },
-          // Colors
-          'bg-primary-500 dark:bg-primary-400']
+          }, 'bg-primary-500 dark:bg-primary-400')
         };
       },
       labellist: function labellist(_ref119) {
         var props = _ref119.props;
         return {
-          "class": [
-          // Display & Flexbox
-          'flex flex-wrap', {
+          className: classNames('flex flex-wrap', {
             'gap-4': props.labelOrientation === 'horizontal'
           }, {
             'gap-2': props.labelOrientation === 'vertical'
           }, {
             'flex-col': props.labelOrientation === 'vertical'
-          },
-          // Conditional Alignment - Horizontal
-          {
+          }, {
             'align-end': props.labelOrientation === 'horizontal' && props.labelPosition === 'end',
             'align-start': props.labelOrientation === 'horizontal' && props.labelPosition === 'start'
-          },
-          // Conditional Alignment - Vertical
-          {
+          }, {
             'justify-end': props.labelOrientation === 'vertical' && props.labelPosition === 'end',
             'justify-start': props.labelOrientation === 'vertical' && props.labelPosition === 'start'
-          },
-          // List Styling
-          'm-0 p-0 list-none']
+          }, 'm-0 p-0 list-none')
         };
       },
       labellistitem: {
-        "class": [
-        // Flexbox
-        'inline-flex', 'items-center', 'gap-2']
+        className: 'inline-flex items-center gap-2'
       },
       labellisttype: {
-        "class": [
-        // Display
-        'inline-flex',
-        // Background Color
-        'bg-primary-500 dark:bg-primary-400',
-        // Size
-        'w-2 h-2',
-        // Rounded Shape
-        'rounded-full']
+        className: 'inline-flex bg-primary-500 dark:bg-primary-400 w-2 h-2 rounded-full'
       }
     },
     //MEDIA
@@ -2426,26 +2400,26 @@ this.passthrough.tailwind = (function (exports) {
       toolbar: {
         className: classNames('absolute top-0 right-0 z-10 flex', 'p-4')
       },
-      rotaterightbutton: {
+      rotateRightButton: {
         className: classNames('flex justify-center items-center', 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2', 'hover:text-white hover:bg-white/10', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]')
       },
-      rotaterighticon: 'w-6 h-6',
-      rotateleftbutton: {
+      rotateRightIcon: 'w-6 h-6',
+      rotateLeftButton: {
         className: classNames('flex justify-center items-center', 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2', 'hover:text-white hover:bg-white/10', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]')
       },
-      rotatelefticon: 'w-6 h-6',
-      zoomoutbutton: {
+      rotateLeftIcon: 'w-6 h-6',
+      zoomOutButton: {
         className: classNames('flex justify-center items-center', 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2', 'hover:text-white hover:bg-white/10', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]')
       },
-      zoomouticon: 'w-6 h-6',
-      zoominbutton: {
+      zoomOutIcon: 'w-6 h-6',
+      zoomInButton: {
         className: classNames('flex justify-center items-center', 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2', 'hover:text-white hover:bg-white/10', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]')
       },
-      zoominicon: 'w-6 h-6',
-      closebutton: {
+      zoomInIcon: 'w-6 h-6',
+      closeButton: {
         className: classNames('flex justify-center items-center', 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out mr-2', 'hover:text-white hover:bg-white/10', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]')
       },
-      closeicon: 'w-6 h-6',
+      closeIcon: 'w-6 h-6',
       transition: {
         timeout: 150,
         classNames: {
@@ -2459,22 +2433,22 @@ this.passthrough.tailwind = (function (exports) {
     galleria: {
       root: 'flex flex-col',
       content: 'flex flex-col',
-      itemwrapper: 'flex flex-col relative',
-      itemcontainer: 'relative flex h-full',
+      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: {
+      thumbnailWrapper: 'flex flex-col overflow-auto shrink-0',
+      thumbnailContainer: {
         className: classNames('flex flex-row', 'bg-black/90 p-4')
       },
-      previousthumbnailbutton: {
+      previousThumbnailButton: {
         className: classNames('self-center flex shrink-0 justify-center items-center overflow-hidden relative', 'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full', 'hover:bg-white/10 hover:text-white', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]')
       },
-      thumbnailitemscontainer: 'overflow-hidden w-full',
-      thumbnailitems: 'flex',
-      thumbnailitem: {
+      thumbnailItemsContainer: 'overflow-hidden w-full',
+      thumbnailItems: 'flex',
+      thumbnailItem: {
         className: classNames('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')
       },
-      nextthumbnailbutton: {
+      nextThumbnailButton: {
         className: classNames('self-center flex shrink-0 justify-center items-center overflow-hidden relative', 'm-2 bg-transparent text-white w-8 h-8 transition duration-200 ease-in-out rounded-full', 'hover:bg-white/10 hover:text-white', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]')
       },
       indicators: {
@@ -2498,14 +2472,14 @@ this.passthrough.tailwind = (function (exports) {
           })
         };
       },
-      closebutton: {
+      closeButton: {
         className: classNames('absolute top-0 right-0 flex justify-center items-center overflow-hidden m-2', 'text-white bg-transparent w-12 h-12 rounded-full transition duration-200 ease-in-out', 'hover:text-white hover:bg-white/10', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]')
       },
-      closeicon: 'w-6 h-6',
-      previousitembutton: {
+      closeIcon: 'w-6 h-6',
+      previousItemButton: {
         className: classNames('inline-flex justify-center items-center overflow-hidden', 'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2', 'fixed top-1/2 mt-[-0.5rem]', 'left-0', 'hover:bg-white/10 hover:text-white', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]')
       },
-      nextitembutton: {
+      nextItemButton: {
         className: classNames('inline-flex justify-center items-center overflow-hidden', 'bg-transparent text-white w-16 h-16 transition duration-200 ease-in-out rounded-md mx-2', 'fixed top-1/2 mt-[-0.5rem]', 'right-0', 'hover:bg-white/10 hover:text-white', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]')
       },
       caption: {
@@ -2533,11 +2507,11 @@ this.passthrough.tailwind = (function (exports) {
           })
         };
       },
-      previousbutton: {
+      previousButton: {
         className: classNames('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: 'overflow-hidden w-full',
-      itemscontainer: function itemscontainer(_ref123) {
+      itemsContent: 'overflow-hidden w-full',
+      itemsContainer: function itemsContainer(_ref123) {
         var props = _ref123.props;
         return {
           className: classNames('flex ', {
@@ -2559,7 +2533,7 @@ this.passthrough.tailwind = (function (exports) {
         className: classNames('flex flex-row justify-center flex-wrap')
       },
       indicator: 'mr-2 mb-2',
-      indicatorbutton: function indicatorbutton(_ref125) {
+      indicatorButton: function indicatorButton(_ref125) {
         var context = _ref125.context;
         return {
           className: classNames('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)]', {
@@ -2604,7 +2578,7 @@ this.passthrough.tailwind = (function (exports) {
           })
         };
       },
-      checkboxcontainer: 'mr-2',
+      checkboxContainer: 'mr-2',
       checkbox: function checkbox(_ref129) {
         var context = _ref129.context,
           props = _ref129.props;
@@ -2618,17 +2592,17 @@ this.passthrough.tailwind = (function (exports) {
           })
         };
       },
-      nodeicon: 'mr-2 text-gray-600 dark:text-white/70',
+      nodeIcon: 'mr-2 text-gray-600 dark:text-white/70',
       subgroup: {
         className: classNames('m-0 list-none', 'p-0 pl-4')
       },
-      filtercontainer: {
+      filterContainer: {
         className: classNames('mb-2', 'relative block w-full')
       },
       input: {
         className: classNames('m-0 p-3 text-base w-full pr-7', 'font-sans text-gray-600 dark:text-white/70 bg-white dark:bg-gray-900 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)]')
       },
-      searchicon: '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: {
@@ -2711,7 +2685,7 @@ this.passthrough.tailwind = (function (exports) {
       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: function listbutton(_ref136) {
+      listButton: function listButton(_ref136) {
         var props = _ref136.props;
         return {
           className: classNames('items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border', 'transition duration-200', 'w-12 pt-3 pb-3 rounded-lg rounded-r-none', props.layout === 'list' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // highlighted state
@@ -2719,7 +2693,7 @@ this.passthrough.tailwind = (function (exports) {
         };
       },
 
-      gridbutton: function gridbutton(_ref137) {
+      gridButton: function gridButton(_ref137) {
         var props = _ref137.props;
         return {
           className: classNames('items-center cursor-pointer inline-flex overflow-hidden relative select-none text-center align-bottom justify-center border', 'transition duration-200', 'w-12 pt-3 pb-3 rounded-lg rounded-l-none', props.layout === 'grid' ? 'bg-blue-500 border-blue-500 text-white dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' : 'bg-white border-gray-300 text-blue-gray-700 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' // highlighted state
@@ -2745,13 +2719,13 @@ this.passthrough.tailwind = (function (exports) {
         )
       },
 
-      linecell: 'text-center align-top py-0 px-3',
-      linedown: {
+      lineCell: 'text-center align-top py-0 px-3',
+      lineDown: {
         className: classNames('mx-auto my-0 w-px h-[20px] bg-gray-300', 'dark:bg-blue-900/40' //Dark Mode
         )
       },
 
-      lineleft: function lineleft(_ref138) {
+      lineLeft: function lineLeft(_ref138) {
         var context = _ref138.context;
         return {
           className: classNames('text-center align-top py-0 px-3 rounded-none border-r border-gray-300', 'dark:border-blue-900/40',
@@ -2761,7 +2735,7 @@ this.passthrough.tailwind = (function (exports) {
           })
         };
       },
-      lineright: function lineright(_ref139) {
+      lineRight: function lineRight(_ref139) {
         var context = _ref139.context;
         return {
           className: classNames('text-center align-top py-0 px-3 rounded-none', 'dark:border-blue-900/40',
@@ -2771,18 +2745,18 @@ this.passthrough.tailwind = (function (exports) {
           })
         };
       },
-      nodecell: 'text-center align-top py-0 px-3',
-      nodetoggler: {
+      nodeCell: 'text-center align-top py-0 px-3',
+      nodeToggler: {
         className: classNames('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: 'relative inline-block w-4 h-4'
+      nodeTogglerIcon: 'relative inline-block w-4 h-4'
     },
     orderlist: {
       root: 'flex',
       controls: 'flex flex-col justify-center p-5',
-      moveupbutton: {
+      moveUpButton: {
         root: function root(_ref140) {
           var context = _ref140.context;
           return {
@@ -2805,7 +2779,7 @@ this.passthrough.tailwind = (function (exports) {
           };
         }
       },
-      movetopbutton: {
+      moveTopButton: {
         root: function root(_ref141) {
           var context = _ref141.context;
           return {
@@ -2828,7 +2802,7 @@ this.passthrough.tailwind = (function (exports) {
           };
         }
       },
-      movedownbutton: {
+      moveDownButton: {
         root: function root(_ref142) {
           var context = _ref142.context;
           return {
@@ -2851,7 +2825,7 @@ this.passthrough.tailwind = (function (exports) {
           };
         }
       },
-      movebottombutton: {
+      moveBottomButton: {
         root: function root(_ref143) {
           var context = _ref143.context;
           return {
@@ -2974,7 +2948,7 @@ this.passthrough.tailwind = (function (exports) {
         };
       },
       buttons: 'flex flex-row xl:flex-col justify-center p-5',
-      movetotargetbutton: {
+      moveToTargetButton: {
         root: {
           className: classNames('relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0',
           // button component
@@ -2988,7 +2962,7 @@ this.passthrough.tailwind = (function (exports) {
 
         label: 'flex-initial w-0'
       },
-      movealltotargetbutton: {
+      moveAllToTargetButton: {
         root: {
           className: classNames('relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0',
           // button component
@@ -3002,7 +2976,7 @@ this.passthrough.tailwind = (function (exports) {
 
         label: 'flex-initial w-0'
       },
-      movetosourcebutton: {
+      moveToSourceButton: {
         root: {
           className: classNames('relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0',
           // button component
@@ -3016,7 +2990,7 @@ this.passthrough.tailwind = (function (exports) {
 
         label: 'flex-initial w-0'
       },
-      movealltosourcebutton: {
+      moveAllToSourceButton: {
         root: {
           className: classNames('relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0',
           // button component
@@ -3058,7 +3032,7 @@ this.passthrough.tailwind = (function (exports) {
         )
       },
 
-      firstpagebutton: function firstpagebutton(_ref146) {
+      firstPageButton: function firstPageButton(_ref146) {
         var context = _ref146.context;
         return {
           className: classNames('relative inline-flex items-center justify-center user-none overflow-hidden leading-none', 'border-0 text-gray-500  min-w-[3rem] h-12 m-[0.143rem] rounded-md', 'transition duration-200', 'dark:text-white',
@@ -3070,7 +3044,7 @@ this.passthrough.tailwind = (function (exports) {
         };
       },
 
-      previouspagebutton: function previouspagebutton(_ref147) {
+      prevPageButton: function prevPageButton(_ref147) {
         var context = _ref147.context;
         return {
           className: classNames('relative inline-flex items-center justify-center user-none overflow-hidden leading-none', 'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md', 'transition duration-200', 'dark:text-white',
@@ -3082,7 +3056,7 @@ this.passthrough.tailwind = (function (exports) {
         };
       },
 
-      nextpagebutton: function nextpagebutton(_ref148) {
+      nextPageButton: function nextPageButton(_ref148) {
         var context = _ref148.context;
         return {
           className: classNames('relative inline-flex items-center justify-center user-none overflow-hidden leading-none', 'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md', 'transition duration-200', 'dark:text-white',
@@ -3094,7 +3068,7 @@ this.passthrough.tailwind = (function (exports) {
         };
       },
 
-      lastpagebutton: function lastpagebutton(_ref149) {
+      lastPageButton: function lastPageButton(_ref149) {
         var context = _ref149.context;
         return {
           className: classNames('relative inline-flex items-center justify-center user-none overflow-hidden leading-none', 'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md', 'transition duration-200', 'dark:text-white',
@@ -3106,7 +3080,7 @@ this.passthrough.tailwind = (function (exports) {
         };
       },
 
-      pagebutton: function pagebutton(_ref150) {
+      pageButton: function pageButton(_ref150) {
         var context = _ref150.context;
         return {
           className: classNames('relative inline-flex items-center justify-center user-none overflow-hidden leading-none', 'border-0 text-gray-500 min-w-[3rem] h-12 m-[0.143rem] rounded-md', 'transition duration-200', 'dark:border-blue-300 dark:text-white',
@@ -3118,7 +3092,7 @@ this.passthrough.tailwind = (function (exports) {
           })
         };
       },
-      rowperpagedropdown: {
+      RPPDropdown: {
         root: function root(_ref151) {
           var props = _ref151.props,
             state = _ref151.state;
@@ -3162,7 +3136,7 @@ this.passthrough.tailwind = (function (exports) {
           };
         }
       },
-      jumptopageinput: {
+      JTPInput: {
         root: 'inline-flex mx-2',
         input: {
           className: classNames('font-sans text-base text-gray-600 p-3 m-0 rounded-md apperance-none', 'block whitespace-nowrap overflow-hidden flex-auto w-[1%] cursor-pointer text-ellipsis border border-gray-300 pr-0', 'focus:outline-none focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] focus:border-blue-300', 'dark:text-white dark:bg-gray-950 dark:border-blue-900/40',
@@ -3224,18 +3198,18 @@ this.passthrough.tailwind = (function (exports) {
           })
         };
       },
-      loadingoverlay: {
+      loadingOverlay: {
         className: classNames('fixed w-full h-full t-0 l-0 bg-gray-100/40', 'transition duration-200', 'absolute flex items-center justify-center z-2', 'dark:bg-gray-950/40' // Dark Mode
         )
       },
 
-      loadingicon: 'w-8 h-8',
+      loadingIcon: 'w-8 h-8',
       header: {
         className: classNames('bg-slate-50 text-slate-700 border border-x-0 border-t-0 border-gray-300 p-4 font-bold', 'dark:bg-gray-900 dark:text-white/70 dark:border-blue-900/40' // Dark Mode
         )
       },
 
-      scrollablewrapper: function scrollablewrapper(_ref156) {
+      scrollableWrapper: function scrollableWrapper(_ref156) {
         var props = _ref156.props;
         return {
           className: classNames({
@@ -3283,7 +3257,7 @@ this.passthrough.tailwind = (function (exports) {
           })
         };
       },
-      headerrow: function headerrow(_ref161) {
+      headerRow: function headerRow(_ref161) {
         var props = _ref161.props;
         return {
           className: classNames({
@@ -3304,7 +3278,7 @@ this.passthrough.tailwind = (function (exports) {
         };
       },
       column: {
-        headercell: function headercell(_ref163) {
+        headerCell: function headerCell(_ref163) {
           var context = _ref163.context;
           return {
             className: classNames('text-left border-gray-300 border font-bold', 'transition duration-200 p-4', 'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900',
@@ -3320,7 +3294,7 @@ this.passthrough.tailwind = (function (exports) {
             })
           };
         },
-        bodycell: function bodycell(_ref164) {
+        bodyCell: function bodyCell(_ref164) {
           var context = _ref164.context;
           return {
             className: classNames('text-left border-gray-300 border', 'transition duration-200 p-4', 'dark:border-blue-900/40',
@@ -3334,7 +3308,7 @@ this.passthrough.tailwind = (function (exports) {
             })
           };
         },
-        rowtoggler: function rowtoggler(_ref165) {
+        rowToggler: function rowToggler(_ref165) {
           var context = _ref165.context;
           return {
             className: classNames('relative inline-flex items-center justify-center align-center cursor-pointer select-none overflow-hidden bg-transparent', 'w-8 h-8 border-0 rounded mr-0.5', {
@@ -3348,7 +3322,7 @@ this.passthrough.tailwind = (function (exports) {
         sort: {
           className: 'inline-block align-middle'
         },
-        sorticon: function sorticon(_ref166) {
+        sortIcon: function sortIcon(_ref166) {
           var context = _ref166.context;
           return {
             className: classNames('ml-2 inline-block align-middle', {
@@ -3357,13 +3331,13 @@ this.passthrough.tailwind = (function (exports) {
             })
           };
         },
-        sortbadge: {
+        sortBadge: {
           className: classNames('h-[1.143rem] min-w-[1.143rem] leading-[1.143rem] text-blue-700 bg-blue-50 ml-2 rounded-[50%]', 'dark:text-white/80 dark:bg-blue-500/40' // Dark Mode
           )
         },
 
-        columnresizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
-        checkboxwrapper: {
+        columnResizer: 'block absolute top-0 right-0 m-0 w-2 h-full p-0 cursor-col-resize border border-transparent',
+        checkboxWrapper: {
           className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6 mr-2')
         },
         checkbox: function checkbox(_ref167) {
@@ -3377,7 +3351,7 @@ this.passthrough.tailwind = (function (exports) {
             })
           };
         },
-        checkboxicon: function checkboxicon(_ref168) {
+        checkboxIcon: function checkboxIcon(_ref168) {
           var context = _ref168.context;
           return {
             className: classNames('w-4 h-4 transition-all duration-200 text-base dark:text-gray-900', {
@@ -3386,7 +3360,7 @@ this.passthrough.tailwind = (function (exports) {
           };
         }
       },
-      resizehelper: '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: function root(_ref169) {
@@ -3397,12 +3371,12 @@ this.passthrough.tailwind = (function (exports) {
           })
         };
       },
-      loadingoverlay: {
+      loadingOverlay: {
         className: classNames('fixed w-full h-full t-0 l-0 bg-gray-100/40', 'transition duration-200', 'absolute flex items-center justify-center z-2', 'dark:bg-gray-950/40' // Dark Mode
         )
       },
 
-      loadingicon: 'w-8 h-8',
+      loadingIcon: 'w-8 h-8',
       wrapper: function wrapper(_ref170) {
         var props = _ref170.props;
         return {
@@ -3452,7 +3426,7 @@ this.passthrough.tailwind = (function (exports) {
       },
 
       column: {
-        headercell: function headercell(_ref175) {
+        headerCell: function headerCell(_ref175) {
           var context = _ref175.context,
             props = _ref175.props;
           return {
@@ -3471,8 +3445,8 @@ this.passthrough.tailwind = (function (exports) {
           };
         },
 
-        headercontent: 'flex items-center',
-        bodycell: function bodycell(_ref176) {
+        headerContent: 'flex items-center',
+        bodyCell: function bodyCell(_ref176) {
           var props = _ref176.props,
             context = _ref176.context;
           return {
@@ -3487,7 +3461,7 @@ this.passthrough.tailwind = (function (exports) {
             })
           };
         },
-        footercell: function footercell(_ref177) {
+        footerCell: function footerCell(_ref177) {
           var context = _ref177.context;
           return {
             className: classNames('text-left border-0 border-b border-solid border-gray-300 font-bold', 'bg-slate-50 text-slate-700', 'transition duration-200', (context === null || context === void 0 ? void 0 : context.size) === 'small' ? 'p-2' : (context === null || context === void 0 ? void 0 : context.size) === 'large' ? 'p-5' : 'p-4',
@@ -3499,60 +3473,60 @@ this.passthrough.tailwind = (function (exports) {
             })
           };
         },
-        sorticon: function sorticon(_ref178) {
+        sortIcon: function sortIcon(_ref178) {
           var context = _ref178.context;
           return {
             className: classNames('ml-2', context.sorted ? 'text-blue-700 dark:text-white/80' : 'text-slate-700 dark:text-white/70')
           };
         },
-        sortbadge: {
+        sortBadge: {
           className: classNames('flex items-center justify-center align-middle', 'rounded-[50%] w-[1.143rem] leading-[1.143rem] ml-2', 'text-blue-700 bg-blue-50', 'dark:text-white/80 dark:bg-blue-400' // Dark Mode
           )
         },
 
-        columnfilter: 'inline-flex items-center ml-auto',
-        filteroverlay: {
+        columnFilter: 'inline-flex items-center ml-auto',
+        filterOverlay: {
           className: classNames('bg-white text-gray-600 border-0 rounded-md min-w-[12.5rem]', 'dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80' //Dark Mode
           )
         },
 
-        filtermatchmodedropdown: {
+        filterMatchModeDropdown: {
           root: 'min-[0px]:flex mb-2'
         },
-        filterrowitems: 'm-0 p-0 py-3 list-none ',
-        filterrowitem: function filterrowitem(_ref179) {
+        filterRowItems: 'm-0 p-0 py-3 list-none ',
+        filterRowItem: function filterRowItem(_ref179) {
           var context = _ref179.context;
           return {
             className: classNames('m-0 py-3 px-5 bg-transparent', 'transition duration-200', context !== null && context !== void 0 && 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')
           };
         },
-        filteroperator: {
+        filterOperator: {
           className: classNames('px-5 py-3 border-b border-solid border-gray-300 text-slate-700 bg-slate-50 rounded-t-md', 'dark:border-blue-900/40 dark:text-white/80 dark:bg-gray-900' // Dark Mode
           )
         },
 
-        filteroperatordropdown: {
+        filterOperatorDropdown: {
           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: {
+        filterConstraint: 'p-5 border-b border-solid border-gray-300 dark:border-blue-900/40',
+        filterAddRule: 'py-3 px-5',
+        filterAddRuleButton: {
           root: 'justify-center w-full min-[0px]:text-sm',
           label: 'flex-auto grow-0',
           icon: 'mr-2'
         },
-        filterremovebutton: {
+        filterRemoveButton: {
           root: 'ml-2',
           label: 'grow-0'
         },
-        filterbuttonbar: 'flex items-center justify-between p-5',
-        filterclearbutton: {
+        filterButtonbar: 'flex items-center justify-between p-5',
+        filterClearButton: {
           root: 'w-auto min-[0px]:text-sm border-blue-500 text-blue-500 px-4 py-3'
         },
-        filterapplybutton: {
+        filterApplyButton: {
           root: 'w-auto min-[0px]:text-sm px-4 py-3'
         },
-        filtermenubutton: function filtermenubutton(_ref180) {
+        filterMenuButton: function filterMenuButton(_ref180) {
           var context = _ref180.context;
           return {
             className: classNames('inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative ml-2', 'w-8 h-8 rounded-[50%]', 'transition duration-200', 'hover:text-slate-700 hover:bg-gray-300/20',
@@ -3566,7 +3540,7 @@ this.passthrough.tailwind = (function (exports) {
             })
           };
         },
-        headerfilterclearbutton: function headerfilterclearbutton(_ref181) {
+        headerFilterClearButton: function headerFilterClearButton(_ref181) {
           var context = _ref181.context;
           return {
             className: classNames('inline-flex justify-center items-center cursor-pointer no-underline overflow-hidden relative', 'text-left bg-transparent m-0 p-0 border-none select-none ml-2', {
@@ -3574,9 +3548,9 @@ this.passthrough.tailwind = (function (exports) {
             })
           };
         },
-        columnresizer: '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',
         rowreordericon: 'cursor-move',
-        roweditorinitbutton: {
+        rowEditorInitButton: {
           className: classNames('inline-flex items-center justify-center overflow-hidden relative', 'text-left cursor-pointer select-none', 'w-8 h-8 border-0 rounded-[50%]', 'transition duration-200', 'text-slate-700 border-transparent', 'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]',
           //Focus
           'hover:text-slate-700 hover:bg-gray-300/20',
@@ -3585,7 +3559,7 @@ this.passthrough.tailwind = (function (exports) {
           )
         },
 
-        roweditorsavebutton: {
+        rowEditorSaveButton: {
           className: classNames('inline-flex items-center justify-center overflow-hidden relative', 'text-left cursor-pointer select-none', 'w-8 h-8 border-0 rounded-[50%]', 'transition duration-200', 'text-slate-700 border-transparent', 'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]',
           //Focus
           'hover:text-slate-700 hover:bg-gray-300/20',
@@ -3594,7 +3568,7 @@ this.passthrough.tailwind = (function (exports) {
           )
         },
 
-        roweditorcancelbutton: {
+        rowEditorCancelButton: {
           className: classNames('inline-flex items-center justify-center overflow-hidden relative', 'text-left cursor-pointer select-none', 'w-8 h-8 border-0 rounded-[50%]', 'transition duration-200', 'text-slate-700 border-transparent', 'focus:outline-0 focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)]',
           //Focus
           'hover:text-slate-700 hover:bg-gray-300/20',
@@ -3627,7 +3601,7 @@ this.passthrough.tailwind = (function (exports) {
         headercheckboxwrapper: {
           className: classNames('cursor-pointer inline-flex relative select-none align-bottom', 'w-6 h-6')
         },
-        headercheckbox: function headercheckbox(_ref184) {
+        headerCheckbox: function headerCheckbox(_ref184) {
           var context = _ref184.context;
           return {
             className: classNames('flex items-center justify-center', 'border-2 w-6 h-6 text-gray-600 rounded-lg transition-colors duration-200', context.checked ? 'border-blue-500 bg-blue-500 dark:border-blue-400 dark:bg-blue-400' : 'border-gray-300 bg-white dark:border-blue-900/40 dark:bg-gray-900', {
@@ -3652,7 +3626,7 @@ this.passthrough.tailwind = (function (exports) {
         checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base dark:text-gray-900',
         transition: TRANSITIONS.overlay
       },
-      bodyrow: function bodyrow(_ref186) {
+      bodyRow: function bodyRow(_ref186) {
         var context = _ref186.context;
         return {
           className: classNames(context.selected ? 'bg-blue-50 text-blue-700 dark:bg-blue-300' : 'bg-white text-gray-600 dark:bg-gray-900', context.stripedRows ? context.index % 2 === 0 ? 'bg-white text-gray-600 dark:bg-gray-900' : 'bg-blue-50/50 text-gray-600 dark:bg-gray-950' : '', 'transition duration-200', 'focus:outline focus:outline-[0.15rem] focus:outline-blue-200 focus:outline-offset-[-0.15rem]',
@@ -3666,11 +3640,11 @@ this.passthrough.tailwind = (function (exports) {
         };
       },
 
-      rowexpansion: 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
-      rowgroupheader: {
+      rowExpansion: 'bg-white text-gray-600 dark:bg-gray-900 dark:text-white/80',
+      rowGroupHeader: {
         className: classNames('sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200')
       },
-      rowgroupfooter: {
+      rowgroupFooter: {
         className: classNames('sticky z-[1]', 'bg-white text-gray-600', 'transition duration-200')
       },
       rowgrouptoggler: {
@@ -3679,7 +3653,7 @@ this.passthrough.tailwind = (function (exports) {
       },
 
       rowgrouptogglericon: 'inline-block w-4 h-4',
-      resizehelper: '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'
     },
     // CHART
     chart: {