primereact 10.3.0 → 10.3.1

package/passthrough/tailwind/index.esm.js

@@ -158,7 +158,7 @@ var Tailwind = {
   },
   accordion: {
     root: 'mb-1',
-    accordiontab: {
+    tab: {
       root: 'mb-1',
       header: function header(_ref2) {
         var context = _ref2.context;
@@ -215,7 +215,7 @@ var Tailwind = {
     // Padding.
     title: 'text-2xl font-bold mb-2',
     // Font size, font weight, and margin bottom.
-    subtitle: {
+    subTitle: {
       className: classNames('font-normal mb-2 text-gray-600',
       // Font weight, margin bottom, and text color.
       'dark:text-white/60 ' //dark
@@ -344,9 +344,9 @@ var Tailwind = {
           'focus:outline-none focus:outline-offset-0 focus:shadow-[inset_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)]',
           // Focus styles.
           {
-            'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': parent.state.d_activeIndex !== context.index,
+            'border-gray-300 bg-white text-gray-700 hover:bg-white hover:border-gray-400 hover:text-gray-600 dark:bg-gray-900 dark:border-blue-900/40 dark:text-white/80 dark:hover:bg-gray-800/80': parent.state.activeIndex !== context.index,
             // Condition-based hover styles.
-            'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.d_activeIndex === context.index // Condition-based active styles.
+            'bg-white border-blue-500 text-blue-500 dark:bg-gray-900 dark:border-blue-300 dark:text-blue-300': parent.state.activeIndex === context.index // Condition-based active styles.
           }),
 
           style: {
@@ -484,6 +484,7 @@ var Tailwind = {
     root: {
       className: classNames('bg-white text-gray-700 border-0 rounded-md shadow-lg', 'z-40 transform origin-center', 'absolute left-0 top-0 mt-3', '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')
     },
+    closeButton: 'flex items-center justify-center overflow-hidden absolute top-0 right-0 w-6 h-6',
     content: 'p-5 items-center flex',
     transition: TRANSITIONS.overlay
   },
@@ -568,10 +569,10 @@ var Tailwind = {
       var context = _ref20.context;
       return {
         className: classNames('absolute w-0 h-0 border-transparent border-solid', {
-          '-m-t-1 border-y-[0.25rem] border-r-[0.25rem] border-l-0 border-r-gray-600': context.right,
-          '-m-t-1 border-y-[0.25rem] border-l-[0.25rem] border-r-0 border-l-gray-600': context.left,
-          '-m-l-1 border-x-[0.25rem] border-t-[0.25rem] border-b-0 border-t-gray-600': context.top,
-          '-m-l-1 border-x-[0.25rem] border-b-[0.25rem] border-t-0 border-b-gray-600': context.bottom
+          '-mt-1 border-y-[0.25rem] border-r-[0.25rem] border-l-0 border-r-gray-600': context.right,
+          '-mt-1 border-y-[0.25rem] border-l-[0.25rem] border-r-0 border-l-gray-600': context.left,
+          '-ml-1 border-x-[0.25rem] border-t-[0.25rem] border-b-0 border-t-gray-600': context.top,
+          '-ml-1 border-x-[0.25rem] border-b-[0.25rem] border-t-0 border-b-gray-600': context.bottom
         })
       };
     },
@@ -593,10 +594,10 @@ var Tailwind = {
     },
     chooseIcon: 'mr-2 inline-block',
     chooseButtonLabel: 'flex-1 font-bold',
-    uploadbutton: {
+    uploadButton: {
       icon: 'mr-2'
     },
-    cancelbutton: {
+    cancelButton: {
       icon: 'mr-2'
     },
     content: {
@@ -608,7 +609,7 @@ var Tailwind = {
     thumbnail: 'shrink-0',
     fileName: 'mb-2',
     fileSize: 'mr-2',
-    uploadicon: 'mr-2'
+    uploadIcon: 'mr-2'
   },
   //Messages
   messages: {
@@ -777,8 +778,19 @@ var Tailwind = {
         })
       };
     },
-    badge: function badge(_ref27) {
+    loadingIcon: function loadingIcon(_ref27) {
       var props = _ref27.props;
+      return {
+        className: classNames('mx-0', {
+          'mr-2': props.loading && props.iconPos == 'left' && props.label != null,
+          'ml-2 order-1': props.loading && props.iconPos == 'right' && props.label != null,
+          'mb-2': props.loading && props.iconPos == 'top' && props.label != null,
+          'mt-2 order-2': props.loading && props.iconPos == 'bottom' && props.label != null
+        })
+      };
+    },
+    badge: function badge(_ref28) {
+      var props = _ref28.props;
       return {
         className: classNames({
           'ml-2 w-4 h-4 leading-none flex items-center justify-center': props.badge
@@ -789,11 +801,11 @@ var Tailwind = {
   speeddial: {
     root: 'absolute flex',
     button: {
-      root: function root(_ref28) {
-        var parent = _ref28.parent;
+      root: function root(_ref29) {
+        var state = _ref29.state;
         return {
           className: classNames('w-16 !h-16 !rounded-full justify-center z-10', {
-            'rotate-45': parent.state.visible
+            'rotate-45': state.visible
           })
         };
       },
@@ -802,9 +814,9 @@ var Tailwind = {
       }
     },
     menu: 'm-0 p-0 list-none flex items-center justify-center transition delay-200 z-20',
-    menuitem: function menuitem(_ref29) {
-      var props = _ref29.props,
-        state = _ref29.state;
+    menuitem: function menuitem(_ref30) {
+      var props = _ref30.props,
+        state = _ref30.state;
       return {
         className: classNames('transform transition-transform duration-200 ease-out transition-opacity duration-800', !state.visible ? 'opacity-0 scale-0' : 'opacity-1 scale-100', {
           'my-1 first:mb-2': props.direction == 'up' && props.type == 'linear',
@@ -819,8 +831,8 @@ var Tailwind = {
     action: {
       className: classNames('flex items-center justify-center rounded-full relative overflow-hidden', 'w-12 h-12 bg-gray-700 hover:bg-gray-800 text-white')
     },
-    mask: function mask(_ref30) {
-      var state = _ref30.state;
+    mask: function mask(_ref31) {
+      var state = _ref31.state;
       return {
         className: classNames('absolute left-0 top-0 w-full h-full transition-opacity duration-250 ease-in-out bg-black/40 z-0', {
           'opacity-0': !state.visible,
@@ -830,8 +842,8 @@ var Tailwind = {
     }
   },
   splitbutton: {
-    root: function root(_ref31) {
-      var props = _ref31.props;
+    root: function root(_ref32) {
+      var props = _ref32.props;
       return {
         className: classNames('inline-flex relative', 'rounded-md', {
           'shadow-lg': props.raised
@@ -839,8 +851,8 @@ var Tailwind = {
       };
     },
     button: {
-      root: function root(_ref32) {
-        var parent = _ref32.parent;
+      root: function root(_ref33) {
+        var parent = _ref33.parent;
         return {
           className: classNames('rounded-r-none border-r-0', {
             'rounded-l-full': parent.props.rounded
@@ -852,10 +864,10 @@ var Tailwind = {
     menu: {
       className: classNames('outline-none', 'py-1	px-0 rounded-md	 list-none bg-white	border-none shadow-lg')
     },
-    menulist: 'm-0 p-0 border-none outline-none no-underline list-none',
-    menubutton: {
-      root: function root(_ref33) {
-        var parent = _ref33.parent;
+    menuList: 'm-0 p-0 border-none outline-none no-underline list-none',
+    menuButton: {
+      root: function root(_ref34) {
+        var parent = _ref34.parent;
         return {
           className: classNames('rounded-l-none', {
             'rounded-r-full': parent.props.rounded
@@ -869,9 +881,9 @@ var Tailwind = {
   },
   //FORMS
   inputtext: {
-    root: function root(_ref34) {
-      var props = _ref34.props,
-        context = _ref34.context;
+    root: function root(_ref35) {
+      var props = _ref35.props,
+        context = _ref35.context;
       return {
         className: classNames('m-0', 'font-sans text-gray-600 dark:text-white/80 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)]': !context.disabled,
@@ -886,33 +898,34 @@ var Tailwind = {
   },
   inputnumber: {
     root: 'w-full inline-flex',
-    input: function input(_ref35) {
-      var props = _ref35.props;
-      return {
-        className: classNames({
-          'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked'
-        })
-      };
+    input: {
+      root: function root(_ref36) {
+        var props = _ref36.props;
+        return {
+          className: classNames({
+            'rounded-tr-none rounded-br-none': props.showButtons && props.buttonLayout == 'stacked'
+          })
+        };
+      }
     },
-    buttongroup: function buttongroup(_ref36) {
-      var props = _ref36.props;
+    buttonGroup: function buttonGroup(_ref37) {
+      var props = _ref37.props;
       return {
         className: classNames({
           'flex flex-col': props.showButtons && props.buttonLayout == 'stacked'
         })
       };
     },
-    incrementbutton: function incrementbutton(_ref37) {
-      var props = _ref37.props;
+    incrementButton: function incrementButton(_ref38) {
+      var props = _ref38.props;
       return {
         className: classNames('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: 'hidden',
-    decrementbutton: function decrementbutton(_ref38) {
-      var props = _ref38.props;
+    decrementButton: function decrementButton(_ref39) {
+      var props = _ref39.props;
       return {
         className: classNames('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'
@@ -921,8 +934,8 @@ var Tailwind = {
     }
   },
   knob: {
-    root: function root(_ref39) {
-      var props = _ref39.props;
+    root: function root(_ref40) {
+      var props = _ref40.props;
       return {
         className: classNames('focus:outline-none focus:outline-offset-0 focus:shadow-0', {
           'opacity-60 select-none pointer-events-none cursor-default': props.disabled
@@ -934,16 +947,16 @@ var Tailwind = {
     label: 'text-center text-xl'
   },
   inputswitch: {
-    root: function root(_ref40) {
-      var props = _ref40.props;
+    root: function root(_ref41) {
+      var props = _ref41.props;
       return {
         className: classNames('inline-block relative', 'w-12 h-7', {
           'opacity-60 select-none pointer-events-none cursor-default': props.disabled
         })
       };
     },
-    slider: function slider(_ref41) {
-      var props = _ref41.props;
+    slider: function slider(_ref42) {
+      var props = _ref42.props;
       return {
         className: classNames('absolute cursor-pointer top-0 left-0 right-0 bottom-0 border border-transparent', '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.checked,
@@ -953,8 +966,8 @@ var Tailwind = {
     }
   },
   cascadeselect: {
-    root: function root(_ref42) {
-      var props = _ref42.props;
+    root: function root(_ref43) {
+      var props = _ref43.props;
       return {
         className: classNames('inline-flex cursor-pointer select-none relative', 'bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40 transition duration-200 ease-in-out rounded-lg', {
           'opacity-60 select-none pointer-events-none cursor-default': props.disabled
@@ -964,7 +977,7 @@ var Tailwind = {
     label: {
       className: classNames('block whitespace-nowrap overflow-hidden flex flex-1 w-1 text-overflow-ellipsis cursor-pointer', 'bg-transparent border-0 p-3 text-gray-700 dark:text-white/80', 'appearance-none rounded-md')
     },
-    dropdownbutton: {
+    dropdownButton: {
       className: classNames('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: 'absolute py-3 bg-white dark:bg-gray-900 border-0 shadow-md',
@@ -972,29 +985,35 @@ var Tailwind = {
     sublist: {
       className: classNames('block absolute left-full top-0', 'min-w-full z-10', 'py-3 bg-white dark:bg-gray-900 border-0 shadow-md')
     },
-    item: {
-      className: classNames('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')
+    item: function item(_ref44) {
+      var state = _ref44.state;
+      return {
+        className: classNames('cursor-pointer font-normal whitespace-nowrap', 'm-0 border-0 bg-transparent transition-shadow rounded-none', {
+          'text-gray-700 hover:text-gray-700 hover:bg-gray-200 dark:text-white/80 dark:hover:text-white/80 dark:hover:bg-gray-800/80': !state.selected,
+          'bg-blue-50 text-blue-700 dark:bg-blue-300 dark:text-white/80': state.selected
+        })
+      };
     },
     content: {
       className: classNames('flex items-center overflow-hidden relative', 'py-3 px-5')
     },
-    optiongroupicon: 'ml-auto',
+    optionGroupIcon: 'ml-auto',
     transition: TRANSITIONS.overlay
   },
   inputmask: {
     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: function root(_ref43) {
-      var props = _ref43.props;
+    root: function root(_ref45) {
+      var props = _ref45.props;
       return {
         className: classNames('relative flex items-center', 'gap-2', {
           'opacity-60 select-none pointer-events-none cursor-default': props.disabled
         })
       };
     },
-    cancelitem: function cancelitem(_ref44) {
-      _ref44.context;
+    cancelItem: function cancelItem(_ref46) {
+      _ref46.context;
       return {
         className: classNames('inline-flex items-center cursor-pointer'
 
@@ -1005,39 +1024,39 @@ var Tailwind = {
       };
     },
 
-    cancelicon: {
+    cancelIcon: {
       className: classNames('text-red-500', 'w-5 h-5', 'transition duration-200 ease-in')
     },
-    item: function item(_ref45) {
-      var props = _ref45.props,
-        context = _ref45.context;
+    item: function item(_ref47) {
+      var props = _ref47.props,
+        context = _ref47.context;
       return {
         className: classNames('inline-flex items-center', {
-          'cursor-pointer': !props.readonly,
-          'cursor-default': props.readonly
+          'cursor-pointer': !props.readOnly,
+          'cursor-default': props.readOnly
         }, {
-          'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
+          'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.active
         })
       };
     },
-    officon: {
+    offIcon: {
       className: classNames('text-gray-700 hover:text-blue-400', 'w-5 h-5', 'transition duration-200 ease-in')
     },
-    onicon: {
+    onIcon: {
       className: classNames('text-blue-500', 'w-5 h-5', 'transition duration-200 ease-in')
     }
   },
   selectbutton: {
-    root: function root(_ref46) {
-      var props = _ref46.props;
+    root: function root(_ref48) {
+      var props = _ref48.props;
       return {
         className: classNames({
           'opacity-60 select-none pointer-events-none cursor-default': props.disabled
         })
       };
     },
-    button: function button(_ref47) {
-      var context = _ref47.context;
+    button: function button(_ref49) {
+      var context = _ref49.context;
       return {
         className: classNames('inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative', 'px-4 py-3', 'transition duration-200 border border-r-0', 'first:rounded-l-md first:rounded-tr-none first:rounded-br-none last:border-r last:rounded-tl-none last:rounded-bl-none last:rounded-r-md', '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-white dark:bg-gray-900 text-gray-700 dark:text-white/80 border-gray-300 dark:border-blue-900/40 hover:bg-gray-50 dark:hover:bg-gray-800/80 ': !context.selected,
@@ -1049,8 +1068,8 @@ var Tailwind = {
     label: 'font-bold'
   },
   slider: {
-    root: function root(_ref48) {
-      var props = _ref48.props;
+    root: function root(_ref50) {
+      var props = _ref50.props;
       return {
         className: classNames('relative', 'bg-gray-100 dark:bg-gray-800 border-0 rounded-6', {
           'h-1 w-56': props.orientation == 'horizontal',
@@ -1060,8 +1079,8 @@ var Tailwind = {
         })
       };
     },
-    range: function range(_ref49) {
-      var props = _ref49.props;
+    range: function range(_ref51) {
+      var props = _ref51.props;
       return {
         className: classNames('bg-blue-500', 'block absolute', {
           'top-0 left-0 h-full': props.orientation == 'horizontal',
@@ -1069,25 +1088,7 @@ var Tailwind = {
         })
       };
     },
-    handle: function handle(_ref50) {
-      var props = _ref50.props;
-      return {
-        className: classNames('h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200', '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'
-        })
-      };
-    },
-    starthandler: function starthandler(_ref51) {
-      var props = _ref51.props;
-      return {
-        className: classNames('h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200', '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'
-        })
-      };
-    },
-    endhandler: function endhandler(_ref52) {
+    handle: function handle(_ref52) {
       var props = _ref52.props;
       return {
         className: classNames('h-4 w-4 bg-white dark:bg-gray-600 border-2 border-blue-500 rounded-full transition duration-200', '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', {
@@ -1108,7 +1109,7 @@ var Tailwind = {
     },
     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: function meterlabel(_ref54) {
+    meterLabel: function meterLabel(_ref54) {
       var _state$meter, _state$meter2, _state$meter3;
       var state = _ref54.state,
         props = _ref54.props;
@@ -1122,24 +1123,22 @@ var Tailwind = {
         })
       };
     },
-    showicon: {
+    showIcon: {
       className: classNames('absolute top-1/2 -mt-2', 'right-3 text-gray-600 dark:text-white/70')
     },
-    hideicon: {
+    hideIcon: {
       className: classNames('absolute top-1/2 -mt-2', 'right-3 text-gray-600 dark:text-white/70')
     },
     transition: TRANSITIONS.overlay
   },
   togglebutton: {
     root: function root(_ref55) {
-      var props = _ref55.props;
-        _ref55.context;
+      var props = _ref55.props,
+        state = _ref55.state;
       return {
-        className: classNames('inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative', 'px-4 py-3 rounded-md text-base w-36', 'border transition duration-200 ease-in-out',
-        // {
-        //     'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': context.focused
-        // },
-        {
+        className: classNames('inline-flex cursor-pointer select-none items-center align-bottom text-center overflow-hidden relative', 'px-4 py-3 rounded-md text-base w-36', 'border transition duration-200 ease-in-out', {
+          'outline-none outline-offset-0 shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] dark:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]': state.focused
+        }, {
           'bg-white dark:bg-gray-900 border-gray-300 dark:border-blue-900/40 text-gray-700 dark:text-white/80 hover:bg-gray-100 dark:hover:bg-gray-800/80 hover:border-gray-300 dark:hover:bg-gray-800/70 hover:text-gray-700 dark:hover:text-white/80': !props.checked,
           'bg-blue-500 border-blue-500 text-white hover:bg-blue-600 hover:border-blue-600': props.checked
         }, {
@@ -1152,7 +1151,7 @@ var Tailwind = {
       var props = _ref56.props;
       return {
         className: classNames(' mr-2', {
-          'text-gray-600 dark:text-white/70': !props.modelValue,
+          'text-gray-600 dark:text-white/70': !props.checked,
           'text-white': props.checked
         })
       };
@@ -1256,18 +1255,18 @@ var Tailwind = {
         })
       };
     },
-    itemgroup: {
+    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: {
+    filterContainer: 'relative',
+    filterInput: {
       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',
-    clearicon: '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: {
@@ -1281,16 +1280,16 @@ var Tailwind = {
     },
     input: {
       root: function root(_ref65) {
-        var props = _ref65.props;
+        var parent = _ref65.parent;
         return {
           className: classNames('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', 'hover:border-blue-500', {
-            'rounded-lg': !props.showIcon,
-            'border-r-0 rounded-l-lg': props.showIcon
+            'rounded-lg': !parent.props.showIcon,
+            'border-r-0 rounded-l-lg': parent.props.showIcon
           })
         };
       }
     },
-    dropdownbutton: function dropdownbutton(_ref66) {
+    dropdownButton: function dropdownButton(_ref66) {
       var props = _ref66.props;
       return {
         root: {
@@ -1402,19 +1401,19 @@ var Tailwind = {
         })
       };
     },
-    itemgroup: {
+    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: {
+    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'
+    filterIcon: '-mt-2 absolute top-1/2'
   },
   mention: {
     root: 'relative',
@@ -1437,8 +1436,8 @@ var Tailwind = {
       var props = _ref73.props;
       return {
         className: classNames('block overflow-hidden whitespace-nowrap cursor-pointer overflow-ellipsis', 'text-gray-800 dark:text-white/80', 'p-3 transition duration-200', {
-          '!p-3': props.display !== 'chip' && ((props === null || props === void 0 ? void 0 : props.modelValue) == null || (props === null || props === void 0 ? void 0 : props.modelValue) == undefined),
-          '!py-1.5 px-3': props.display === 'chip' && (props === null || props === void 0 ? void 0 : props.modelValue) !== null
+          '!p-3': props.display !== 'chip' && (props.value == null || props.value == undefined),
+          '!py-1.5 px-3': props.display === 'chip' && props.value !== null
         })
       };
     },
@@ -1458,16 +1457,18 @@ var Tailwind = {
     headerCheckboxContainer: {
       className: classNames('inline-flex cursor-pointer select-none align-bottom relative', 'mr-2', 'w-6 h-6')
     },
-    headerCheckbox: function headerCheckbox(_ref74) {
-      var context = _ref74.context;
-      return {
-        className: classNames('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 !== null && context !== void 0 && context.selected),
-          'border-blue-500 bg-blue-500': context === null || context === void 0 ? void 0 : context.selected
-        })
-      };
+    headerCheckbox: {
+      root: function root(_ref74) {
+        var props = _ref74.props;
+        return {
+          className: classNames('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': !(props !== null && props !== void 0 && props.checked),
+            'border-blue-500 bg-blue-500': props === null || props === void 0 ? void 0 : props.checked
+          })
+        };
+      }
     },
-    headercheckboxicon: '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: {
       className: classNames('flex items-center justify-center overflow-hidden relative', 'w-8 h-8 text-gray-500 dark:text-white/70 border-0 bg-transparent rounded-full transition duration-200 ease-in-out mr-2 last:mr-0', 'hover:text-gray-700 dark:hover:text-white/80 hover:border-transparent hover:bg-gray-200 dark:hover:bg-gray-800/80 ', '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)]')
     },
@@ -1499,16 +1500,18 @@ var Tailwind = {
         })
       };
     },
-    checkboxicon: 'w-4 h-4 transition-all duration-200 text-white text-base',
-    itemgroup: {
+    checkboxIcon: 'w-4 h-4 transition-all duration-200 text-white text-base',
+    itemGroup: {
       className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
     },
-    filtercontainer: 'relative',
-    filterinput: {
-      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)]')
+    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',
-    clearicon: '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
   },
   multistatecheckbox: {
@@ -1584,7 +1587,7 @@ var Tailwind = {
     container: {
       className: classNames('m-0 list-none cursor-text overflow-hidden flex items-center flex-wrap w-full', 'px-3 py-2 gap-2', 'font-sans text-base text-gray-700 dark:text-white/80 bg-white dark:bg-gray-900 border border-gray-300 dark:border-blue-900/40  transition duration-200 ease-in-out appearance-none rounded-md', 'focus:outline-offset-0 focus:shadow-[0_0_0_0.2rem_rgba(191,219,254,1)] hover:border-blue-500 focus:outline-none dark:focus:shadow-[0_0_0_0.2rem_rgba(147,197,253,0.5)]')
     },
-    inputtoken: {
+    inputToken: {
       className: classNames('py-0.375rem px-0', 'flex-1 inline-flex')
     },
     input: function input(_ref81) {
@@ -1603,7 +1606,7 @@ var Tailwind = {
     token: {
       className: classNames('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: {
+    dropdownButton: {
       root: 'rounded-tl-none rounded-bl-none'
     },
     panel: {
@@ -1621,7 +1624,7 @@ var Tailwind = {
         })
       };
     },
-    itemgroup: {
+    itemGroup: {
       className: classNames('m-0 p-3 text-gray-800 bg-white font-bold', 'dark:bg-gray-900 dark:text-white/80', 'cursor-auto')
     },
     transition: TRANSITIONS.overlay
@@ -1638,7 +1641,7 @@ var Tailwind = {
     container: {
       className: classNames('m-0 py-1.5 px-3 list-none cursor-text overflow-hidden flex items-center flex-wrap', 'w-full', '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)]')
     },
-    inputtoken: {
+    inputToken: {
       className: classNames('py-1.5 px-0', 'flex flex-1 inline-flex')
     },
     input: {
@@ -2773,15 +2776,15 @@ var Tailwind = {
     }
   },
   picklist: {
-    root: 'flex',
-    controls: 'flex flex-col justify-center p-5',
+    root: 'flex flex-col xl:flex-row',
+    controls: 'flex flex-row xl:flex-col justify-center p-5',
     moveUpButton: {
       root: {
         className: classNames('relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0',
         // button component
         'text-white bg-blue-500 border border-blue-500 rounded-md', 'transition duration-200 ease-in-out', 'justify-center px-0 py-3',
         // icon only
-        'mb-2',
+        'mr-2 xl:mb-2',
         // orderlist button
         'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
         )
@@ -2795,7 +2798,7 @@ var Tailwind = {
         // button component
         'text-white bg-blue-500 border border-blue-500 rounded-md', 'transition duration-200 ease-in-out', 'justify-center px-0 py-3',
         // icon only
-        'mb-2',
+        'mr-2 xl:mb-2',
         // orderlist button
         'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
         )
@@ -2809,7 +2812,7 @@ var Tailwind = {
         // button component
         'text-white bg-blue-500 border border-blue-500 rounded-md', 'transition duration-200 ease-in-out', 'justify-center px-0 py-3',
         // icon only
-        'mb-2',
+        'mr-2 xl:mb-2',
         // orderlist button
         'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
         )
@@ -2823,7 +2826,7 @@ var Tailwind = {
         // button component
         'text-white bg-blue-500 border border-blue-500 rounded-md', 'transition duration-200 ease-in-out', 'justify-center px-0 py-3',
         // icon only
-        'mb-2',
+        'mr-2 xl:mb-2',
         // orderlist button
         'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
         )
@@ -2851,7 +2854,7 @@ var Tailwind = {
         })
       };
     },
-    buttons: 'flex flex-col justify-center p-5',
+    buttons: 'flex flex-row xl:flex-col justify-center p-5',
     movetotargetbutton: {
       root: {
         className: classNames('relative inline-flex cursor-pointer user-select-none items-center align-bottom text-center overflow-hidden m-0',
@@ -2872,7 +2875,7 @@ var Tailwind = {
         // button component
         'text-white bg-blue-500 border border-blue-500 rounded-md', 'transition duration-200 ease-in-out', 'justify-center px-0 py-3',
         // icon only
-        'mb-2',
+        'mr-2 xl:mb-2',
         // orderlist button
         'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
         )
@@ -2886,7 +2889,7 @@ var Tailwind = {
         // button component
         'text-white bg-blue-500 border border-blue-500 rounded-md', 'transition duration-200 ease-in-out', 'justify-center px-0 py-3',
         // icon only
-        'mb-2',
+        'mr-2 xl:mb-2',
         // orderlist button
         'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
         )
@@ -2900,7 +2903,7 @@ var Tailwind = {
         // button component
         'text-white bg-blue-500 border border-blue-500 rounded-md', 'transition duration-200 ease-in-out', 'justify-center px-0 py-3',
         // icon only
-        'mb-2',
+        'mr-2 xl:mb-2',
         // orderlist button
         'dark:bg-sky-300 dark:border-sky-300 dark:text-gray-900' //Dark Mode
         )
@@ -3341,7 +3344,7 @@ var Tailwind = {
           context.sorted ? 'dark:text-white/80 dark:bg-blue-300' : 'dark:text-white/80 dark:bg-gray-900',
           // Dark Mode
           {
-            'sticky z-[1]': props.frozen || props.frozen === '',
+            'sticky z-[1]': props && (props.frozen || props.frozen === ''),
             // Frozen Columns
             'border-x border-y': context === null || context === void 0 ? void 0 : context.showGridlines,
             'overflow-hidden space-nowrap border-y relative bg-clip-padding': context.resizable // Resizable
@@ -3359,7 +3362,7 @@ var Tailwind = {
           'dark:text-white/80 dark:border-blue-900/40',
           // Dark Mode
           {
-            'sticky bg-inherit': (props === null || props === void 0 ? void 0 : props.frozen) || (props === null || props === void 0 ? void 0 : props.frozen) === '',
+            'sticky bg-inherit': props && (props.frozen || props.frozen === ''),
             // Frozen Columns
             'border-x border-y': context.showGridlines
           })