primereact 10.6.2 → 10.6.3

package/primereact.all.esm.js

@@ -4649,7 +4649,7 @@ var useUpdateEffect = function useUpdateEffect(fn, deps) {
 
 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";
@@ -5071,7 +5071,7 @@ var ChevronRightIcon = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
 }));
 ChevronRightIcon.displayName = 'ChevronRightIcon';
 
-var classes$1c = {
+var classes$1d = {
   root: 'p-accordion p-component',
   tab: {
     root: function root(_ref) {
@@ -5115,7 +5115,7 @@ var AccordionBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$1c,
+    classes: classes$1d,
     styles: styles$12
   }
 });
@@ -6208,7 +6208,7 @@ var WindowMinimizeIcon = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(
 }));
 WindowMinimizeIcon.displayName = 'WindowMinimizeIcon';
 
-var classes$1b = {
+var classes$1c = {
   root: function root(_ref) {
     var props = _ref.props;
     return classNames('p-badge p-component', _defineProperty({
@@ -6232,7 +6232,7 @@ var BadgeBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$1b,
+    classes: classes$1c,
     styles: styles$11
   }
 });
@@ -6271,7 +6271,7 @@ var Badge = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
 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({
@@ -6281,7 +6281,7 @@ var RippleBase = ComponentBase.extend({
   },
   css: {
     styles: styles$10,
-    classes: classes$1a
+    classes: classes$1b
   },
   getProps: function getProps(props) {
     return ObjectUtils.getMergedProps(props, RippleBase.defaultProps);
@@ -6456,7 +6456,7 @@ var Portal = /*#__PURE__*/React.memo(function (inProps) {
 });
 Portal.displayName = 'Portal';
 
-var classes$19 = {
+var classes$1a = {
   root: function root(_ref) {
     var positionState = _ref.positionState,
       classNameState = _ref.classNameState;
@@ -6510,7 +6510,7 @@ var TooltipBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$19,
+    classes: classes$1a,
     styles: styles$$,
     inlineStyles: inlineStyles$m
   }
@@ -7024,7 +7024,7 @@ var Tooltip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
 }));
 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));
@@ -7082,7 +7082,7 @@ var ButtonBase = ComponentBase.extend({
     visible: true
   },
   css: {
-    classes: classes$18
+    classes: classes$19
   }
 });
 
@@ -7262,15 +7262,17 @@ var KeyFilter = {
   }
 };
 
-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({
@@ -7280,6 +7282,7 @@ var InputTextBase = ComponentBase.extend({
     children: undefined,
     className: null,
     invalid: false,
+    variant: null,
     keyfilter: null,
     onBeforeInput: null,
     onInput: null,
@@ -7290,7 +7293,7 @@ var InputTextBase = ComponentBase.extend({
     validateOnly: false
   },
   css: {
-    classes: classes$17
+    classes: classes$18
   }
 });
 
@@ -7352,9 +7355,10 @@ var InputText = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   }, [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,
@@ -7372,7 +7376,7 @@ InputText.displayName = 'InputText';
 
 var OverlayService = EventBus();
 
-var classes$16 = {
+var classes$17 = {
   root: function root(_ref) {
     var props = _ref.props,
       focusedState = _ref.focusedState;
@@ -7385,9 +7389,11 @@ var classes$16 = {
     });
   },
   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',
@@ -7397,15 +7403,16 @@ var classes$16 = {
   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
     });
   },
@@ -7453,6 +7460,7 @@ var AutoCompleteBase = ComponentBase.extend({
     inputId: null,
     inputRef: null,
     inputStyle: null,
+    variant: null,
     invalid: false,
     itemTemplate: null,
     loadingIcon: null,
@@ -7501,7 +7509,7 @@ var AutoCompleteBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$16,
+    classes: classes$17,
     styles: styles$_
   }
 });
@@ -8486,7 +8494,7 @@ var AutoCompletePanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(f
       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;
@@ -9073,7 +9081,9 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
       "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,
@@ -9167,7 +9177,9 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
     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,
@@ -9256,7 +9268,7 @@ var AutoComplete = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
 }));
 AutoComplete.displayName = 'AutoComplete';
 
-var classes$15 = {
+var classes$16 = {
   root: function root(_ref) {
     var props = _ref.props,
       state = _ref.state;
@@ -9289,7 +9301,7 @@ var AvatarBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$15,
+    classes: classes$16,
     styles: styles$Y
   }
 });
@@ -9383,7 +9395,7 @@ var Avatar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
 });
 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";
