primereact 9.5.0 → 9.6.0

package/core/core.js

@@ -1391,6 +1391,11 @@ this.primereact.utils = (function (exports, PrimeReact, React) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -1557,7 +1562,7 @@ this.primereact.utils = (function (exports, PrimeReact, React) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -2172,9 +2177,13 @@ this.primereact.utils = (function (exports, PrimeReact, React) {
 })({}, primereact.api, React);
 
 this.primereact = this.primereact || {};
-this.primereact.api = (function (exports, utils) {
+this.primereact.api = (function (exports, utils, React) {
     'use strict';
 
+    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+    var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
     var FilterMatchMode = Object.freeze({
       STARTS_WITH: 'startsWith',
       CONTAINS: 'contains',
@@ -2200,9 +2209,9 @@ this.primereact.api = (function (exports, utils) {
       OR: 'or'
     });
 
-    function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
-    function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-    function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+    function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
+    function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
+    function _arrayLikeToArray$1(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
     var FilterService = {
       filter: function filter(value, fields, filterValue, filterMatchMode, filterLocale) {
         var filteredItems = [];
@@ -2490,6 +2499,7 @@ this.primereact.api = (function (exports, utils) {
       tooltip: 1100,
       toast: 1200
     });
+    _defineProperty(PrimeReact$1, "pt", undefined);
     _defineProperty(PrimeReact$1, "filterMatchModeOptions", {
       text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
       numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
@@ -2564,11 +2574,51 @@ this.primereact.api = (function (exports, utils) {
           trueLabel: 'True',
           falseLabel: 'False',
           nullLabel: 'Not Selected',
+          star: '1 star',
+          stars: '{star} stars',
+          selectAll: 'All items selected',
+          unselectAll: 'All items unselected',
+          close: 'Close',
+          previous: 'Previous',
+          next: 'Next',
+          navigation: 'Navigation',
+          scrollTop: 'Scroll Top',
+          moveTop: 'Move Top',
+          moveUp: 'Move Up',
+          moveDown: 'Move Down',
+          moveBottom: 'Move Bottom',
+          moveToTarget: 'Move to Target',
+          moveToSource: 'Move to Source',
+          moveAllToTarget: 'Move All to Target',
+          moveAllToSource: 'Move All to Source',
           pageLabel: 'Page',
           firstPageLabel: 'First Page',
           lastPageLabel: 'Last Page',
           nextPageLabel: 'Next Page',
           previousPageLabel: 'Previous Page',
+          rowsPerPageLabel: 'Rows per page',
+          jumpToPageDropdownLabel: 'Jump to Page Dropdown',
+          jumpToPageInputLabel: 'Jump to Page Input',
+          selectRow: 'Row Selected',
+          unselectRow: 'Row Unselected',
+          expandRow: 'Row Expanded',
+          collapseRow: 'Row Collapsed',
+          showFilterMenu: 'Show Filter Menu',
+          hideFilterMenu: 'Hide Filter Menu',
+          filterOperator: 'Filter Operator',
+          filterConstraint: 'Filter Constraint',
+          editRow: 'Row Edit',
+          saveEdit: 'Save Edit',
+          cancelEdit: 'Cancel Edit',
+          listView: 'List View',
+          gridView: 'Grid View',
+          slide: 'Slide',
+          slideNumber: '{slideNumber}',
+          zoomImage: 'Zoom Image',
+          zoomIn: 'Zoom In',
+          zoomOut: 'Zoom Out',
+          rotateRight: 'Rotate Right',
+          rotateLeft: 'Rotate Left',
           selectLabel: 'Select',
           unselectLabel: 'Unselect',
           expandLabel: 'Expand',
@@ -2867,6 +2917,169 @@ this.primereact.api = (function (exports, utils) {
       ASC: 1
     });
 
+    function _arrayWithHoles(arr) {
+      if (Array.isArray(arr)) return arr;
+    }
+
+    function _iterableToArrayLimit(arr, i) {
+      var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"];
+      if (null != _i) {
+        var _s,
+          _e,
+          _x,
+          _r,
+          _arr = [],
+          _n = !0,
+          _d = !1;
+        try {
+          if (_x = (_i = _i.call(arr)).next, 0 === i) {
+            if (Object(_i) !== _i) return;
+            _n = !1;
+          } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0);
+        } catch (err) {
+          _d = !0, _e = err;
+        } finally {
+          try {
+            if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return;
+          } finally {
+            if (_d) throw _e;
+          }
+        }
+        return _arr;
+      }
+    }
+
+    function _arrayLikeToArray(arr, len) {
+      if (len == null || len > arr.length) len = arr.length;
+      for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+      return arr2;
+    }
+
+    function _unsupportedIterableToArray(o, minLen) {
+      if (!o) return;
+      if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+      var n = Object.prototype.toString.call(o).slice(8, -1);
+      if (n === "Object" && o.constructor) n = o.constructor.name;
+      if (n === "Map" || n === "Set") return Array.from(o);
+      if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+    }
+
+    function _nonIterableRest() {
+      throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+    }
+
+    function _slicedToArray(arr, i) {
+      return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+    }
+
+    var PrimeReactContext = /*#__PURE__*/React__default["default"].createContext();
+    var PrimeReactProvider = function PrimeReactProvider(props) {
+      var _useState = React.useState(false),
+        _useState2 = _slicedToArray(_useState, 2),
+        ripple = _useState2[0],
+        setRipple = _useState2[1];
+      var _useState3 = React.useState('outlined'),
+        _useState4 = _slicedToArray(_useState3, 2),
+        inputStyle = _useState4[0],
+        setInputStyle = _useState4[1];
+      var _useState5 = React.useState('en'),
+        _useState6 = _slicedToArray(_useState5, 2),
+        locale = _useState6[0],
+        setLocale = _useState6[1];
+      var _useState7 = React.useState(null),
+        _useState8 = _slicedToArray(_useState7, 2),
+        appendTo = _useState8[0],
+        setAppendTo = _useState8[1];
+      var _useState9 = React.useState(true),
+        _useState10 = _slicedToArray(_useState9, 2),
+        cssTransition = _useState10[0],
+        setCssTransition = _useState10[1];
+      var _useState11 = React.useState(true),
+        _useState12 = _slicedToArray(_useState11, 2),
+        autoZIndex = _useState12[0],
+        setAutoZIndex = _useState12[1];
+      var _useState13 = React.useState(false),
+        _useState14 = _slicedToArray(_useState13, 2),
+        hideOverlaysOnDocumentScrolling = _useState14[0],
+        setHideOverlaysOnDocumentScrolling = _useState14[1];
+      var _useState15 = React.useState(null),
+        _useState16 = _slicedToArray(_useState15, 2),
+        nonce = _useState16[0],
+        setNonce = _useState16[1];
+      var _useState17 = React.useState(1),
+        _useState18 = _slicedToArray(_useState17, 2),
+        nullSortOrder = _useState18[0],
+        setNullSortOrder = _useState18[1];
+      var _useState19 = React.useState({
+          modal: 1100,
+          overlay: 1000,
+          menu: 1000,
+          tooltip: 1100,
+          toast: 1200
+        }),
+        _useState20 = _slicedToArray(_useState19, 2),
+        zIndex = _useState20[0],
+        setZIndex = _useState20[1];
+      var _useState21 = React.useState(undefined),
+        _useState22 = _slicedToArray(_useState21, 2),
+        pt = _useState22[0],
+        setPt = _useState22[1];
+      var _useState23 = React.useState({
+          text: [FilterMatchMode.STARTS_WITH, FilterMatchMode.CONTAINS, FilterMatchMode.NOT_CONTAINS, FilterMatchMode.ENDS_WITH, FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS],
+          numeric: [FilterMatchMode.EQUALS, FilterMatchMode.NOT_EQUALS, FilterMatchMode.LESS_THAN, FilterMatchMode.LESS_THAN_OR_EQUAL_TO, FilterMatchMode.GREATER_THAN, FilterMatchMode.GREATER_THAN_OR_EQUAL_TO],
+          date: [FilterMatchMode.DATE_IS, FilterMatchMode.DATE_IS_NOT, FilterMatchMode.DATE_BEFORE, FilterMatchMode.DATE_AFTER]
+        }),
+        _useState24 = _slicedToArray(_useState23, 2),
+        filterMatchModeOptions = _useState24[0],
+        setFilterMatchModeOptions = _useState24[1];
+      var changeTheme = function changeTheme(currentTheme, newTheme, linkElementId, callback) {
+        var _linkElement$parentNo;
+        var linkElement = document.getElementById(linkElementId);
+        var cloneLinkElement = linkElement.cloneNode(true);
+        var newThemeUrl = linkElement.getAttribute('href').replace(currentTheme, newTheme);
+        cloneLinkElement.setAttribute('id', linkElementId + '-clone');
+        cloneLinkElement.setAttribute('href', newThemeUrl);
+        cloneLinkElement.addEventListener('load', function () {
+          linkElement.remove();
+          cloneLinkElement.setAttribute('id', linkElementId);
+          if (callback) {
+            callback();
+          }
+        });
+        (_linkElement$parentNo = linkElement.parentNode) === null || _linkElement$parentNo === void 0 ? void 0 : _linkElement$parentNo.insertBefore(cloneLinkElement, linkElement.nextSibling);
+      };
+      var value = {
+        changeTheme: changeTheme,
+        ripple: ripple,
+        setRipple: setRipple,
+        inputStyle: inputStyle,
+        setInputStyle: setInputStyle,
+        locale: locale,
+        setLocale: setLocale,
+        appendTo: appendTo,
+        setAppendTo: setAppendTo,
+        cssTransition: cssTransition,
+        setCssTransition: setCssTransition,
+        autoZIndex: autoZIndex,
+        setAutoZIndex: setAutoZIndex,
+        hideOverlaysOnDocumentScrolling: hideOverlaysOnDocumentScrolling,
+        setHideOverlaysOnDocumentScrolling: setHideOverlaysOnDocumentScrolling,
+        nonce: nonce,
+        setNonce: setNonce,
+        nullSortOrder: nullSortOrder,
+        setNullSortOrder: setNullSortOrder,
+        zIndex: zIndex,
+        setZIndex: setZIndex,
+        pt: pt,
+        setPt: setPt,
+        filterMatchModeOptions: filterMatchModeOptions,
+        setFilterMatchModeOptions: setFilterMatchModeOptions
+      };
+      return /*#__PURE__*/React__default["default"].createElement(PrimeReactContext.Provider, {
+        value: value
+      }, props.children);
+    };
+
     var PrimeReact = PrimeReact$1;
 
     exports.FilterMatchMode = FilterMatchMode;
@@ -2874,6 +3087,8 @@ this.primereact.api = (function (exports, utils) {
     exports.FilterService = FilterService;
     exports.MessageSeverity = MessageSeverity;
     exports.PrimeIcons = PrimeIcons;
+    exports.PrimeReactContext = PrimeReactContext;
+    exports.PrimeReactProvider = PrimeReactProvider;
     exports.SortOrder = SortOrder;
     exports.addLocale = addLocale;
     exports.ariaLabel = ariaLabel;
@@ -2888,12 +3103,16 @@ this.primereact.api = (function (exports, utils) {
 
     return exports;
 
-})({}, primereact.utils);
+})({}, primereact.utils, React);
 
 this.primereact = this.primereact || {};
-this.primereact.componentbase = (function (exports, utils) {
+this.primereact.componentbase = (function (exports, PrimeReact, utils) {
   'use strict';
 
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+  var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
+
   function _typeof(obj) {
     "@babel/helpers - typeof";
 
@@ -2941,28 +3160,47 @@ this.primereact.componentbase = (function (exports, utils) {
     defaultProps: {
       pt: undefined
     },
+    context: undefined,
     extend: function extend() {
       var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       var defaultProps = _objectSpread(_objectSpread({}, props.defaultProps), ComponentBase.defaultProps);
       var getProps = function getProps(props) {
+        var context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        ComponentBase.context = context;
         return utils.ObjectUtils.getMergedProps(props, defaultProps);
       };
       var getOtherProps = function getOtherProps(props) {
         return utils.ObjectUtils.getDiffProps(props, defaultProps);
       };
-      var getPTItem = function getPTItem() {
+      var getOptionValue = function getOptionValue() {
         var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-        var fKey = utils.ObjectUtils.convertToFlatCase(key);
-        return obj[Object.keys(obj).find(function (k) {
+        var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+        var fKeys = String(utils.ObjectUtils.convertToFlatCase(key)).split('.');
+        var fKey = fKeys.shift();
+        var matchedPTOption = Object.keys(obj).find(function (k) {
           return utils.ObjectUtils.convertToFlatCase(k) === fKey;
-        }) || ''];
+        }) || '';
+        return fKey ? utils.ObjectUtils.isObject(obj) ? getOptionValue(utils.ObjectUtils.getJSXElement(obj[matchedPTOption], params), fKeys.join('.'), params) : undefined : utils.ObjectUtils.getJSXElement(obj, params);
       };
       var getPTValue = function getPTValue() {
         var obj = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
         var key = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
         var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-        return utils.ObjectUtils.getPropValue(getPTItem(obj, key), params);
+        var datasetPrefix = 'data-pc-';
+        var componentName = params.props && params.props.__TYPE && utils.ObjectUtils.convertToFlatCase(params.props.__TYPE) || '';
+        var pt = ComponentBase.context.pt || PrimeReact__default["default"].pt || {};
+        var defaultPT = function defaultPT(key) {
+          return pt && getOptionValue(pt[componentName], key);
+        };
+        var self = utils.ObjectUtils.getPropValue(obj, key, params)[key];
+        var globalPT = defaultPT(key);
+        var datasetProps = _objectSpread(_objectSpread({}, key === 'root' && _defineProperty({}, "".concat(datasetPrefix, "name"), componentName)), {}, _defineProperty({}, "".concat(datasetPrefix, "section"), utils.ObjectUtils.convertToFlatCase(key)));
+        var merged = _objectSpread({}, utils.ObjectUtils.getMergedProps(globalPT, self));
+        if (Object.keys(datasetProps).length) {
+          merged = _objectSpread(_objectSpread({}, merged), datasetProps);
+        }
+        return merged;
       };
       var setMetaData = function setMetaData() {
         var metadata = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -2998,7 +3236,7 @@ this.primereact.componentbase = (function (exports, utils) {
 
   return exports;
 
-})({}, primereact.utils);
+})({}, primereact.api, primereact.utils);
 
 this.primereact = this.primereact || {};
 this.primereact.hooks = (function (exports, React, utils, PrimeReact) {
@@ -3109,6 +3347,7 @@ this.primereact.hooks = (function (exports, React, utils, PrimeReact) {
       when = _ref$when === void 0 ? true : _ref$when;
     var targetRef = React__namespace.useRef(null);
     var listenerRef = React__namespace.useRef(null);
+    var prevListener = usePrevious(listener);
     var prevOptions = usePrevious(options);
     var bind = function bind() {
       var bindOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -3138,11 +3377,12 @@ this.primereact.hooks = (function (exports, React, utils, PrimeReact) {
       }
     }, [target, when]);
     React__namespace.useEffect(function () {
-      if (listenerRef.current && (listenerRef.current !== listener || prevOptions !== options)) {
+      // to properly compare functions we can implicitly converting the function to it's body's text as a String
+      if (listenerRef.current && ('' + prevListener !== '' + listener || prevOptions !== options)) {
         unbind();
         when && bind();
       }
-    }, [listener, options]);
+    }, [listener, options, when]);
     useUnmountEffect(function () {
       unbind();
     });
@@ -3697,6 +3937,7 @@ this.primereact.hooks = (function (exports, React, utils, PrimeReact) {
     var listenerRef = React__namespace.useRef(null);
     var scrollableParents = React__namespace.useRef([]);
     var prevOptions = usePrevious(options);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
     var bind = function bind() {
       var bindOptions = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
       if (utils.ObjectUtils.isNotEmpty(bindOptions.target)) {
@@ -3704,7 +3945,7 @@ this.primereact.hooks = (function (exports, React, utils, PrimeReact) {
         (bindOptions.when || when) && (targetRef.current = utils.DomHandler.getTargetElement(bindOptions.target));
       }
       if (!listenerRef.current && targetRef.current) {
-        var nodes = scrollableParents.current = utils.DomHandler.getScrollableParents(targetRef.current, PrimeReact__default["default"].hideOverlaysOnDocumentScrolling);
+        var nodes = scrollableParents.current = utils.DomHandler.getScrollableParents(targetRef.current, context ? context.hideOverlaysOnDocumentScrolling : PrimeReact__default["default"].hideOverlaysOnDocumentScrolling);
         listenerRef.current = function (event) {
           return listener && listener(event);
         };
@@ -3982,7 +4223,7 @@ this.primereact.hooks = (function (exports, React, utils, PrimeReact) {
 })({}, React, primereact.utils, primereact.api);
 
 this.primereact = this.primereact || {};
-this.primereact.ripple = (function (exports, React, PrimeReact, hooks, utils) {
+this.primereact.ripple = (function (exports, React, hooks, utils, PrimeReact) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -4011,6 +4252,7 @@ this.primereact.ripple = (function (exports, React, PrimeReact, hooks, utils) {
     var Ripple = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function () {
       var inkRef = React__namespace.useRef(null);
       var targetRef = React__namespace.useRef(null);
+      var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
       var getTarget = function getTarget() {
         return inkRef.current && inkRef.current.parentElement;
       };
@@ -4082,7 +4324,7 @@ this.primereact.ripple = (function (exports, React, PrimeReact, hooks, utils) {
           unbindEvents();
         }
       });
-      return PrimeReact__default["default"].ripple ? /*#__PURE__*/React__namespace.createElement("span", {
+      return context && context.ripple || PrimeReact__default["default"].ripple ? /*#__PURE__*/React__namespace.createElement("span", {
         role: "presentation",
         ref: inkRef,
         className: "p-ink",
@@ -4097,10 +4339,10 @@ this.primereact.ripple = (function (exports, React, PrimeReact, hooks, utils) {
 
     return exports;
 
-})({}, React, primereact.api, primereact.hooks, primereact.utils);
+})({}, React, primereact.hooks, primereact.utils, primereact.api);
 
 this.primereact = this.primereact || {};
-this.primereact.csstransition = (function (exports, React, reactTransitionGroup, PrimeReact, hooks, utils) {
+this.primereact.csstransition = (function (exports, React, reactTransitionGroup, hooks, utils, PrimeReact) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -4184,7 +4426,8 @@ this.primereact.csstransition = (function (exports, React, reactTransitionGroup,
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var CSSTransition = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var props = CSSTransitionBase.getProps(inProps);
-    var disabled = props.disabled || props.options && props.options.disabled || !PrimeReact__default["default"].cssTransition;
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var disabled = props.disabled || props.options && props.options.disabled || context && !context.cssTransition || !PrimeReact__default["default"].cssTransition;
     var onEnter = function onEnter(node, isAppearing) {
       props.onEnter && props.onEnter(node, isAppearing); // component
       props.options && props.options.onEnter && props.options.onEnter(node, isAppearing); // user option
@@ -4260,10 +4503,10 @@ this.primereact.csstransition = (function (exports, React, reactTransitionGroup,
 
   return exports;
 
-})({}, React, ReactTransitionGroup, primereact.api, primereact.hooks, primereact.utils);
+})({}, React, ReactTransitionGroup, primereact.hooks, primereact.utils, primereact.api);
 
 this.primereact = this.primereact || {};
-this.primereact.portal = (function (exports, React, ReactDOM, PrimeReact, hooks, utils) {
+this.primereact.portal = (function (exports, React, ReactDOM, hooks, utils, PrimeReact) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -4365,6 +4608,7 @@ this.primereact.portal = (function (exports, React, ReactDOM, PrimeReact, hooks,
 
   var Portal = /*#__PURE__*/React__namespace.memo(function (inProps) {
     var props = PortalBase.getProps(inProps);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
     var _React$useState = React__namespace.useState(props.visible && utils.DomHandler.hasDOM()),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       mountedState = _React$useState2[0],
@@ -4383,7 +4627,7 @@ this.primereact.portal = (function (exports, React, ReactDOM, PrimeReact, hooks,
     });
     var element = props.element || props.children;
     if (element && mountedState) {
-      var appendTo = props.appendTo || PrimeReact__default["default"].appendTo || document.body;
+      var appendTo = props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo || document.body;
       return appendTo === 'self' ? element : /*#__PURE__*/ReactDOM__default["default"].createPortal(element, appendTo);
     }
     return null;
@@ -4396,10 +4640,10 @@ this.primereact.portal = (function (exports, React, ReactDOM, PrimeReact, hooks,
 
   return exports;
 
-})({}, React, ReactDOM, primereact.api, primereact.hooks, primereact.utils);
+})({}, React, ReactDOM, primereact.hooks, primereact.utils, primereact.api);
 
 this.primereact = this.primereact || {};
-this.primereact.keyfilter = (function (exports) {
+this.primereact.keyfilter = (function (exports, utils) {
   'use strict';
 
   function _arrayLikeToArray(arr, len) {
@@ -4449,21 +4693,22 @@ this.primereact.keyfilter = (function (exports) {
     /* eslint-enable */getRegex: function getRegex(keyfilter) {
       return KeyFilter.DEFAULT_MASKS[keyfilter] ? KeyFilter.DEFAULT_MASKS[keyfilter] : keyfilter;
     },
-    onKeyPress: function onKeyPress(e, keyfilter, validateOnly) {
-      if (validateOnly) {
+    onBeforeInput: function onBeforeInput(e, keyfilter, validateOnly) {
+      // android devices must use beforeinput https://stackoverflow.com/questions/36753548/keycode-on-android-is-always-229
+      if (validateOnly || !utils.DomHandler.isAndroid()) {
         return;
       }
-      if (e.ctrlKey || e.altKey) {
+      this.validateKey(e, e.data, keyfilter);
+    },
+    onKeyPress: function onKeyPress(e, keyfilter, validateOnly) {
+      // non android devices use keydown
+      if (validateOnly || utils.DomHandler.isAndroid()) {
         return;
       }
-      var isPrintableKey = e.key.length === 1;
-      if (!isPrintableKey) {
+      if (e.ctrlKey || e.altKey) {
         return;
       }
-      var regex = this.getRegex(keyfilter);
-      if (!regex.test(e.key)) {
-        e.preventDefault();
-      }
+      this.validateKey(e, e.key, keyfilter);
     },
     onPaste: function onPaste(e, keyfilter, validateOnly) {
       if (validateOnly) {
@@ -4480,6 +4725,19 @@ this.primereact.keyfilter = (function (exports) {
         }
       });
     },
+    validateKey: function validateKey(e, key, keyfilter) {
+      if (key === null || key === undefined) {
+        return;
+      }
+      var isPrintableKey = key.length === 1;
+      if (!isPrintableKey) {
+        return;
+      }
+      var regex = this.getRegex(keyfilter);
+      if (!regex.test(key)) {
+        e.preventDefault();
+      }
+    },
     validate: function validate(e, keyfilter) {
       var value = e.target.value,
         validatePattern = true;
@@ -4497,7 +4755,7 @@ this.primereact.keyfilter = (function (exports) {
 
   return exports;
 
-})({});
+})({}, primereact.utils);
 
 this.primereact = this.primereact || {};
 this.primereact.iconbase = (function (exports, utils) {
@@ -5282,6 +5540,11 @@ this.primereact.icons.arrowdown = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -5448,7 +5711,7 @@ this.primereact.icons.arrowdown = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -5764,6 +6027,11 @@ this.primereact.icons.arrowup = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -5930,7 +6198,7 @@ this.primereact.icons.arrowup = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -6246,6 +6514,11 @@ this.primereact.icons.ban = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -6412,7 +6685,7 @@ this.primereact.icons.ban = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -7176,6 +7449,11 @@ this.primereact.icons.exclamationtriangle = (function (exports, React, iconbase)
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -7342,7 +7620,7 @@ this.primereact.icons.exclamationtriangle = (function (exports, React, iconbase)
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -7728,6 +8006,11 @@ this.primereact.icons.eyeslash = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -7894,7 +8177,7 @@ this.primereact.icons.eyeslash = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -8210,6 +8493,11 @@ this.primereact.icons.filter = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -8376,7 +8664,7 @@ this.primereact.icons.filter = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -8690,6 +8978,11 @@ this.primereact.icons.filterslash = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -8856,7 +9149,7 @@ this.primereact.icons.filterslash = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -9172,6 +9465,11 @@ this.primereact.icons.infocircle = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -9338,7 +9636,7 @@ this.primereact.icons.infocircle = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -9718,6 +10016,11 @@ this.primereact.icons.pencil = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -9884,7 +10187,7 @@ this.primereact.icons.pencil = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -10198,6 +10501,11 @@ this.primereact.icons.plus = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -10364,7 +10672,7 @@ this.primereact.icons.plus = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -10678,6 +10986,11 @@ this.primereact.icons.refresh = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -10844,7 +11157,7 @@ this.primereact.icons.refresh = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -11160,6 +11473,11 @@ this.primereact.icons.search = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -11326,7 +11644,7 @@ this.primereact.icons.search = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -11642,6 +11960,11 @@ this.primereact.icons.searchminus = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -11808,7 +12131,7 @@ this.primereact.icons.searchminus = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -12124,6 +12447,11 @@ this.primereact.icons.searchplus = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -12290,7 +12618,7 @@ this.primereact.icons.searchplus = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -12606,6 +12934,11 @@ this.primereact.icons.sortalt = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -12772,7 +13105,7 @@ this.primereact.icons.sortalt = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -13095,6 +13428,11 @@ this.primereact.icons.sortamountdown = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -13261,7 +13599,7 @@ this.primereact.icons.sortamountdown = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -13590,6 +13928,11 @@ this.primereact.icons.sortamountupalt = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -13756,7 +14099,7 @@ this.primereact.icons.sortamountupalt = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -14085,6 +14428,11 @@ this.primereact.icons.spinner = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -14251,7 +14599,7 @@ this.primereact.icons.spinner = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -14565,6 +14913,11 @@ this.primereact.icons.star = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -14731,7 +15084,7 @@ this.primereact.icons.star = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -15045,6 +15398,11 @@ this.primereact.icons.starfill = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -15211,7 +15569,7 @@ this.primereact.icons.starfill = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -15525,6 +15883,11 @@ this.primereact.icons.thlarge = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -15691,7 +16054,7 @@ this.primereact.icons.thlarge = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -16071,6 +16434,11 @@ this.primereact.icons.timescircle = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -16237,7 +16605,7 @@ this.primereact.icons.timescircle = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -16553,6 +16921,11 @@ this.primereact.icons.trash = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -16719,7 +17092,7 @@ this.primereact.icons.trash = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -17035,6 +17408,11 @@ this.primereact.icons.undo = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -17201,7 +17579,7 @@ this.primereact.icons.undo = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -17517,6 +17895,11 @@ this.primereact.icons.upload = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -17683,7 +18066,7 @@ this.primereact.icons.upload = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -17999,6 +18382,11 @@ this.primereact.icons.windowmaximize = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -18165,7 +18553,7 @@ this.primereact.icons.windowmaximize = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -18481,6 +18869,11 @@ this.primereact.icons.windowminimize = (function (exports, React, iconbase) {
       value: function isFunction(obj) {
         return !!(obj && obj.constructor && obj.call && obj.apply);
       }
+    }, {
+      key: "isObject",
+      value: function isObject(obj) {
+        return obj !== null && obj instanceof Object && obj.constructor === Object;
+      }
     }, {
       key: "isLetter",
       value: function isLetter(_char) {
@@ -18647,7 +19040,7 @@ this.primereact.icons.windowminimize = (function (exports, React, iconbase) {
       key: "convertToFlatCase",
       value: function convertToFlatCase(str) {
         // convert snake, kebab, camel and pascal cases to flat case
-        return this.isNotEmpty(str) ? str.replace(/(-|_)/g, '').toLowerCase() : str;
+        return this.isNotEmpty(str) && typeof str === 'string' ? str.replace(/(-|_)/g, '').toLowerCase() : str;
       }
     }, {
       key: "isEmpty",
@@ -18914,7 +19307,8 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
   });
 
   var Tooltip = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = TooltipBase.getProps(inProps);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var props = TooltipBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       visibleState = _React$useState2[0],
@@ -19036,7 +19430,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
           x = _currentMouseEvent$cu.pageX,
           y = _currentMouseEvent$cu.pageY;
         if (props.autoZIndex && !utils.ZIndexUtils.get(elementRef.current)) {
-          utils.ZIndexUtils.set('tooltip', elementRef.current, PrimeReact__default["default"].autoZIndex, props.baseZIndex || PrimeReact__default["default"].zIndex['tooltip']);
+          utils.ZIndexUtils.set('tooltip', elementRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, props.baseZIndex || context && context.zIndex['tooltip'] || PrimeReact__default["default"].zIndex['tooltip']);
         }
         elementRef.current.style.left = '';
         elementRef.current.style.top = '';
@@ -19401,7 +19795,7 @@ this.primereact.tooltip = (function (exports, React, PrimeReact, hooks, portal,
 })({}, React, primereact.api, primereact.hooks, primereact.portal, primereact.utils, primereact.componentbase);
 
 this.primereact = this.primereact || {};
-this.primereact.virtualscroller = (function (exports, React, hooks, utils, spinner) {
+this.primereact.virtualscroller = (function (exports, React, hooks, utils, componentbase, spinner, api) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -19535,7 +19929,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils, spinn
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var VirtualScrollerBase = {
+  var VirtualScrollerBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'VirtualScroller',
       id: null,
@@ -19570,19 +19964,14 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils, spinn
       onScrollIndexChange: null,
       onLazyLoad: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, VirtualScrollerBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, VirtualScrollerBase.defaultProps);
     }
-  };
+  });
 
   function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var VirtualScroller = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = VirtualScrollerBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = VirtualScrollerBase.getProps(inProps, context);
     var prevProps = hooks.usePrevious(inProps) || {};
     var vertical = props.orientation === 'vertical';
     var horizontal = props.orientation === 'horizontal';
@@ -19624,6 +20013,19 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils, spinn
       _React$useState14 = _slicedToArray(_React$useState13, 2),
       loaderArrState = _React$useState14[0],
       setLoaderArrState = _React$useState14[1];
+    var _VirtualScrollerBase$ = VirtualScrollerBase.setMetaData({
+        props: props,
+        state: {
+          first: firstState,
+          last: lastState,
+          page: pageState,
+          numItemsInViewport: numItemsInViewportState,
+          numToleratedItems: numToleratedItemsState,
+          loading: loadingState,
+          loaderArr: loaderArrState
+        }
+      }),
+      ptm = _VirtualScrollerBase$.ptm;
     var elementRef = React__namespace.useRef(null);
     var _contentRef = React__namespace.useRef(null);
     var _spacerRef = React__namespace.useRef(null);
@@ -20082,7 +20484,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils, spinn
         }
       }
     };
-    var onScroll = function onScroll(event) {
+    var _onScroll = function onScroll(event) {
       props.onScroll && props.onScroll(event);
       if (props.delay) {
         if (scrollTimeout.current) {
@@ -20235,13 +20637,13 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils, spinn
     };
     var createLoader = function createLoader() {
       var iconClassName = 'p-virtualscroller-loading-icon';
-      var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, {
-        className: iconClassName,
-        spin: true
-      });
-      var loadingIcon = utils.IconUtils.getJSXIcon(icon, {
+      var loadingIconProps = utils.mergeProps({
         className: iconClassName
-      }, {
+      }, ptm('loadingIcon'));
+      var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
+        spin: true
+      }));
+      var loadingIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), {
         props: props
       });
       if (!props.loaderDisabled && props.showLoader && loadingState) {
@@ -20263,19 +20665,21 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils, spinn
           };
           content = utils.ObjectUtils.getJSXElement(props.loaderIconTemplate, defaultContentOptions);
         }
-        return /*#__PURE__*/React__namespace.createElement("div", {
+        var loaderProps = utils.mergeProps({
           className: className
-        }, content);
+        }, ptm('loader'));
+        return /*#__PURE__*/React__namespace.createElement("div", loaderProps, content);
       }
       return null;
     };
     var createSpacer = function createSpacer() {
       if (props.showSpacer) {
-        return /*#__PURE__*/React__namespace.createElement("div", {
+        var spacerProps = utils.mergeProps({
           ref: _spacerRef,
           style: spacerStyle.current,
-          className: "p-virtualscroller-spacer"
-        });
+          className: 'p-virtualscroller-spacer'
+        }, ptm('spacer'));
+        return /*#__PURE__*/React__namespace.createElement("div", spacerProps);
       }
       return null;
     };
@@ -20295,11 +20699,12 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils, spinn
       var className = utils.classNames('p-virtualscroller-content', {
         'p-virtualscroller-loading': loadingState
       });
-      var content = /*#__PURE__*/React__namespace.createElement("div", {
+      var contentProps = utils.mergeProps({
         ref: _contentRef,
         style: contentStyle.current,
         className: className
-      }, items);
+      }, ptm('content'));
+      var content = /*#__PURE__*/React__namespace.createElement("div", contentProps, items);
       if (props.contentTemplate) {
         var defaultOptions = {
           style: contentStyle.current,
@@ -20345,7 +20750,6 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils, spinn
       });
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, props.children, content);
     } else {
-      var otherProps = VirtualScrollerBase.getOtherProps(props);
       var className = utils.classNames('p-virtualscroller', {
         'p-virtualscroller-inline': props.inline,
         'p-virtualscroller-both p-both-scroll': both,
@@ -20354,14 +20758,16 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils, spinn
       var loader = createLoader();
       var _content = createContent();
       var spacer = createSpacer();
-      return /*#__PURE__*/React__namespace.createElement("div", _extends({
+      var rootProps = utils.mergeProps({
         ref: elementRef,
         className: className,
         tabIndex: props.tabIndex,
-        style: props.style
-      }, otherProps, {
-        onScroll: onScroll
-      }), _content, spacer, loader);
+        style: props.style,
+        onScroll: function onScroll(e) {
+          return _onScroll(e);
+        }
+      }, VirtualScrollerBase.getOtherProps(props), ptm('root'));
+      return /*#__PURE__*/React__namespace.createElement("div", rootProps, _content, spacer, loader);
     }
   }));
   VirtualScroller.displayName = 'VirtualScroller';
@@ -20372,7 +20778,7 @@ this.primereact.virtualscroller = (function (exports, React, hooks, utils, spinn
 
   return exports;
 
-})({}, React, primereact.hooks, primereact.utils, primereact.icons.spinner);
+})({}, React, primereact.hooks, primereact.utils, primereact.componentbase, primereact.icons.spinner, primereact.api);
 
 this.primereact = this.primereact || {};
 this.primereact.terminalservice = (function (exports, utils) {
@@ -20403,7 +20809,7 @@ this.primereact.overlayservice = (function (exports, utils) {
 })({}, primereact.utils);
 
 this.primereact = this.primereact || {};
-this.primereact.checkbox = (function (exports, React, hooks, check, tooltip, utils) {
+this.primereact.checkbox = (function (exports, React, hooks, check, tooltip, utils, componentbase, api) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -20441,6 +20847,47 @@ this.primereact.checkbox = (function (exports, React, hooks, check, tooltip, uti
     return _extends.apply(this, arguments);
   }
 
+  function _typeof(obj) {
+    "@babel/helpers - typeof";
+
+    return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+      return typeof obj;
+    } : function (obj) {
+      return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+    }, _typeof(obj);
+  }
+
+  function _toPrimitive(input, hint) {
+    if (_typeof(input) !== "object" || input === null) return input;
+    var prim = input[Symbol.toPrimitive];
+    if (prim !== undefined) {
+      var res = prim.call(input, hint || "default");
+      if (_typeof(res) !== "object") return res;
+      throw new TypeError("@@toPrimitive must return a primitive value.");
+    }
+    return (hint === "string" ? String : Number)(input);
+  }
+
+  function _toPropertyKey(arg) {
+    var key = _toPrimitive(arg, "string");
+    return _typeof(key) === "symbol" ? key : String(key);
+  }
+
+  function _defineProperty(obj, key, value) {
+    key = _toPropertyKey(key);
+    if (key in obj) {
+      Object.defineProperty(obj, key, {
+        value: value,
+        enumerable: true,
+        configurable: true,
+        writable: true
+      });
+    } else {
+      obj[key] = value;
+    }
+    return obj;
+  }
+
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
@@ -20496,7 +20943,7 @@ this.primereact.checkbox = (function (exports, React, hooks, check, tooltip, uti
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var CheckboxBase = {
+  var CheckboxBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Checkbox',
       autoFocus: false,
@@ -20522,24 +20969,28 @@ this.primereact.checkbox = (function (exports, React, hooks, check, tooltip, uti
       trueValue: true,
       value: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, CheckboxBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, CheckboxBase.defaultProps);
     }
-  };
+  });
 
+  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var Checkbox = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = CheckboxBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = CheckboxBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusedState = _React$useState2[0],
       setFocusedState = _React$useState2[1];
+    var _CheckboxBase$setMeta = CheckboxBase.setMetaData({
+        props: props,
+        state: {
+          focused: focusedState
+        }
+      }),
+      ptm = _CheckboxBase$setMeta.ptm;
     var elementRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
-    var onClick = function onClick(event) {
+    var _onClick = function onClick(event) {
       if (props.disabled || props.readOnly) {
         return;
       }
@@ -20580,16 +21031,16 @@ this.primereact.checkbox = (function (exports, React, hooks, check, tooltip, uti
         event.preventDefault();
       }
     };
-    var onFocus = function onFocus() {
+    var _onFocus = function onFocus() {
       setFocusedState(true);
     };
-    var onBlur = function onBlur() {
+    var _onBlur = function onBlur() {
       setFocusedState(false);
     };
-    var onKeyDown = function onKeyDown(event) {
+    var _onKeyDown = function onKeyDown(event) {
       if (event.code === 'Space' || event.key === ' ') {
         // event.key is for Android support
-        onClick(event);
+        _onClick(event);
       }
     };
     var isChecked = function isChecked() {
@@ -20635,45 +21086,57 @@ this.primereact.checkbox = (function (exports, React, hooks, check, tooltip, uti
       'p-focus': focusedState
     });
     var iconClassName = 'p-checkbox-icon p-c';
-    var icon = checked ? props.icon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
+    var iconProps = utils.mergeProps({
       className: iconClassName
-    }) : null;
-    var checkboxIcon = utils.IconUtils.getJSXIcon(icon, {
-      className: iconClassName
-    }, {
+    }, ptm('icon'));
+    var icon = checked ? props.icon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, iconProps) : null;
+    var checkboxIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
       props: props,
       checked: checked
     });
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
+    var rootProps = utils.mergeProps({
       ref: elementRef,
       id: props.id,
       className: className,
-      style: props.style
-    }, otherProps, {
-      onClick: onClick,
+      style: props.style,
+      onClick: function onClick(e) {
+        return _onClick(e);
+      },
       onContextMenu: props.onContextMenu,
       onMouseDown: props.onMouseDown
-    }), /*#__PURE__*/React__namespace.createElement("div", {
-      className: "p-hidden-accessible"
-    }, /*#__PURE__*/React__namespace.createElement("input", _extends({
-      ref: inputRef,
-      type: "checkbox",
+    }, otherProps, ptm('root'));
+    var hiddenInputWrapperProps = utils.mergeProps({
+      className: 'p-hidden-accessible'
+    }, ptm('hiddenInputWrapper'));
+    var hiddenInputProps = utils.mergeProps(_objectSpread({
       id: props.inputId,
+      ref: inputRef,
+      type: 'checkbox',
       name: props.name,
       tabIndex: props.tabIndex,
       defaultChecked: checked,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      onKeyDown: onKeyDown,
+      onFocus: function onFocus(e) {
+        return _onFocus();
+      },
+      onBlur: function onBlur(e) {
+        return _onBlur();
+      },
+      onKeyDown: function onKeyDown(e) {
+        return _onKeyDown(e);
+      },
       disabled: props.disabled,
       readOnly: props.readOnly,
       required: props.required
-    }, ariaProps))), /*#__PURE__*/React__namespace.createElement("div", {
+    }, ariaProps), ptm('hiddenInput'));
+    var inputProps = utils.mergeProps({
       className: boxClass
-    }, checkboxIcon)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    }, ptm('input'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, /*#__PURE__*/React__namespace.createElement("div", hiddenInputWrapperProps, /*#__PURE__*/React__namespace.createElement("input", hiddenInputProps)), /*#__PURE__*/React__namespace.createElement("div", inputProps, checkboxIcon)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
-    }, props.tooltipOptions)));
+    }, props.tooltipOptions, {
+      pt: ptm('tooltip')
+    })));
   }));
   Checkbox.displayName = 'Checkbox';
 
@@ -20683,10 +21146,10 @@ this.primereact.checkbox = (function (exports, React, hooks, check, tooltip, uti
 
   return exports;
 
-})({}, React, primereact.hooks, primereact.icons.check, primereact.tooltip, primereact.utils);
+})({}, React, primereact.hooks, primereact.icons.check, primereact.tooltip, primereact.utils, primereact.componentbase, primereact.api);
 
 this.primereact = this.primereact || {};
-this.primereact.button = (function (exports, React, spinner, ripple, tooltip, utils, componentbase) {
+this.primereact.button = (function (exports, React, spinner, ripple, tooltip, utils, componentbase, api) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -20795,7 +21258,8 @@ this.primereact.button = (function (exports, React, spinner, ripple, tooltip, ut
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var Button = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
     var _classNames2;
-    var props = ButtonBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = ButtonBase.getProps(inProps, context);
     var _ButtonBase$setMetaDa = ButtonBase.setMetaData({
         props: props
       }),
@@ -20882,7 +21346,9 @@ this.primereact.button = (function (exports, React, spinner, ripple, tooltip, ut
     return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("button", rootProps, icon, label, props.children, badge, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null)), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
-    }, props.tooltipOptions)));
+    }, props.tooltipOptions, {
+      pt: ptm('tooltip')
+    })));
   }));
   Button.displayName = 'Button';
 
@@ -20892,10 +21358,10 @@ this.primereact.button = (function (exports, React, spinner, ripple, tooltip, ut
 
   return exports;
 
-})({}, React, primereact.icons.spinner, primereact.ripple, primereact.tooltip, primereact.utils, primereact.componentbase);
+})({}, React, primereact.icons.spinner, primereact.ripple, primereact.tooltip, primereact.utils, primereact.componentbase, primereact.api);
 
 this.primereact = this.primereact || {};
-this.primereact.inputtext = (function (exports, React, keyfilter, tooltip, utils) {
+this.primereact.inputtext = (function (exports, React, keyfilter, tooltip, utils, componentbase, api) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -20933,28 +21399,28 @@ this.primereact.inputtext = (function (exports, React, keyfilter, tooltip, utils
     return _extends.apply(this, arguments);
   }
 
-  var InputTextBase = {
+  var InputTextBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'InputText',
       keyfilter: null,
       validateOnly: false,
       tooltip: null,
       tooltipOptions: null,
+      onBeforeInput: null,
       onInput: null,
       onKeyDown: null,
       onPaste: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, InputTextBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, InputTextBase.defaultProps);
     }
-  };
+  });
 
   var InputText = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = InputTextBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = InputTextBase.getProps(inProps, context);
+    var _InputTextBase$setMet = InputTextBase.setMetaData({
+        props: props
+      }),
+      ptm = _InputTextBase$setMet.ptm;
     var elementRef = React__namespace.useRef(ref);
     var onKeyDown = function onKeyDown(event) {
       props.onKeyDown && props.onKeyDown(event);
@@ -20962,6 +21428,12 @@ this.primereact.inputtext = (function (exports, React, keyfilter, tooltip, utils
         keyfilter.KeyFilter.onKeyPress(event, props.keyfilter, props.validateOnly);
       }
     };
+    var onBeforeInput = function onBeforeInput(event) {
+      props.onBeforeInput && props.onBeforeInput(event);
+      if (props.keyfilter) {
+        keyfilter.KeyFilter.onBeforeInput(event, props.keyfilter, props.validateOnly);
+      }
+    };
     var onInput = function onInput(event) {
       var target = event.target;
       var validatePattern = true;
@@ -20986,22 +21458,24 @@ this.primereact.inputtext = (function (exports, React, keyfilter, tooltip, utils
       return utils.ObjectUtils.isNotEmpty(props.value) || utils.ObjectUtils.isNotEmpty(props.defaultValue);
     }, [props.value, props.defaultValue]);
     var hasTooltip = utils.ObjectUtils.isNotEmpty(props.tooltip);
-    var otherProps = InputTextBase.getOtherProps(props);
     var className = utils.classNames('p-inputtext p-component', {
       'p-disabled': props.disabled,
       'p-filled': isFilled
     }, props.className);
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("input", _extends({
-      ref: elementRef
-    }, otherProps, {
+    var rootProps = utils.mergeProps({
+      ref: elementRef,
       className: className,
+      onBeforeInput: onBeforeInput,
       onInput: onInput,
       onKeyDown: onKeyDown,
       onPaste: onPaste
-    })), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    }, InputTextBase.getOtherProps(props), ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("input", rootProps), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
-    }, props.tooltipOptions)));
+    }, props.tooltipOptions, {
+      pt: ptm('tooltip')
+    })));
   }));
   InputText.displayName = 'InputText';
 
@@ -21011,12 +21485,14 @@ this.primereact.inputtext = (function (exports, React, keyfilter, tooltip, utils
 
   return exports;
 
-})({}, React, primereact.keyfilter, primereact.tooltip, primereact.utils);
+})({}, React, primereact.keyfilter, primereact.tooltip, primereact.utils, primereact.componentbase, primereact.api);
 
 this.primereact = this.primereact || {};
-this.primereact.inputnumber = (function (exports, React, hooks, angledown, angleup, inputtext, ripple, tooltip, utils) {
+this.primereact.inputnumber = (function (exports, React, PrimeReact, hooks, angledown, angleup, inputtext, ripple, tooltip, utils, componentbase) {
   'use strict';
 
+  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
   function _interopNamespace(e) {
     if (e && e.__esModule) return e;
     var n = Object.create(null);
@@ -21036,6 +21512,7 @@ this.primereact.inputnumber = (function (exports, React, hooks, angledown, angle
   }
 
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
+  var PrimeReact__default = /*#__PURE__*/_interopDefaultLegacy(PrimeReact);
 
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -21164,7 +21641,7 @@ this.primereact.inputnumber = (function (exports, React, hooks, angledown, angle
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
   }
 
-  var InputNumberBase = {
+  var InputNumberBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'InputNumber',
       allowEmpty: true,
@@ -21217,23 +21694,25 @@ this.primereact.inputnumber = (function (exports, React, hooks, angledown, angle
       useGrouping: true,
       value: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, InputNumberBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, InputNumberBase.defaultProps);
     }
-  };
+  });
 
   function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var InputNumber = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = InputNumberBase.getProps(inProps);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var props = InputNumberBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusedState = _React$useState2[0],
       setFocusedState = _React$useState2[1];
+    var _InputNumberBase$setM = InputNumberBase.setMetaData({
+        props: props,
+        state: {
+          focused: focusedState
+        }
+      }),
+      ptm = _InputNumberBase$setM.ptm;
     var elementRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(null);
     var timer = React__namespace.useRef(null);
@@ -21251,6 +21730,7 @@ this.primereact.inputnumber = (function (exports, React, hooks, angledown, angle
     var _suffix = React__namespace.useRef(null);
     var _prefix = React__namespace.useRef(null);
     var _index = React__namespace.useRef(null);
+    var _locale = props.locale || context && context.locale || PrimeReact__default["default"].locale;
     var stacked = props.showButtons && props.buttonLayout === 'stacked';
     var horizontal = props.showButtons && props.buttonLayout === 'horizontal';
     var vertical = props.showButtons && props.buttonLayout === 'vertical';
@@ -21267,8 +21747,8 @@ this.primereact.inputnumber = (function (exports, React, hooks, angledown, angle
       };
     };
     var constructParser = function constructParser() {
-      numberFormat.current = new Intl.NumberFormat(props.locale, getOptions());
-      var numerals = _toConsumableArray(new Intl.NumberFormat(props.locale, {
+      numberFormat.current = new Intl.NumberFormat(_locale, getOptions());
+      var numerals = _toConsumableArray(new Intl.NumberFormat(_locale, {
         useGrouping: false
       }).format(9876543210)).reverse();
       var index = new Map(numerals.map(function (d, i) {
@@ -21289,27 +21769,27 @@ this.primereact.inputnumber = (function (exports, React, hooks, angledown, angle
       return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&');
     };
     var getDecimalExpression = function getDecimalExpression() {
-      var formatter = new Intl.NumberFormat(props.locale, _objectSpread(_objectSpread({}, getOptions()), {}, {
+      var formatter = new Intl.NumberFormat(_locale, _objectSpread(_objectSpread({}, getOptions()), {}, {
         useGrouping: false
       }));
       return new RegExp("[".concat(formatter.format(1.1).replace(_currency.current, '').trim().replace(_numeral.current, ''), "]"), 'g');
     };
     var getGroupingExpression = function getGroupingExpression() {
-      var formatter = new Intl.NumberFormat(props.locale, {
+      var formatter = new Intl.NumberFormat(_locale, {
         useGrouping: true
       });
       groupChar.current = formatter.format(1000000).trim().replace(_numeral.current, '').charAt(0);
       return new RegExp("[".concat(groupChar.current, "]"), 'g');
     };
     var getMinusSignExpression = function getMinusSignExpression() {
-      var formatter = new Intl.NumberFormat(props.locale, {
+      var formatter = new Intl.NumberFormat(_locale, {
         useGrouping: false
       });
       return new RegExp("[".concat(formatter.format(-1).trim().replace(_numeral.current, ''), "]"), 'g');
     };
     var getCurrencyExpression = function getCurrencyExpression() {
       if (props.currency) {
-        var formatter = new Intl.NumberFormat(props.locale, {
+        var formatter = new Intl.NumberFormat(_locale, {
           style: 'currency',
           currency: props.currency,
           currencyDisplay: props.currencyDisplay,
@@ -21324,7 +21804,7 @@ this.primereact.inputnumber = (function (exports, React, hooks, angledown, angle
       if (props.prefix) {
         prefixChar.current = props.prefix;
       } else {
-        var formatter = new Intl.NumberFormat(props.locale, {
+        var formatter = new Intl.NumberFormat(_locale, {
           style: props.mode,
           currency: props.currency,
           currencyDisplay: props.currencyDisplay
@@ -21337,7 +21817,7 @@ this.primereact.inputnumber = (function (exports, React, hooks, angledown, angle
       if (props.suffix) {
         suffixChar.current = props.suffix;
       } else {
-        var formatter = new Intl.NumberFormat(props.locale, {
+        var formatter = new Intl.NumberFormat(_locale, {
           style: props.mode,
           currency: props.currency,
           currencyDisplay: props.currencyDisplay,
@@ -21355,7 +21835,7 @@ this.primereact.inputnumber = (function (exports, React, hooks, angledown, angle
           return value;
         }
         if (props.format) {
-          var formatter = new Intl.NumberFormat(props.locale, getOptions());
+          var formatter = new Intl.NumberFormat(_locale, getOptions());
           var _formattedValue = formatter.format(value);
           if (props.prefix) {
             _formattedValue = props.prefix + _formattedValue;
@@ -22069,65 +22549,76 @@ this.primereact.inputnumber = (function (exports, React, hooks, angledown, angle
         "aria-valuemin": props.min,
         "aria-valuemax": props.max,
         "aria-valuenow": props.value
-      }, ariaProps, dataProps));
+      }, ariaProps, dataProps, {
+        pt: ptm('input')
+      }));
     };
     var createUpButton = function createUpButton() {
       var className = utils.classNames('p-inputnumber-button p-inputnumber-button-up p-button p-button-icon-only p-component', {
         'p-disabled': props.disabled
       }, props.incrementButtonClassName);
       var iconsClassName = 'p-button-icon';
-      var icon = props.incrementButtonIcon || /*#__PURE__*/React__namespace.createElement(angleup.AngleUpIcon, {
+      var incrementIconProps = utils.mergeProps({
         className: iconsClassName
-      });
-      var upButton = utils.IconUtils.getJSXIcon(icon, {
-        className: iconsClassName
-      }, {
+      }, ptm('incrementIconProps'));
+      var icon = props.incrementButtonIcon || /*#__PURE__*/React__namespace.createElement(angleup.AngleUpIcon, incrementIconProps);
+      var upButton = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, incrementIconProps), {
         props: props
       });
-      return /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
+      var incrementButtonProps = utils.mergeProps({
+        type: 'button',
         className: className,
         onPointerLeave: onUpButtonMouseLeave,
-        onPointerDown: onUpButtonMouseDown,
+        onPointerDown: function onPointerDown(e) {
+          return onUpButtonMouseDown(e);
+        },
         onPointerUp: onUpButtonMouseUp,
-        onKeyDown: onUpButtonKeyDown,
+        onKeyDown: function onKeyDown(e) {
+          return onUpButtonKeyDown(e);
+        },
         onKeyUp: onUpButtonKeyUp,
         disabled: props.disabled,
         tabIndex: -1
-      }, upButton, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      }, ptm('incrementButton'));
+      return /*#__PURE__*/React__namespace.createElement("button", incrementButtonProps, upButton, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     };
     var createDownButton = function createDownButton() {
       var className = utils.classNames('p-inputnumber-button p-inputnumber-button-down p-button p-button-icon-only p-component', {
         'p-disabled': props.disabled
       }, props.decrementButtonClassName);
       var iconsClassName = 'p-button-icon';
-      var icon = props.decrementButtonIcon || /*#__PURE__*/React__namespace.createElement(angledown.AngleDownIcon, {
-        className: iconsClassName
-      });
-      var downButton = utils.IconUtils.getJSXIcon(icon, {
+      var decrementIconProps = utils.mergeProps({
         className: iconsClassName
-      }, {
+      }, ptm('decrementIconProps'));
+      var icon = props.decrementButtonIcon || /*#__PURE__*/React__namespace.createElement(angledown.AngleDownIcon, decrementIconProps);
+      var downButton = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, decrementIconProps), {
         props: props
       });
-      return /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
+      var decrementButtonProps = utils.mergeProps({
+        type: 'button',
         className: className,
         onPointerLeave: onDownButtonMouseLeave,
-        onPointerDown: onDownButtonMouseDown,
+        onPointerDown: function onPointerDown(e) {
+          return onDownButtonMouseDown(e);
+        },
         onPointerUp: onDownButtonMouseUp,
-        onKeyDown: onDownButtonKeyDown,
+        onKeyDown: function onKeyDown(e) {
+          return onDownButtonKeyDown(e);
+        },
         onKeyUp: onDownButtonKeyUp,
         disabled: props.disabled,
         tabIndex: -1
-      }, downButton, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      }, ptm('decrementButton'));
+      return /*#__PURE__*/React__namespace.createElement("button", decrementButtonProps, downButton, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     };
     var createButtonGroup = function createButtonGroup() {
       var upButton = props.showButtons && createUpButton();
       var downButton = props.showButtons && createDownButton();
+      var buttonGroupProps = utils.mergeProps({
+        className: 'p-inputnumber-button-group'
+      }, ptm('buttonGroup'));
       if (stacked) {
-        return /*#__PURE__*/React__namespace.createElement("span", {
-          className: "p-inputnumber-button-group"
-        }, upButton, downButton);
+        return /*#__PURE__*/React__namespace.createElement("span", buttonGroupProps, upButton, downButton);
       }
       return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, upButton, downButton);
     };
@@ -22144,15 +22635,18 @@ this.primereact.inputnumber = (function (exports, React, hooks, angledown, angle
     }, props.className);
     var inputElement = createInputElement();
     var buttonGroup = createButtonGroup();
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("span", _extends({
-      ref: elementRef,
+    var rootProps = utils.mergeProps({
       id: props.id,
+      ref: elementRef,
       className: className,
       style: props.style
-    }, otherProps), inputElement, buttonGroup), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
+    }, otherProps, ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("span", rootProps, inputElement, buttonGroup), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
-    }, props.tooltipOptions)));
+    }, props.tooltipOptions, {
+      pt: ptm('tooltip')
+    })));
   }));
   InputNumber.displayName = 'InputNumber';
 
@@ -22162,7 +22656,7 @@ this.primereact.inputnumber = (function (exports, React, hooks, angledown, angle
 
   return exports;
 
-})({}, React, primereact.hooks, primereact.icons.angledown, primereact.icons.angleup, primereact.inputtext, primereact.ripple, primereact.tooltip, primereact.utils);
+})({}, React, primereact.api, primereact.hooks, primereact.icons.angledown, primereact.icons.angleup, primereact.inputtext, primereact.ripple, primereact.tooltip, primereact.utils, primereact.componentbase);
 
 this.primereact = this.primereact || {};
 this.primereact.messages = (function (exports, React, reactTransitionGroup, csstransition, componentbase, api, hooks, check, exclamationtriangle, infocircle, times, timescircle, ripple, utils) {
@@ -22437,7 +22931,8 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
 
   var messageIdx = 0;
   var Messages = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = MessagesBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = MessagesBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState([]),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       messagesState = _React$useState2[0],
@@ -22556,7 +23051,7 @@ this.primereact.messages = (function (exports, React, reactTransitionGroup, csst
 })({}, React, ReactTransitionGroup, primereact.csstransition, primereact.componentbase, primereact.api, primereact.hooks, primereact.icons.check, primereact.icons.exclamationtriangle, primereact.icons.infocircle, primereact.icons.times, primereact.icons.timescircle, primereact.ripple, primereact.utils);
 
 this.primereact = this.primereact || {};
-this.primereact.progressbar = (function (exports, React, utils, componentbase) {
+this.primereact.progressbar = (function (exports, React, utils, componentbase, api) {
     'use strict';
 
     function _interopNamespace(e) {
@@ -22596,7 +23091,8 @@ this.primereact.progressbar = (function (exports, React, utils, componentbase) {
     });
 
     var ProgressBar = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-      var props = ProgressBarBase.getProps(inProps);
+      var context = React__namespace.useContext(api.PrimeReactContext);
+      var props = ProgressBarBase.getProps(inProps, context);
       var _ProgressBarBase$setM = ProgressBarBase.setMetaData({
           props: props
         }),
@@ -22673,10 +23169,10 @@ this.primereact.progressbar = (function (exports, React, utils, componentbase) {
 
     return exports;
 
-})({}, React, primereact.utils, primereact.componentbase);
+})({}, React, primereact.utils, primereact.componentbase, primereact.api);
 
 this.primereact = this.primereact || {};
-this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevrondown, times, overlayservice, tooltip, utils, csstransition, search, portal, virtualscroller, ripple) {
+this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevrondown, times, overlayservice, tooltip, utils, componentbase, csstransition, search, portal, virtualscroller, ripple) {
   'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -22813,7 +23309,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$1(arr, i) || _nonIterableRest();
   }
 
-  var DropdownBase = {
+  var DropdownBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Dropdown',
       appendTo: null,
@@ -22878,17 +23374,19 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       value: null,
       valueTemplate: null,
       virtualScrollerOptions: null
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, DropdownBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, DropdownBase.defaultProps);
     }
-  };
+  });
 
   var DropdownItem = /*#__PURE__*/React__namespace.memo(function (props) {
-    var onClick = function onClick(event) {
+    var getPTOptions = function getPTOptions(key) {
+      return props.ptm(key, {
+        context: {
+          selected: props.selected,
+          disabled: props.disabled
+        }
+      });
+    };
+    var _onClick = function onClick(event) {
       if (props.onClick) {
         props.onClick({
           originalEvent: event,
@@ -22902,22 +23400,27 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       'p-dropdown-item-empty': !props.label || props.label.length === 0
     }, props.option && props.option.className);
     var content = props.template ? utils.ObjectUtils.getJSXElement(props.template, props.option) : props.label;
-    return /*#__PURE__*/React__namespace.createElement("li", {
+    var itemProps = utils.mergeProps({
       className: className,
       style: props.style,
-      onClick: onClick,
-      "aria-label": props.label,
-      key: props.label,
-      role: "option",
-      "aria-selected": props.selected
-    }, content, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      onClick: function onClick(e) {
+        return _onClick(e);
+      },
+      'aria-label': props.label,
+      role: 'option',
+      'aria-selected': props.selected,
+      key: props.label
+    }, getPTOptions('item'));
+    return /*#__PURE__*/React__namespace.createElement("li", itemProps, content, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
   });
   DropdownItem.displayName = 'DropdownItem';
 
   function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
   function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var DropdownPanel = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (props, ref) {
-    var virtualScrollerRef = React__namespace.useRef(null);
+    var ptm = props.ptm;
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    React__namespace.useRef(null);
     var filterInputRef = React__namespace.useRef(null);
     var isEmptyFilter = !(props.visibleOptions && props.visibleOptions.length) && props.hasFilter;
     var filterOptions = {
@@ -22930,11 +23433,11 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
     };
     var onEnter = function onEnter() {
       props.onEnter(function () {
-        if (virtualScrollerRef.current) {
+        if (props.virtualScrollerRef.current) {
           var selectedIndex = props.getSelectedOptionIndex();
           if (selectedIndex !== -1) {
             setTimeout(function () {
-              return virtualScrollerRef.current.scrollToIndex(selectedIndex);
+              return props.virtualScrollerRef.current.scrollToIndex(selectedIndex);
             }, 0);
           }
         }
@@ -22948,15 +23451,16 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       });
     };
     var onFilterInputChange = function onFilterInputChange(event) {
-      virtualScrollerRef.current && virtualScrollerRef.current.scrollToIndex(0);
+      props.virtualScrollerRef.current && props.virtualScrollerRef.current.scrollToIndex(0);
       props.onFilterInputChange && props.onFilterInputChange(event);
     };
     var createFooter = function createFooter() {
       if (props.panelFooterTemplate) {
         var content = utils.ObjectUtils.getJSXElement(props.panelFooterTemplate, props, props.onOverlayHide);
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-dropdown-footer"
-        }, content);
+        var footerProps = utils.mergeProps({
+          className: 'p-dropdown-footer'
+        }, ptm('footer'));
+        return /*#__PURE__*/React__namespace.createElement("div", footerProps, content);
       }
       return null;
     };
@@ -22974,15 +23478,17 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
           template: props.itemTemplate,
           selected: props.isSelected(option),
           disabled: disabled,
-          onClick: props.onOptionClick
+          onClick: props.onOptionClick,
+          ptm: ptm
         });
       });
     };
     var createEmptyMessage = function createEmptyMessage(emptyMessage, isFilter) {
       var message = utils.ObjectUtils.getJSXElement(emptyMessage, props) || PrimeReact.localeOption(isFilter ? 'emptyFilterMessage' : 'emptyMessage');
-      return /*#__PURE__*/React__namespace.createElement("li", {
-        className: "p-dropdown-empty-message"
-      }, message);
+      var emptyMessageProps = utils.mergeProps({
+        className: 'p-dropdown-empty-message'
+      }, ptm('emptyMessage'));
+      return /*#__PURE__*/React__namespace.createElement("li", emptyMessageProps, message);
     };
     var createItem = function createItem(option, index) {
       var scrollerOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
@@ -22993,12 +23499,13 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
         var groupContent = props.optionGroupTemplate ? utils.ObjectUtils.getJSXElement(props.optionGroupTemplate, option, index) : props.getOptionGroupLabel(option);
         var groupChildrenContent = createGroupChildren(option, style);
         var key = index + '_' + props.getOptionGroupRenderKey(option);
+        var itemGroupProps = utils.mergeProps({
+          className: 'p-dropdown-item-group',
+          style: style
+        }, ptm('itemGroup'));
         return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, {
           key: key
-        }, /*#__PURE__*/React__namespace.createElement("li", {
-          className: "p-dropdown-item-group",
-          style: style
-        }, groupContent), groupChildrenContent);
+        }, /*#__PURE__*/React__namespace.createElement("li", itemGroupProps, groupContent), groupChildrenContent);
       } else {
         var optionLabel = props.getOptionLabel(option);
         var optionKey = index + '_' + props.getOptionRenderKey(option);
@@ -23011,7 +23518,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
           template: props.itemTemplate,
           selected: props.isSelected(option),
           disabled: disabled,
-          onClick: props.onOptionClick
+          onClick: props.onOptionClick,
+          ptm: ptm
         });
       }
     };
@@ -23026,7 +23534,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
     var createFilterClearIcon = function createFilterClearIcon() {
       if (props.showFilterClear && props.filterValue) {
         var ariaLabel = PrimeReact.localeOption('clear');
-        var iconProps = {
+        var clearIconProps = utils.mergeProps({
           className: 'p-dropdown-filter-clear-icon',
           'aria-label': ariaLabel,
           onClick: function onClick() {
@@ -23034,9 +23542,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
               return utils.DomHandler.focus(filterInputRef.current);
             });
           }
-        };
-        var icon = props.filterClearIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, iconProps);
-        var filterClearIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, iconProps), {
+        }, ptm('clearIcon'));
+        var icon = props.filterClearIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, clearIconProps);
+        var filterClearIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, clearIconProps), {
           props: props
         });
         return filterClearIcon;
@@ -23050,26 +23558,29 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
           'p-dropdown-clearable-filter': !!clearIcon
         });
         var iconClassName = 'p-dropdown-filter-icon';
-        var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, {
-          className: iconClassName
-        });
-        var filterIcon = utils.IconUtils.getJSXIcon(icon, {
+        var filterIconProps = utils.mergeProps({
           className: iconClassName
-        }, {
+        }, ptm('filterIcon'));
+        var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, filterIconProps);
+        var filterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, filterIconProps), {
           props: props
         });
-        var content = /*#__PURE__*/React__namespace.createElement("div", {
+        var filterContainerProps = utils.mergeProps({
           className: containerClassName
-        }, /*#__PURE__*/React__namespace.createElement("input", {
+        }, ptm('filterContainer'));
+        var filterInputProps = utils.mergeProps({
           ref: filterInputRef,
-          type: "text",
-          autoComplete: "off",
-          className: "p-dropdown-filter p-inputtext p-component",
+          type: 'text',
+          autoComplete: 'off',
+          className: 'p-dropdown-filter p-inputtext p-component',
           placeholder: props.filterPlaceholder,
           onKeyDown: props.onFilterInputKeyDown,
-          onChange: onFilterInputChange,
+          onChange: function onChange(e) {
+            return onFilterInputChange(e);
+          },
           value: props.filterValue
-        }), clearIcon, filterIcon);
+        }, ptm('filterInput'));
+        var content = /*#__PURE__*/React__namespace.createElement("div", filterContainerProps, /*#__PURE__*/React__namespace.createElement("input", filterInputProps), clearIcon, filterIcon);
         if (props.filterTemplate) {
           var defaultContentOptions = {
             className: containerClassName,
@@ -23083,9 +23594,10 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
           };
           content = utils.ObjectUtils.getJSXElement(props.filterTemplate, defaultContentOptions);
         }
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-dropdown-header"
-        }, content);
+        var headerProps = utils.mergeProps({
+          className: 'p-dropdown-header'
+        }, ptm('header'));
+        return /*#__PURE__*/React__namespace.createElement("div", headerProps, content);
       }
       return null;
     };
@@ -23110,38 +23622,49 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
             var className = utils.classNames('p-dropdown-items', options.className);
             var emptyMessage = props.hasFilter ? props.emptyFilterMessage : props.emptyMessage;
             var content = isEmptyFilter ? createEmptyMessage(emptyMessage) : options.children;
-            return /*#__PURE__*/React__namespace.createElement("ul", {
+            var listProps = utils.mergeProps({
               ref: options.contentRef,
               style: options.style,
               className: className,
-              role: "listbox"
-            }, content);
+              role: 'listbox'
+            }, ptm('list'));
+            return /*#__PURE__*/React__namespace.createElement("ul", listProps, content);
           }
         });
         return /*#__PURE__*/React__namespace.createElement(virtualscroller.VirtualScroller, _extends({
-          ref: virtualScrollerRef
-        }, virtualScrollerProps));
+          ref: props.virtualScrollerRef
+        }, virtualScrollerProps, {
+          pt: ptm('virtualScroller')
+        }));
       } else {
         var items = createItems();
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-dropdown-items-wrapper",
+        var wrapperProps = utils.mergeProps({
+          className: 'p-dropdown-items-wrapper',
           style: {
             maxHeight: props.scrollHeight || 'auto'
           }
-        }, /*#__PURE__*/React__namespace.createElement("ul", {
-          className: "p-dropdown-items",
-          role: "listbox"
-        }, items));
+        }, ptm('wrapper'));
+        var listProps = utils.mergeProps({
+          className: 'p-dropdown-items',
+          role: 'listbox'
+        }, ptm('list'));
+        return /*#__PURE__*/React__namespace.createElement("div", wrapperProps, /*#__PURE__*/React__namespace.createElement("ul", listProps, items));
       }
     };
     var createElement = function createElement() {
       var className = utils.classNames('p-dropdown-panel p-component', props.panelClassName, {
-        'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
-        'p-ripple-disabled': PrimeReact__default["default"].ripple === false
+        'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact__default["default"].inputStyle === 'filled',
+        'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
       });
       var filter = createFilter();
       var content = createContent();
       var footer = createFooter();
+      var panelProps = utils.mergeProps({
+        ref: ref,
+        className: className,
+        style: props.panelStyle,
+        onClick: props.onClick
+      }, ptm('panel'));
       return /*#__PURE__*/React__namespace.createElement(csstransition.CSSTransition, {
         nodeRef: ref,
         classNames: "p-connected-overlay",
@@ -23157,12 +23680,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
         onEntered: onEntered,
         onExit: props.onExit,
         onExited: props.onExited
-      }, /*#__PURE__*/React__namespace.createElement("div", {
-        ref: ref,
-        className: className,
-        style: props.panelStyle,
-        onClick: props.onClick
-      }, filter, content, footer));
+      }, /*#__PURE__*/React__namespace.createElement("div", panelProps, filter, content, footer));
     };
     var element = createElement();
     return /*#__PURE__*/React__namespace.createElement(portal.Portal, {
@@ -23178,7 +23696,8 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
   function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
   function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
   var Dropdown = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = DropdownBase.getProps(inProps);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var props = DropdownBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       filterState = _React$useState2[0],
@@ -23191,16 +23710,26 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       _React$useState6 = _slicedToArray(_React$useState5, 2),
       overlayVisibleState = _React$useState6[0],
       setOverlayVisibleState = _React$useState6[1];
+    var _DropdownBase$setMeta = DropdownBase.setMetaData({
+        props: props,
+        state: {
+          filter: filterState,
+          focused: focusedState,
+          overlayVisible: overlayVisibleState
+        }
+      }),
+      ptm = _DropdownBase$setMeta.ptm;
     var elementRef = React__namespace.useRef(null);
     var overlayRef = React__namespace.useRef(null);
     var inputRef = React__namespace.useRef(props.inputRef);
     var focusInputRef = React__namespace.useRef(props.focusInputRef);
+    var virtualScrollerRef = React__namespace.useRef(null);
     var searchTimeout = React__namespace.useRef(null);
     var searchValue = React__namespace.useRef(null);
     var currentSearchChar = React__namespace.useRef(null);
     var isLazy = props.virtualScrollerOptions && props.virtualScrollerOptions.lazy;
     var hasFilter = utils.ObjectUtils.isNotEmpty(filterState);
-    var appendTo = props.appendTo || PrimeReact__default["default"].appendTo;
+    var appendTo = props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo;
     var _useOverlayListener = hooks.useOverlayListener({
         target: elementRef,
         overlay: overlayRef,
@@ -23248,7 +23777,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
     var isClearClicked = function isClearClicked(event) {
       return utils.DomHandler.hasClass(event.target, 'p-dropdown-clear-icon') || utils.DomHandler.hasClass(event.target, 'p-dropdown-filter-clear-icon');
     };
-    var onClick = function onClick(event) {
+    var _onClick = function onClick(event) {
       if (props.disabled) {
         return;
       }
@@ -23624,7 +24153,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       setOverlayVisibleState(false);
     };
     var onOverlayEnter = function onOverlayEnter(callback) {
-      utils.ZIndexUtils.set('overlay', overlayRef.current, PrimeReact__default["default"].autoZIndex, PrimeReact__default["default"].zIndex['overlay']);
+      utils.ZIndexUtils.set('overlay', overlayRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, context && context.zIndex['overlay'] || PrimeReact__default["default"].zIndex['overlay']);
       alignOverlay();
       callback && callback();
     };
@@ -23644,7 +24173,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       props.onHide && props.onHide();
     };
     var alignOverlay = function alignOverlay() {
-      utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || PrimeReact__default["default"].appendTo);
+      utils.DomHandler.alignOverlay(overlayRef.current, inputRef.current.parentElement, props.appendTo || context && context.appendTo || PrimeReact__default["default"].appendTo);
     };
     var scrollInView = function scrollInView() {
       var highlightItem = utils.DomHandler.findSingle(overlayRef.current, 'li.p-highlight');
@@ -23714,6 +24243,9 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
         },
         getFocusInput: function getFocusInput() {
           return focusInputRef.current;
+        },
+        getVirtualScroller: function getVirtualScroller() {
+          return virtualScrollerRef.current;
         }
       };
     });
@@ -23762,73 +24294,80 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
           label: getOptionLabel(selectedOption)
         };
       }
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-hidden-accessible p-dropdown-hidden-select"
-      }, /*#__PURE__*/React__namespace.createElement("select", {
+      var hiddenSelectedMessageProps = utils.mergeProps({
+        className: 'p-hidden-accessible p-dropdown-hidden-select'
+      }, ptm('hiddenSelectedMessage'));
+      var selectProps = utils.mergeProps({
         ref: inputRef,
         required: props.required,
         defaultValue: option.value,
         name: props.name,
         tabIndex: -1,
-        "aria-hidden": "true"
-      }, /*#__PURE__*/React__namespace.createElement("option", {
+        'aria-hidden': 'true'
+      }, ptm('select'));
+      var optionProps = utils.mergeProps({
         value: option.value
-      }, option.label)));
+      }, ptm('option'));
+      return /*#__PURE__*/React__namespace.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React__namespace.createElement("select", selectProps, /*#__PURE__*/React__namespace.createElement("option", optionProps, option.label)));
     };
     var createKeyboardHelper = function createKeyboardHelper() {
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-hidden-accessible"
-      }, /*#__PURE__*/React__namespace.createElement("input", _extends({
+      var hiddenSelectedMessageProps = utils.mergeProps({
+        className: 'p-hidden-accessible'
+      }, ptm('hiddenSelectedMessage'));
+      var inputProps = utils.mergeProps(_objectSpread({
         ref: focusInputRef,
         id: props.inputId,
-        type: "text",
+        type: 'text',
         readOnly: true,
-        "aria-haspopup": "listbox",
+        'aria-haspopup': 'listbox',
         onFocus: onInputFocus,
         onBlur: onInputBlur,
         onKeyDown: onInputKeyDown,
         disabled: props.disabled,
         tabIndex: props.tabIndex
-      }, ariaProps)));
+      }, ariaProps), ptm('input'));
+      return /*#__PURE__*/React__namespace.createElement("div", hiddenSelectedMessageProps, /*#__PURE__*/React__namespace.createElement("input", inputProps));
     };
     var createLabel = function createLabel() {
       var label = utils.ObjectUtils.isNotEmpty(selectedOption) ? getOptionLabel(selectedOption) : null;
       if (props.editable) {
         var value = label || props.value || '';
-        return /*#__PURE__*/React__namespace.createElement("input", _extends({
+        var inputProps = utils.mergeProps(_objectSpread({
           ref: inputRef,
-          type: "text",
+          type: 'text',
           defaultValue: value,
-          className: "p-dropdown-label p-inputtext",
+          className: 'p-dropdown-label p-inputtext',
           disabled: props.disabled,
           placeholder: props.placeholder,
           maxLength: props.maxLength,
           onInput: onEditableInputChange,
           onFocus: onEditableInputFocus,
           onBlur: onInputBlur,
-          "aria-haspopup": "listbox"
-        }, ariaProps));
+          'aria-haspopup': 'listbox'
+        }, ariaProps), ptm('input'));
+        return /*#__PURE__*/React__namespace.createElement("input", inputProps);
       } else {
         var _className = utils.classNames('p-dropdown-label p-inputtext', {
           'p-placeholder': label === null && props.placeholder,
           'p-dropdown-label-empty': label === null && !props.placeholder
         });
         var content = props.valueTemplate ? utils.ObjectUtils.getJSXElement(props.valueTemplate, selectedOption, props) : label || props.placeholder || 'empty';
-        return /*#__PURE__*/React__namespace.createElement("span", {
+        var _inputProps = utils.mergeProps({
           ref: inputRef,
           className: _className
-        }, content);
+        }, ptm('input'));
+        return /*#__PURE__*/React__namespace.createElement("span", _inputProps, content);
       }
     };
     var createClearIcon = function createClearIcon() {
       if (props.value != null && props.showClear && !props.disabled) {
         var iconClassName = utils.classNames('p-dropdown-clear-icon p-clickable');
-        var iconProps = {
+        var clearIconProps = utils.mergeProps({
           className: iconClassName,
           onPointerUp: clear
-        };
-        var icon = props.clearIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, iconProps);
-        return utils.IconUtils.getJSXIcon(icon, _objectSpread({}, iconProps), {
+        }, ptm('clearIcon'));
+        var icon = props.clearIcon || /*#__PURE__*/React__namespace.createElement(times.TimesIcon, clearIconProps);
+        return utils.IconUtils.getJSXIcon(icon, _objectSpread({}, clearIconProps), {
           props: props
         });
       }
@@ -23836,22 +24375,22 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
     };
     var createDropdownIcon = function createDropdownIcon() {
       var iconClassName = utils.classNames('p-dropdown-trigger-icon p-clickable');
-      var icon = props.dropdownIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, {
+      var dropdownIconProps = utils.mergeProps({
         className: iconClassName
-      });
-      var dropdownIcon = utils.IconUtils.getJSXIcon(icon, {
-        className: iconClassName
-      }, {
+      }, ptm('dropdownIcon'));
+      var icon = props.dropdownIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, dropdownIconProps);
+      var dropdownIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, dropdownIconProps), {
         props: props
       });
       var ariaLabel = props.placeholder || props.ariaLabel;
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-dropdown-trigger",
-        role: "button",
-        "aria-haspopup": "listbox",
-        "aria-expanded": overlayVisibleState,
-        "aria-label": ariaLabel
-      }, dropdownIcon);
+      var triggerProps = utils.mergeProps({
+        className: 'p-dropdown-trigger',
+        role: 'button',
+        'aria-haspopup': 'listbox',
+        'aria-expanded': overlayVisibleState,
+        'aria-label': ariaLabel
+      }, ptm('trigger'));
+      return /*#__PURE__*/React__namespace.createElement("div", triggerProps, dropdownIcon);
     };
     var visibleOptions = getVisibleOptions();
     var selectedOption = getSelectedOption();
@@ -23870,18 +24409,21 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
     var labelElement = createLabel();
     var dropdownIcon = createDropdownIcon();
     var clearIcon = createClearIcon();
-    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", _extends({
-      ref: elementRef,
+    var rootProps = utils.mergeProps({
       id: props.id,
+      ref: elementRef,
       className: className,
-      style: props.style
-    }, otherProps, {
-      onClick: onClick,
+      style: props.style,
+      onClick: function onClick(e) {
+        return _onClick(e);
+      },
       onMouseDown: props.onMouseDown,
       onContextMenu: props.onContextMenu
-    }), keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React__namespace.createElement(DropdownPanel, _extends({
+    }, otherProps, ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement("div", rootProps, keyboardHelper, hiddenSelect, labelElement, clearIcon, dropdownIcon, /*#__PURE__*/React__namespace.createElement(DropdownPanel, _extends({
       ref: overlayRef,
-      visibleOptions: visibleOptions
+      visibleOptions: visibleOptions,
+      virtualScrollerRef: virtualScrollerRef
     }, props, {
       appendTo: appendTo,
       onClick: onPanelClick,
@@ -23904,11 +24446,14 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
       onEnter: onOverlayEnter,
       onEntered: onOverlayEntered,
       onExit: onOverlayExit,
-      onExited: onOverlayExited
+      onExited: onOverlayExited,
+      ptm: ptm
     }))), hasTooltip && /*#__PURE__*/React__namespace.createElement(tooltip.Tooltip, _extends({
       target: elementRef,
       content: props.tooltip
-    }, props.tooltipOptions)));
+    }, props.tooltipOptions, {
+      pt: ptm('tooltip')
+    })));
   }));
   Dropdown.displayName = 'Dropdown';
 
@@ -23918,7 +24463,7 @@ this.primereact.dropdown = (function (exports, React, PrimeReact, hooks, chevron
 
   return exports;
 
-})({}, React, primereact.api, primereact.hooks, primereact.icons.chevrondown, primereact.icons.times, primereact.overlayservice, primereact.tooltip, primereact.utils, primereact.csstransition, primereact.icons.search, primereact.portal, primereact.virtualscroller, primereact.ripple);
+})({}, React, primereact.api, primereact.hooks, primereact.icons.chevrondown, primereact.icons.times, primereact.overlayservice, primereact.tooltip, primereact.utils, primereact.componentbase, primereact.csstransition, primereact.icons.search, primereact.portal, primereact.virtualscroller, primereact.ripple);
 
 this.primereact = this.primereact || {};
 this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, hooks, times, windowmaximize, windowminimize, portal, ripple, utils, componentbase) {
@@ -24117,7 +24662,8 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
   function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
   function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var Dialog = /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = DialogBase.getProps(inProps);
+    var context = React__namespace.useContext(PrimeReact.PrimeReactContext);
+    var props = DialogBase.getProps(inProps, context);
     var uniqueId = props.id ? props.id : utils.UniqueComponentId();
     var _React$useState = React__namespace.useState(uniqueId),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -24468,7 +25014,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
       });
     };
     var createStyle = function createStyle() {
-      styleElement.current = utils.DomHandler.createInlineStyle(PrimeReact__default["default"].nonce);
+      styleElement.current = utils.DomHandler.createInlineStyle(context && context.nonce || PrimeReact__default["default"].nonce);
       var innerHTML = '';
       for (var breakpoint in props.breakpoints) {
         innerHTML += "\n                @media screen and (max-width: ".concat(breakpoint, ") {\n                    .p-dialog[").concat(attributeSelector.current, "] {\n                        width: ").concat(props.breakpoints[breakpoint], " !important;\n                    }\n                }\n            ");
@@ -24499,7 +25045,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
     });
     hooks.useUpdateEffect(function () {
       if (maskVisibleState) {
-        utils.ZIndexUtils.set('modal', maskRef.current, PrimeReact__default["default"].autoZIndex, props.baseZIndex || PrimeReact__default["default"].zIndex['modal']);
+        utils.ZIndexUtils.set('modal', maskRef.current, context && context.autoZIndex || PrimeReact__default["default"].autoZIndex, props.baseZIndex || context && context.zIndex['modal'] || PrimeReact__default["default"].zIndex['modal']);
         setVisibleState(true);
       }
     }, [maskVisibleState]);
@@ -24642,8 +25188,8 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
         'p-dialog-rtl': props.rtl,
         'p-dialog-maximized': maximized,
         'p-dialog-default': !maximized,
-        'p-input-filled': PrimeReact__default["default"].inputStyle === 'filled',
-        'p-ripple-disabled': PrimeReact__default["default"].ripple === false
+        'p-input-filled': context && context.inputStyle === 'filled' || PrimeReact__default["default"].inputStyle === 'filled',
+        'p-ripple-disabled': context && context.ripple === false || PrimeReact__default["default"].ripple === false
       });
       var maskClassName = utils.classNames('p-dialog-mask', getPositionClass(), {
         'p-component-overlay p-component-overlay-enter': props.modal,
@@ -24713,7 +25259,7 @@ this.primereact.dialog = (function (exports, React, PrimeReact, csstransition, h
 })({}, React, primereact.api, primereact.csstransition, primereact.hooks, primereact.icons.times, primereact.icons.windowmaximize, primereact.icons.windowminimize, primereact.portal, primereact.ripple, primereact.utils, primereact.componentbase);
 
 this.primereact = this.primereact || {};
-this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple, angledoubleleft, inputnumber, angledoubleright, angleright, angleleft, dropdown) {
+this.primereact.paginator = (function (exports, React, hooks, utils, componentbase, api, angledoubleleft, ripple, inputnumber, angledoubleright, angleright, angleleft, dropdown) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -24736,21 +25282,6 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
 
   var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
-  function _extends() {
-    _extends = Object.assign ? Object.assign.bind() : function (target) {
-      for (var i = 1; i < arguments.length; i++) {
-        var source = arguments[i];
-        for (var key in source) {
-          if (Object.prototype.hasOwnProperty.call(source, key)) {
-            target[key] = source[key];
-          }
-        }
-      }
-      return target;
-    };
-    return _extends.apply(this, arguments);
-  }
-
   function _arrayWithHoles(arr) {
     if (Array.isArray(arr)) return arr;
   }
@@ -24847,7 +25378,7 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
     return obj;
   }
 
-  var PaginatorBase = {
+  var PaginatorBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Paginator',
       totalRecords: 0,
@@ -24865,15 +25396,9 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
       dropdownAppendTo: null,
       currentPageReportTemplate: '({currentPage} of {totalPages})',
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, PaginatorBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, PaginatorBase.defaultProps);
     }
-  };
-  var CurrentPageReportBase = {
+  });
+  var CurrentPageReportBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'CurrentPageReport',
       pageCount: null,
@@ -24884,15 +25409,9 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
       reportTemplate: '({currentPage} of {totalPages})',
       template: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, CurrentPageReportBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, CurrentPageReportBase.defaultProps);
     }
