primereact 10.6.2 → 10.6.3

package/primereact.all.js

@@ -4670,7 +4670,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
   function ownKeys$1P(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$1P(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1P(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1P(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-  var baseStyle = "\n.p-hidden-accessible {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n}\n\n.p-hidden-accessible input,\n.p-hidden-accessible select {\n    transform: scale(0);\n}\n\n.p-overflow-hidden {\n    overflow: hidden;\n    padding-right: var(--scrollbar-width);\n}\n";
+  var baseStyle = "\n.p-hidden-accessible {\n    border: 0;\n    padding: 0;\n    margin: -1px;\n    position: absolute;\n    height: 1px;\n    width: 1px;\n    overflow: hidden;\n    clip: rect(0, 0, 0, 0);\n    clip-path: inset(50%);\n    white-space: nowrap;\n}\n\n.p-hidden-accessible input,\n.p-hidden-accessible select {\n    transform: scale(0);\n}\n\n.p-overflow-hidden {\n    overflow: hidden;\n    padding-right: var(--scrollbar-width);\n}\n";
   var buttonStyles = "\n.p-button {\n    margin: 0;\n    display: inline-flex;\n    cursor: pointer;\n    user-select: none;\n    align-items: center;\n    vertical-align: bottom;\n    text-align: center;\n    overflow: hidden;\n    position: relative;\n}\n\n.p-button-label {\n    flex: 1 1 auto;\n}\n\n.p-button-icon-right {\n    order: 1;\n}\n\n.p-button:disabled {\n    cursor: default;\n}\n\n.p-button-icon-only {\n    justify-content: center;\n}\n\n.p-button-icon-only .p-button-label {\n    visibility: hidden;\n    width: 0;\n    flex: 0 0 auto;\n}\n\n.p-button-vertical {\n    flex-direction: column;\n}\n\n.p-button-icon-bottom {\n    order: 2;\n}\n\n.p-button-group .p-button {\n    margin: 0;\n}\n\n.p-button-group .p-button:not(:last-child) {\n    border-right: 0 none;\n}\n\n.p-button-group .p-button:not(:first-of-type):not(:last-of-type) {\n    border-radius: 0;\n}\n\n.p-button-group .p-button:first-of-type {\n    border-top-right-radius: 0;\n    border-bottom-right-radius: 0;\n}\n\n.p-button-group .p-button:last-of-type {\n    border-top-left-radius: 0;\n    border-bottom-left-radius: 0;\n}\n\n.p-button-group .p-button:focus {\n    position: relative;\n    z-index: 1;\n}\n";
   var inputTextStyles = "\n.p-inputtext {\n    margin: 0;\n}\n\n.p-fluid .p-inputtext {\n    width: 100%;\n}\n\n/* InputGroup */\n.p-inputgroup {\n    display: flex;\n    align-items: stretch;\n    width: 100%;\n}\n\n.p-inputgroup-addon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n.p-inputgroup .p-float-label {\n    display: flex;\n    align-items: stretch;\n    width: 100%;\n}\n\n.p-inputgroup .p-inputtext,\n.p-fluid .p-inputgroup .p-inputtext,\n.p-inputgroup .p-inputwrapper,\n.p-fluid .p-inputgroup .p-input {\n    flex: 1 1 auto;\n    width: 1%;\n}\n\n/* Floating Label */\n.p-float-label {\n    display: block;\n    position: relative;\n}\n\n.p-float-label label {\n    position: absolute;\n    pointer-events: none;\n    top: 50%;\n    margin-top: -0.5rem;\n    transition-property: all;\n    transition-timing-function: ease;\n    line-height: 1;\n}\n\n.p-float-label textarea ~ label,\n.p-float-label .p-mention ~ label {\n    top: 1rem;\n}\n\n.p-float-label input:focus ~ label,\n.p-float-label input:-webkit-autofill ~ label,\n.p-float-label input.p-filled ~ label,\n.p-float-label textarea:focus ~ label,\n.p-float-label textarea.p-filled ~ label,\n.p-float-label .p-inputwrapper-focus ~ label,\n.p-float-label .p-inputwrapper-filled ~ label,\n.p-float-label .p-tooltip-target-wrapper ~ label {\n    top: -0.75rem;\n    font-size: 12px;\n}\n\n.p-float-label .p-placeholder,\n.p-float-label input::placeholder,\n.p-float-label .p-inputtext::placeholder {\n    opacity: 0;\n    transition-property: all;\n    transition-timing-function: ease;\n}\n\n.p-float-label .p-focus .p-placeholder,\n.p-float-label input:focus::placeholder,\n.p-float-label .p-inputtext:focus::placeholder {\n    opacity: 1;\n    transition-property: all;\n    transition-timing-function: ease;\n}\n\n.p-input-icon-left,\n.p-input-icon-right {\n    position: relative;\n    display: inline-block;\n}\n\n.p-input-icon-left > i,\n.p-input-icon-right > i,\n.p-input-icon-left > svg,\n.p-input-icon-right > svg,\n.p-input-icon-left > .p-input-prefix,\n.p-input-icon-right > .p-input-suffix {\n    position: absolute;\n    top: 50%;\n    margin-top: -0.5rem;\n}\n\n.p-fluid .p-input-icon-left,\n.p-fluid .p-input-icon-right {\n    display: block;\n    width: 100%;\n}\n";
   var iconStyles = "\n.p-icon {\n    display: inline-block;\n}\n\n.p-icon-spin {\n    -webkit-animation: p-icon-spin 2s infinite linear;\n    animation: p-icon-spin 2s infinite linear;\n}\n\nsvg.p-icon {\n    pointer-events: auto;\n}\n\nsvg.p-icon g,\n.p-disabled svg.p-icon {\n    pointer-events: none;\n}\n\n@-webkit-keyframes p-icon-spin {\n    0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n    }\n    100% {\n        -webkit-transform: rotate(359deg);\n        transform: rotate(359deg);\n    }\n}\n\n@keyframes p-icon-spin {\n    0% {\n        -webkit-transform: rotate(0deg);\n        transform: rotate(0deg);\n    }\n    100% {\n        -webkit-transform: rotate(359deg);\n        transform: rotate(359deg);\n    }\n}\n";
@@ -5092,7 +5092,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   ChevronRightIcon.displayName = 'ChevronRightIcon';
 
-  var classes$1c = {
+  var classes$1d = {
     root: 'p-accordion p-component',
     tab: {
       root: function root(_ref) {
@@ -5136,7 +5136,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$1c,
+      classes: classes$1d,
       styles: styles$12
     }
   });
@@ -6229,7 +6229,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   WindowMinimizeIcon.displayName = 'WindowMinimizeIcon';
 
-  var classes$1b = {
+  var classes$1c = {
     root: function root(_ref) {
       var props = _ref.props;
       return classNames('p-badge p-component', _defineProperty({
@@ -6253,7 +6253,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$1b,
+      classes: classes$1c,
       styles: styles$11
     }
   });
@@ -6292,7 +6292,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   Badge.displayName = 'Badge';
 
   var styles$10 = "\n@layer primereact {\n    .p-ripple {\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-ink {\n        display: block;\n        position: absolute;\n        background: rgba(255, 255, 255, 0.5);\n        border-radius: 100%;\n        transform: scale(0);\n    }\n    \n    .p-ink-active {\n        animation: ripple 0.4s linear;\n    }\n    \n    .p-ripple-disabled .p-ink {\n        display: none;\n    }\n}\n\n@keyframes ripple {\n    100% {\n        opacity: 0;\n        transform: scale(2.5);\n    }\n}\n\n";
-  var classes$1a = {
+  var classes$1b = {
     root: 'p-ink'
   };
   var RippleBase = ComponentBase.extend({
@@ -6302,7 +6302,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     },
     css: {
       styles: styles$10,
-      classes: classes$1a
+      classes: classes$1b
     },
     getProps: function getProps(props) {
       return ObjectUtils.getMergedProps(props, RippleBase.defaultProps);
@@ -6477,7 +6477,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   });
   Portal.displayName = 'Portal';
 
-  var classes$19 = {
+  var classes$1a = {
     root: function root(_ref) {
       var positionState = _ref.positionState,
         classNameState = _ref.classNameState;
@@ -6531,7 +6531,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$19,
+      classes: classes$1a,
       styles: styles$$,
       inlineStyles: inlineStyles$m
     }
@@ -7045,7 +7045,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   Tooltip.displayName = 'Tooltip';
 
-  var classes$18 = {
+  var classes$19 = {
     icon: function icon(_ref) {
       var props = _ref.props;
       return classNames('p-button-icon p-c', _defineProperty({}, "p-button-icon-".concat(props.iconPos), props.label));
@@ -7103,7 +7103,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       visible: true
     },
     css: {
-      classes: classes$18
+      classes: classes$19
     }
   });
 
@@ -7283,15 +7283,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }
   };
 
-  var classes$17 = {
+  var classes$18 = {
     root: function root(_ref) {
       var props = _ref.props,
-        isFilled = _ref.isFilled;
+        isFilled = _ref.isFilled,
+        context = _ref.context;
       return classNames('p-inputtext p-component', {
         'p-disabled': props.disabled,
         'p-filled': isFilled,
-        'p-invalid': props.invalid
-      }, props.className);
+        'p-invalid': props.invalid,
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+      });
     }
   };
   var InputTextBase = ComponentBase.extend({
@@ -7301,6 +7303,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined,
       className: null,
       invalid: false,
+      variant: null,
       keyfilter: null,
       onBeforeInput: null,
       onInput: null,
@@ -7311,7 +7314,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       validateOnly: false
     },
     css: {
-      classes: classes$17
+      classes: classes$18
     }
   });
 
@@ -7373,9 +7376,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, [props.value, props.defaultValue]);
     var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     var rootProps = mergeProps({
-      className: cx('root', {
+      className: classNames(props.className, cx('root', {
+        context: context,
         isFilled: isFilled
-      }),
+      })),
       onBeforeInput: onBeforeInput,
       onInput: onInput,
       onKeyDown: onKeyDown,
@@ -7393,7 +7397,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
   var OverlayService = EventBus();
 
-  var classes$16 = {
+  var classes$17 = {
     root: function root(_ref) {
       var props = _ref.props,
         focusedState = _ref.focusedState;
@@ -7406,9 +7410,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       });
     },
     container: function container(_ref2) {
-      var props = _ref2.props;
+      var props = _ref2.props,
+        context = _ref2.context;
       return classNames('p-autocomplete-multiple-container p-component p-inputtext', {
-        'p-disabled': props.disabled
+        'p-disabled': props.disabled,
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
       });
     },
     loadingIcon: 'p-autocomplete-loader',
@@ -7418,15 +7424,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     tokenLabel: 'p-autocomplete-token-label',
     inputToken: 'p-autocomplete-input-token',
     input: function input(_ref3) {
-      var props = _ref3.props;
+      var props = _ref3.props,
+        context = _ref3.context;
       return classNames('p-autocomplete-input', {
-        'p-autocomplete-dd-input': props.dropdown
+        'p-autocomplete-dd-input': props.dropdown,
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
       });
     },
     panel: function panel(_ref4) {
       var context = _ref4.context;
       return classNames('p-autocomplete-panel p-component', {
-        'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
         'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
       });
     },
@@ -7474,6 +7481,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       inputId: null,
       inputRef: null,
       inputStyle: null,
+      variant: null,
       invalid: false,
       itemTemplate: null,
       loadingIcon: null,
@@ -7522,7 +7530,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$16,
+      classes: classes$17,
       styles: styles$_
     }
   });
@@ -8507,7 +8515,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         style: style,
         'data-p-disabled': suggestion.disabled
       }, getPTOptions(suggestion, 'item'));
-      return createListItem(suggestion, index, itemProps);
+      return createListItem(suggestion, undefined, index, itemProps);
     };
     var createItems = function createItems() {
       return props.suggestions ? props.suggestions.map(createItem) : null;
@@ -9094,7 +9102,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         "aria-controls": ariaControls,
         "aria-haspopup": "listbox",
         "aria-expanded": overlayVisibleState,
-        className: classNames(props.inputClassName, cx('input')),
+        className: classNames(props.inputClassName, cx('input', {
+          context: context
+        })),
         style: props.inputStyle,
         autoComplete: "off",
         readOnly: props.readOnly,
@@ -9188,7 +9198,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var input = createMultiInput(allowMoreValues);
       var containerProps = mergeProps({
         ref: multiContainerRef,
-        className: cx('container'),
+        className: cx('container', {
+          context: context
+        }),
         onClick: allowMoreValues ? onMultiContainerClick : undefined,
         onContextMenu: props.onContextMenu,
         onMouseDown: props.onMouseDown,
@@ -9277,7 +9289,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   AutoComplete.displayName = 'AutoComplete';
 
-  var classes$15 = {
+  var classes$16 = {
     root: function root(_ref) {
       var props = _ref.props,
         state = _ref.state;
@@ -9310,7 +9322,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$15,
+      classes: classes$16,
       styles: styles$Y
     }
   });
@@ -9404,7 +9416,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   });
   Avatar.displayName = 'Avatar';
 
-  var classes$14 = {
+  var classes$15 = {
     root: 'p-avatar-group p-component'
   };
   var styles$X = "\n@layer primereact {\n    .p-avatar-group .p-avatar + .p-avatar {\n        margin-left: -1rem;\n    }\n    \n    .p-avatar-group {\n        display: flex;\n        align-items: center;\n    }\n}\n";
@@ -9416,7 +9428,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$14,
+      classes: classes$15,
       styles: styles$X
     }
   });
@@ -9452,13 +9464,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   });
   AvatarGroup.displayName = 'AvatarGroup';
 