@@ -9395,7 +9407,7 @@ var AvatarGroupBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$14,
+    classes: classes$15,
     styles: styles$X
   }
 });
@@ -9431,13 +9443,10 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
 });
 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
     });
@@ -9462,7 +9471,7 @@ var BlockUIBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$13,
+    classes: classes$14,
     styles: styles$W
   }
 });
@@ -9573,14 +9582,14 @@ var BlockUI = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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.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',
@@ -9600,10 +9609,7 @@ var classes$12 = {
     });
   },
   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({
@@ -9618,7 +9624,7 @@ var BreadCrumbBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$12,
+    classes: classes$13,
     styles: styles$V
   }
 });
@@ -9826,7 +9832,7 @@ var BreadCrumb = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   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.createElement("nav", rootProps, /*#__PURE__*/React.createElement("ol", menuProps, home, separator, items));
@@ -9834,7 +9840,7 @@ var BreadCrumb = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
 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,
@@ -9842,27 +9848,34 @@ var classes$11 = {
       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)
@@ -9874,19 +9887,19 @@ var classes$11 = {
   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',
@@ -9903,8 +9916,8 @@ var classes$11 = {
   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',
@@ -9949,6 +9962,7 @@ var CalendarBase = ComponentBase.extend({
     inputMode: 'none',
     inputRef: null,
     inputStyle: null,
+    variant: null,
     invalid: false,
     keepInvalid: false,
     locale: null,
@@ -10015,7 +10029,7 @@ var CalendarBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$11,
+    classes: classes$12,
     styles: styles$U
   }
 });
@@ -12876,6 +12890,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   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) {
@@ -12899,7 +12914,7 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         onChange: function onChange(e) {
           return onYearDropdownChange(e, e.target.value);
         },
-        value: viewYear
+        value: displayYear
       }, ptm('select'));
       var _content2 = /*#__PURE__*/React.createElement("select", selectProps, displayedYearNames.map(function (year) {
         var optionProps = mergeProps({
@@ -12930,7 +12945,6 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
       }
       return _content2;
     }
-    var displayYear = props.numberOfMonths > 1 ? metaYear : currentYear;
     var yearTitleProps = mergeProps({
       className: cx('yearTitle'),
       'aria-label': localeOption('chooseYear', props.locale),
@@ -13411,7 +13425,9 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
         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,
@@ -13650,11 +13666,8 @@ var Calendar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
 }));
 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',
@@ -13676,7 +13689,7 @@ var CardBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$10,
+    classes: classes$11,
     styles: styles$T
   }
 });
@@ -13733,7 +13746,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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();
@@ -13742,7 +13755,7 @@ var Card = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
 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', {
@@ -13832,7 +13845,7 @@ var CarouselBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$$,
+    classes: classes$10,
     styles: styles$S,
     inlineStyles: inlineStyles$l
   }
@@ -14500,18 +14513,20 @@ var Carousel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
 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,
@@ -14521,19 +14536,13 @@ var classes$_ = {
       '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
@@ -14567,6 +14576,7 @@ var CascadeSelectBase = ComponentBase.extend({
     inputId: null,
     inputRef: null,
     invalid: false,
+    variant: null,
     itemTemplate: null,
     name: null,
     onBeforeHide: null,
@@ -14590,7 +14600,7 @@ var CascadeSelectBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$_,
+    classes: classes$$,
     styles: styles$R
   }
 });
@@ -15232,10 +15242,11 @@ var CascadeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
     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);
@@ -15267,14 +15278,11 @@ var ChartBase = ComponentBase.extend({
   },
   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
@@ -15383,7 +15391,7 @@ var PrimeReactChart = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
     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,
@@ -15398,18 +15406,19 @@ var PrimeReactChart = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fun
 });
 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'
     });
   }
 };