-  };
-  var FirstPageLinkBase = {
+  });
+  var FirstPageLinkBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'FirstPageLink',
       disabled: false,
@@ -24900,15 +25419,9 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
       template: null,
       firstPageLinkIcon: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, FirstPageLinkBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, FirstPageLinkBase.defaultProps);
     }
-  };
-  var JumpToPageInputBase = {
+  });
+  var JumpToPageInputBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'JumpToPageInput',
       page: null,
@@ -24918,15 +25431,9 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
       template: null,
       onChange: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, JumpToPageInputBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, JumpToPageInputBase.defaultProps);
     }
-  };
-  var LastPageLinkBase = {
+  });
+  var LastPageLinkBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'LastPageLink',
       disabled: false,
@@ -24934,15 +25441,9 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
       template: null,
       lastPageLinkIcon: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, LastPageLinkBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, LastPageLinkBase.defaultProps);
     }
-  };
-  var NextPageLinkBase = {
+  });
+  var NextPageLinkBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'NextPageLink',
       disabled: false,
@@ -24950,15 +25451,9 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
       template: null,
       nextPageLinkIcon: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, NextPageLinkBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, NextPageLinkBase.defaultProps);
     }
-  };
-  var PageLinksBase = {
+  });
+  var PageLinksBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'PageLinks',
       value: null,