-  var classes$13 = {
-    root: function root(_ref) {
+  var classes$14 = {
+    root: 'p-blockui-container',
+    mask: function mask(_ref) {
       var props = _ref.props;
-      return classNames('p-blockui-container', props.containerClassName);
-    },
-    mask: function mask(_ref2) {
-      var props = _ref2.props;
       return classNames('p-blockui p-component-overlay p-component-overlay-enter', {
         'p-blockui-document': props.fullScreen
       });
@@ -9483,7 +9492,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$13,
+      classes: classes$14,
       styles: styles$W
     }
   });
@@ -9594,14 +9603,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       id: props.id,
       ref: elementRef,
       style: props.containerStyle,
-      className: cx('root'),
+      className: classNames(props.containerClassName, cx('root')),
       'aria-busy': props.blocked
     }, BlockUIBase.getOtherProps(props), ptm('root'));
     return /*#__PURE__*/React__namespace.createElement("div", rootProps, props.children, mask);
   });
   BlockUI.displayName = 'BlockUI';
 
-  var classes$12 = {
+  var classes$13 = {
     icon: 'p-menuitem-icon',
     action: 'p-menuitem-link',
     label: 'p-menuitem-text',
@@ -9621,10 +9630,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       });
     },
     menu: 'p-breadcrumb-list',
-    root: function root(_ref3) {
-      var props = _ref3.props;
-      return classNames('p-breadcrumb p-component', props.className);
-    }
+    root: 'p-breadcrumb p-component'
   };
   var styles$V = "\n@layer primereact {\n    .p-breadcrumb {\n        overflow-x: auto;\n    }\n\n    .p-breadcrumb ol {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        display: flex;\n        align-items: center;\n        flex-wrap: nowrap;\n    }\n\n    .p-breadcrumb .p-menuitem-text {\n        line-height: 1;\n    }\n\n    .p-breadcrumb .p-menuitem-link {\n        text-decoration: none;\n        display: flex;\n        align-items: center;\n    }\n\n    .p-breadcrumb .p-menuitem-separator {\n        display: flex;\n        align-items: center;\n    }\n\n    .p-breadcrumb::-webkit-scrollbar {\n        display: none;\n    }\n}\n";
   var BreadCrumbBase = ComponentBase.extend({
@@ -9639,7 +9645,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$12,
+      classes: classes$13,
       styles: styles$V
     }
   });
@@ -9847,7 +9853,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rootProps = mergeProps({
       id: props.id,
       ref: elementRef,
-      className: cx('root'),
+      className: classNames(props.className, cx('root')),
       style: props.style
     }, BreadCrumbBase.getOtherProps(props), ptm('root'));
     return /*#__PURE__*/React__namespace.createElement("nav", rootProps, /*#__PURE__*/React__namespace.createElement("ol", menuProps, home, separator, items));
@@ -9855,7 +9861,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   BreadCrumb.displayName = 'BreadCrumb';
 
   var styles$U = "\n@layer primereact {\n    .p-calendar {\n        position: relative;\n        display: inline-flex;\n        max-width: 100%;\n    }\n\n    .p-calendar .p-inputtext {\n        flex: 1 1 auto;\n        width: 1%;\n    }\n\n    .p-calendar-w-btn-right .p-inputtext {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    .p-calendar-w-btn-right .p-datepicker-trigger {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n\n    .p-calendar-w-btn-left .p-inputtext {\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n\n    .p-calendar-w-btn-left .p-datepicker-trigger {\n        border-top-right-radius: 0;\n        border-bottom-right-radius: 0;\n    }\n\n    /* Fluid */\n    .p-fluid .p-calendar {\n        display: flex;\n    }\n\n    .p-fluid .p-calendar .p-inputtext {\n        width: 1%;\n    }\n\n    /* Datepicker */\n    .p-calendar .p-datepicker {\n        min-width: 100%;\n    }\n\n    .p-datepicker {\n        width: auto;\n        position: absolute;\n        top: 0;\n        left: 0;\n    }\n\n    .p-datepicker-inline {\n        display: inline-block;\n        position: static;\n        overflow-x: auto;\n    }\n\n    /* Header */\n    .p-datepicker-header {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    .p-datepicker-header .p-datepicker-title {\n        margin: 0 auto;\n    }\n\n    .p-datepicker-prev,\n    .p-datepicker-next {\n        cursor: pointer;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /* Multiple Month DatePicker */\n    .p-datepicker-multiple-month .p-datepicker-group-container {\n        display: flex;\n    }\n\n    .p-datepicker-multiple-month .p-datepicker-group-container .p-datepicker-group {\n        flex: 1 1 auto;\n    }\n\n    /* Multiple Month DatePicker */\n    .p-datepicker-multiple-month .p-datepicker-group-container {\n        display: flex;\n    }\n\n    /* DatePicker Table */\n    .p-datepicker table {\n        width: 100%;\n        border-collapse: collapse;\n    }\n\n    .p-datepicker td > span {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n        margin: 0 auto;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /* Month Picker */\n    .p-monthpicker-month {\n        width: 33.3%;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /*  Button Bar */\n    .p-datepicker-buttonbar {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n    }\n\n    /* Time Picker */\n    .p-timepicker {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    .p-timepicker button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-timepicker > div {\n        display: flex;\n        align-items: center;\n        flex-direction: column;\n    }\n\n    /* Touch UI */\n    .p-datepicker-touch-ui,\n    .p-calendar .p-datepicker-touch-ui {\n        position: fixed;\n        top: 50%;\n        left: 50%;\n        min-width: 80vw;\n        transform: translate(-50%, -50%);\n    }\n\n    /* Year Picker */\n    .p-yearpicker-year {\n        width: 50%;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        overflow: hidden;\n        position: relative;\n    }\n}\n";
-  var classes$11 = {
+  var classes$12 = {
     root: function root(_ref) {
       var props = _ref.props,
         focusedState = _ref.focusedState,
@@ -9863,27 +9869,34 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         panelVisible = _ref.panelVisible;
       return classNames('p-calendar p-component p-inputwrapper', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "p-calendar-w-btn p-calendar-w-btn-".concat(props.iconPos), props.showIcon), 'p-calendar-disabled', props.disabled), 'p-invalid', props.invalid), 'p-calendar-timeonly', props.timeOnly), 'p-inputwrapper-filled', props.value || isFilled), 'p-inputwrapper-focus', focusedState), 'p-focus', focusedState || panelVisible));
     },
+    input: function input(_ref2) {
+      var props = _ref2.props,
+        context = _ref2.context;
+      return classNames('p-inputtext p-component', {
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+      });
+    },
     dropdownButton: 'p-datepicker-trigger',
     buttonbar: 'p-datepicker-buttonbar',
     todayButton: 'p-button-text',
     clearButton: 'p-button-text',
     footer: 'p-datepicker-footer',
     yearPicker: 'p-yearpicker',