@@ -15426,6 +15435,7 @@ var CheckboxBase = ComponentBase.extend({
     inputId: null,
     inputRef: null,
     invalid: false,
+    variant: null,
     name: null,
     onChange: null,
     onContextMenu: null,
@@ -15441,7 +15451,7 @@ var CheckboxBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$Z
+    classes: classes$_
   }
 });
 
@@ -15543,7 +15553,8 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   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,
@@ -15606,7 +15617,7 @@ var Checkbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
 }));
 Checkbox.displayName = 'Checkbox';
 
-var classes$Y = {
+var classes$Z = {
   root: function root(_ref) {
     var props = _ref.props;
     return classNames('p-chip p-component', {
@@ -15635,7 +15646,7 @@ var ChipBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$Y,
+    classes: classes$Z,
     styles: styles$Q
   }
 });
@@ -15740,7 +15751,7 @@ var Chip = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
 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) {
@@ -15752,9 +15763,10 @@ var classes$X = {
   },
   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) {
@@ -15784,6 +15796,7 @@ var ChipsBase = ComponentBase.extend({
     inputId: null,
     inputRef: null,
     invalid: false,
+    variant: null,
     itemTemplate: null,
     keyfilter: null,
     max: null,
@@ -15806,7 +15819,7 @@ var ChipsBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$X,
+    classes: classes$Y,
     styles: styles$P
   }
 });
@@ -16164,7 +16177,7 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
     var containerProps = mergeProps({
       ref: listRef,
       className: cx('container', {
-        isFilled: isFilled
+        context: context
       }),
       onClick: function onClick(e) {
         return onWrapperClick();
@@ -16208,12 +16221,12 @@ var Chips = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
 }));
 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;
@@ -16269,7 +16282,7 @@ var ColorPickerBase = ComponentBase.extend({
     value: null
   },
   css: {
-    classes: classes$W,
+    classes: classes$X,
     styles: styles$O
   }
 });
@@ -16849,7 +16862,7 @@ var ColorPicker = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", rootProps, input, /*#__PURE__*/React.createElement(ColorPickerPanel, {
     hostName: "ColorPicker",
@@ -16886,7 +16899,7 @@ ColumnGroup.displayName = 'ColumnGroup';
 
 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',
@@ -16923,7 +16936,7 @@ var classes$V = {
     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,
@@ -17007,7 +17020,7 @@ var DialogBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$V,
+    classes: classes$W,
     styles: styles$N,
     inlineStyles: inlineStyles$k
   }
@@ -17633,11 +17646,11 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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',
@@ -17684,7 +17697,7 @@ var Dialog = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
 });
 Dialog.displayName = 'Dialog';
 
-var classes$U = {
+var classes$V = {
   root: 'p-confirm-dialog',
   message: 'p-confirm-dialog-message',
   icon: 'p-confirm-dialog-icon',
@@ -17721,7 +17734,7 @@ var ConfirmDialogBase = ComponentBase.extend({
     visible: undefined
   },
   css: {
-    classes: classes$U
+    classes: classes$V
   }
 });
 
@@ -17957,7 +17970,7 @@ var ConfirmDialog = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
 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;
@@ -18012,7 +18025,7 @@ var ConfirmPopupBase = ComponentBase.extend({
     visible: false
   },
   css: {
-    classes: classes$T,
+    classes: classes$U,
     styles: styles$M
   }
 });
@@ -18324,10 +18337,10 @@ var ConfirmPopup = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   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'));
@@ -18375,7 +18388,7 @@ var ConfirmPopup = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
 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', {
@@ -18440,7 +18453,7 @@ var ContextMenuBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$S,
+    classes: classes$T,
     styles: styles$L
   }
 });
@@ -19464,7 +19477,7 @@ var ContextMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
 }));
 ContextMenu.displayName = 'ContextMenu';
 