@@ -24968,15 +25463,9 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
       links: null,
       template: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, PageLinksBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, PageLinksBase.defaultProps);
     }
-  };
-  var PrevPageLinkBase = {
+  });
+  var PrevPageLinkBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'PrevPageLink',
       disabled: false,
@@ -24984,15 +25473,9 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
       template: null,
       prevPageLinkIcon: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, PrevPageLinkBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, PrevPageLinkBase.defaultProps);
     }
-  };
-  var RowsPerPageDropdownBase = {
+  });
+  var RowsPerPageDropdownBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'RowsPerPageDropdown',
       options: null,
@@ -25005,19 +25488,14 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
       template: null,
       disabled: false,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, RowsPerPageDropdownBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, RowsPerPageDropdownBase.defaultProps);
     }
-  };
+  });
 
-  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+  function ownKeys$4(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$4(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$4(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$4(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var CurrentPageReport = /*#__PURE__*/React__namespace.memo(function (inProps) {
-    var props = CurrentPageReportBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = CurrentPageReportBase.getProps(inProps, context);
     var report = {
       currentPage: props.page + 1,
       totalPages: props.pageCount,
@@ -25027,11 +25505,12 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
       totalRecords: props.totalRecords
     };
     var text = props.reportTemplate.replace('{currentPage}', report.currentPage).replace('{totalPages}', report.totalPages).replace('{first}', report.first).replace('{last}', report.last).replace('{rows}', report.rows).replace('{totalRecords}', report.totalRecords);
-    var element = /*#__PURE__*/React__namespace.createElement("span", {
-      className: "p-paginator-current"
-    }, text);
+    var currentProps = utils.mergeProps({
+      className: 'p-paginator-current'
+    }, props.ptm('current'));
+    var element = /*#__PURE__*/React__namespace.createElement("span", currentProps, text);
     if (props.template) {
-      var defaultOptions = _objectSpread(_objectSpread({}, report), {
+      var defaultOptions = _objectSpread$4(_objectSpread$4({}, report), {
         className: 'p-paginator-current',
         element: element,
         props: props
@@ -25042,27 +25521,37 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
   });
   CurrentPageReport.displayName = 'CurrentPageReport';
 
+  function ownKeys$3(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$3(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$3(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$3(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var FirstPageLink = /*#__PURE__*/React__namespace.memo(function (inProps) {
-    var props = FirstPageLinkBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = FirstPageLinkBase.getProps(inProps, context);
+    var getPTOptions = function getPTOptions(key) {
+      return props.ptm(key, {
+        context: {
+          disabled: props.disabled
+        }
+      });
+    };
     var className = utils.classNames('p-paginator-first p-paginator-element p-link', {
       'p-disabled': props.disabled
     });
     var iconClassName = 'p-paginator-icon';
-    var icon = props.firstPageLinkIcon || /*#__PURE__*/React__namespace.createElement(angledoubleleft.AngleDoubleLeftIcon, {
+    var firstPageIconProps = utils.mergeProps({
       className: iconClassName
-    });
-    var firstPageLinkIcon = utils.IconUtils.getJSXIcon(icon, {
-      className: iconClassName
-    }, {
+    }, getPTOptions('firstPageIcon'));
+    var icon = props.firstPageLinkIcon || /*#__PURE__*/React__namespace.createElement(angledoubleleft.AngleDoubleLeftIcon, firstPageIconProps);
+    var firstPageLinkIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$3({}, firstPageIconProps), {
       props: props
     });
-    var element = /*#__PURE__*/React__namespace.createElement("button", {
-      type: "button",
+    var firstPageButtonProps = utils.mergeProps({
+      type: 'button',
       className: className,
       onClick: props.onClick,
       disabled: props.disabled,
-      "aria-label": api.ariaLabel('firstPageLabel')
-    }, firstPageLinkIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      'aria-label': api.ariaLabel('firstPageLabel')
+    }, getPTOptions('firstPageButton'));
+    var element = /*#__PURE__*/React__namespace.createElement("button", firstPageButtonProps, firstPageLinkIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     if (props.template) {
       var defaultOptions = {
         onClick: props.onClick,
@@ -25079,7 +25568,8 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
   FirstPageLink.displayName = 'FirstPageLink';
 
   var JumpToPageInput = /*#__PURE__*/React__namespace.memo(function (inProps) {
-    var props = JumpToPageInputBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = JumpToPageInputBase.getProps(inProps, context);
     var onChange = function onChange(event) {
       if (props.onChange) {
         props.onChange(props.rows * (event.value - 1), props.rows);
@@ -25090,7 +25580,8 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
       value: value,
       onChange: onChange,
       className: "p-paginator-page-input",
-      disabled: props.disabled
+      disabled: props.disabled,
+      pt: props.ptm('JTPInput')
     });
     if (props.template) {
       var defaultOptions = {
@@ -25107,27 +25598,37 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
   });
   JumpToPageInput.displayName = 'JumpToPageInput';
 
+  function ownKeys$2(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$2(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$2(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$2(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var LastPageLink = /*#__PURE__*/React__namespace.memo(function (inProps) {
-    var props = LastPageLinkBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = LastPageLinkBase.getProps(inProps, context);
+    var getPTOptions = function getPTOptions(key) {
+      return props.ptm(key, {
+        context: {
+          disabled: props.disabled
+        }
+      });
+    };
     var className = utils.classNames('p-paginator-last p-paginator-element p-link', {
       'p-disabled': props.disabled
     });
     var iconClassName = 'p-paginator-icon';
-    var icon = props.lastPageLinkIcon || /*#__PURE__*/React__namespace.createElement(angledoubleright.AngleDoubleRightIcon, {
-      className: iconClassName
-    });
-    var lastPageLinkIcon = utils.IconUtils.getJSXIcon(icon, {
+    var lastPageIconProps = utils.mergeProps({
       className: iconClassName
-    }, {
+    }, getPTOptions('lastPageIcon'));
+    var icon = props.lastPageLinkIcon || /*#__PURE__*/React__namespace.createElement(angledoubleright.AngleDoubleRightIcon, lastPageIconProps);
+    var lastPageLinkIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$2({}, lastPageIconProps), {
       props: props
     });
-    var element = /*#__PURE__*/React__namespace.createElement("button", {
-      type: "button",
+    var lastPageButtonProps = utils.mergeProps({
+      type: 'button',
       className: className,
       onClick: props.onClick,
       disabled: props.disabled,
-      "aria-label": api.ariaLabel('lastPageLabel')
-    }, lastPageLinkIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      'aria-label': api.ariaLabel('lastPageLabel')
+    }, getPTOptions('lastPageButton'));
+    var element = /*#__PURE__*/React__namespace.createElement("button", lastPageButtonProps, lastPageLinkIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     if (props.template) {
       var defaultOptions = {
         onClick: props.onClick,
@@ -25143,27 +25644,37 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
   });
   LastPageLink.displayName = 'LastPageLink';
 
+  function ownKeys$1(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread$1(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var NextPageLink = /*#__PURE__*/React__namespace.memo(function (inProps) {
-    var props = NextPageLinkBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = NextPageLinkBase.getProps(inProps, context);
+    var getPTOptions = function getPTOptions(key) {
+      return props.ptm(key, {
+        context: {
+          disabled: props.disabled
+        }
+      });
+    };
     var className = utils.classNames('p-paginator-next p-paginator-element p-link', {
       'p-disabled': props.disabled
     });
     var iconClassName = 'p-paginator-icon';
-    var icon = props.nextPageLinkIcon || /*#__PURE__*/React__namespace.createElement(angleright.AngleRightIcon, {
-      className: iconClassName
-    });
-    var nextPageLinkIcon = utils.IconUtils.getJSXIcon(icon, {
+    var nextPageIconProps = utils.mergeProps({
       className: iconClassName
-    }, {
+    }, getPTOptions('nextPageIcon'));
+    var icon = props.nextPageLinkIcon || /*#__PURE__*/React__namespace.createElement(angleright.AngleRightIcon, nextPageIconProps);
+    var nextPageLinkIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, nextPageIconProps), {
       props: props
     });
-    var element = /*#__PURE__*/React__namespace.createElement("button", {
-      type: "button",
+    var nextPageButtonProps = utils.mergeProps({
+      type: 'button',
       className: className,
       onClick: props.onClick,
       disabled: props.disabled,
-      "aria-label": api.ariaLabel('nextPageLabel')
-    }, nextPageLinkIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      'aria-label': api.ariaLabel('nextPageLabel')
+    }, getPTOptions('nextPageButton'));
+    var element = /*#__PURE__*/React__namespace.createElement("button", nextPageButtonProps, nextPageLinkIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     if (props.template) {
       var defaultOptions = {
         onClick: props.onClick,
@@ -25181,7 +25692,15 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
   NextPageLink.displayName = 'NextPageLink';
 
   var PageLinks = /*#__PURE__*/React__namespace.memo(function (inProps) {
-    var props = PageLinksBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = PageLinksBase.getProps(inProps, context);
+    var getPTOptions = function getPTOptions(pageLink, key) {
+      return props.ptm(key, {
+        context: {
+          active: pageLink - 1 === props.page
+        }
+      });
+    };
     var onPageLinkClick = function onPageLinkClick(event, pageLink) {
       if (props.onClick) {
         props.onClick({
@@ -25201,14 +25720,18 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
           'p-paginator-page-end': pageLink === endPageInView,
           'p-highlight': pageLink - 1 === props.page
         });
-        var element = /*#__PURE__*/React__namespace.createElement("button", {
-          type: "button",
-          className: className,
+        var pageButtonProps = utils.mergeProps({
+          type: 'button',
           onClick: function onClick(e) {
             return onPageLinkClick(e, pageLink);
           },
-          "aria-label": "".concat(api.ariaLabel('pageLabel'), " ").concat(pageLink + 1)
-        }, pageLink, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+          className: className,
+          disabled: props.disabled,
+          'aria-label': api.ariaLabel('pageLabel', {
+            page: pageLink + 1
+          })
+        }, getPTOptions(pageLink, 'pageButton'));
+        var element = /*#__PURE__*/React__namespace.createElement("button", pageButtonProps, pageLink, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
         if (props.template) {
           var defaultOptions = {
             onClick: function onClick(e) {
@@ -25232,33 +25755,44 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
         }, element);
       });
     }
-    return /*#__PURE__*/React__namespace.createElement("span", {
-      className: "p-paginator-pages"
-    }, elements);
+    var pagesProps = utils.mergeProps({
+      className: 'p-paginator-pages'
+    }, props.ptm('pages'));
+    return /*#__PURE__*/React__namespace.createElement("span", pagesProps, elements);
   });
   PageLinks.displayName = 'PageLinks';
 
+  function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+  function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
   var PrevPageLink = /*#__PURE__*/React__namespace.memo(function (inProps) {
-    var props = PrevPageLinkBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = PrevPageLinkBase.getProps(inProps, context);
+    var getPTOptions = function getPTOptions(key) {
+      return props.ptm(key, {
+        context: {
+          disabled: props.disabled
+        }
+      });
+    };
     var className = utils.classNames('p-paginator-prev p-paginator-element p-link', {
       'p-disabled': props.disabled
     });
     var iconClassName = 'p-paginator-icon';
-    var icon = props.prevPageLinkIcon || /*#__PURE__*/React__namespace.createElement(angleleft.AngleLeftIcon, {
+    var prevPageIconProps = utils.mergeProps({
       className: iconClassName
-    });
-    var prevPageLinkIcon = utils.IconUtils.getJSXIcon(icon, {
-      className: iconClassName
-    }, {
+    }, getPTOptions('prevPageIcon'));
+    var icon = props.prevPageLinkIcon || /*#__PURE__*/React__namespace.createElement(angleleft.AngleLeftIcon, prevPageIconProps);
+    var prevPageLinkIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, prevPageIconProps), {
       props: props
     });
-    var element = /*#__PURE__*/React__namespace.createElement("button", {
-      type: "button",
+    var prevPageButtonProps = utils.mergeProps({
+      type: 'button',
       className: className,
       onClick: props.onClick,
       disabled: props.disabled,
-      "aria-label": api.ariaLabel('previousPageLabel')
-    }, prevPageLinkIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+      'aria-label': api.ariaLabel('previousPageLabel')
+    }, getPTOptions('prevPageButton'));
+    var element = /*#__PURE__*/React__namespace.createElement("button", prevPageButtonProps, prevPageLinkIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
     if (props.template) {
       var defaultOptions = {
         onClick: props.onClick,
@@ -25275,7 +25809,8 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
   PrevPageLink.displayName = 'PrevPageLink';
 
   var RowsPerPageDropdown = /*#__PURE__*/React__namespace.memo(function (inProps) {
-    var props = RowsPerPageDropdownBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = RowsPerPageDropdownBase.getProps(inProps, context);
     var hasOptions = props.options && props.options.length > 0;
     var options = hasOptions ? props.options.map(function (opt) {
       return {
@@ -25291,7 +25826,8 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
       appendTo: props.appendTo,
       disabled: props.disabled,
       placeholder: ariaLabel,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      pt: props.ptm('RPPDropdown')
     }) : null;
     if (props.template) {
       var defaultOptions = {
@@ -25313,7 +25849,12 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
   RowsPerPageDropdown.displayName = 'RowsPerPageDropdown';
 
   var Paginator = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = PaginatorBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = PaginatorBase.getProps(inProps, context);
+    var _PaginatorBase$setMet = PaginatorBase.setMetaData({
+        props: props
+      }),
+      ptm = _PaginatorBase$setMet.ptm;
     var elementRef = React__namespace.useRef(null);
     var page = Math.floor(props.first / props.rows);
     var pageCount = Math.ceil(props.totalRecords / props.rows);
@@ -25403,7 +25944,8 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
             onClick: changePageToFirst,
             disabled: isFirstPage || isEmpty,
             template: template,
-            firstPageLinkIcon: props.firstPageLinkIcon
+            firstPageLinkIcon: props.firstPageLinkIcon,
+            ptm: ptm
           });
           break;
         case 'PrevPageLink':
@@ -25412,7 +25954,8 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
             onClick: changePageToPrev,
             disabled: isFirstPage || isEmpty,
             template: template,
-            prevPageLinkIcon: props.prevPageLinkIcon
+            prevPageLinkIcon: props.prevPageLinkIcon,
+            ptm: ptm
           });
           break;
         case 'NextPageLink':
@@ -25421,7 +25964,8 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
             onClick: changePageToNext,
             disabled: isLastPage || isEmpty,
             template: template,
-            nextPageLinkIcon: props.nextPageLinkIcon
+            nextPageLinkIcon: props.nextPageLinkIcon,
+            ptm: ptm
           });
           break;
         case 'LastPageLink':
@@ -25430,7 +25974,8 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
             onClick: changePageToLast,
             disabled: isLastPage || isEmpty,
             template: template,
-            lastPageLinkIcon: props.lastPageLinkIcon
+            lastPageLinkIcon: props.lastPageLinkIcon,
+            ptm: ptm
           });
           break;
         case 'PageLinks':
@@ -25441,7 +25986,8 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
             rows: props.rows,
             pageCount: pageCount,
             onClick: onPageLinkClick,
-            template: template
+            template: template,
+            ptm: ptm
           });
           break;
         case 'RowsPerPageDropdown':
@@ -25455,7 +26001,8 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
             onChange: onRowsChange,
             appendTo: props.dropdownAppendTo,
             template: template,
-            disabled: isEmpty
+            disabled: isEmpty,
+            ptm: ptm
           });
           break;
         case 'CurrentPageReport':
@@ -25467,7 +26014,8 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
             first: props.first,
             rows: props.rows,
             totalRecords: props.totalRecords,
-            template: template
+            template: template,
+            ptm: ptm
           });
           break;
         case 'JumpToPageInput':
@@ -25478,7 +26026,8 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
             pageCount: pageCount,
             onChange: changePage,
             disabled: isEmpty,
-            template: template
+            template: template,
+            ptm: ptm
           });
           break;
         default:
@@ -25510,22 +26059,24 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
     if (!props.alwaysShow && pageCount <= 1) {
       return null;
     } else {
-      var otherProps = PaginatorBase.getOtherProps(props);
       var className = utils.classNames('p-paginator p-component', props.className);
       var leftContent = utils.ObjectUtils.getJSXElement(props.leftContent, props);
       var rightContent = utils.ObjectUtils.getJSXElement(props.rightContent, props);
       var elements = createElements();
-      var leftElement = leftContent && /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-paginator-left-content"
-      }, leftContent);
-      var rightElement = rightContent && /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-paginator-right-content"
-      }, rightContent);
-      return /*#__PURE__*/React__namespace.createElement("div", _extends({
+      var leftProps = utils.mergeProps({
+        className: 'p-paginator-left-content'
+      }, ptm('left'));
+      var leftElement = leftContent && /*#__PURE__*/React__namespace.createElement("div", leftProps, leftContent);
+      var endProps = utils.mergeProps({
+        className: 'p-paginator-right-content'
+      }, ptm('end'));
+      var rightElement = rightContent && /*#__PURE__*/React__namespace.createElement("div", endProps, rightContent);
+      var rootProps = utils.mergeProps({
         ref: elementRef,
         className: className,
         style: props.style
-      }, otherProps), leftElement, elements, rightElement);
+      }, PaginatorBase.getOtherProps(props), ptm('root'));
+      return /*#__PURE__*/React__namespace.createElement("div", rootProps, leftElement, elements, rightElement);
     }
   }));
   Paginator.displayName = 'Paginator';
@@ -25536,10 +26087,10 @@ this.primereact.paginator = (function (exports, React, hooks, utils, api, ripple
 
   return exports;
 
-})({}, React, primereact.hooks, primereact.utils, primereact.api, primereact.ripple, primereact.icons.angledoubleleft, primereact.inputnumber, primereact.icons.angledoubleright, primereact.icons.angleright, primereact.icons.angleleft, primereact.dropdown);
+})({}, React, primereact.hooks, primereact.utils, primereact.componentbase, primereact.api, primereact.icons.angledoubleleft, primereact.ripple, primereact.inputnumber, primereact.icons.angledoubleright, primereact.icons.angleright, primereact.icons.angleleft, primereact.dropdown);
 
 this.primereact = this.primereact || {};
-this.primereact.tree = (function (exports, React, utils, api, ripple, check, chevrondown, chevronright, minus, search, spinner) {
+this.primereact.tree = (function (exports, React, search, spinner, utils, componentbase, api, check, chevrondown, chevronright, minus, ripple) {
   'use strict';
 
   function _interopNamespace(e) {
@@ -25689,7 +26240,7 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
     return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray$2(arr, i) || _nonIterableRest();
   }
 
-  var TreeBase = {
+  var TreeBase = componentbase.ComponentBase.extend({
     defaultProps: {
       __TYPE: 'Tree',
       id: null,
@@ -25738,14 +26289,8 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
       onNodeClick: null,
       onNodeDoubleClick: null,
       children: undefined
-    },
-    getProps: function getProps(props) {
-      return utils.ObjectUtils.getMergedProps(props, TreeBase.defaultProps);
-    },
-    getOtherProps: function getOtherProps(props) {
-      return utils.ObjectUtils.getDiffProps(props, TreeBase.defaultProps);
     }
-  };
+  });
 
   function _createForOfIteratorHelper$1(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray$1(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
   function _unsupportedIterableToArray$1(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray$1(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray$1(o, minLen); }
@@ -25757,6 +26302,15 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
     var nodeTouched = React__namespace.useRef(false);
     var isLeaf = props.isNodeLeaf(props.node);
     var expanded = (props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false) || props.node.expanded;
+    var getPTOptions = function getPTOptions(key) {
+      return props.ptm(key, {
+        context: {
+          selected: props.selected,
+          expanded: expanded,
+          checked: props.checked
+        }
+      });
+    };
     var expand = function expand(event) {
       var expandedKeys = props.expandedKeys ? _objectSpread$1({}, props.expandedKeys) : {};
       expandedKeys[props.node.key] = true;
@@ -26195,9 +26749,10 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
       }
     };
     var createLabel = function createLabel() {
-      var content = /*#__PURE__*/React__namespace.createElement("span", {
-        className: "p-treenode-label"
-      }, props.node.label);
+      var labelProps = utils.mergeProps({
+        className: 'p-treenode-label'
+      }, getPTOptions('label'));
+      var content = /*#__PURE__*/React__namespace.createElement("span", labelProps, props.node.label);
       if (props.nodeTemplate) {
         var defaultContentOptions = {
           onTogglerClick: onTogglerClick,
@@ -26220,21 +26775,20 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
           'p-disabled': props.disabled
         });
         var iconClassName = 'p-checkbox-icon p-c';
-        var icon = checked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, {
-          className: iconClassName
-        }) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, {
+        var checkboxIconProps = utils.mergeProps({
           className: iconClassName
-        }) : null;
-        var checkboxIcon = utils.IconUtils.getJSXIcon(icon, {
-          className: iconClassName
-        }, props);
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-checkbox p-component"
-        }, /*#__PURE__*/React__namespace.createElement("div", {
+        }, getPTOptions('checkboxIcon'));
+        var icon = checked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(check.CheckIcon, checkboxIconProps) : partialChecked ? props.checkboxIcon || /*#__PURE__*/React__namespace.createElement(minus.MinusIcon, checkboxIconProps) : null;
+        var checkboxIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, checkboxIconProps), props);
+        var checkboxContainerProps = utils.mergeProps({
+          className: 'p-checkbox p-component'
+        }, getPTOptions('checkboxContainer'));
+        var checkboxProps = utils.mergeProps({
           className: className,
-          role: "checkbox",
-          "aria-checked": checked
-        }, checkboxIcon));
+          role: 'checkbox',
+          'aria-checked': checked
+        }, getPTOptions('checkbox'));
+        return /*#__PURE__*/React__namespace.createElement("div", checkboxContainerProps, /*#__PURE__*/React__namespace.createElement("div", checkboxProps, checkboxIcon));
       }
       return null;
     };
@@ -26242,9 +26796,10 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
       var icon = props.node.icon || (expanded ? props.node.expandedIcon : props.node.collapsedIcon);
       if (icon) {
         var className = utils.classNames('p-treenode-icon', icon);
-        return /*#__PURE__*/React__namespace.createElement("span", {
+        var nodeIconProps = utils.mergeProps({
           className: className
-        });
+        }, getPTOptions('nodeIcon'));
+        return /*#__PURE__*/React__namespace.createElement("span", nodeIconProps);
       }
       return null;
     };
@@ -26254,18 +26809,22 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
         className: 'p-tree-toggler-icon',
         'aria-hidden': true
       };
-      var icon = expanded ? props.collapseIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, iconProps) : props.expandIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, iconProps);
-      var togglerIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, iconProps), {
+      var togglerIconProps = utils.mergeProps({
+        className: iconProps
+      }, getPTOptions('togglerIcon'));
+      var icon = expanded ? props.collapseIcon || /*#__PURE__*/React__namespace.createElement(chevrondown.ChevronDownIcon, togglerIconProps) : props.expandIcon || /*#__PURE__*/React__namespace.createElement(chevronright.ChevronRightIcon, togglerIconProps);
+      var togglerIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread$1({}, togglerIconProps), {
         props: props,
         expanded: expanded
       });
-      var content = /*#__PURE__*/React__namespace.createElement("button", {
-        type: "button",
-        className: "p-tree-toggler p-link",
+      var togglerProps = utils.mergeProps({
+        type: 'button',
+        className: 'p-tree-toggler p-link',
         tabIndex: -1,
         onClick: onTogglerClick,
-        "aria-label": label
-      }, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
+        'aria-label': label
+      }, getPTOptions('toggler'));
+      var content = /*#__PURE__*/React__namespace.createElement("button", togglerProps, togglerIcon, /*#__PURE__*/React__namespace.createElement(ripple.Ripple, null));
       if (props.togglerTemplate) {
         var defaultContentOptions = {
           onClick: onTogglerClick,
@@ -26281,15 +26840,16 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
     };
     var createDropPoint = function createDropPoint(position) {
       if (props.dragdropScope) {
-        return /*#__PURE__*/React__namespace.createElement("li", {
-          className: "p-treenode-droppoint",
+        var droppointProps = utils.mergeProps({
+          className: 'p-treenode-droppoint',
           onDrop: function onDrop(event) {
             return onDropPoint(event, position);
           },
           onDragOver: onDropPointDragOver,
           onDragEnter: onDropPointDragEnter,
           onDragLeave: onDropPointDragLeave
-        });
+        }, getPTOptions('droppoint'));
+        return /*#__PURE__*/React__namespace.createElement("li", droppointProps);
       }
       return null;
     };
@@ -26307,7 +26867,7 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
       var icon = createIcon();
       var label = createLabel();
       var tabIndex = props.disabled ? undefined : 0;
-      return /*#__PURE__*/React__namespace.createElement("div", {
+      var contentProps = utils.mergeProps({
         ref: contentRef,
         className: className,
         style: props.node.style,
@@ -26324,18 +26884,20 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
         onDragEnd: onDragEnd,
         tabIndex: tabIndex,
         onKeyDown: onNodeKeyDown,
-        role: "treeitem",
-        "aria-posinset": props.index + 1,
-        "aria-expanded": expanded,
-        "aria-selected": checked || selected
-      }, toggler, checkbox, icon, label);
+        role: 'treeitem',
+        'aria-posinset': props.index + 1,
+        'aria-expanded': expanded,
+        'aria-selected': checked || selected
+      }, getPTOptions('content'));
+      return /*#__PURE__*/React__namespace.createElement("div", contentProps, toggler, checkbox, icon, label);
     };
     var createChildren = function createChildren() {
+      var subgroupProps = utils.mergeProps({
+        className: 'p-treenode-children',
+        role: 'group'
+      }, getPTOptions('subgroup'));
       if (utils.ObjectUtils.isNotEmpty(props.node.children) && expanded) {
-        return /*#__PURE__*/React__namespace.createElement("ul", {
-          className: "p-treenode-children",
-          role: "group"
-        }, props.node.children.map(function (childNode, index) {
+        return /*#__PURE__*/React__namespace.createElement("ul", subgroupProps, props.node.children.map(function (childNode, index) {
           return /*#__PURE__*/React__namespace.createElement(UITreeNode, {
             key: childNode.key || childNode.label,
             node: childNode,
@@ -26369,7 +26931,8 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
             onDragStart: props.onDragStart,
             onDragEnd: props.onDragEnd,
             onDrop: props.onDrop,
-            onDropPoint: props.onDropPoint
+            onDropPoint: props.onDropPoint,
+            ptm: props.ptm
           });
         }));
       }
@@ -26381,10 +26944,11 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
       }, props.node.className);
       var content = createContent();
       var children = createChildren();
-      return /*#__PURE__*/React__namespace.createElement("li", {
+      var nodeProps = utils.mergeProps({
         className: className,
         style: props.node.style
-      }, content, children);
+      }, getPTOptions('node'));
+      return /*#__PURE__*/React__namespace.createElement("li", nodeProps, content, children);
     };
     var node = createNode();
     if (props.dragdropScope && !props.disabled) {
@@ -26402,7 +26966,8 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
   function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
   function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
   var Tree = /*#__PURE__*/React__namespace.memo( /*#__PURE__*/React__namespace.forwardRef(function (inProps, ref) {
-    var props = TreeBase.getProps(inProps);
+    var context = React__namespace.useContext(api.PrimeReactContext);
+    var props = TreeBase.getProps(inProps, context);
     var _React$useState = React__namespace.useState(''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       filterValueState = _React$useState2[0],
@@ -26417,6 +26982,14 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
     var filterChanged = React__namespace.useRef(false);
     var filteredValue = props.onFilterValueChange ? props.filterValue : filterValueState;
     var expandedKeys = props.onToggle ? props.expandedKeys : expandedKeysState;
+    var _TreeBase$setMetaData = TreeBase.setMetaData({
+        props: props,
+        state: {
+          filterValue: filteredValue,
+          expandedKeys: expandedKeys
+        }
+      }),
+      ptm = _TreeBase$setMetaData.ptm;
     var filterOptions = {
       filter: function filter(e) {
         return onFilterInputChange(e);
@@ -26715,7 +27288,8 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
         onDrop: onDrop,
         onDropPoint: onDropPoint,
         onClick: props.onNodeClick,
-        onDoubleClick: props.onNodeDoubleClick
+        onDoubleClick: props.onNodeDoubleClick,
+        ptm: ptm
       });
     };
     var createRootChildren = function createRootChildren() {
@@ -26732,29 +27306,31 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
       if (props.value) {
         var rootNodes = createRootChildren();
         var contentClass = utils.classNames('p-tree-container', props.contentClassName);
-        return /*#__PURE__*/React__namespace.createElement("ul", _extends({
+        var containerProps = utils.mergeProps(_objectSpread({
           className: contentClass,
-          role: "tree",
+          role: 'tree',
           style: props.contentStyle
-        }, ariaProps), rootNodes);
+        }, ariaProps), ptm('container'));
+        return /*#__PURE__*/React__namespace.createElement("ul", containerProps, rootNodes);
       }
       return null;
     };
     var createLoader = function createLoader() {
       if (props.loading) {
         var iconClassName = 'p-tree-loading-icon';
-        var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, {
-          className: iconClassName,
-          spin: true
-        });
-        var loadingIcon = utils.IconUtils.getJSXIcon(icon, {
+        var loadingIconProps = utils.mergeProps({
           className: iconClassName
-        }, {
+        }, ptm('loadingIcon'));
+        var icon = props.loadingIcon || /*#__PURE__*/React__namespace.createElement(spinner.SpinnerIcon, _extends({}, loadingIconProps, {
+          spin: true
+        }));
+        var loadingIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, loadingIconProps), {
           props: props
         });
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-tree-loading-overlay p-component-overlay"
-        }, loadingIcon);
+        var loadingOverlayProps = utils.mergeProps({
+          className: 'p-tree-loading-overlay p-component-overlay'
+        }, ptm('loadingOverlay'));
+        return /*#__PURE__*/React__namespace.createElement("div", loadingOverlayProps, loadingIcon);
       }
       return null;
     };
@@ -26762,26 +27338,27 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
       if (props.filter) {
         var value = utils.ObjectUtils.isNotEmpty(filteredValue) ? filteredValue : '';
         var iconClassName = 'p-tree-filter-icon';
-        var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, {
-          className: iconClassName
-        });
-        var filterIcon = utils.IconUtils.getJSXIcon(icon, {
+        var searchIconProps = utils.mergeProps({
           className: iconClassName
-        }, {
+        }, ptm('searchIcon'));
+        var icon = props.filterIcon || /*#__PURE__*/React__namespace.createElement(search.SearchIcon, searchIconProps);
+        var filterIcon = utils.IconUtils.getJSXIcon(icon, _objectSpread({}, searchIconProps), {
           props: props
         });
-        var _content = /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-tree-filter-container"
-        }, /*#__PURE__*/React__namespace.createElement("input", {
-          type: "text",
+        var filterContainerProps = utils.mergeProps({
+          className: 'p-tree-filter-container'
+        }, ptm('filterContainer'));
+        var inputProps = utils.mergeProps({
+          type: 'text',
           value: value,
-          autoComplete: "off",
-          className: "p-tree-filter p-inputtext p-component",
+          autoComplete: 'off',
+          className: 'p-tree-filter p-inputtext p-component',
           placeholder: props.filterPlaceholder,
           onKeyDown: onFilterInputKeyDown,
           onChange: onFilterInputChange,
           disabled: props.disabled
-        }), filterIcon);
+        }, ptm('input'));
+        var _content = /*#__PURE__*/React__namespace.createElement("div", filterContainerProps, /*#__PURE__*/React__namespace.createElement("input", inputProps), filterIcon);
         if (props.filterTemplate) {
           var defaultContentOptions = {
             className: 'p-tree-filter-container',
@@ -26817,17 +27394,19 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
           };
           _content2 = utils.ObjectUtils.getJSXElement(props.header, defaultContentOptions);
         }
-        return /*#__PURE__*/React__namespace.createElement("div", {
-          className: "p-tree-header"
-        }, _content2);
+        var headerProps = utils.mergeProps({
+          className: 'p-tree-header'
+        }, ptm('header'));
+        return /*#__PURE__*/React__namespace.createElement("div", headerProps, _content2);
       }
       return null;
     };
     var createFooter = function createFooter() {
       var content = utils.ObjectUtils.getJSXElement(props.footer, props);
-      return /*#__PURE__*/React__namespace.createElement("div", {
-        className: "p-tree-footer"
-      }, content);
+      var footerProps = utils.mergeProps({
+        className: 'p-tree-footer'
+      }, ptm('footer'));
+      return /*#__PURE__*/React__namespace.createElement("div", footerProps, content);
     };
     var otherProps = TreeBase.getOtherProps(props);
     var ariaProps = utils.ObjectUtils.reduceKeys(otherProps, utils.DomHandler.ARIA_PROPS);
@@ -26840,12 +27419,13 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
     var content = createModel();
     var header = createHeader();
     var footer = createFooter();
-    return /*#__PURE__*/React__namespace.createElement("div", _extends({
-      id: props.id,
+    var rootProps = utils.mergeProps({
       ref: elementRef,
       className: className,
-      style: props.style
-    }, otherProps), loader, header, content, footer);
+      style: props.style,
+      id: props.id
+    }, TreeBase.getOtherProps(props), ptm('root'));
+    return /*#__PURE__*/React__namespace.createElement("div", rootProps, loader, header, content, footer);
   }));
   Tree.displayName = 'Tree';
 
@@ -26855,5 +27435,5 @@ this.primereact.tree = (function (exports, React, utils, api, ripple, check, che
 
   return exports;
 
-})({}, React, primereact.utils, primereact.api, primereact.ripple, primereact.icons.check, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.minus, primereact.icons.search, primereact.icons.spinner);
+})({}, React, primereact.icons.search, primereact.icons.spinner, primereact.utils, primereact.componentbase, primereact.api, primereact.icons.check, primereact.icons.chevrondown, primereact.icons.chevronright, primereact.icons.minus, primereact.ripple);