-    year: function year(_ref2) {
-      var isYearSelected = _ref2.isYearSelected,
-        y = _ref2.y,
-        isMonthYearDisabled = _ref2.isMonthYearDisabled;
+    year: function year(_ref3) {
+      var isYearSelected = _ref3.isYearSelected,
+        y = _ref3.y,
+        isMonthYearDisabled = _ref3.isMonthYearDisabled;
       return classNames('p-yearpicker-year', {
         'p-highlight': isYearSelected(y),
         'p-disabled': isMonthYearDisabled(-1, y)
       });
     },
     monthPicker: 'p-monthpicker',
-    month: function month(_ref3) {
-      var isMonthSelected = _ref3.isMonthSelected,
-        isMonthYearDisabled = _ref3.isMonthYearDisabled,
-        i = _ref3.i,
-        currentYear = _ref3.currentYear;
+    month: function month(_ref4) {
+      var isMonthSelected = _ref4.isMonthSelected,
+        isMonthYearDisabled = _ref4.isMonthYearDisabled,
+        i = _ref4.i,
+        currentYear = _ref4.currentYear;
       return classNames('p-monthpicker-month', {
         'p-highlight': isMonthSelected(i),
         'p-disabled': isMonthYearDisabled(i, currentYear)
@@ -9895,19 +9908,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     millisecondPicker: 'p-millisecond-picker',
     ampmPicker: 'p-ampm-picker',
     separatorContainer: 'p-separator',
-    dayLabel: function dayLabel(_ref4) {
-      var className = _ref4.className;
+    dayLabel: function dayLabel(_ref5) {
+      var className = _ref5.className;
       return className;
     },
-    day: function day(_ref5) {
-      var date = _ref5.date;
+    day: function day(_ref6) {
+      var date = _ref6.date;
       return classNames({
         'p-datepicker-other-month': date.otherMonth,
         'p-datepicker-today': date.today
       });
     },
-    panel: function panel(_ref6) {
-      var panelClassName = _ref6.panelClassName;
+    panel: function panel(_ref7) {
+      var panelClassName = _ref7.panelClassName;
       return panelClassName;
     },
     previousIcon: 'p-datepicker-prev-icon',
@@ -9924,8 +9937,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     header: 'p-datepicker-header',
     groupContainer: 'p-datepicker-group-container',
     group: 'p-datepicker-group',
-    select: function select(_ref7) {
-      var props = _ref7.props;
+    select: function select(_ref8) {
+      var props = _ref8.props;
       return props.monthNavigator && props.view !== 'month' ? 'p-datepicker-month' : props.yearNavigator ? 'p-datepicker-year' : undefined;
     },
     weekHeader: 'p-datepicker-weekheader p-disabled',
@@ -9970,6 +9983,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       inputMode: 'none',
       inputRef: null,
       inputStyle: null,
+      variant: null,
       invalid: false,
       keepInvalid: false,
       locale: null,
@@ -10036,7 +10050,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$11,
+      classes: classes$12,
       styles: styles$U
     }
   });
@@ -12897,6 +12911,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var createTitleYearElement = function createTitleYearElement(metaYear) {
       var viewDate = getViewDate();
       var viewYear = viewDate.getFullYear();
+      var displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
       if (props.yearNavigator) {
         var _yearOptions2 = [];
         if (props.yearRange) {
@@ -12920,7 +12935,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           onChange: function onChange(e) {
             return onYearDropdownChange(e, e.target.value);
           },
-          value: viewYear
+          value: displayYear
         }, ptm('select'));
         var _content2 = /*#__PURE__*/React__namespace.createElement("select", selectProps, displayedYearNames.map(function (year) {
           var optionProps = mergeProps({
@@ -12951,7 +12966,6 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
         return _content2;
       }
-      var displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
       var yearTitleProps = mergeProps({
         className: cx('yearTitle'),
         'aria-label': localeOption('chooseYear', props.locale),
@@ -13432,7 +13446,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           name: props.name,
           type: "text",
           role: "combobox",
-          className: props.inputClassName,
+          className: (props.inputClassName, cx('input', {
+            context: context
+          })),
           style: props.inputStyle,
           readOnly: props.readOnlyInput,
           disabled: props.disabled,
@@ -13671,11 +13687,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   Calendar.displayName = 'Calendar';
 
-  var classes$10 = {
-    root: function root(_ref) {
-      var props = _ref.props;
-      return classNames('p-card p-component', props.className);
-    },
+  var classes$11 = {
+    root: 'p-card p-component',
     header: 'p-card-header',
     title: 'p-card-title',
     subTitle: 'p-card-subtitle',
@@ -13697,7 +13710,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$10,
+      classes: classes$11,
       styles: styles$T
     }
   });
@@ -13754,7 +13767,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       id: props.id,
       ref: elementRef,
       style: props.style,
-      className: cx('root')
+      className: classNames(props.className, cx('root'))
     }, CardBase.getOtherProps(props), ptm('root'));
     var header = createHeader();
     var body = createBody();
@@ -13763,7 +13776,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   Card.displayName = 'Card';
 
   var styles$S = "\n@layer primereact {\n    .p-carousel {\n        display: flex;\n        flex-direction: column;\n    }\n    \n    .p-carousel-content {\n        display: flex;\n        flex-direction: column;\n        overflow: auto;\n    }\n    \n    .p-carousel-prev,\n    .p-carousel-next {\n        align-self: center;\n        flex-grow: 0;\n        flex-shrink: 0;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-carousel-container {\n        display: flex;\n        flex-direction: row;\n    }\n    \n    .p-carousel-items-content {\n        overflow: hidden;\n        width: 100%;\n    }\n    \n    .p-carousel-items-container {\n        display: flex;\n        flex-direction: row;\n    }\n    \n    .p-carousel-indicators {\n        display: flex;\n        flex-direction: row;\n        justify-content: center;\n        flex-wrap: wrap;\n    }\n    \n    .p-carousel-indicator > button {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    /* Vertical */\n    .p-carousel-vertical .p-carousel-container {\n        flex-direction: column;\n    }\n    \n    .p-carousel-vertical .p-carousel-items-container {\n        flex-direction: column;\n        height: 100%;\n    }\n    \n    /* Keyboard Support */\n    .p-items-hidden .p-carousel-item {\n        visibility: hidden;\n    }\n    \n    .p-items-hidden .p-carousel-item.p-carousel-item-active {\n        visibility: visible;\n    }\n}\n";
-  var classes$$ = {
+  var classes$10 = {
     root: function root(_ref) {
       var isVertical = _ref.isVertical;
       return classNames('p-carousel p-component', {
@@ -13853,7 +13866,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$$,
+      classes: classes$10,
       styles: styles$S,
       inlineStyles: inlineStyles$l
     }
@@ -14521,18 +14534,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   CarouselItem.displayName = 'CarouselItem';
   Carousel.displayName = 'Carousel';
 
-  var classes$_ = {
+  var classes$$ = {
     root: function root(_ref) {
       var props = _ref.props,
         focusedState = _ref.focusedState,
-        overlayVisibleState = _ref.overlayVisibleState;
+        overlayVisibleState = _ref.overlayVisibleState,
+        context = _ref.context;
       return classNames('p-cascadeselect p-component p-inputwrapper', {
         'p-disabled': props.disabled,
         'p-invalid': props.invalid,
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
         'p-focus': focusedState,
         'p-inputwrapper-filled': props.value,
         'p-inputwrapper-focus': focusedState || overlayVisibleState
-      }, props.className);
+      });
     },
     label: function label(_ref2) {
       var props = _ref2.props,
@@ -14542,19 +14557,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-cascadeselect-label-empty': !props.value && _label === 'p-emptylabel'
       });
     },
-    list: function list(_ref3) {
-      var context = _ref3.context;
-      return classNames('p-cascadeselect-panel p-cascadeselect-items', {
-        'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
-        'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
-      });
-    },
+    list: 'p-cascadeselect-panel p-cascadeselect-items',
     sublistWrapper: 'p-cascadeselect-sublist-wrapper',
     sublist: 'p-cascadeselect-panel p-cascadeselect-items p-cascadeselect-sublist',
-    item: function item(_ref4) {
-      _ref4.option;
-        var isGroup = _ref4.isGroup,
-        isSelected = _ref4.isSelected;
+    item: function item(_ref3) {
+      _ref3.option;
+        var isGroup = _ref3.isGroup,
+        isSelected = _ref3.isSelected;
       return classNames('p-cascadeselect-item', {
         'p-cascadeselect-item-group': isGroup,
         'p-cascadeselect-item-active p-highlight': isSelected
@@ -14588,6 +14597,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       inputId: null,
       inputRef: null,
       invalid: false,
+      variant: null,
       itemTemplate: null,
       name: null,
       onBeforeHide: null,
@@ -14611,7 +14621,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$_,
+      classes: classes$$,
       styles: styles$R
     }
   });
@@ -15253,10 +15263,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var rootProps = mergeProps({
         id: props.id,
         ref: elementRef,
-        className: cx('root', {
+        className: classNames(props.className, cx('root', {
           focusedState: focusedState,
-          overlayVisibleState: overlayVisibleState
-        }),
+          overlayVisibleState: overlayVisibleState,
+          context: context
+        })),
         style: props.style,
         onClick: function onClick(e) {
           return _onClick(e);
@@ -15288,14 +15299,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     },
     css: {
       classes: {
-        root: function root(_ref) {
-          var props = _ref.props;
-          return classNames('p-chart', props.className);
-        }
+        root: 'p-chart'
       },
       inlineStyles: {
-        root: function root(_ref2) {
-          var props = _ref2.props;
+        root: function root(_ref) {
+          var props = _ref.props;
           return Object.assign({
             width: props.width,
             height: props.height
@@ -15404,7 +15412,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       id: props.id,
       ref: elementRef,
       style: sx('root'),
-      className: cx('root')
+      className: classNames(props.className, cx('root'))
     }, ChartBase.getOtherProps(props), ptm('root'));
     var canvasProps = mergeProps({
       ref: canvasRef,
@@ -15419,18 +15427,19 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   });
   PrimeReactChart.displayName = 'Chart';
 
-  var classes$Z = {
+  var classes$_ = {
     box: 'p-checkbox-box',
     input: 'p-checkbox-input',
     icon: 'p-checkbox-icon',
     root: function root(_ref) {
       var props = _ref.props,
-        checked = _ref.checked;
+        checked = _ref.checked,
+        context = _ref.context;
       return classNames('p-checkbox p-component', {
         'p-highlight': checked,
         'p-disabled': props.disabled,
         'p-invalid': props.invalid,
-        'p-variant-filled': props.variant === 'filled'
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
       });
     }
   };
@@ -15447,6 +15456,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       inputId: null,
       inputRef: null,
       invalid: false,
+      variant: null,
       name: null,
       onChange: null,
       onContextMenu: null,
@@ -15462,7 +15472,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$Z
+      classes: classes$_
     }
   });
 
@@ -15564,7 +15574,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rootProps = mergeProps({
       id: props.id,
       className: classNames(props.className, cx('root', {
-        checked: checked
+        checked: checked,
+        context: context
       })),
       style: props.style,
       'data-p-highlight': checked,
@@ -15627,7 +15638,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   Checkbox.displayName = 'Checkbox';
 
-  var classes$Y = {
+  var classes$Z = {
     root: function root(_ref) {
       var props = _ref.props;
       return classNames('p-chip p-component', {
@@ -15656,7 +15667,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$Y,
+      classes: classes$Z,
       styles: styles$Q
     }
   });
@@ -15761,7 +15772,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   Chip.displayName = 'Chip';
 
   var styles$P = "\n@layer primereact {\n    .p-chips {\n        display: inline-flex;\n    }\n    \n    .p-chips-multiple-container {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        cursor: text;\n        overflow: hidden;\n        display: flex;\n        align-items: center;\n        flex-wrap: wrap;\n    }\n    \n    .p-chips-token {\n        cursor: default;\n        display: inline-flex;\n        align-items: center;\n        flex: 0 0 auto;\n    }\n    \n    .p-chips-input-token {\n        flex: 1 1 auto;\n        display: inline-flex;\n    }\n    \n    .p-chips-token-icon {\n        cursor: pointer;\n    }\n    \n    .p-chips-input-token input {\n        border: 0 none;\n        outline: 0 none;\n        background-color: transparent;\n        margin: 0;\n        padding: 0;\n        box-shadow: none;\n        border-radius: 0;\n        width: 100%;\n    }\n    \n    .p-fluid .p-chips {\n        display: flex;\n    }\n    \n    .p-chips-icon-left,\n    .p-chips-icon-right {\n        position: relative;\n        display: inline-block;\n    }\n    \n    .p-chips-icon-left > i,\n    .p-chips-icon-right > i,\n    .p-chips-icon-left > svg,\n    .p-chips-icon-right > svg,\n    .p-chips-icon-left > .p-chips-prefix,\n    .p-chips-icon-right > .p-chips-suffix {\n        position: absolute;\n        top: 50%;\n        margin-top: -0.5rem;\n    }\n    \n    .p-fluid .p-chips-icon-left,\n    .p-fluid .p-chips-icon-right {\n        display: block;\n        width: 100%;\n    }\n}\n";
-  var classes$X = {
+  var classes$Y = {
     removeTokenIcon: 'p-chips-token-icon',
     label: 'p-chips-token-label',
     token: function token(_ref) {
@@ -15773,9 +15784,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     },
     inputToken: 'p-chips-input-token',
     container: function container(_ref2) {
-      var isFilled = _ref2.isFilled;
+      var props = _ref2.props,
+        context = _ref2.context;
       return classNames('p-inputtext p-chips-multiple-container', {
-        'p-variant-filled': isFilled
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
       });
     },
     root: function root(_ref3) {
@@ -15805,6 +15817,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       inputId: null,
       inputRef: null,
       invalid: false,
+      variant: null,
       itemTemplate: null,
       keyfilter: null,
       max: null,
@@ -15827,7 +15840,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$X,
+      classes: classes$Y,
       styles: styles$P
     }
   });
@@ -16185,7 +16198,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var containerProps = mergeProps({
         ref: listRef,
         className: cx('container', {
-          isFilled: isFilled
+          context: context
         }),
         onClick: function onClick(e) {
           return onWrapperClick();
@@ -16229,12 +16242,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   Chips.displayName = 'Chips';
 
-  var classes$W = {
+  var classes$X = {
     root: function root(_ref) {
       var props = _ref.props;
       return classNames('p-colorpicker p-component', {
         'p-colorpicker-overlay': !props.inline
-      }, props.className);
+      });
     },
     input: function input(_ref2) {
       var props = _ref2.props;
@@ -16290,7 +16303,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       value: null
     },
     css: {
-      classes: classes$W,
+      classes: classes$X,
       styles: styles$O
     }
   });
@@ -16870,7 +16883,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       id: props.id,
       ref: elementRef,
       style: props.style,
-      className: cx('root')
+      className: classNames(props.className, cx('root'))
     }, ColorPickerBase.getOtherProps(props), ptm('root'));
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, input, /*#__PURE__*/React__namespace.createElement(ColorPickerPanel, {
       hostName: "ColorPicker",
@@ -16907,7 +16920,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
   function ownKeys$1t(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$1t(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1t(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1t(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-  var classes$V = {
+  var classes$W = {
     closeButtonIcon: 'p-dialog-header-close-icon',
     closeButton: 'p-dialog-header-icon p-dialog-header-close p-link',
     maximizableIcon: 'p-dialog-header-maximize-icon',
@@ -16944,7 +16957,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var props = _ref5.props,
         maximized = _ref5.maximized,
         context = _ref5.context;
-      return classNames('p-dialog p-component', props.className, {
+      return classNames('p-dialog p-component', {
         'p-dialog-rtl': props.rtl,
         'p-dialog-maximized': maximized,
         'p-dialog-default': !maximized,
@@ -17028,7 +17041,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$V,
+      classes: classes$W,
       styles: styles$N,
       inlineStyles: inlineStyles$k
     }
@@ -17654,11 +17667,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var rootProps = mergeProps({
         ref: dialogRef,
         id: idState,
-        className: cx('root', {
+        className: classNames(props.className, cx('root', {
           props: props,
           maximized: maximized,
           context: context
-        }),
+        })),
         style: props.style,
         onClick: props.onClick,
         role: 'dialog',
@@ -17705,7 +17718,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   });
   Dialog.displayName = 'Dialog';
 
-  var classes$U = {
+  var classes$V = {
     root: 'p-confirm-dialog',
     message: 'p-confirm-dialog-message',
     icon: 'p-confirm-dialog-icon',
@@ -17742,7 +17755,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       visible: undefined
     },
     css: {
-      classes: classes$U
+      classes: classes$V
     }
   });
 
@@ -17978,7 +17991,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   ConfirmDialog.displayName = 'ConfirmDialog';
 
   var styles$M = "\n@layer primereact {\n    .p-confirm-popup-flipped {\n        margin-top: 0;\n        margin-bottom: 10px;\n    }\n    \n    .p-confirm-popup:after, .p-confirm-popup:before {\n        bottom: 100%;\n        left: calc(var(--overlayArrowLeft, 0) + 1.25rem);\n        content: \" \";\n        height: 0;\n        width: 0;\n        position: absolute;\n        pointer-events: none;\n    }\n    \n    .p-confirm-popup:after {\n        border-width: 8px;\n        margin-left: -8px;\n    }\n    \n    .p-confirm-popup:before {\n        border-width: 10px;\n        margin-left: -10px;\n    }\n    \n    .p-confirm-popup-flipped:after, .p-confirm-popup-flipped:before {\n        bottom: auto;\n        top: 100%;\n    }\n    \n    .p-confirm-popup.p-confirm-popup-flipped:after {\n        border-bottom-color: transparent;\n    }\n    \n    .p-confirm-popup.p-confirm-popup-flipped:before {\n        border-bottom-color: transparent\n    }\n    \n    .p-confirm-popup .p-confirm-popup-content {\n        display: flex;\n        align-items: center;\n    }\n}\n";
-  var classes$T = {
+  var classes$U = {
     root: function root(_ref) {
       var context = _ref.context,
         getPropValue = _ref.getPropValue;
@@ -18033,7 +18046,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       visible: false
     },
     css: {
-      classes: classes$T,
+      classes: classes$U,
       styles: styles$M
     }
   });
@@ -18345,10 +18358,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rootProps = mergeProps({
       ref: overlayRef,
       id: getPropValue('id'),
-      className: cx('root', {
+      className: classNames(props.className, cx('root', {
         context: context,
         getPropValue: getPropValue
-      }),
+      })),
       style: getPropValue('style'),
       onClick: onPanelClick
     }, ConfirmPopupBase.getOtherProps(props), ptm('root'));
@@ -18396,7 +18409,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   ConfirmPopup.displayName = 'ConfirmPopup';
 
   var styles$L = "\n@layer primereact {\n    .p-contextmenu ul {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n\n    .p-contextmenu .p-submenu-list {\n        position: absolute;\n        min-width: 100%;\n        z-index: 1;\n    }\n\n    .p-contextmenu .p-menuitem-link {\n        cursor: pointer;\n        display: flex;\n        align-items: center;\n        text-decoration: none;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-contextmenu .p-menuitem-text {\n        line-height: 1;\n    }\n\n    .p-contextmenu .p-menuitem {\n        position: relative;\n    }\n\n    .p-contextmenu .p-menuitem-link .p-submenu-icon {\n        margin-left: auto;\n    }\n\n    .p-contextmenu-enter {\n        opacity: 0;\n    }\n\n    .p-contextmenu-enter-active {\n        opacity: 1;\n        transition: opacity 250ms;\n    }\n}\n";
-  var classes$S = {
+  var classes$T = {
     root: function root(_ref) {
       var context = _ref.context;
       return classNames('p-contextmenu p-component', {
@@ -18461,7 +18474,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$S,
+      classes: classes$T,
       styles: styles$L
     }
   });
@@ -19485,7 +19498,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   ContextMenu.displayName = 'ContextMenu';
 
-  var classes$R = {
+  var classes$S = {
     header: 'p-datascroller-header',
     footer: 'p-datascroller-footer',
     content: 'p-datascroller-content',
@@ -19527,7 +19540,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$R,
+      classes: classes$S,
       styles: styles$K,
       inlineStyles: inlineStyles$j
     }
@@ -19816,7 +19829,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }
   });
 
-  var classes$Q = {
+  var classes$R = {
     root: 'p-paginator p-component',
     left: 'p-paginator-left-content',
     end: 'p-paginator-right-content',
@@ -19883,7 +19896,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$Q,
+      classes: classes$R,
       styles: styles$J
     }
   });
@@ -20069,7 +20082,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   });
   FirstPageLink.displayName = 'FirstPageLink';
 
-  var classes$P = {
+  var classes$Q = {
     root: function root(_ref) {
       var props = _ref.props,
         focusedState = _ref.focusedState,
@@ -20085,16 +20098,23 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-invalid': props.invalid
       });
     },
+    input: function input(_ref2) {
+      var props = _ref2.props,
+        context = _ref2.context;
+      return classNames('p-inputnumber-input', {
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+      });
+    },
     buttonGroup: 'p-inputnumber-button-group',
-    incrementButton: function incrementButton(_ref2) {
-      var props = _ref2.props;
+    incrementButton: function incrementButton(_ref3) {
+      var props = _ref3.props;
       return classNames('p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component', {
         'p-disabled': props.disabled
       });
     },
     incrementIcon: 'p-button-icon',
-    decrementButton: function decrementButton(_ref3) {
-      var props = _ref3.props;
+    decrementButton: function decrementButton(_ref4) {
+      var props = _ref4.props;
       return classNames('p-inputnumber-button p-inputnumber-button-down p-button p-button-icon-only p-component', {
         'p-disabled': props.disabled
       });
@@ -20126,6 +20146,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       inputRef: null,
       inputStyle: null,
       invalid: false,
+      variant: null,
       locale: undefined,
       localeMatcher: undefined,
       max: null,
@@ -20161,7 +20182,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$P,
+      classes: classes$Q,
       styles: styles$I
     }
   });
@@ -20440,11 +20461,40 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       isSpecialChar.current = false;
     };
+    var onInputAndroidKey = function onInputAndroidKey(event) {
+      if (!DomHandler.isAndroid() || props.disabled || props.readOnly) {
+        return;
+      }
+      if (props.onKeyUp) {
+        props.onKeyUp(event);
+
+        // do not continue if the user defined event wants to prevent
+        if (event.defaultPrevented) {
+          return;
+        }
+      }
+      var code = event.which || event.keyCode;
+      if (code !== 13) {
+        // to submit a form
+        event.preventDefault();
+      }
+      var _char = String.fromCharCode(code);
+      var _isDecimalSign = isDecimalSign(_char);
+      var _isMinusSign = isMinusSign(_char);
+      if (48 <= code && code <= 57 || _isMinusSign || _isDecimalSign) {
+        insert(event, _char, {
+          isDecimalSign: _isDecimalSign,
+          isMinusSign: _isMinusSign
+        });
+      } else {
+        updateValue(event, event.target.value, null, 'delete-single');
+      }
+    };
     var onInputKeyDown = function onInputKeyDown(event) {
       if (props.disabled || props.readOnly) {
         return;
       }
-      if (event.shiftKey || event.altKey || event.ctrlKey || event.metaKey) {
+      if (event.altKey || event.ctrlKey || event.metaKey) {
         isSpecialChar.current = true;
         return;
       }
@@ -20457,6 +20507,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         }
       }
       lastValue.current = event.target.value;
+
+      // Android is handled specially in onInputAndroidKey
+      if (DomHandler.isAndroid()) {
+        return;
+      }
       var selectionStart = event.target.selectionStart;
       var selectionEnd = event.target.selectionEnd;
       var inputValue = event.target.value;
@@ -20593,11 +20648,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           break;
         default:
           event.preventDefault();
-          var _char = event.key;
-          var _isDecimalSign = isDecimalSign(_char);
-          var _isMinusSign = isMinusSign(_char);
-          if ((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(_char) >= 0 && Number(_char) <= 9 || _isMinusSign || _isDecimalSign) {
-            insert(event, _char, {
+          var _char2 = event.key;
+          var _isDecimalSign = isDecimalSign(_char2);
+          var _isMinusSign = isMinusSign(_char2);
+          if ((event.code.startsWith('Digit') || event.code.startsWith('Numpad')) && Number(_char2) >= 0 && Number(_char2) <= 9 || _isMinusSign || _isDecimalSign) {
+            insert(event, _char2, {
               isDecimalSign: _isDecimalSign,
               isMinusSign: _isMinusSign
             });
@@ -20621,8 +20676,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var allowMinusSign = function allowMinusSign() {
       return ObjectUtils.isEmpty(props.min) || props.min < 0;
     };
-    var isMinusSign = function isMinusSign(_char2) {
-      if (_minusSign.current.test(_char2) || _char2 === '-') {
+    var isMinusSign = function isMinusSign(_char3) {
+      if (_minusSign.current.test(_char3) || _char3 === '-') {
         _minusSign.current.lastIndex = 0;
         return true;
       }
@@ -20634,8 +20689,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       return val;
     };
-    var isDecimalSign = function isDecimalSign(_char3) {
-      if (_decimal.current.test(_char3) || isFloat(_char3)) {
+    var isDecimalSign = function isDecimalSign(_char4) {
+      if (_decimal.current.test(_char4) || isFloat(_char4)) {
         _decimal.current.lastIndex = 0;
         return true;
       }
@@ -20780,16 +20835,16 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var prefixLength = (prefixChar.current || '').length;
       inputValue = inputValue.replace(_prefix.current, '');
       selectionStart = selectionStart - prefixLength;
-      var _char4 = inputValue.charAt(selectionStart);
-      if (isNumeralChar(_char4)) {
+      var _char5 = inputValue.charAt(selectionStart);
+      if (isNumeralChar(_char5)) {
         return selectionStart + prefixLength;
       }
 
       //left
       var i = selectionStart - 1;
       while (i >= 0) {
-        _char4 = inputValue.charAt(i);
-        if (isNumeralChar(_char4)) {
+        _char5 = inputValue.charAt(i);
+        if (isNumeralChar(_char5)) {
           index = i + prefixLength;
           break;
         } else {
@@ -20801,8 +20856,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       } else {
         i = selectionStart;
         while (i < valueLength) {
-          _char4 = inputValue.charAt(i);
-          if (isNumeralChar(_char4)) {
+          _char5 = inputValue.charAt(i);
+          if (isNumeralChar(_char5)) {
             index = i + prefixLength;
             break;
           } else {
@@ -20821,8 +20876,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var onInputClick = function onInputClick() {
       initCursor();
     };
-    var isNumeralChar = function isNumeralChar(_char5) {
-      if (_char5.length === 1 && (_numeral.current.test(_char5) || _decimal.current.test(_char5) || _group.current.test(_char5) || _minusSign.current.test(_char5))) {
+    var isNumeralChar = function isNumeralChar(_char6) {
+      if (_char6.length === 1 && (_numeral.current.test(_char6) || _decimal.current.test(_char6) || _group.current.test(_char6) || _minusSign.current.test(_char6))) {
         resetRegex();
         return true;
       }
@@ -21084,7 +21139,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     }, [props.disabled]);
     var createInputElement = function createInputElement() {
-      var className = classNames('p-inputnumber-input', props.inputClassName);
+      var className = classNames(props.inputClassName, cx('input', {
+        context: context
+      }));
       var valueToRender = formattedValue(props.value);
       return /*#__PURE__*/React__namespace.createElement(InputText, _extends({
         ref: inputRef,
@@ -21106,6 +21163,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         name: props.name,
         autoFocus: props.autoFocus,
         onKeyDown: onInputKeyDown,
+        onKeyPress: onInputAndroidKey,
         onInput: onInput,
         onClick: onInputClick,
         onPointerDown: onInputPointerDown,
@@ -21496,15 +21554,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   });
   PrevPageLink.displayName = 'PrevPageLink';
 
-  var classes$O = {
+  var classes$P = {
     root: function root(_ref) {
       var props = _ref.props,
         focusedState = _ref.focusedState,
-        overlayVisibleState = _ref.overlayVisibleState;
+        overlayVisibleState = _ref.overlayVisibleState,
+        context = _ref.context;
       return classNames('p-dropdown p-component p-inputwrapper', {
         'p-disabled': props.disabled,
         'p-invalid': props.invalid,
         'p-focus': focusedState,
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
         'p-dropdown-clearable': props.showClear && !props.disabled,
         'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
         'p-inputwrapper-focus': focusedState || overlayVisibleState
@@ -21538,25 +21598,31 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-dropdown-clearable-filter': !!clearIcon
       });
     },
-    filterInput: 'p-dropdown-filter p-inputtext p-component',
-    list: function list(_ref5) {
-      var virtualScrollerOptions = _ref5.virtualScrollerOptions;
+    filterInput: function filterInput(_ref5) {
+      var props = _ref5.props,
+        context = _ref5.context;
+      return classNames('p-dropdown-filter p-inputtext p-component', {
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+      });
+    },
+    list: function list(_ref6) {
+      var virtualScrollerOptions = _ref6.virtualScrollerOptions;
       return virtualScrollerOptions ? 'p-dropdown-items' : 'p-dropdown-items';
     },
-    panel: function panel(_ref6) {
-      var context = _ref6.context;
+    panel: function panel(_ref7) {
+      var context = _ref7.context;
       return classNames('p-dropdown-panel p-component', {
         'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
         'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
       });
     },
-    item: function item(_ref7) {
-      var selected = _ref7.selected,
-        disabled = _ref7.disabled,
-        label = _ref7.label,
-        index = _ref7.index,
-        focusedOptionIndex = _ref7.focusedOptionIndex,
-        highlightOnSelect = _ref7.highlightOnSelect;
+    item: function item(_ref8) {
+      var selected = _ref8.selected,
+        disabled = _ref8.disabled,
+        label = _ref8.label,
+        index = _ref8.index,
+        focusedOptionIndex = _ref8.focusedOptionIndex,
+        highlightOnSelect = _ref8.highlightOnSelect;
       return classNames('p-dropdown-item', {
         'p-highlight': selected && highlightOnSelect,
         'p-disabled': disabled,
@@ -21574,14 +21640,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   };
   var styles$H = "\n@layer primereact {\n    .p-dropdown {\n        display: inline-flex;\n        cursor: pointer;\n        position: relative;\n        user-select: none;\n    }\n    \n    .p-dropdown-trigger {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex-shrink: 0;\n    }\n    \n    .p-dropdown-label {\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        flex: 1 1 auto;\n        width: 1%;\n        text-overflow: ellipsis;\n        cursor: pointer;\n    }\n    \n    .p-dropdown-label-empty {\n        overflow: hidden;\n        visibility: hidden;\n    }\n    \n    input.p-dropdown-label  {\n        cursor: default;\n    }\n    \n    .p-dropdown .p-dropdown-panel {\n        min-width: 100%;\n    }\n    \n    .p-dropdown-panel {\n        position: absolute;\n        top: 0;\n        left: 0;\n    }\n    \n    .p-dropdown-items-wrapper {\n        overflow: auto;\n    }\n    \n    .p-dropdown-item {\n        cursor: pointer;\n        font-weight: normal;\n        white-space: nowrap;\n        position: relative;\n        overflow: hidden;\n    }\n    \n    .p-dropdown-items {\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n    }\n    \n    .p-dropdown-filter {\n        width: 100%;\n    }\n    \n    .p-dropdown-filter-container {\n        position: relative;\n    }\n    \n    .p-dropdown-clear-icon,\n    .p-dropdown-filter-icon,\n    .p-dropdown-filter-clear-icon {\n        position: absolute;\n        top: 50%;\n        margin-top: -.5rem;\n    }\n    \n    .p-fluid .p-dropdown {\n        display: flex;\n    }\n    \n    .p-fluid .p-dropdown .p-dropdown-label {\n        width: 1%;\n    }\n}\n";
   var inlineStyles$i = {
-    wrapper: function wrapper(_ref8) {
-      var props = _ref8.props;
+    wrapper: function wrapper(_ref9) {
+      var props = _ref9.props;
       return {
         maxHeight: props.scrollHeight || 'auto'
       };
     },
-    panel: function panel(_ref9) {
-      var props = _ref9.props;
+    panel: function panel(_ref10) {
+      var props = _ref10.props;
       props.panelStyle;
     }
   };
@@ -21608,7 +21674,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       filterBy: null,
       filterClearIcon: null,
       filterIcon: null,
-      filterInputAutoFocus: true,
+      filterInputAutoFocus: false,
       filterLocale: undefined,
       filterMatchMode: 'contains',
       filterPlaceholder: null,
@@ -21618,6 +21684,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       inputId: null,
       inputRef: null,
       invalid: false,
+      variant: null,
       itemTemplate: null,
       loading: false,
       loadingIcon: null,
@@ -21661,7 +21728,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       virtualScrollerOptions: null
     },
     css: {
-      classes: classes$O,
+      classes: classes$P,
       styles: styles$H,
       inlineStyles: inlineStyles$i
     }
@@ -21944,7 +22011,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           ref: filterInputRef,
           type: 'text',
           autoComplete: 'off',
-          className: cx('filterInput'),
+          className: cx('filterInput', {
+            context: context
+          }),
           placeholder: props.filterPlaceholder,
           onKeyDown: props.onFilterInputKeyDown,
           onChange: function onChange(e) {
@@ -22891,11 +22960,20 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }, ptm('input'));
       return /*#__PURE__*/React__namespace.createElement("span", inputProps, content);
     };
+    var onClearIconKeyDown = function onClearIconKeyDown(event) {
+      if (event.key === 'Enter' || event.code === 'Space') {
+        clear(event);
+        event.preventDefault();
+      }
+    };
     var createClearIcon = function createClearIcon() {
       if (props.value != null && props.showClear && !props.disabled) {
         var clearIconProps = mergeProps({
           className: cx('clearIcon'),
-          onPointerUp: clear
+          onPointerUp: clear,
+          tabIndex: props.tabIndex || '0',
+          onKeyDown: onClearIconKeyDown,
+          'aria-label': localeOption('clear')
         }, ptm('clearIcon'));
         var icon = props.clearIcon || /*#__PURE__*/React__namespace.createElement(TimesIcon, clearIconProps);
         return IconUtils.getJSXIcon(icon, _objectSpread$1g({}, clearIconProps), {
@@ -22958,6 +23036,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       id: props.id,
       ref: elementRef,
       className: classNames(props.className, cx('root', {
+        context: context,
         focusedState: focusedState,
         overlayVisibleState: overlayVisibleState
       })),
@@ -23359,7 +23438,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   function ownKeys$1e(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
   function _objectSpread$1e(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys$1e(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys$1e(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
   var styles$G = "\n@layer primereact {\n    .p-datatable {\n        position: relative;\n    }\n\n    .p-datatable > .p-datatable-wrapper {\n        overflow: auto;\n    }\n\n    .p-datatable-table {\n        border-spacing: 0px;\n        width: 100%;\n    }\n\n    .p-datatable .p-sortable-disabled {\n        cursor: auto;\n    }\n\n    .p-datatable .p-sortable-column {\n        cursor: pointer;\n        user-select: none;\n    }\n\n    .p-datatable .p-sortable-column .p-column-title,\n    .p-datatable .p-sortable-column .p-sortable-column-icon,\n    .p-datatable .p-sortable-column .p-sortable-column-badge {\n        vertical-align: middle;\n    }\n\n    .p-datatable .p-sortable-column .p-sortable-column-badge {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .p-datatable-selectable .p-selectable-row,\n    .p-datatable-selectable-cell .p-selectable-cell {\n        cursor: pointer;\n    }\n\n    .p-datatable-drag-selection-helper {\n        position: absolute;\n        z-index: 99999999;\n    }\n\n    /* Scrollable */\n    .p-datatable-scrollable > .p-datatable-wrapper {\n        position: relative;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-thead {\n        position: sticky;\n        top: 0;\n        z-index: 1;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-frozen-tbody {\n        position: sticky;\n        z-index: 1;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-tfoot {\n        position: sticky;\n        bottom: 0;\n        z-index: 1;\n    }\n\n    .p-datatable-scrollable .p-frozen-column {\n        position: sticky;\n        background: inherit;\n    }\n\n    .p-datatable-scrollable th.p-frozen-column {\n        z-index: 1;\n    }\n\n    .p-datatable-flex-scrollable {\n        display: flex;\n        flex-direction: column;\n        height: 100%;\n    }\n\n    .p-datatable-flex-scrollable > .p-datatable-wrapper {\n        display: flex;\n        flex-direction: column;\n        flex: 1;\n        height: 100%;\n    }\n\n    .p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {\n        position: sticky;\n        z-index: 1;\n    }\n\n    /* Resizable */\n    .p-datatable-resizable-table > .p-datatable-thead > tr > th,\n    .p-datatable-resizable-table > .p-datatable-tfoot > tr > td,\n    .p-datatable-resizable-table > .p-datatable-tbody > tr > td {\n        overflow: hidden;\n        white-space: nowrap;\n    }\n\n    .p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {\n        background-clip: padding-box;\n        position: relative;\n    }\n\n    .p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {\n        display: none;\n    }\n\n    .p-datatable .p-column-resizer {\n        display: block;\n        position: absolute;\n        top: 0;\n        right: 0;\n        margin: 0;\n        width: 0.5rem;\n        height: 100%;\n        padding: 0px;\n        cursor: col-resize;\n        border: 1px solid transparent;\n    }\n\n    .p-datatable .p-column-header-content {\n        display: flex;\n        align-items: center;\n    }\n\n    .p-datatable .p-column-resizer-helper {\n        width: 1px;\n        position: absolute;\n        z-index: 10;\n        display: none;\n    }\n\n    .p-datatable .p-row-editor-init,\n    .p-datatable .p-row-editor-save,\n    .p-datatable .p-row-editor-cancel {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /* Expand */\n    .p-datatable .p-row-toggler {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        overflow: hidden;\n        position: relative;\n    }\n\n    /* Reorder */\n    .p-datatable-reorder-indicator-up,\n    .p-datatable-reorder-indicator-down {\n        position: absolute;\n        display: none;\n    }\n\n    .p-reorderable-column,\n    .p-datatable-reorderablerow-handle {\n        cursor: move;\n    }\n\n    /* Loader */\n    .p-datatable .p-datatable-loading-overlay {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        z-index: 2;\n    }\n\n    /* Filter */\n    .p-column-filter-row {\n        display: flex;\n        align-items: center;\n        width: 100%;\n    }\n\n    .p-column-filter-menu {\n        display: inline-flex;\n        margin-left: auto;\n    }\n\n    .p-column-filter-row .p-column-filter-element {\n        flex: 1 1 auto;\n        width: 1%;\n    }\n\n    .p-column-filter-menu-button,\n    .p-column-filter-clear-button {\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        cursor: pointer;\n        text-decoration: none;\n        overflow: hidden;\n        position: relative;\n    }\n\n    .p-column-filter-overlay {\n        position: absolute;\n        top: 0;\n        left: 0;\n    }\n\n    .p-column-filter-row-items {\n        margin: 0;\n        padding: 0;\n        list-style: none;\n    }\n\n    .p-column-filter-row-item {\n        cursor: pointer;\n    }\n\n    .p-column-filter-add-button,\n    .p-column-filter-remove-button {\n        justify-content: center;\n    }\n\n    .p-column-filter-add-button .p-button-label,\n    .p-column-filter-remove-button .p-button-label {\n        flex-grow: 0;\n    }\n\n    .p-column-filter-buttonbar {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n    }\n\n    .p-column-filter-buttonbar .p-button:not(.p-button-icon-only) {\n        width: auto;\n    }\n\n    /* Responsive */\n    .p-datatable .p-datatable-tbody > tr > td > .p-column-title {\n        display: none;\n    }\n\n    /* VirtualScroller */\n    .p-datatable-virtualscroller-spacer {\n        display: flex;\n    }\n\n    .p-datatable .p-virtualscroller .p-virtualscroller-loading {\n        transform: none;\n        min-height: 0;\n        position: sticky;\n        top: 0;\n        left: 0;\n    }\n\n    /* Alignment */\n    .p-datatable .p-datatable-thead > tr > th.p-align-left > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-left,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-left {\n        text-align: left;\n        justify-content: flex-start;\n    }\n\n    .p-datatable .p-datatable-thead > tr > th.p-align-right > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-right,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-right {\n        text-align: right;\n        justify-content: flex-end;\n    }\n\n    .p-datatable .p-datatable-thead > tr > th.p-align-center > .p-column-header-content,\n    .p-datatable .p-datatable-tbody > tr > td.p-align-center,\n    .p-datatable .p-datatable-tfoot > tr > td.p-align-center {\n        text-align: center;\n        justify-content: center;\n    }\n}\n";
-  var classes$N = {
+  var classes$O = {
     root: function root(_ref) {
       var props = _ref.props,
         selectable = _ref.selectable;
@@ -23429,6 +23508,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     bodyRow: function bodyRow(_ref5) {
       var props = _ref5.rowProps;
       return classNames({
+        'p-highlight': !props.allowCellSelection && props.selected || props.contextMenuSelected,
         'p-highlight-contextmenu': props.contextMenuSelected,
         'p-selectable-row': props.allowRowSelection && props.isSelectable({
           data: props.rowData,
@@ -23707,7 +23787,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     },
     css: {
       styles: styles$G,
-      classes: classes$N,
+      classes: classes$O,
       inlineStyles: inlineStyles$h
     }
   });
@@ -23795,13 +23875,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   });
   RowCheckbox.displayName = 'RowCheckbox';
 
-  var classes$M = {
+  var classes$N = {
     root: function root(_ref) {
-      var props = _ref.props;
+      var props = _ref.props,
+        context = _ref.context;
       return classNames('p-radiobutton p-component', {
         'p-highlight': props.checked,
         'p-disabled': props.disabled,
-        'p-invalid': props.invalid
+        'p-invalid': props.invalid,
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
       });
     },
     box: 'p-radiobutton-box',
@@ -23819,6 +23901,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       inputId: null,
       inputRef: null,
       invalid: false,
+      variant: null,
       name: null,
       onChange: null,
       onClick: null,
@@ -23831,7 +23914,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$M
+      classes: classes$N
     }
   });
 
@@ -23939,7 +24022,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var otherProps = RadioButtonBase.getOtherProps(props);
     var rootProps = mergeProps({
       id: props.id,
-      className: classNames(props.className, cx('root')),
+      className: classNames(props.className, cx('root', {
+        context: context
+      })),
       style: props.style,
       'data-p-checked': props.checked
     }, RadioButtonBase.getOtherProps(props), ptm('root'));
@@ -30072,7 +30157,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   });
   DataTable.displayName = 'DataTable';
 
-  var classes$L = {
+  var classes$M = {
     loadingIcon: 'p-dataview-loading-icon',
     loadingOverlay: 'p-dataview-loading-overlay p-component-overlay',
     emptyMessage: 'p-dataview-emptymessage',
@@ -30129,7 +30214,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$L,
+      classes: classes$M,
       styles: styles$E
     }
   });
@@ -30512,7 +30597,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   });
   DeferredContent.displayName = 'DeferredContent';
 
-  var classes$K = {
+  var classes$L = {
     root: function root(_ref) {
       var props = _ref.props,
         horizontal = _ref.horizontal,
@@ -30548,7 +30633,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$K,
+      classes: classes$L,
       styles: styles$D,
       inlineStyles: inlineStyles$g
     }
@@ -30596,7 +30681,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   });
   Divider.displayName = 'Divider';
 
-  var classes$J = {
+  var classes$K = {
     icon: 'p-dock-action-icon',
     action: function action(_ref) {
       var disabled = _ref.disabled;
@@ -30647,7 +30732,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$J,
+      classes: classes$K,
       styles: styles$C
     }
   });
@@ -30953,7 +31038,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   Dock.displayName = 'Dock';
 
-  var classes$I = {
+  var classes$J = {
     root: function root(_ref) {
       var props = _ref.props;
       return classNames('p-component p-editor-container', props.className);
@@ -30983,7 +31068,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$I,
+      classes: classes$J,
       styles: styles$B
     }
   });
@@ -31442,7 +31527,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }
 
   var styles$A = "\n@layer primereact {\n    .p-message-wrapper {\n        display: flex;\n        align-items: center;\n    }\n\n    .p-message-icon {\n        flex-shrink: 0;\n    }\n    \n    .p-message-close {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n    \n    .p-message-close.p-link {\n        margin-left: auto;\n        overflow: hidden;\n        position: relative;\n    }\n    \n    .p-message-enter {\n        opacity: 0;\n    }\n    \n    .p-message-enter-active {\n        opacity: 1;\n        transition: opacity .3s;\n    }\n    \n    .p-message-exit {\n        opacity: 1;\n        max-height: 1000px;\n    }\n    \n    .p-message-exit-active {\n        opacity: 0;\n        max-height: 0;\n        margin: 0;\n        overflow: hidden;\n        transition: max-height .3s cubic-bezier(0, 1, 0, 1), opacity .3s, margin .3s;\n    }\n    \n    .p-message-exit-active .p-message-close {\n        display: none;\n    }\n}\n";
-  var classes$H = {
+  var classes$I = {
     uimessage: {
       root: function root(_ref) {
         var severity = _ref.severity;
@@ -31470,7 +31555,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$H,
+      classes: classes$I,
       styles: styles$A
     }
   });
@@ -31742,7 +31827,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   Messages.displayName = 'Messages';
 
-  var classes$G = {
+  var classes$H = {
     root: function root(_ref) {
       var props = _ref.props;
       return props.mode === 'indeterminate' ? classNames('p-progressbar p-component p-progressbar-indeterminate') : classNames('p-progressbar p-component p-progressbar-determinate');
@@ -31782,7 +31867,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$G,
+      classes: classes$H,
       styles: styles$z,
       inlineStyles: inlineStyles$f
     }
@@ -31877,7 +31962,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   ProgressBar.displayName = 'ProgressBar';
 
-  var classes$F = {
+  var classes$G = {
     root: function root(_ref) {
       var props = _ref.props;
       return classNames("p-fileupload p-fileupload-".concat(props.mode, " p-component"));
@@ -31999,7 +32084,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$F,
+      classes: classes$G,
       styles: styles$y
     }
   });
@@ -32447,7 +32532,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         pt: ptm('removeButton'),
         __parentMetadata: {
           parent: metaData
-        }
+        },
+        unstyled: isUnstyled()
       }));
       var content = /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, preview, contentBody, removeButton);
       if (props.itemTemplate) {
@@ -32555,7 +32641,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           pt: ptm('uploadButton'),
           __parentMetadata: {
             parent: metaData
-          }
+          },
+          unstyled: isUnstyled()
         });
         cancelButton = /*#__PURE__*/React__namespace.createElement(Button, {
           type: "button",
@@ -32569,7 +32656,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           pt: ptm('cancelButton'),
           __parentMetadata: {
             parent: metaData
-          }
+          },
+          unstyled: isUnstyled()
         });
       }
       if (hasFiles) {
@@ -32597,7 +32685,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
       var rootProps = mergeProps({
         id: props.id,
-        className: cx('root'),
+        className: classNames(props.className, cx('root')),
         style: props.style
       }, FileUploadBase.getOtherProps(props), ptm('root'));
       var contentProps = mergeProps({
@@ -32692,7 +32780,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   FileUpload.displayName = 'FileUpload';
 
-  var classes$E = {
+  var classes$F = {
     header: 'p-galleria-header',
     footer: 'p-galleria-footer',
     closeIcon: 'p-galleria-close-icon',
@@ -32824,7 +32912,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       verticalThumbnailViewPortHeight: '300px'
     },
     css: {
-      classes: classes$E,
+      classes: classes$F,
       styles: styles$x,
       inlineStyles: inlineStyles$e
     }
@@ -33846,7 +33934,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   DownloadIcon.displayName = 'DownloadIcon';
 
-  var classes$D = {
+  var classes$E = {
     button: 'p-image-preview-indicator',
     mask: 'p-image-mask p-component-overlay p-component-overlay-enter',
     toolbar: 'p-image-toolbar',
@@ -33860,7 +33948,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     icon: 'p-image-preview-icon',
     root: function root(_ref) {
       var props = _ref.props;
-      return classNames('p-image p-component', props.className, {
+      return classNames('p-image p-component', {
         'p-image-preview-container': props.preview
       });
     },
@@ -33909,7 +33997,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       closeOnEscape: true
     },
     css: {
-      classes: classes$D,
+      classes: classes$E,
       styles: styles$w,
       inlineStyles: inlineStyles$d
     }
@@ -34253,7 +34341,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }));
     var rootProps = mergeProps({
       ref: elementRef,
-      className: cx('root')
+      className: classNames(props.className, cx('root'))
     }, ImageBase.getOtherProps(props), ptm('root'));
     return /*#__PURE__*/React__namespace.createElement("span", rootProps, image, preview, maskVisibleState && /*#__PURE__*/React__namespace.createElement(Portal, {
       element: element,
@@ -34262,7 +34350,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   }));
   Image.displayName = 'Image';
 
-  var classes$C = {
+  var classes$D = {
     display: function display(_ref) {
       var props = _ref.props;
       return classNames('p-inplace-display', {
@@ -34308,7 +34396,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       children: undefined
     },
     css: {
-      classes: classes$C,
+      classes: classes$D,
       styles: styles$v
     }
   });
@@ -34449,6 +34537,17 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   InplaceContent.displayName = 'InplaceContent';
   Inplace.displayName = 'Inplace';
 
+  var classes$C = {
+    root: function root(_ref) {
+      var props = _ref.props,
+        context = _ref.context;
+      return classNames('p-inputmask', {
+        'p-filled': props.filled,
+        'p-invalid': props.invalid,
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+      });
+    }
+  };
   var InputMaskBase = ComponentBase.extend({
     defaultProps: {
       __TYPE: 'InputMask',
@@ -34459,6 +34558,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       id: null,
       mask: null,
       maxLength: null,
+      invalid: false,
+      variant: null,
       name: null,
       onBlur: null,
       onChange: null,
@@ -34477,6 +34578,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       unmask: false,
       value: null,
       children: undefined
+    },
+    css: {
+      classes: classes$C
     }
   });
 
@@ -34500,6 +34604,8 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var metaData = {
       props: props
     };
+    var _InputMaskBase$setMet = InputMaskBase.setMetaData(metaData),
+      cx = _InputMaskBase$setMet.cx;
     var caret = function caret(first, last) {
       var range;
       var begin;
@@ -34982,7 +35088,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       }
     }, [isValueUpdated]);
     var otherProps = InputMaskBase.getOtherProps(props);
-    var className = classNames('p-inputmask', props.className);
+    var className = classNames(props.className, cx('root', {
+      context: context
+    }));
     return /*#__PURE__*/React__namespace.createElement(InputText, _extends({
       ref: elementRef,
       autoFocus: props.autoFocus,
@@ -35173,13 +35281,15 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   var classes$A = {
     root: function root(_ref) {
       var props = _ref.props,
+        context = _ref.context,
         isFilled = _ref.isFilled;
       return classNames('p-inputtextarea p-inputtext p-component', {
         'p-disabled': props.disabled,
         'p-filled': isFilled,
         'p-inputtextarea-resizable': props.autoResize,
-        'p-invalid': props.invalid
-      }, props.className);
+        'p-invalid': props.invalid,
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
+      });
     }
   };
   var styles$u = "\n@layer primereact {\n    .p-inputtextarea-resizable {\n        overflow: hidden;\n        resize: none;\n    }\n    \n    .p-fluid .p-inputtextarea {\n        width: 100%;\n    }\n}\n";
@@ -35189,6 +35299,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       __parentMetadata: null,
       autoResize: false,
       invalid: false,
+      variant: null,
       keyfilter: null,
       onBlur: null,
       onFocus: null,
@@ -35307,9 +35418,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var hasTooltip = ObjectUtils.isNotEmpty(props.tooltip);
     var rootProps = mergeProps({
       ref: elementRef,
-      className: cx('root', {
+      className: classNames(props.className, cx('root', {
+        context: context,
         isFilled: isFilled
-      }),
+      })),
       onFocus: onFocus,
       onBlur: onBlur,
       onKeyUp: onKeyUp,
@@ -35359,7 +35471,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
           var props = _ref.props;
           return classNames('p-knob p-component', {
             'p-disabled': props.disabled
-          }, props.className);
+          });
         }
       },
       styles: "\n        @keyframes dash-frame {\n            100% {\n                stroke-dashoffset: 0;\n            }\n        }\n        @layer primereact {\n            .p-knob-range {\n                fill: none;\n                transition: stroke .1s ease-in;\n            }\n            .p-knob-value {\n                animation-name: dash-frame;\n                animation-fill-mode: forwards;\n                fill: none;\n            }\n            .p-knob-text {\n                font-size: 1.3rem;\n                text-align: center;\n            }\n        }\n        "
@@ -35606,7 +35718,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rootProps = mergeProps({
       ref: elementRef,
       id: props.id,
-      className: cx('root'),
+      className: classNames(props.className, cx('root')),
       style: props.style
     }, ptm('root'));
     var svgProps = mergeProps({
@@ -37956,13 +38068,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return classNames('p-mention-input', props.inputClassName);
     },
     root: function root(_ref4) {
-      var props = _ref4.props,
-        isFilled = _ref4.isFilled,
+      _ref4.props;
+        var isFilled = _ref4.isFilled,
         focusedState = _ref4.focusedState;
       return classNames('p-mention p-component p-inputwrapper', {
         'p-inputwrapper-filled': isFilled,
         'p-inputwrapper-focus': focusedState
-      }, props.className);
+      });
     },
     transition: 'p-connected-overlay'
   };
@@ -38480,10 +38592,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rootProps = mergeProps({
       ref: elementRef,
       id: props.id,
-      className: cx('root', {
+      className: classNames(props.className, cx('root', {
         focusedState: focusedState,
         isFilled: isFilled
-      }),
+      })),
       style: props.style
     }, MentionBase.getOtherProps(props), ptm('root'));
     return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement(InputTextarea, inputMentionProps), panel);
@@ -40114,12 +40226,14 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   var classes$u = {
     root: function root(_ref) {
       var props = _ref.props,
+        context = _ref.context,
         focusedState = _ref.focusedState,
         overlayVisibleState = _ref.overlayVisibleState;
       return classNames('p-multiselect p-component p-inputwrapper', {
         'p-multiselect-chip': props.display === 'chip',
         'p-disabled': props.disabled,
         'p-invalid': props.invalid,
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
         'p-multiselect-clearable': props.showClear && !props.disabled,
         'p-focus': focusedState,
         'p-inputwrapper-filled': ObjectUtils.isNotEmpty(props.value),
@@ -40228,6 +40342,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       inputId: null,
       inputRef: null,
       invalid: false,
+      variant: null,
       itemCheckboxIcon: null,
       itemClassName: null,
       itemTemplate: null,
@@ -40440,6 +40555,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusedState = _React$useState2[0],
       setFocusedState = _React$useState2[1];
+    var checkboxRef = React__namespace.useRef(null);
     var mergeProps = useMergeProps();
     var ptm = props.ptm,
       cx = props.cx,
@@ -40457,7 +40573,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       });
     };
     var onFocus = function onFocus(event) {
+      var _checkboxRef$current;
       setFocusedState(true);
+      checkboxRef === null || checkboxRef === void 0 || (_checkboxRef$current = checkboxRef.current) === null || _checkboxRef$current === void 0 || _checkboxRef$current.getInput().focus();
     };
     var onBlur = function onBlur(event) {
       setFocusedState(false);
@@ -40499,6 +40617,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       'data-p-disabled': props.disabled
     }, getPTOptions('item'));
     return /*#__PURE__*/React__namespace.createElement("li", itemProps, /*#__PURE__*/React__namespace.createElement("div", checkboxContainerProps, /*#__PURE__*/React__namespace.createElement(Checkbox, {
+      ref: checkboxRef,
       checked: props.selected,
       icon: checkboxIcon,
       pt: ptm('checkbox'),
@@ -41227,10 +41346,18 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         filter: ''
       });
     };
-    var scrollInView = function scrollInView() {
-      var highlightItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
-      if (highlightItem && highlightItem.scrollIntoView) {
-        highlightItem.scrollIntoView({
+    var scrollInView = function scrollInView(event) {
+      if (!overlayVisibleState) {
+        return;
+      }
+      var focusedItem;
+      if (event) {
+        focusedItem = event.currentTarget;
+      } else {
+        focusedItem = DomHandler.findSingle(overlayRef.current, 'li[data-p-highlight="true"]');
+      }
+      if (focusedItem && focusedItem.scrollIntoView) {
+        focusedItem.scrollIntoView({
           block: 'nearest',
           inline: 'nearest'
         });
@@ -41542,7 +41669,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
       if (focusedOptionIndex !== index) {
         setFocusedOptionIndex(index);
-        scrollInView();
+        scrollInView(event);
         if (props.selectOnFocus) {
           onOptionSelect(event, visibleOptions[index], false);
         }
@@ -41754,6 +41881,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       style: _objectSpread$E(_objectSpread$E({}, props.style), sx('root')),
       className: classNames(props.className, cx('root', {
         focusedState: focusedState,
+        context: context,
         overlayVisibleState: overlayVisibleState
       }))
     }, otherProps), {}, {
@@ -43304,9 +43432,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
   var classes$q = {
     root: function root(_ref) {
-      var props = _ref.props,
-        context = _ref.context;
-      return classNames('p-overlaypanel p-component', props.className, {
+      _ref.props;
+        var context = _ref.context;
+      return classNames('p-overlaypanel p-component', {
         'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
         'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
       });
@@ -43557,9 +43685,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var closeIcon = createCloseIcon();
       var rootProps = mergeProps({
         id: props.id,
-        className: cx('root', {
+        className: classNames(props.className, cx('root', {
           context: context
-        }),
+        })),
         style: props.style,
         onClick: function onClick(e) {
           return onPanelClick(e);
@@ -43859,34 +43987,31 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     },
     headerContent: 'p-panelmenu-header-content',
     menuContent: 'p-panelmenu-content',
-    root: function root(_ref4) {
-      var props = _ref4.props;
-      return classNames('p-panelmenu p-component', props.className);
-    },
+    root: 'p-panelmenu p-component',
     separator: 'p-menuitem-separator',
-    toggleableContent: function toggleableContent(_ref5) {
-      var active = _ref5.active;
+    toggleableContent: function toggleableContent(_ref4) {
+      var active = _ref4.active;
       return classNames('p-toggleable-content', {
         'p-toggleable-content-collapsed': !active
       });
     },
-    icon: function icon(_ref6) {
-      var item = _ref6.item;
+    icon: function icon(_ref5) {
+      var item = _ref5.item;
       return classNames('p-menuitem-icon', item.icon);
     },
     label: 'p-menuitem-text',
     submenuicon: 'p-submenu-icon',
     content: 'p-menuitem-content',
-    action: function action(_ref7) {
-      var item = _ref7.item;
+    action: function action(_ref6) {
+      var item = _ref6.item;
       return classNames('p-menuitem-link', {
         'p-disabled': item.disabled
       });
     },
-    menuitem: function menuitem(_ref8) {
-      var item = _ref8.item,
-        focused = _ref8.focused,
-        disabled = _ref8.disabled;
+    menuitem: function menuitem(_ref7) {
+      var item = _ref7.item,
+        focused = _ref7.focused,
+        disabled = _ref7.disabled;
       return classNames('p-menuitem', item.className, {
         'p-focus': focused,
         'p-disabled': disabled
@@ -44949,7 +45074,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var panels = createPanels();
     var rootProps = mergeProps({
       ref: elementRef,
-      className: cx('root'),
+      className: classNames(props.className, cx('root')),
       id: props.id,
       style: props.style
     }, PanelMenuBase.getOtherProps(props), ptm('root'));
@@ -44966,7 +45091,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-inputwrapper-filled': isFilled,
         'p-inputwrapper-focus': focusedState,
         'p-input-icon-right': props.toggleMask
-      }, props.className);
+      });
     },
     input: function input(_ref2) {
       var props = _ref2.props;
@@ -45022,6 +45147,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       inputStyle: null,
       inputClassName: null,
       invalid: false,
+      variant: null,
       panelStyle: null,
       panelClassName: null,
       transitionOptions: null,
@@ -45422,10 +45548,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rootProps = mergeProps({
       ref: elementRef,
       id: props.id,
-      className: cx('root', {
+      className: classNames(props.className, cx('root', {
         isFilled: isFilled,
         focusedState: focusedState
-      }),
+      })),
       style: props.style
     }, ptm('root'));
     var inputTextProps = mergeProps(_objectSpread$w(_objectSpread$w({
@@ -45438,6 +45564,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       onInput: onInput,
       onKeyUp: onKeyup,
       invalid: props.invalid,
+      variant: props.variant,
       style: props.inputStyle,
       tabIndex: props.tabIndex,
       tooltip: props.tooltip,
@@ -46899,7 +47026,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       return classNames('p-rating', {
         'p-disabled': props.disabled,
         'p-readonly': props.readOnly
-      }, props.className);
+      });
     }
   };
   var styles$g = "\n@layer primereact {\n    .p-rating {\n        display: flex;\n        align-items: center;\n    }\n    \n    .p-rating-item {\n        display: inline-flex;\n        align-items: center;\n        cursor: pointer;\n    }\n    \n    .p-rating.p-readonly .p-rating-item {\n        cursor: default;\n    }\n}\n";
@@ -47115,7 +47242,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rootProps = mergeProps({
       ref: elementRef,
       id: props.id,
-      className: cx('root'),
+      className: classNames(props.className, cx('root')),
       style: props.style
     }, RatingBase.getOtherProps(props), ptm('root'));
     var cancelIcon = createCancelIcon();
@@ -47156,10 +47283,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     },
     css: {
       classes: {
-        root: function root(_ref) {
-          var props = _ref.props;
-          return classNames('p-scrollpanel p-component', props.className);
-        },
+        root: 'p-scrollpanel p-component',
         wrapper: 'p-scrollpanel-wrapper',
         content: 'p-scrollpanel-content',
         barx: 'p-scrollpanel-bar p-scrollpanel-bar-x',
@@ -47429,7 +47553,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       id: props.id,
       ref: containerRef,
       style: props.style,
-      className: cx('root')
+      className: classNames(props.className, cx('root'))
     }, ScrollPanelBase.getOtherProps(props), ptm('root'));
     var wrapperProps = mergeProps({
       className: cx('wrapper')
@@ -47629,7 +47753,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
   var classes$j = {
     root: function root(_ref) {
       var props = _ref.props;
-      return classNames('p-selectbutton p-button-group p-component', props.className, {
+      return classNames('p-selectbutton p-button-group p-component', {
         'p-invalid': props.invalid
       });
     },
@@ -47910,7 +48034,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rootProps = mergeProps({
       ref: elementRef,
       id: props.id,
-      className: cx('root'),
+      className: classNames(props.className, cx('root')),
       style: props.style,
       role: 'group'
     }, SelectButtonBase.getOtherProps(props), ptm('root'));
@@ -47948,9 +48072,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     content: 'p-sidebar-content',
     icons: 'p-sidebar-icons',
     root: function root(_ref3) {
-      var props = _ref3.props,
-        context = _ref3.context;
-      return classNames('p-sidebar p-component', props.className, {
+      _ref3.props;
+        var context = _ref3.context;
+      return classNames('p-sidebar p-component', {
         'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
         'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
       });
@@ -48197,9 +48321,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, ptm('mask'));
     var rootProps = mergeProps({
       id: props.id,
-      className: cx('root', {
+      className: classNames(props.className, cx('root', {
         context: context
-      }),
+      })),
       style: props.style,
       role: 'complementary'
     }, SidebarBase.getOtherProps(props), ptm('root'));
@@ -48350,7 +48474,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var props = _ref2.props;
       return classNames('p-slidemenu p-component', {
         'p-slidemenu-overlay': props.popup
-      }, props.className);
+      });
     },
     wrapper: 'p-slidemenu-wrapper',
     content: 'p-slidemenu-content',
@@ -48754,7 +48878,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var rootProps = mergeProps({
         ref: menuRef,
         id: props.id,
-        className: cx('root'),
+        className: classNames(props.className, cx('root')),
         style: props.style,
         onClick: function onClick(e) {
           return onPanelClick(e);
@@ -48825,7 +48949,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var props = _ref2.props,
         vertical = _ref2.vertical,
         horizontal = _ref2.horizontal;
-      return classNames('p-slider p-component', props.className, {
+      return classNames('p-slider p-component', {
         'p-disabled': props.disabled,
         'p-slider-horizontal': horizontal,
         'p-slider-vertical': vertical
@@ -49204,10 +49328,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var content = props.range ? createRangeSlider() : createSingleSlider();
     var rootProps = mergeProps({
       style: props.style,
-      className: cx('root', {
+      className: classNames(props.className, cx('root', {
         vertical: vertical,
         horizontal: horizontal
-      }),
+      })),
       onClick: onBarClick
     }, SliderBase.getOtherProps(props), ptm('root'));
     return /*#__PURE__*/React__namespace.createElement("div", _extends({
@@ -49855,7 +49979,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-tieredmenu-overlay': props.popup,
         'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact.inputStyle === 'filled',
         'p-ripple-disabled': context && context.ripple === false || PrimeReact.ripple === false
-      }, props.className);
+      });
     },
     separator: 'p-menuitem-separator',
     icon: function icon(_ref2) {
@@ -50843,7 +50967,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var rootProps = mergeProps({
         ref: containerRef,
         id: props.id,
-        className: cx('root'),
+        className: classNames(props.className, cx('root')),
         style: props.style,
         onClick: onPanelClick
       }, TieredMenuBase.getOtherProps(props), ptm('root'));
@@ -51665,7 +51789,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var props = _ref3.props;
       return classNames('p-steps p-component', {
         'p-readonly': props.readOnly
-      }, props.className);
+      });
     }
   };
   var styles$6 = "\n@layer primereact {\n    .p-steps {\n        position: relative;\n    }\n\n    .p-steps ol {\n        padding: 0;\n        margin: 0;\n        list-style-type: none;\n        display: flex;\n    }\n\n    .p-steps-item {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        flex: 1 1 auto;\n    }\n\n    .p-steps-item .p-menuitem-link {\n        display: inline-flex;\n        flex-direction: column;\n        align-items: center;\n        overflow: hidden;\n        text-decoration: none;\n    }\n\n    .p-steps.p-readonly .p-steps-item {\n        cursor: auto;\n    }\n\n    .p-steps-item.p-steps-current .p-menuitem-link {\n        cursor: default;\n    }\n\n    .p-steps-title {\n        white-space: nowrap;\n    }\n\n    .p-steps-number {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n    }\n\n    .p-steps-title {\n        display: block;\n    }\n}\n";
@@ -51914,7 +52038,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rootProps = mergeProps({
       id: props.id,
       ref: elementRef,
-      className: cx('root'),
+      className: classNames(props.className, cx('root')),
       style: props.style
     }, StepsBase.getOtherProps(props), ptm('root'));
     var items = createItems();
@@ -52170,10 +52294,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     },
     inkbar: 'p-tabmenu-ink-bar',
     menu: 'p-tabmenu-nav p-reset',
-    root: function root(_ref3) {
-      var props = _ref3.props;
-      return classNames('p-tabmenu p-component', props.className);
-    }
+    root: 'p-tabmenu p-component'
   };
   var styles$5 = "\n@layer primereact {\n    .p-tabmenu {\n        overflow-x: auto;\n    }\n\n    .p-tabmenu-nav {\n        display: flex;\n        margin: 0;\n        padding: 0;\n        list-style-type: none;\n        flex-wrap: nowrap;\n    }\n\n    .p-tabmenu-nav a {\n        cursor: pointer;\n        user-select: none;\n        display: flex;\n        align-items: center;\n        position: relative;\n        text-decoration: none;\n        text-decoration: none;\n        overflow: hidden;\n    }\n\n    .p-tabmenu-nav a:focus {\n        z-index: 1;\n    }\n\n    .p-tabmenu-nav .p-menuitem-text {\n        line-height: 1;\n    }\n\n    .p-tabmenu-ink-bar {\n        display: none;\n        z-index: 1;\n    }\n\n    .p-tabmenu::-webkit-scrollbar {\n        display: none;\n    }\n}\n";
   var TabMenuBase = ComponentBase.extend({
@@ -52468,7 +52589,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var rootProps = mergeProps({
         id: props.id,
         ref: elementRef,
-        className: cx('root'),
+        className: classNames(props.className, cx('root')),
         style: props.style
       }, TabMenuBase.getOtherProps(props), ptm('root'));
       return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("ul", menuProps, items, /*#__PURE__*/React__namespace.createElement("li", inkbarProps)));
@@ -52493,7 +52614,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       var props = _ref2.props;
       return classNames('p-tabview p-component', {
         'p-tabview-scrollable': props.scrollable
-      }, props.className);
+      });
     },
     navcontainer: 'p-tabview-nav-container',
     tab: {
@@ -53136,7 +53257,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       id: idState,
       ref: elementRef,
       style: props.style,
-      className: cx('root')
+      className: classNames(props.className, cx('root'))
     }, TabViewBase.getOtherProps(props), ptm('root'));
     var navContainerProps = mergeProps({
       className: cx('navcontainer')
@@ -53921,7 +54042,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-disabled': props.disabled,
         'p-highlight': props.checked,
         'p-invalid': props.invalid
-      }, props.className);
+      });
     },
     input: 'p-togglebutton-input',
     box: function box(_ref2) {
@@ -54058,10 +54179,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     var rootProps = mergeProps({
       ref: elementRef,
       id: props.id,
-      className: cx('root', {
+      className: classNames(props.className, cx('root', {
         hasIcon: hasIcon,
         hasLabel: hasLabel
-      }),
+      })),
       'data-p-highlight': props.checked,
       'data-p-disabled': props.disabled
     }, ToggleButtonBase.getOtherProps(props), ptm('root'));
@@ -54112,10 +54233,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     },
     css: {
       classes: {
-        root: function root(_ref) {
-          var props = _ref.props;
-          return classNames('p-toolbar p-component', props.className);
-        },
+        root: 'p-toolbar p-component',
         start: 'p-toolbar-group-start p-toolbar-group-left',
         center: 'p-toolbar-group-center',
         end: 'p-toolbar-group-end p-toolbar-group-right'
@@ -54162,7 +54280,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       id: props.id,
       ref: elementRef,
       style: props.style,
-      className: cx('root'),
+      className: classNames(props.className, cx('root')),
       role: 'toolbar'
     }, ToolbarBase.getOtherProps(props), ptm('root'));
     return /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", startProps, start), /*#__PURE__*/React__namespace.createElement("div", centerProps, center), /*#__PURE__*/React__namespace.createElement("div", endProps, end));
@@ -54213,6 +54331,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     nodeIcon: 'p-treenode-icon',
     label: 'p-treenode-label',
     subgroup: 'p-treenode-children',
+    checkIcon: 'p-checkbox-icon',
     emptyMessage: 'p-treenode p-tree-empty-message',
     droppoint: 'p-treenode-droppoint',
     header: 'p-tree-header',
@@ -54850,8 +54969,11 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         var _props$isUnstyled;
         var checked = isChecked();
         var partialChecked = isPartialChecked();
-        var icon = checked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(CheckIcon, null) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(MinusIcon, null) : null;
-        var checkboxIcon = IconUtils.getJSXIcon(icon, {}, props);
+        var checkboxIconProps = mergeProps({
+          className: cx('checkIcon')
+        });
+        var icon = checked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(CheckIcon, checkboxIconProps) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(MinusIcon, checkboxIconProps) : null;
+        var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$a({}, checkboxIconProps), props);
         var checkboxProps = mergeProps({
           className: cx('nodeCheckbox', {
             partialChecked: partialChecked
@@ -55610,6 +55732,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     root: function root(_ref) {
       var props = _ref.props,
         focusedState = _ref.focusedState,
+        context = _ref.context,
         overlayVisibleState = _ref.overlayVisibleState,
         isValueEmpty = _ref.isValueEmpty;
       return classNames('p-treeselect p-component p-inputwrapper', {
@@ -55618,9 +55741,10 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
         'p-disabled': props.disabled,
         'p-invalid': props.invalid,
         'p-focus': focusedState,
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled',
         'p-inputwrapper-filled': !isValueEmpty,
         'p-inputwrapper-focus': focusedState || overlayVisibleState
-      }, props.className);
+      });
     },
     label: function label(_ref2) {
       var props = _ref2.props,
@@ -55682,6 +55806,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       inputId: null,
       inputRef: null,
       invalid: false,
+      variant: null,
       metaKeySelection: false,
       name: null,
       nodeTemplate: null,
@@ -56494,11 +56619,12 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
     }, ptm('lastHiddenFocusableElementOnOverlay'));
     var rootProps = mergeProps({
       ref: elementRef,
-      className: cx('root', {
+      className: classNames(props.className, cx('root', {
+        context: context,
         focusedState: focusedState,
         overlayVisibleState: overlayVisibleState,
         isValueEmpty: isValueEmpty
-      }),
+      })),
       style: props.style,
       onClick: onClick
     }, TreeSelectBase.getOtherProps(props), ptm('root'));
@@ -59531,12 +59657,13 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
 
   var classes = {
     root: function root(_ref) {
-      var props = _ref.props;
+      var props = _ref.props,
+        context = _ref.context;
       return classNames('p-tristatecheckbox p-checkbox p-component', {
         'p-highlight': props.value !== null,
         'p-disabled': props.disabled,
         'p-invalid': props.invalid,
-        'p-variant-filled': props.variant === 'filled'
+        'p-variant-filled': props.variant ? props.variant === 'filled' : context && context.inputStyle === 'filled'
       });
     },
     checkIcon: 'p-checkbox-icon p-c',
@@ -59552,6 +59679,7 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       disabled: false,
       id: null,
       invalid: false,
+      variant: null,
       onChange: null,
       readOnly: false,
       style: null,
@@ -59677,7 +59805,9 @@ var primereact = (function (exports, React, reactTransitionGroup, ReactDOM) {
       'aria-live': 'polite'
     }, ptm('srOnlyAria'));
     var rootProps = mergeProps({
-      className: classNames(props.className, cx('root')),
+      className: classNames(props.className, cx('root', {
+        context: context
+      })),
       style: props.style,
       'data-p-disabled': props.disabled
     }, TriStateCheckboxBase.getOtherProps(props), ptm('root'));