-var classes$R = {
+var classes$S = {
   header: 'p-datascroller-header',
   footer: 'p-datascroller-footer',
   content: 'p-datascroller-content',
@@ -19506,7 +19519,7 @@ var DataScrollerBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$R,
+    classes: classes$S,
     styles: styles$K,
     inlineStyles: inlineStyles$j
   }
@@ -19795,7 +19808,7 @@ var ColumnBase = ComponentBase.extend({
   }
 });
 
-var classes$Q = {
+var classes$R = {
   root: 'p-paginator p-component',
   left: 'p-paginator-left-content',
   end: 'p-paginator-right-content',
@@ -19862,7 +19875,7 @@ var PaginatorBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$Q,
+    classes: classes$R,
     styles: styles$J
   }
 });
@@ -20048,7 +20061,7 @@ var FirstPageLink = /*#__PURE__*/React.memo(function (inProps) {
 });
 FirstPageLink.displayName = 'FirstPageLink';
 
-var classes$P = {
+var classes$Q = {
   root: function root(_ref) {
     var props = _ref.props,
       focusedState = _ref.focusedState,
@@ -20064,16 +20077,23 @@ var classes$P = {
       '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
     });
@@ -20105,6 +20125,7 @@ var InputNumberBase = ComponentBase.extend({
     inputRef: null,
     inputStyle: null,
     invalid: false,
+    variant: null,
     locale: undefined,
     localeMatcher: undefined,
     max: null,
@@ -20140,7 +20161,7 @@ var InputNumberBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$P,
+    classes: classes$Q,
     styles: styles$I
   }
 });
@@ -20419,11 +20440,40 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     }
     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;
     }
@@ -20436,6 +20486,11 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       }
     }
     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;
@@ -20572,11 +20627,11 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
         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
           });
@@ -20600,8 +20655,8 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   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;
     }
@@ -20613,8 +20668,8 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     }
     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;
     }
@@ -20759,16 +20814,16 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     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 {
@@ -20780,8 +20835,8 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     } 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 {
@@ -20800,8 +20855,8 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   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;
     }
@@ -21063,7 +21118,9 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     }
   }, [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.createElement(InputText, _extends({
       ref: inputRef,
@@ -21085,6 +21142,7 @@ var InputNumber = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       name: props.name,
       autoFocus: props.autoFocus,
       onKeyDown: onInputKeyDown,
+      onKeyPress: onInputAndroidKey,
       onInput: onInput,
       onClick: onInputClick,
       onPointerDown: onInputPointerDown,
@@ -21475,15 +21533,17 @@ var PrevPageLink = /*#__PURE__*/React.memo(function (inProps) {
 });
 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
@@ -21517,25 +21577,31 @@ var classes$O = {
       '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,
@@ -21553,14 +21619,14 @@ var classes$O = {
 };
 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;
   }
 };
@@ -21587,7 +21653,7 @@ var DropdownBase = ComponentBase.extend({
     filterBy: null,
     filterClearIcon: null,
     filterIcon: null,
-    filterInputAutoFocus: true,
+    filterInputAutoFocus: false,
     filterLocale: undefined,
     filterMatchMode: 'contains',
     filterPlaceholder: null,
@@ -21597,6 +21663,7 @@ var DropdownBase = ComponentBase.extend({
     inputId: null,
     inputRef: null,
     invalid: false,
+    variant: null,
     itemTemplate: null,
     loading: false,
     loadingIcon: null,
@@ -21640,7 +21707,7 @@ var DropdownBase = ComponentBase.extend({
     virtualScrollerOptions: null
   },
   css: {
-    classes: classes$O,
+    classes: classes$P,
     styles: styles$H,
     inlineStyles: inlineStyles$i
   }
@@ -21923,7 +21990,9 @@ var DropdownPanel = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
         ref: filterInputRef,
         type: 'text',
         autoComplete: 'off',
-        className: cx('filterInput'),
+        className: cx('filterInput', {
+          context: context
+        }),
         placeholder: props.filterPlaceholder,
         onKeyDown: props.onFilterInputKeyDown,
         onChange: function onChange(e) {
@@ -22870,11 +22939,20 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     }, ptm('input'));
     return /*#__PURE__*/React.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.createElement(TimesIcon, clearIconProps);
       return IconUtils.getJSXIcon(icon, _objectSpread$1g({}, clearIconProps), {
@@ -22937,6 +23015,7 @@ var Dropdown = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     id: props.id,
     ref: elementRef,
     className: classNames(props.className, cx('root', {
+      context: context,
       focusedState: focusedState,
       overlayVisibleState: overlayVisibleState
     })),
@@ -23338,7 +23417,7 @@ Paginator.displayName = 'Paginator';
 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;
@@ -23408,6 +23487,7 @@ var classes$N = {
   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,
@@ -23686,7 +23766,7 @@ var DataTableBase = ComponentBase.extend({
   },
   css: {
     styles: styles$G,
-    classes: classes$N,
+    classes: classes$O,
     inlineStyles: inlineStyles$h
   }
 });
@@ -23774,13 +23854,15 @@ var RowCheckbox = /*#__PURE__*/React.memo(function (props) {
 });
 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',
@@ -23798,6 +23880,7 @@ var RadioButtonBase = ComponentBase.extend({
     inputId: null,
     inputRef: null,
     invalid: false,
+    variant: null,
     name: null,
     onChange: null,
     onClick: null,
@@ -23810,7 +23893,7 @@ var RadioButtonBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$M
+    classes: classes$N
   }
 });
 
@@ -23918,7 +24001,9 @@ var RadioButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   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'));
@@ -30051,7 +30136,7 @@ var DataTable = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
 });
 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',
@@ -30108,7 +30193,7 @@ var DataViewBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$L,
+    classes: classes$M,
     styles: styles$E
   }
 });
@@ -30491,7 +30576,7 @@ var DeferredContent = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
 });
 DeferredContent.displayName = 'DeferredContent';
 
-var classes$K = {
+var classes$L = {
   root: function root(_ref) {
     var props = _ref.props,
       horizontal = _ref.horizontal,
@@ -30527,7 +30612,7 @@ var DividerBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$K,
+    classes: classes$L,
     styles: styles$D,
     inlineStyles: inlineStyles$g
   }
@@ -30575,7 +30660,7 @@ var Divider = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
 });
 Divider.displayName = 'Divider';
 
-var classes$J = {
+var classes$K = {
   icon: 'p-dock-action-icon',
   action: function action(_ref) {
     var disabled = _ref.disabled;
@@ -30626,7 +30711,7 @@ var DockBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$J,
+    classes: classes$K,
     styles: styles$C
   }
 });
@@ -30932,7 +31017,7 @@ var Dock = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
 }));
 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);
@@ -30962,7 +31047,7 @@ var EditorBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$I,
+    classes: classes$J,
     styles: styles$B
   }
 });
@@ -31421,7 +31506,7 @@ function _readOnlyError(name) {
 }
 
 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;
@@ -31449,7 +31534,7 @@ var MessagesBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$H,
+    classes: classes$I,
     styles: styles$A
   }
 });
@@ -31721,7 +31806,7 @@ var Messages = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
 }));
 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');
@@ -31761,7 +31846,7 @@ var ProgressBarBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$G,
+    classes: classes$H,
     styles: styles$z,
     inlineStyles: inlineStyles$f
   }
@@ -31856,7 +31941,7 @@ var ProgressBar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
 }));
 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"));
@@ -31978,7 +32063,7 @@ var FileUploadBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$F,
+    classes: classes$G,
     styles: styles$y
   }
 });
@@ -32426,7 +32511,8 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
       pt: ptm('removeButton'),
       __parentMetadata: {
         parent: metaData
-      }
+      },
+      unstyled: isUnstyled()
     }));
     var content = /*#__PURE__*/React.createElement(React.Fragment, null, preview, contentBody, removeButton);
     if (props.itemTemplate) {
@@ -32534,7 +32620,8 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         pt: ptm('uploadButton'),
         __parentMetadata: {
           parent: metaData
-        }
+        },
+        unstyled: isUnstyled()
       });
       cancelButton = /*#__PURE__*/React.createElement(Button, {
         type: "button",
@@ -32548,7 +32635,8 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
         pt: ptm('cancelButton'),
         __parentMetadata: {
           parent: metaData
-        }
+        },
+        unstyled: isUnstyled()
       });
     }
     if (hasFiles) {
@@ -32576,7 +32664,7 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
     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({
@@ -32671,7 +32759,7 @@ var FileUpload = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
 }));
 FileUpload.displayName = 'FileUpload';
 
-var classes$E = {
+var classes$F = {
   header: 'p-galleria-header',
   footer: 'p-galleria-footer',
   closeIcon: 'p-galleria-close-icon',
@@ -32803,7 +32891,7 @@ var GalleriaBase = ComponentBase.extend({
     verticalThumbnailViewPortHeight: '300px'
   },
   css: {
-    classes: classes$E,
+    classes: classes$F,
     styles: styles$x,
     inlineStyles: inlineStyles$e
   }
@@ -33825,7 +33913,7 @@ var DownloadIcon = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
 }));
 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',
@@ -33839,7 +33927,7 @@ var classes$D = {
   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
     });
   },
@@ -33888,7 +33976,7 @@ var ImageBase = ComponentBase.extend({
     closeOnEscape: true
   },
   css: {
-    classes: classes$D,
+    classes: classes$E,
     styles: styles$w,
     inlineStyles: inlineStyles$d
   }
@@ -34232,7 +34320,7 @@ var Image = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
   }));
   var rootProps = mergeProps({
     ref: elementRef,
-    className: cx('root')
+    className: classNames(props.className, cx('root'))
   }, ImageBase.getOtherProps(props), ptm('root'));
   return /*#__PURE__*/React.createElement("span", rootProps, image, preview, maskVisibleState && /*#__PURE__*/React.createElement(Portal, {
     element: element,
@@ -34241,7 +34329,7 @@ var Image = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
 }));
 Image.displayName = 'Image';
 
-var classes$C = {
+var classes$D = {
   display: function display(_ref) {
     var props = _ref.props;
     return classNames('p-inplace-display', {
@@ -34287,7 +34375,7 @@ var InplaceBase = ComponentBase.extend({
     children: undefined
   },
   css: {
-    classes: classes$C,
+    classes: classes$D,
     styles: styles$v
   }
 });
@@ -34428,6 +34516,17 @@ InplaceDisplay.displayName = 'InplaceDisplay';
 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',
@@ -34438,6 +34537,8 @@ var InputMaskBase = ComponentBase.extend({
     id: null,
     mask: null,
     maxLength: null,
+    invalid: false,
+    variant: null,
     name: null,
     onBlur: null,
     onChange: null,
@@ -34456,6 +34557,9 @@ var InputMaskBase = ComponentBase.extend({
     unmask: false,
     value: null,
     children: undefined
+  },
+  css: {
+    classes: classes$C
   }
 });
 
@@ -34479,6 +34583,8 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   var metaData = {
     props: props
   };
+  var _InputMaskBase$setMet = InputMaskBase.setMetaData(metaData),
+    cx = _InputMaskBase$setMet.cx;
   var caret = function caret(first, last) {
     var range;
     var begin;
@@ -34961,7 +35067,9 @@ var InputMask = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     }
   }, [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.createElement(InputText, _extends({
     ref: elementRef,
     autoFocus: props.autoFocus,
@@ -35152,13 +35260,15 @@ InputSwitch.displayName = 'InputSwitch';
 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";
@@ -35168,6 +35278,7 @@ var InputTextareaBase = ComponentBase.extend({
     __parentMetadata: null,
     autoResize: false,
     invalid: false,
+    variant: null,
     keyfilter: null,
     onBlur: null,
     onFocus: null,
@@ -35286,9 +35397,10 @@ var InputTextarea = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(funct
   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,
@@ -35338,7 +35450,7 @@ var KnobBase = ComponentBase.extend({
         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        "
@@ -35585,7 +35697,7 @@ var Knob = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inPr
   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({
@@ -37935,13 +38047,13 @@ var classes$x = {
     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'
 };
@@ -38459,10 +38571,10 @@ var Mention = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
   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.createElement("div", rootProps, /*#__PURE__*/React.createElement(InputTextarea, inputMentionProps), panel);
@@ -40093,12 +40205,14 @@ Message.displayName = 'Message';
 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),
@@ -40207,6 +40321,7 @@ var MultiSelectBase = ComponentBase.extend({
     inputId: null,
     inputRef: null,
     invalid: false,
+    variant: null,
     itemCheckboxIcon: null,
     itemClassName: null,
     itemTemplate: null,
@@ -40419,6 +40534,7 @@ var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
     _React$useState2 = _slicedToArray(_React$useState, 2),
     focusedState = _React$useState2[0],
     setFocusedState = _React$useState2[1];
+  var checkboxRef = React.useRef(null);
   var mergeProps = useMergeProps();
   var ptm = props.ptm,
     cx = props.cx,
@@ -40436,7 +40552,9 @@ var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
     });
   };
   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);
@@ -40478,6 +40596,7 @@ var MultiSelectItem = /*#__PURE__*/React.memo(function (props) {
     'data-p-disabled': props.disabled
   }, getPTOptions('item'));
   return /*#__PURE__*/React.createElement("li", itemProps, /*#__PURE__*/React.createElement("div", checkboxContainerProps, /*#__PURE__*/React.createElement(Checkbox, {
+    ref: checkboxRef,
     checked: props.selected,
     icon: checkboxIcon,
     pt: ptm('checkbox'),
@@ -41206,10 +41325,18 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
       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'
       });
@@ -41521,7 +41648,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
   var changeFocusedOptionIndex = function changeFocusedOptionIndex(event, index) {
     if (focusedOptionIndex !== index) {
       setFocusedOptionIndex(index);
-      scrollInView();
+      scrollInView(event);
       if (props.selectOnFocus) {
         onOptionSelect(event, visibleOptions[index], false);
       }
@@ -41733,6 +41860,7 @@ var MultiSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functio
     style: _objectSpread$E(_objectSpread$E({}, props.style), sx('root')),
     className: classNames(props.className, cx('root', {
       focusedState: focusedState,
+      context: context,
       overlayVisibleState: overlayVisibleState
     }))
   }, otherProps), {}, {
@@ -43283,9 +43411,9 @@ OrganizationChart.displayName = 'OrganizationChart';
 
 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
     });
@@ -43536,9 +43664,9 @@ var OverlayPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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);
@@ -43838,34 +43966,31 @@ var classes$p = {
   },
   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
@@ -44928,7 +45053,7 @@ var PanelMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   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'));
@@ -44945,7 +45070,7 @@ var classes$o = {
       'p-inputwrapper-filled': isFilled,
       'p-inputwrapper-focus': focusedState,
       'p-input-icon-right': props.toggleMask
-    }, props.className);
+    });
   },
   input: function input(_ref2) {
     var props = _ref2.props;
@@ -45001,6 +45126,7 @@ var PasswordBase = ComponentBase.extend({
     inputStyle: null,
     inputClassName: null,
     invalid: false,
+    variant: null,
     panelStyle: null,
     panelClassName: null,
     transitionOptions: null,
@@ -45401,10 +45527,10 @@ var Password = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
   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({
@@ -45417,6 +45543,7 @@ var Password = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (
     onInput: onInput,
     onKeyUp: onKeyup,
     invalid: props.invalid,
+    variant: props.variant,
     style: props.inputStyle,
     tabIndex: props.tabIndex,
     tooltip: props.tooltip,
@@ -46878,7 +47005,7 @@ var classes$l = {
     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";
@@ -47094,7 +47221,7 @@ var Rating = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (in
   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();
@@ -47135,10 +47262,7 @@ var ScrollPanelBase = ComponentBase.extend({
   },
   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',
@@ -47408,7 +47532,7 @@ var ScrollPanel = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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')
@@ -47608,7 +47732,7 @@ ScrollTop.displayName = 'ScrollTop';
 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
     });
   },
@@ -47889,7 +48013,7 @@ var SelectButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   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'));
@@ -47927,9 +48051,9 @@ var classes$i = {
   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
     });
@@ -48176,9 +48300,9 @@ var Sidebar = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
   }, 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'));
@@ -48329,7 +48453,7 @@ var classes$g = {
     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',
@@ -48733,7 +48857,7 @@ var SlideMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     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);
@@ -48804,7 +48928,7 @@ var classes$f = {
     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
@@ -49183,10 +49307,10 @@ var Slider = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (in
   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.createElement("div", _extends({
@@ -49834,7 +49958,7 @@ var classes$d = {
       '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) {
@@ -50822,7 +50946,7 @@ var TieredMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
     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'));
@@ -51644,7 +51768,7 @@ var classes$a = {
     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";
@@ -51893,7 +52017,7 @@ var Steps = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (inP
   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();
@@ -52149,10 +52273,7 @@ var classes$9 = {
   },
   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({
@@ -52447,7 +52568,7 @@ var TabMenu = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
     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.createElement("div", rootProps, /*#__PURE__*/React.createElement("ul", menuProps, items, /*#__PURE__*/React.createElement("li", inkbarProps)));
@@ -52472,7 +52593,7 @@ var classes$8 = {
     var props = _ref2.props;
     return classNames('p-tabview p-component', {
       'p-tabview-scrollable': props.scrollable
-    }, props.className);
+    });
   },
   navcontainer: 'p-tabview-nav-container',
   tab: {
@@ -53115,7 +53236,7 @@ var TabView = /*#__PURE__*/React.forwardRef(function (inProps, ref) {
     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')
@@ -53900,7 +54021,7 @@ var classes$4 = {
       'p-disabled': props.disabled,
       'p-highlight': props.checked,
       'p-invalid': props.invalid
-    }, props.className);
+    });
   },
   input: 'p-togglebutton-input',
   box: function box(_ref2) {
@@ -54037,10 +54158,10 @@ var ToggleButton = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(functi
   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'));
@@ -54091,10 +54212,7 @@ var ToolbarBase = ComponentBase.extend({
   },
   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'
@@ -54141,7 +54259,7 @@ var Toolbar = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function (i
     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.createElement("div", rootProps, /*#__PURE__*/React.createElement("div", startProps, start), /*#__PURE__*/React.createElement("div", centerProps, center), /*#__PURE__*/React.createElement("div", endProps, end));
@@ -54192,6 +54310,7 @@ var classes$3 = {
   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',
@@ -54829,8 +54948,11 @@ var UITreeNode = /*#__PURE__*/React.memo(function (props) {
       var _props$isUnstyled;
       var checked = isChecked();
       var partialChecked = isPartialChecked();
-      var icon = checked ? props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, null) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React.createElement(MinusIcon, null) : null;
-      var checkboxIcon = IconUtils.getJSXIcon(icon, {}, props);
+      var checkboxIconProps = mergeProps({
+        className: cx('checkIcon')
+      });
+      var icon = checked ? props.checkboxIcon || /*#__PURE__*/React.createElement(CheckIcon, checkboxIconProps) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React.createElement(MinusIcon, checkboxIconProps) : null;
+      var checkboxIcon = IconUtils.getJSXIcon(icon, _objectSpread$a({}, checkboxIconProps), props);
       var checkboxProps = mergeProps({
         className: cx('nodeCheckbox', {
           partialChecked: partialChecked
@@ -55589,6 +55711,7 @@ var classes$2 = {
   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', {
@@ -55597,9 +55720,10 @@ var classes$2 = {
       '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,
@@ -55661,6 +55785,7 @@ var TreeSelectBase = ComponentBase.extend({
     inputId: null,
     inputRef: null,
     invalid: false,
+    variant: null,
     metaKeySelection: false,
     name: null,
     nodeTemplate: null,
@@ -56473,11 +56598,12 @@ var TreeSelect = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function
   }, 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'));
@@ -59510,12 +59636,13 @@ TreeTable.displayName = 'TreeTable';
 
 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',
@@ -59531,6 +59658,7 @@ var TriStateCheckboxBase = ComponentBase.extend({
     disabled: false,
     id: null,
     invalid: false,
+    variant: null,
     onChange: null,
     readOnly: false,
     style: null,
@@ -59656,7 +59784,9 @@ var TriStateCheckbox = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(fu
     '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'));