@patternfly/react-table 4.39.4 → 4.43.0

package/dist/umd/react-table.js

@@ -3331,11 +3331,11 @@
         };
     };
 
-    var _default$j = {
+    var _default$k = {
       "bullseye": "pf-l-bullseye"
     };
 
-    var _default$i = {
+    var _default$j = {
       "modifiers": {
         "4xl": "pf-m-4xl",
         "3xl": "pf-m-3xl",
@@ -3369,11 +3369,11 @@
     const Title = (_a) => {
         var { className = '', children = '', headingLevel: HeadingLevel, size = headingLevelSizeMap[HeadingLevel], ouiaId, ouiaSafe = true } = _a, props = __rest$1(_a, ["className", "children", "headingLevel", "size", "ouiaId", "ouiaSafe"]);
         const ouiaProps = useOUIAProps(Title.displayName, ouiaId, ouiaSafe);
-        return (React__namespace.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css(_default$i.title, size && _default$i.modifiers[size], className) }), children));
+        return (React__namespace.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css(_default$j.title, size && _default$j.modifiers[size], className) }), children));
     };
     Title.displayName = 'Title';
 
-    var _default$h = {
+    var _default$i = {
       "button": "pf-c-button",
       "buttonIcon": "pf-c-button__icon",
       "buttonProgress": "pf-c-button__progress",
@@ -3403,7 +3403,7 @@
       "spinner": "pf-c-spinner"
     };
 
-    var _default$g = {
+    var _default$h = {
       "modifiers": {
         "sm": "pf-m-sm",
         "md": "pf-m-md",
@@ -3429,10 +3429,10 @@
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', isSVG = false, diameter } = _a, props = __rest$1(_a, ["className", "size", 'aria-valuetext', "isSVG", "diameter"]);
         const Component = isSVG ? 'svg' : 'span';
-        return (React__namespace.createElement(Component, Object.assign({ className: css(_default$g.spinner, _default$g.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), props), isSVG ? (React__namespace.createElement("circle", { className: _default$g.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement("span", { className: css(_default$g.spinnerClipper) }),
-            React__namespace.createElement("span", { className: css(_default$g.spinnerLeadBall) }),
-            React__namespace.createElement("span", { className: css(_default$g.spinnerTailBall) })))));
+        return (React__namespace.createElement(Component, Object.assign({ className: css(_default$h.spinner, _default$h.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), props), isSVG ? (React__namespace.createElement("circle", { className: _default$h.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement("span", { className: css(_default$h.spinnerClipper) }),
+            React__namespace.createElement("span", { className: css(_default$h.spinnerLeadBall) }),
+            React__namespace.createElement("span", { className: css(_default$h.spinnerTailBall) })))));
     };
     Spinner.displayName = 'Spinner';
 
@@ -3473,12 +3473,12 @@
                 return 0;
             }
         };
-        return (React__namespace.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isDisabled || isAriaDisabled, "aria-label": ariaLabel, className: css(_default$h.button, _default$h.modifiers[variant], isBlock && _default$h.modifiers.block, isDisabled && _default$h.modifiers.disabled, isAriaDisabled && _default$h.modifiers.ariaDisabled, isActive && _default$h.modifiers.active, isInline && variant === ButtonVariant.link && _default$h.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && _default$h.modifiers.danger, isLoading !== null && _default$h.modifiers.progress, isLoading && _default$h.modifiers.inProgress, isSmall && _default$h.modifiers.small, isLarge && _default$h.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : null, ref: innerRef }, ouiaProps),
-            isLoading && (React__namespace.createElement("span", { className: css(_default$h.buttonProgress) },
+        return (React__namespace.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isDisabled || isAriaDisabled, "aria-label": ariaLabel, className: css(_default$i.button, _default$i.modifiers[variant], isBlock && _default$i.modifiers.block, isDisabled && _default$i.modifiers.disabled, isAriaDisabled && _default$i.modifiers.ariaDisabled, isActive && _default$i.modifiers.active, isInline && variant === ButtonVariant.link && _default$i.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && _default$i.modifiers.danger, isLoading !== null && _default$i.modifiers.progress, isLoading && _default$i.modifiers.inProgress, isSmall && _default$i.modifiers.small, isLarge && _default$i.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : null, ref: innerRef }, ouiaProps),
+            isLoading && (React__namespace.createElement("span", { className: css(_default$i.buttonProgress) },
                 React__namespace.createElement(Spinner, { size: spinnerSize.md, "aria-valuetext": spinnerAriaValueText }))),
-            variant !== ButtonVariant.plain && icon && iconPosition === 'left' && (React__namespace.createElement("span", { className: css(_default$h.buttonIcon, _default$h.modifiers.start) }, icon)),
+            variant !== ButtonVariant.plain && icon && iconPosition === 'left' && (React__namespace.createElement("span", { className: css(_default$i.buttonIcon, _default$i.modifiers.start) }, icon)),
             children,
-            variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (React__namespace.createElement("span", { className: css(_default$h.buttonIcon, _default$h.modifiers.end) }, icon))));
+            variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (React__namespace.createElement("span", { className: css(_default$i.buttonIcon, _default$i.modifiers.end) }, icon))));
     };
     const Button = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(ButtonBase, Object.assign({ innerRef: ref }, props))));
     Button.displayName = 'Button';
@@ -3615,7 +3615,7 @@
 
     var ExclamationTriangleIcon$1 = ExclamationTriangleIcon;
 
-    var _default$f = {
+    var _default$g = {
       "modifiers": {
         "top": "pf-m-top",
         "topLeft": "pf-m-top-left",
@@ -3638,13 +3638,13 @@
 
     const TooltipContent = (_a) => {
         var { className, children, isLeftAligned } = _a, props = __rest$1(_a, ["className", "children", "isLeftAligned"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(_default$f.tooltipContent, isLeftAligned && _default$f.modifiers.textAlignLeft, className) }, props), children));
+        return (React__namespace.createElement("div", Object.assign({ className: css(_default$g.tooltipContent, isLeftAligned && _default$g.modifiers.textAlignLeft, className) }, props), children));
     };
     TooltipContent.displayName = 'TooltipContent';
 
     const TooltipArrow = (_a) => {
         var { className } = _a, props = __rest$1(_a, ["className"]);
-        return React__namespace.createElement("div", Object.assign({ className: css(_default$f.tooltipArrow, className) }, props));
+        return React__namespace.createElement("div", Object.assign({ className: css(_default$g.tooltipArrow, className) }, props));
     };
     TooltipArrow.displayName = 'TooltipArrow';
 
@@ -3736,13 +3736,13 @@
             }, exitDelay);
         };
         const positionModifiers = {
-            top: _default$f.modifiers.top,
-            bottom: _default$f.modifiers.bottom,
-            left: _default$f.modifiers.left,
-            right: _default$f.modifiers.right
+            top: _default$g.modifiers.top,
+            bottom: _default$g.modifiers.bottom,
+            left: _default$g.modifiers.left,
+            right: _default$g.modifiers.right
         };
         const hasCustomMaxWidth = maxWidth !== tooltipMaxWidth.value;
-        const content = (React__namespace.createElement("div", Object.assign({ className: css(_default$f.tooltip, className), role: "tooltip", id: id, style: {
+        const content = (React__namespace.createElement("div", Object.assign({ className: css(_default$g.tooltip, className), role: "tooltip", id: id, style: {
                 maxWidth: hasCustomMaxWidth ? maxWidth : null,
                 opacity,
                 transition: getOpacityTransition(animationDuration)
@@ -3775,7 +3775,7 @@
     };
     Tooltip.displayName = 'Tooltip';
 
-    var _default$e = {
+    var _default$f = {
       "formControl": "pf-c-form-control",
       "modifiers": {
         "success": "pf-m-success",
@@ -3791,7 +3791,7 @@
       }
     };
 
-    var _default$d = {
+    var _default$e = {
       "badge": "pf-c-badge",
       "check": "pf-c-check",
       "divider": "pf-c-divider",
@@ -3971,12 +3971,12 @@
             return (React__namespace.createElement(DropdownArrowContext.Provider, { value: {
                     keyHandler: this.childKeyHandler,
                     sendRef: this.sendRef
-                } }, component === 'div' ? (React__namespace.createElement(DropdownContext.Consumer, null, ({ onSelect, menuClass }) => (React__namespace.createElement("div", { className: css(menuClass, position === DropdownPosition.right && _default$d.modifiers.alignRight, formatBreakpointMods(alignments, _default$d, 'align-'), className), hidden: !isOpen, onClick: event => onSelect && onSelect(event), ref: setMenuComponentRef }, children)))) : ((isGrouped && (React__namespace.createElement(DropdownContext.Consumer, null, ({ menuClass, menuComponent }) => {
+                } }, component === 'div' ? (React__namespace.createElement(DropdownContext.Consumer, null, ({ onSelect, menuClass }) => (React__namespace.createElement("div", { className: css(menuClass, position === DropdownPosition.right && _default$e.modifiers.alignRight, formatBreakpointMods(alignments, _default$e, 'align-'), className), hidden: !isOpen, onClick: event => onSelect && onSelect(event), ref: setMenuComponentRef }, children)))) : ((isGrouped && (React__namespace.createElement(DropdownContext.Consumer, null, ({ menuClass, menuComponent }) => {
                 const MenuComponent = (menuComponent || 'div');
-                return (React__namespace.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === DropdownPosition.right && _default$d.modifiers.alignRight, formatBreakpointMods(alignments, _default$d, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
+                return (React__namespace.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === DropdownPosition.right && _default$e.modifiers.alignRight, formatBreakpointMods(alignments, _default$e, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
             }))) || (React__namespace.createElement(DropdownContext.Consumer, null, ({ menuClass, menuComponent }) => {
                 const MenuComponent = (menuComponent || component);
-                return (React__namespace.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === DropdownPosition.right && _default$d.modifiers.alignRight, formatBreakpointMods(alignments, _default$d, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
+                return (React__namespace.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === DropdownPosition.right && _default$e.modifiers.alignRight, formatBreakpointMods(alignments, _default$e, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
             })))));
         }
     }
@@ -3991,7 +3991,7 @@
         isGrouped: false,
         setMenuComponentRef: null
     };
-    DropdownMenu.validToggleClasses = [_default$d.dropdownToggle, _default$d.dropdownToggleButton];
+    DropdownMenu.validToggleClasses = [_default$e.dropdownToggle, _default$e.dropdownToggleButton];
     DropdownMenu.focusFirstRef = (refCollection) => {
         if (refCollection && refCollection[0] && refCollection[0].focus) {
             setTimeout(() => refCollection[0].focus());
@@ -4043,8 +4043,8 @@
             return (React__namespace.createElement(DropdownContext.Consumer, null, ({ baseClass, baseComponent, id: contextId, ouiaId, ouiaComponentType, ouiaSafe, alignments }) => {
                 const BaseComponent = baseComponent;
                 const menuContainer = (React__namespace.createElement(DropdownMenu, { setMenuComponentRef: this.setMenuComponentRef, component: component, isOpen: isOpen, position: position, "aria-labelledby": contextId ? `${contextId}-toggle` : id, isGrouped: isGrouped, autoFocus: openedOnEnter && autoFocus, alignments: alignments }, renderedContent));
-                const popperContainer = (React__namespace.createElement("div", { className: css(baseClass, direction === DropdownDirection.up && _default$d.modifiers.top, position === DropdownPosition.right && _default$d.modifiers.alignRight, isOpen && _default$d.modifiers.expanded, className) }, isOpen && menuContainer));
-                const mainContainer = (React__namespace.createElement(BaseComponent, Object.assign({}, props, { className: css(baseClass, direction === DropdownDirection.up && _default$d.modifiers.top, position === DropdownPosition.right && _default$d.modifiers.alignRight, isOpen && _default$d.modifiers.expanded, isFullHeight && _default$d.modifiers.fullHeight, className), ref: this.baseComponentRef }, getOUIAProps(ouiaComponentType, ouiaId, ouiaSafe)),
+                const popperContainer = (React__namespace.createElement("div", { className: css(baseClass, direction === DropdownDirection.up && _default$e.modifiers.top, position === DropdownPosition.right && _default$e.modifiers.alignRight, isOpen && _default$e.modifiers.expanded, className) }, isOpen && menuContainer));
+                const mainContainer = (React__namespace.createElement(BaseComponent, Object.assign({}, props, { className: css(baseClass, direction === DropdownDirection.up && _default$e.modifiers.top, position === DropdownPosition.right && _default$e.modifiers.alignRight, isOpen && _default$e.modifiers.expanded, isFullHeight && _default$e.modifiers.fullHeight, className), ref: this.baseComponentRef }, getOUIAProps(ouiaComponentType, ouiaId, ouiaSafe)),
                     React__namespace.Children.map(toggle, oneToggle => React__namespace.cloneElement(oneToggle, {
                         parentRef: this.baseComponentRef,
                         getMenuRef: this.getMenuComponentRef,
@@ -4089,7 +4089,7 @@
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         ref, // Types of Ref are different for React.FC vs React.Component
         ouiaId, ouiaSafe, alignments, contextProps } = _a, props = __rest$1(_a, ["onSelect", "ref", "ouiaId", "ouiaSafe", "alignments", "contextProps"]);
-        return (React__namespace.createElement(DropdownContext.Provider, { value: Object.assign({ onSelect: event => onSelect && onSelect(event), toggleTextClass: _default$d.dropdownToggleText, toggleIconClass: _default$d.dropdownToggleImage, toggleIndicatorClass: _default$d.dropdownToggleIcon, menuClass: _default$d.dropdownMenu, itemClass: _default$d.dropdownMenuItem, toggleClass: _default$d.dropdownToggle, baseClass: _default$d.dropdown, baseComponent: 'div', sectionClass: _default$d.dropdownGroup, sectionTitleClass: _default$d.dropdownGroupTitle, sectionComponent: 'section', disabledClass: _default$d.modifiers.disabled, plainTextClass: _default$d.modifiers.text, ouiaId: useOUIAId(Dropdown.displayName, ouiaId), ouiaSafe, ouiaComponentType: Dropdown.displayName, alignments }, contextProps) },
+        return (React__namespace.createElement(DropdownContext.Provider, { value: Object.assign({ onSelect: event => onSelect && onSelect(event), toggleTextClass: _default$e.dropdownToggleText, toggleIconClass: _default$e.dropdownToggleImage, toggleIndicatorClass: _default$e.dropdownToggleIcon, menuClass: _default$e.dropdownMenu, itemClass: _default$e.dropdownMenuItem, toggleClass: _default$e.dropdownToggle, baseClass: _default$e.dropdown, baseComponent: 'div', sectionClass: _default$e.dropdownGroup, sectionTitleClass: _default$e.dropdownGroupTitle, sectionComponent: 'section', disabledClass: _default$e.modifiers.disabled, plainTextClass: _default$e.modifiers.text, ouiaId: useOUIAId(Dropdown.displayName, ouiaId), ouiaSafe, ouiaComponentType: Dropdown.displayName, alignments }, contextProps) },
             React__namespace.createElement(DropdownWithContext, Object.assign({}, props))));
     };
     Dropdown.displayName = 'Dropdown';
@@ -4163,7 +4163,7 @@
             /* eslint-disable @typescript-eslint/no-unused-vars */
             const _a = this.props, { className, children, isHovered, context, onClick, component, role, isDisabled, isAriaDisabled, isPlainText, index, href, tooltip, tooltipProps, id, componentID, listItemClassName, additionalChild, customChild, enterTriggersArrowDown, icon, autoFocus, styleChildren, description, inoperableEvents } = _a, additionalProps = __rest$1(_a, ["className", "children", "isHovered", "context", "onClick", "component", "role", "isDisabled", "isAriaDisabled", "isPlainText", "index", "href", "tooltip", "tooltipProps", "id", "componentID", "listItemClassName", "additionalChild", "customChild", "enterTriggersArrowDown", "icon", "autoFocus", "styleChildren", "description", "inoperableEvents"]);
             /* eslint-enable @typescript-eslint/no-unused-vars */
-            let classes = css(icon && _default$d.modifiers.icon, isAriaDisabled && _default$d.modifiers.ariaDisabled, className);
+            let classes = css(icon && _default$e.modifiers.icon, isAriaDisabled && _default$e.modifiers.ariaDisabled, className);
             if (component === 'a') {
                 additionalProps['aria-disabled'] = isDisabled || isAriaDisabled;
             }
@@ -4178,17 +4178,17 @@
             const renderDefaultComponent = (tag) => {
                 const Component = tag;
                 const componentContent = description ? (React__namespace.createElement(React__namespace.Fragment, null,
-                    React__namespace.createElement("div", { className: _default$d.dropdownMenuItemMain },
-                        icon && React__namespace.createElement("span", { className: css(_default$d.dropdownMenuItemIcon) }, icon),
+                    React__namespace.createElement("div", { className: _default$e.dropdownMenuItemMain },
+                        icon && React__namespace.createElement("span", { className: css(_default$e.dropdownMenuItemIcon) }, icon),
                         children),
-                    React__namespace.createElement("div", { className: _default$d.dropdownMenuItemDescription }, description))) : (React__namespace.createElement(React__namespace.Fragment, null,
-                    icon && React__namespace.createElement("span", { className: css(_default$d.dropdownMenuItemIcon) }, icon),
+                    React__namespace.createElement("div", { className: _default$e.dropdownMenuItemDescription }, description))) : (React__namespace.createElement(React__namespace.Fragment, null,
+                    icon && React__namespace.createElement("span", { className: css(_default$e.dropdownMenuItemIcon) }, icon),
                     children));
                 return (React__namespace.createElement(Component, Object.assign({}, additionalProps, (isDisabled || isAriaDisabled ? preventedEvents(inoperableEvents) : null), { href: href, ref: this.ref, className: classes, id: componentID }), componentContent));
             };
             return (React__namespace.createElement(DropdownContext.Consumer, null, ({ onSelect, itemClass, disabledClass, plainTextClass }) => {
                 if (this.props.role !== 'separator') {
-                    classes = css(classes, isDisabled && disabledClass, isPlainText && plainTextClass, itemClass, description && _default$d.modifiers.description);
+                    classes = css(classes, isDisabled && disabledClass, isPlainText && plainTextClass, itemClass, description && _default$e.modifiers.description);
                 }
                 if (customChild) {
                     return React__namespace.cloneElement(customChild, {
@@ -4242,7 +4242,7 @@
     };
     DropdownItem.displayName = 'DropdownItem';
 
-    var _default$c = {
+    var _default$d = {
       "divider": "pf-c-divider",
       "modifiers": {
         "hidden": "pf-m-hidden",
@@ -4317,7 +4317,7 @@
     const Divider = (_a) => {
         var { className, component = DividerVariant.hr, isVertical = false, inset } = _a, props = __rest$1(_a, ["className", "component", "isVertical", "inset"]);
         const Component = component;
-        return (React__namespace.createElement(Component, Object.assign({ className: css(_default$c.divider, isVertical && _default$c.modifiers.vertical, formatBreakpointMods(inset, _default$c), className) }, (component !== 'hr' && { role: 'separator' }), props)));
+        return (React__namespace.createElement(Component, Object.assign({ className: css(_default$d.divider, isVertical && _default$d.modifiers.vertical, formatBreakpointMods(inset, _default$d), className) }, (component !== 'hr' && { role: 'separator' }), props)));
     };
     Divider.displayName = 'Divider';
 
@@ -4407,7 +4407,7 @@
             isActive, bubbleEvent, onEnter, parentRef, getMenuRef, 
             /* eslint-enable @typescript-eslint/no-unused-vars */
             id, type } = _a, props = __rest$1(_a, ["className", "children", "isOpen", "isDisabled", "isPlain", "isPrimary", "isSplitButton", "onToggle", 'aria-haspopup', "isActive", "bubbleEvent", "onEnter", "parentRef", "getMenuRef", "id", "type"]);
-            return (React__namespace.createElement(DropdownContext.Consumer, null, ({ toggleClass }) => (React__namespace.createElement("button", Object.assign({}, props, { id: id, ref: this.buttonRef, className: css(isSplitButton ? _default$d.dropdownToggleButton : toggleClass || _default$d.dropdownToggle, isActive && _default$d.modifiers.active, isPlain && _default$d.modifiers.plain, isPrimary && _default$d.modifiers.primary, className), type: type || 'button', onClick: event => onToggle(!isOpen, event), "aria-expanded": isOpen, "aria-haspopup": ariaHasPopup, onKeyDown: event => this.onKeyDown(event), disabled: isDisabled }), children))));
+            return (React__namespace.createElement(DropdownContext.Consumer, null, ({ toggleClass }) => (React__namespace.createElement("button", Object.assign({}, props, { id: id, ref: this.buttonRef, className: css(isSplitButton ? _default$e.dropdownToggleButton : toggleClass || _default$e.dropdownToggle, isActive && _default$e.modifiers.active, isPlain && _default$e.modifiers.plain, isPrimary && _default$e.modifiers.primary, className), type: type || 'button', onClick: event => onToggle(!isOpen, event), "aria-expanded": isOpen, "aria-haspopup": ariaHasPopup, onKeyDown: event => this.onKeyDown(event), disabled: isDisabled }), children))));
         }
     }
     Toggle.displayName = 'Toggle';
@@ -4424,7 +4424,7 @@
         bubbleEvent: false
     };
 
-    var _default$b = {
+    var _default$c = {
       "badge": "pf-c-badge",
       "modifiers": {
         "read": "pf-m-read",
@@ -4621,7 +4621,7 @@
             if (customIconDimensions) {
                 customIconStyle.backgroundSize = customIconDimensions;
             }
-            return (React__namespace.createElement("input", Object.assign({}, props, { onFocus: this.onFocus, onBlur: this.onBlur, className: css(_default$e.formControl, validated === ValidatedOptions.success && _default$e.modifiers.success, validated === ValidatedOptions.warning && _default$e.modifiers.warning, ((iconVariant && iconVariant !== 'search') || customIconUrl) && _default$e.modifiers.icon, iconVariant && _default$e.modifiers[iconVariant], className), onChange: this.handleChange, type: type, value: value, "aria-invalid": props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error, required: isRequired, disabled: isDisabled, readOnly: isReadOnly, ref: innerRef || this.inputRef }, ((customIconUrl || customIconDimensions) && { style: customIconStyle }), getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
+            return (React__namespace.createElement("input", Object.assign({}, props, { onFocus: this.onFocus, onBlur: this.onBlur, className: css(_default$f.formControl, validated === ValidatedOptions.success && _default$f.modifiers.success, validated === ValidatedOptions.warning && _default$f.modifiers.warning, ((iconVariant && iconVariant !== 'search') || customIconUrl) && _default$f.modifiers.icon, iconVariant && _default$f.modifiers[iconVariant], className), onChange: this.handleChange, type: type, value: value, "aria-invalid": props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error, required: isRequired, disabled: isDisabled, readOnly: isReadOnly, ref: innerRef || this.inputRef }, ((customIconUrl || customIconDimensions) && { style: customIconStyle }), getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
         }
     }
     TextInputBase.displayName = 'TextInputBase';
@@ -4640,7 +4640,7 @@
     const TextInput = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TextInputBase, Object.assign({}, props, { innerRef: ref }))));
     TextInput.displayName = 'TextInput';
 
-    var _default$a = {
+    var _default$b = {
       "check": "pf-c-check",
       "checkLabel": "pf-c-check__label",
       "chipGroup": "pf-c-chip-group",
@@ -4711,7 +4711,7 @@
 
     var TimesCircleIcon$1 = TimesCircleIcon;
 
-    var _default$9 = {
+    var _default$a = {
       "form": "pf-c-form",
       "formActions": "pf-c-form__actions",
       "formFieldGroup": "pf-c-form__field-group",
@@ -4758,7 +4758,7 @@
       }
     };
 
-    var _default$8 = {
+    var _default$9 = {
       "check": "pf-c-check",
       "checkBody": "pf-c-check__body",
       "checkDescription": "pf-c-check__description",
@@ -4882,26 +4882,26 @@
                 console.error('Please provide an id to use the favorites feature.');
             }
             const generatedId = id || getUniqueId('select-option');
-            const favoriteButton = (onFavorite) => (React__namespace.createElement("button", { className: css(_default$a.selectMenuItem, _default$a.modifiers.action, _default$a.modifiers.favoriteAction), "aria-label": isFavorite ? ariaIsFavoriteLabel : ariaIsNotFavoriteLabel, onClick: () => {
+            const favoriteButton = (onFavorite) => (React__namespace.createElement("button", { className: css(_default$b.selectMenuItem, _default$b.modifiers.action, _default$b.modifiers.favoriteAction), "aria-label": isFavorite ? ariaIsFavoriteLabel : ariaIsNotFavoriteLabel, onClick: () => {
                     onFavorite(generatedId.replace('favorite-', ''), isFavorite);
                 }, onKeyDown: event => {
                     this.onKeyDown(event, 1, () => onFavorite(generatedId.replace('favorite-', '')));
                 }, ref: this.favoriteRef },
-                React__namespace.createElement("span", { className: css(_default$a.selectMenuItemActionIcon) },
+                React__namespace.createElement("span", { className: css(_default$b.selectMenuItemActionIcon) },
                     React__namespace.createElement(StarIcon$1, null))));
-            const itemDisplay = itemCount ? (React__namespace.createElement("span", { className: css(_default$a.selectMenuItemRow) },
-                React__namespace.createElement("span", { className: css(_default$a.selectMenuItemText) }, children || (value && value.toString && value.toString())),
-                React__namespace.createElement("span", { className: css(_default$a.selectMenuItemCount) }, itemCount))) : (children || value.toString());
+            const itemDisplay = itemCount ? (React__namespace.createElement("span", { className: css(_default$b.selectMenuItemRow) },
+                React__namespace.createElement("span", { className: css(_default$b.selectMenuItemText) }, children || (value && value.toString && value.toString())),
+                React__namespace.createElement("span", { className: css(_default$b.selectMenuItemCount) }, itemCount))) : (children || value.toString());
             const onViewMoreClick = (event) => {
                 // Set the index for the next item to focus after view more clicked, then call view more callback
                 setViewMoreNextIndex();
                 onClick(event);
             };
             return (React__namespace.createElement(SelectConsumer, null, ({ onSelect, onClose, variant, inputIdPrefix, onFavorite }) => (React__namespace.createElement(React__namespace.Fragment, null,
-                variant !== SelectVariant.checkbox && (React__namespace.createElement("li", { id: generatedId, role: "presentation", className: css(isLoading && _default$a.selectListItem, !isLoad && !isLoading && _default$a.selectMenuWrapper, isFavorite && _default$a.modifiers.favorite, isFocused && _default$a.modifiers.focus, isLoading && _default$a.modifiers.loading), ref: this.liRef },
+                variant !== SelectVariant.checkbox && (React__namespace.createElement("li", { id: generatedId, role: "presentation", className: css(isLoading && _default$b.selectListItem, !isLoad && !isLoading && _default$b.selectMenuWrapper, isFavorite && _default$b.modifiers.favorite, isFocused && _default$b.modifiers.focus, isLoading && _default$b.modifiers.loading), ref: this.liRef },
                     isLoading && children,
                     !isLoading && (React__namespace.createElement(React__namespace.Fragment, null,
-                        React__namespace.createElement(Component, Object.assign({}, props, { className: css(_default$a.selectMenuItem, isLoad && _default$a.modifiers.load, isSelected && _default$a.modifiers.selected, isDisabled && _default$a.modifiers.disabled, description && _default$a.modifiers.description, isFavorite !== null && _default$a.modifiers.link, className), onClick: (event) => {
+                        React__namespace.createElement(Component, Object.assign({}, props, { className: css(_default$b.selectMenuItem, isLoad && _default$b.modifiers.load, isSelected && _default$b.modifiers.selected, isDisabled && _default$b.modifiers.disabled, description && _default$b.modifiers.description, isFavorite !== null && _default$b.modifiers.link, className), onClick: (event) => {
                                 if (isLoad) {
                                     onViewMoreClick(event);
                                     event.stopPropagation();
@@ -4915,36 +4915,36 @@
                                 this.onKeyDown(event, 0);
                             }, type: "button" }),
                             description && (React__namespace.createElement(React__namespace.Fragment, null,
-                                React__namespace.createElement("span", { className: css(_default$a.selectMenuItemMain) },
+                                React__namespace.createElement("span", { className: css(_default$b.selectMenuItemMain) },
                                     itemDisplay,
-                                    isSelected && (React__namespace.createElement("span", { className: css(_default$a.selectMenuItemIcon) },
+                                    isSelected && (React__namespace.createElement("span", { className: css(_default$b.selectMenuItemIcon) },
                                         React__namespace.createElement(CheckIcon$1, { "aria-hidden": true })))),
-                                React__namespace.createElement("span", { className: css(_default$a.selectMenuItemDescription) }, description))),
+                                React__namespace.createElement("span", { className: css(_default$b.selectMenuItemDescription) }, description))),
                             !description && (React__namespace.createElement(React__namespace.Fragment, null,
                                 itemDisplay,
-                                isSelected && (React__namespace.createElement("span", { className: css(_default$a.selectMenuItemIcon) },
+                                isSelected && (React__namespace.createElement("span", { className: css(_default$b.selectMenuItemIcon) },
                                     React__namespace.createElement(CheckIcon$1, { "aria-hidden": true })))))),
                         isFavorite !== null && id && favoriteButton(onFavorite))))),
-                variant === SelectVariant.checkbox && isLoad && (React__namespace.createElement("button", { className: css(_default$a.selectMenuItem, _default$a.modifiers.load, isFocused && _default$a.modifiers.focus, className), onKeyDown: (event) => {
+                variant === SelectVariant.checkbox && isLoad && (React__namespace.createElement("button", { className: css(_default$b.selectMenuItem, _default$b.modifiers.load, isFocused && _default$b.modifiers.focus, className), onKeyDown: (event) => {
                         this.onKeyDown(event, 0, undefined, true);
                     }, onClick: (event) => {
                         onViewMoreClick(event);
                         event.stopPropagation();
                     }, ref: this.ref }, children || (value && value.toString && value.toString()))),
-                variant === SelectVariant.checkbox && isLoading && (React__namespace.createElement("div", { className: css(_default$a.selectListItem, isLoading && _default$a.modifiers.loading, className) }, children)),
-                variant === SelectVariant.checkbox && !isNoResultsOption && !isLoading && !isLoad && (React__namespace.createElement("label", Object.assign({}, props, { className: css(_default$8.check, _default$a.selectMenuItem, isDisabled && _default$a.modifiers.disabled, description && _default$a.modifiers.description, className), onKeyDown: (event) => {
+                variant === SelectVariant.checkbox && isLoading && (React__namespace.createElement("div", { className: css(_default$b.selectListItem, isLoading && _default$b.modifiers.loading, className) }, children)),
+                variant === SelectVariant.checkbox && !isNoResultsOption && !isLoading && !isLoad && (React__namespace.createElement("label", Object.assign({}, props, { className: css(_default$9.check, _default$b.selectMenuItem, isDisabled && _default$b.modifiers.disabled, description && _default$b.modifiers.description, className), onKeyDown: (event) => {
                         this.onKeyDown(event, 0, undefined, true);
                     } }),
-                    React__namespace.createElement("input", { id: inputId || `${inputIdPrefix}-${value.toString()}`, className: css(_default$8.checkInput), type: "checkbox", onChange: event => {
+                    React__namespace.createElement("input", { id: inputId || `${inputIdPrefix}-${value.toString()}`, className: css(_default$9.checkInput), type: "checkbox", onChange: event => {
                             if (!isDisabled) {
                                 onClick(event);
                                 onSelect(event, value);
                             }
                         }, ref: this.ref, checked: isChecked || false, disabled: isDisabled }),
-                    React__namespace.createElement("span", { className: css(_default$8.checkLabel, isDisabled && _default$a.modifiers.disabled) }, itemDisplay),
-                    description && React__namespace.createElement("div", { className: css(_default$8.checkDescription) }, description))),
+                    React__namespace.createElement("span", { className: css(_default$9.checkLabel, isDisabled && _default$b.modifiers.disabled) }, itemDisplay),
+                    description && React__namespace.createElement("div", { className: css(_default$9.checkDescription) }, description))),
                 variant === SelectVariant.checkbox && isNoResultsOption && !isLoading && !isLoad && (React__namespace.createElement("div", null,
-                    React__namespace.createElement(Component, Object.assign({}, props, { className: css(_default$a.selectMenuItem, isSelected && _default$a.modifiers.selected, isDisabled && _default$a.modifiers.disabled, className), role: "option", "aria-selected": isSelected || null, ref: this.ref, onKeyDown: (event) => {
+                    React__namespace.createElement(Component, Object.assign({}, props, { className: css(_default$b.selectMenuItem, isSelected && _default$b.modifiers.selected, isDisabled && _default$b.modifiers.disabled, className), role: "option", "aria-selected": isSelected || null, ref: this.ref, onKeyDown: (event) => {
                             this.onKeyDown(event, 0, undefined, true);
                         }, type: "button" }), itemDisplay)))))));
         }
@@ -4973,8 +4973,8 @@
 
     const SelectGroup = (_a) => {
         var { children = [], className = '', label = '', titleId = '' } = _a, props = __rest$1(_a, ["children", "className", "label", "titleId"]);
-        return (React__namespace.createElement(SelectConsumer, null, ({ variant }) => (React__namespace.createElement("div", Object.assign({}, props, { className: css(_default$a.selectMenuGroup, className) }),
-            React__namespace.createElement("div", { className: css(_default$a.selectMenuGroupTitle), id: titleId, "aria-hidden": true }, label),
+        return (React__namespace.createElement(SelectConsumer, null, ({ variant }) => (React__namespace.createElement("div", Object.assign({}, props, { className: css(_default$b.selectMenuGroup, className) }),
+            React__namespace.createElement("div", { className: css(_default$b.selectMenuGroupTitle), id: titleId, "aria-hidden": true }, label),
             variant === SelectVariant.checkbox ? children : React__namespace.createElement("ul", { role: "listbox" }, children)))));
     };
     SelectGroup.displayName = 'SelectGroup';
@@ -5047,7 +5047,7 @@
                     }
                     return React__namespace.cloneElement(group, {
                         titleId: group.props.label && group.props.label.replace(/\W/g, '-'),
-                        children: group.props.children ? (React__namespace.createElement("fieldset", { "aria-labelledby": group.props.label && group.props.label.replace(/\W/g, '-'), className: css(_default$a.selectMenuFieldset) }, React__namespace.Children.map(group.props.children, (option) => option.type === Divider
+                        children: group.props.children ? (React__namespace.createElement("fieldset", { "aria-labelledby": group.props.label && group.props.label.replace(/\W/g, '-'), className: css(_default$b.selectMenuFieldset) }, React__namespace.Children.map(group.props.children, (option) => option.type === Divider
                             ? option
                             : React__namespace.cloneElement(option, {
                                 isChecked: this.checkForValue(option.props.value, checked),
@@ -5073,7 +5073,7 @@
             const _a = this.props, { children, isCustomContent, className, isExpanded, openedOnEnter, selected, checked, isGrouped, position, sendRef, keyHandler, maxHeight, noResultsFoundText, createText, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, hasInlineFilter, innerRef, footer, footerRef, isLastOptionBeforeFooter } = _a, props = __rest$1(_a, ["children", "isCustomContent", "className", "isExpanded", "openedOnEnter", "selected", "checked", "isGrouped", "position", "sendRef", "keyHandler", "maxHeight", "noResultsFoundText", "createText", 'aria-label', 'aria-labelledby', "hasInlineFilter", "innerRef", "footer", "footerRef", "isLastOptionBeforeFooter"]);
             /* eslint-enable @typescript-eslint/no-unused-vars */
             let Component = 'div';
-            const variantProps = Object.assign({ ref: innerRef, className: css(!footer ? _default$a.selectMenu : 'pf-c-select__menu-list', position === SelectPosition.right && _default$a.modifiers.alignRight, className) }, (maxHeight && { style: { maxHeight, overflow: 'auto' } }));
+            const variantProps = Object.assign({ ref: innerRef, className: css(!footer ? _default$b.selectMenu : 'pf-c-select__menu-list', position === SelectPosition.right && _default$b.modifiers.alignRight, className) }, (maxHeight && { style: { maxHeight, overflow: 'auto' } }));
             const extendedChildren = () => variant === SelectVariant.checkbox
                 ? this.extendCheckboxChildren(children)
                 : this.extendChildren(inputIdPrefix);
@@ -5082,10 +5082,10 @@
             }
             else if (hasInlineFilter) {
                 if (React__namespace.Children.count(children) === 0) {
-                    variantProps.children = React__namespace.createElement("fieldset", { className: css(_default$a.selectMenuFieldset) });
+                    variantProps.children = React__namespace.createElement("fieldset", { className: css(_default$b.selectMenuFieldset) });
                 }
                 else {
-                    variantProps.children = (React__namespace.createElement("fieldset", { "aria-label": ariaLabel, "aria-labelledby": (!ariaLabel && ariaLabelledBy) || null, className: css(_default$9.formFieldset) },
+                    variantProps.children = (React__namespace.createElement("fieldset", { "aria-label": ariaLabel, "aria-labelledby": (!ariaLabel && ariaLabelledBy) || null, className: css(_default$a.formFieldset) },
                         children.shift(),
                         extendedChildren()));
                 }
@@ -5101,7 +5101,7 @@
             }
             return (React__namespace.createElement(React__namespace.Fragment, null,
                 React__namespace.createElement(Component, Object.assign({}, variantProps, props)),
-                footer && (React__namespace.createElement("div", { className: css(_default$a.selectMenuFooter), ref: footerRef }, footer))));
+                footer && (React__namespace.createElement("div", { className: css(_default$b.selectMenuFooter), ref: footerRef }, footer))));
         }
         render() {
             return React__namespace.createElement(SelectConsumer, null, context => this.renderSelectMenu(context));
@@ -5255,7 +5255,7 @@
                 'aria-haspopup': (variant !== SelectVariant.checkbox && 'listbox') || null
             };
             return (React__namespace.createElement(React__namespace.Fragment, null,
-                !isTypeahead && (React__namespace.createElement("button", Object.assign({}, props, toggleProps, { ref: this.toggle, type: type, className: css(_default$a.selectToggle, hasPlaceholderStyle && _default$a.modifiers.placeholder, isDisabled && _default$a.modifiers.disabled, isPlain && _default$a.modifiers.plain, isActive && _default$a.modifiers.active, className), "aria-label": ariaLabel, 
+                !isTypeahead && (React__namespace.createElement("button", Object.assign({}, props, toggleProps, { ref: this.toggle, type: type, className: css(_default$b.selectToggle, hasPlaceholderStyle && _default$b.modifiers.placeholder, isDisabled && _default$b.modifiers.disabled, isPlain && _default$b.modifiers.plain, isActive && _default$b.modifiers.active, className), "aria-label": ariaLabel, 
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     onClick: _event => {
                         onToggle(!isOpen);
@@ -5264,9 +5264,9 @@
                         }
                     }, onKeyDown: this.onKeyDown, disabled: isDisabled }),
                     children,
-                    React__namespace.createElement("span", { className: css(_default$a.selectToggleArrow) },
+                    React__namespace.createElement("span", { className: css(_default$b.selectToggleArrow) },
                         React__namespace.createElement(CaretDownIcon$1, null)))),
-                isTypeahead && (React__namespace.createElement("div", Object.assign({}, props, { ref: this.toggle, className: css(_default$a.selectToggle, hasPlaceholderStyle && _default$a.modifiers.placeholder, isDisabled && _default$a.modifiers.disabled, isPlain && _default$a.modifiers.plain, isTypeahead && _default$a.modifiers.typeahead, className), 
+                isTypeahead && (React__namespace.createElement("div", Object.assign({}, props, { ref: this.toggle, className: css(_default$b.selectToggle, hasPlaceholderStyle && _default$b.modifiers.placeholder, isDisabled && _default$b.modifiers.disabled, isPlain && _default$b.modifiers.plain, isTypeahead && _default$b.modifiers.typeahead, className), 
                     // eslint-disable-next-line @typescript-eslint/no-unused-vars
                     onClick: _event => {
                         if (!isDisabled) {
@@ -5274,7 +5274,7 @@
                         }
                     }, onKeyDown: this.onKeyDown }),
                     children,
-                    React__namespace.createElement("button", Object.assign({}, toggleProps, { type: type, className: css(_default$h.button, _default$a.selectToggleButton, _default$a.modifiers.plain), "aria-label": ariaLabel, onClick: _event => {
+                    React__namespace.createElement("button", Object.assign({}, toggleProps, { type: type, className: css(_default$i.button, _default$b.selectToggleButton, _default$b.modifiers.plain), "aria-label": ariaLabel, onClick: _event => {
                             onToggle(!isOpen);
                             if (isOpen) {
                                 onClose();
@@ -5283,7 +5283,7 @@
                         } }, ((variant === SelectVariant.typeahead || variant === SelectVariant.typeaheadMulti) && {
                         tabIndex: -1
                     }), { disabled: isDisabled }),
-                        React__namespace.createElement(CaretDownIcon$1, { className: css(_default$a.selectToggleArrow) }))))));
+                        React__namespace.createElement(CaretDownIcon$1, { className: css(_default$b.selectToggleArrow) }))))));
         }
     }
     SelectToggle.displayName = 'SelectToggle';
@@ -5306,7 +5306,7 @@
         onClickTypeaheadToggleButton: () => { }
     };
 
-    var _default$7 = {
+    var _default$8 = {
       "chipGroup": "pf-c-chip-group",
       "chipGroupClose": "pf-c-chip-group__close",
       "chipGroupLabel": "pf-c-chip-group__label",
@@ -5318,7 +5318,7 @@
       }
     };
 
-    var _default$6 = {
+    var _default$7 = {
       "badge": "pf-c-badge",
       "button": "pf-c-button",
       "chip": "pf-c-chip",
@@ -5337,8 +5337,8 @@
             this.renderOverflowChip = () => {
                 const { children, className, onClick, ouiaId } = this.props;
                 const Component = this.props.component;
-                return (React__namespace.createElement(Component, Object.assign({ onClick: onClick, className: css(_default$6.chip, _default$6.modifiers.overflow, className) }, (this.props.component === 'button' ? { type: 'button' } : {}), getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
-                    React__namespace.createElement("span", { className: css(_default$6.chipText) }, children)));
+                return (React__namespace.createElement(Component, Object.assign({ onClick: onClick, className: css(_default$7.chip, _default$7.modifiers.overflow, className) }, (this.props.component === 'button' ? { type: 'button' } : {}), getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
+                    React__namespace.createElement("span", { className: css(_default$7.chipText) }, children)));
             };
             this.renderChip = (randomId) => {
                 const { children, tooltipPosition } = this.props;
@@ -5360,8 +5360,8 @@
         renderInnerChip(id) {
             const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId } = this.props;
             const Component = component;
-            return (React__namespace.createElement(Component, Object.assign({ className: css(_default$6.chip, className) }, (this.state.isTooltipVisible && { tabIndex: 0 }), getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
-                React__namespace.createElement("span", { ref: this.span, className: css(_default$6.chipText), id: id }, children),
+            return (React__namespace.createElement(Component, Object.assign({ className: css(_default$7.chip, className) }, (this.state.isTooltipVisible && { tabIndex: 0 }), getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
+                React__namespace.createElement("span", { ref: this.span, className: css(_default$7.chipText), id: id }, children),
                 !isReadOnly && (React__namespace.createElement(Button, { onClick: onClick, variant: "plain", "aria-label": closeBtnAriaLabel, id: `remove_${id}`, "aria-labelledby": `remove_${id} ${id}`, ouiaId: ouiaId || closeBtnAriaLabel },
                     React__namespace.createElement(TimesIcon$1, { "aria-hidden": "true" })))));
         }
@@ -5406,8 +5406,8 @@
             const { categoryName, tooltipPosition } = this.props;
             const { isTooltipVisible } = this.state;
             return isTooltipVisible ? (React__namespace.createElement(Tooltip, { position: tooltipPosition, content: categoryName },
-                React__namespace.createElement("span", { tabIndex: 0, ref: this.headingRef, className: css(_default$7.chipGroupLabel), id: id, "aria-label": categoryName },
-                    React__namespace.createElement("span", { "aria-hidden": "true" }, categoryName)))) : (React__namespace.createElement("span", { ref: this.headingRef, className: css(_default$7.chipGroupLabel), "aria-hidden": "true", id: id }, categoryName));
+                React__namespace.createElement("span", { tabIndex: 0, ref: this.headingRef, className: css(_default$8.chipGroupLabel), id: id, "aria-label": categoryName },
+                    React__namespace.createElement("span", { "aria-hidden": "true" }, categoryName)))) : (React__namespace.createElement("span", { ref: this.headingRef, className: css(_default$8.chipGroupLabel), "aria-hidden": "true", id: id }, categoryName));
         }
         render() {
             const _a = this.props, { categoryName, children, className, isClosable, closeBtnAriaLabel, 'aria-label': ariaLabel, onClick, onOverflowChipClick, numChips, expandedText, collapsedText, ouiaId, 
@@ -5424,17 +5424,17 @@
                 const chipArray = !isOpen
                     ? React__namespace.Children.toArray(children).slice(0, numChips)
                     : React__namespace.Children.toArray(children);
-                return (React__namespace.createElement("div", Object.assign({ className: css(_default$7.chipGroup, className, categoryName && _default$7.modifiers.category) }, getOUIAProps(ChipGroup.displayName, ouiaId)),
-                    React__namespace.createElement("div", { className: css(_default$7.chipGroupMain) },
+                return (React__namespace.createElement("div", Object.assign({ className: css(_default$8.chipGroup, className, categoryName && _default$8.modifiers.category) }, getOUIAProps(ChipGroup.displayName, ouiaId)),
+                    React__namespace.createElement("div", { className: css(_default$8.chipGroupMain) },
                         categoryName && this.renderLabel(id),
-                        React__namespace.createElement("ul", Object.assign({ className: css(_default$7.chipGroupList) }, (categoryName && { 'aria-labelledby': id }), (!categoryName && { 'aria-label': ariaLabel }), { role: "list" }, rest),
-                            chipArray.map((child, i) => (React__namespace.createElement("li", { className: css(_default$7.chipGroupListItem), key: i }, child))),
-                            numChildren > numChips && (React__namespace.createElement("li", { className: css(_default$7.chipGroupListItem) },
+                        React__namespace.createElement("ul", Object.assign({ className: css(_default$8.chipGroupList) }, (categoryName && { 'aria-labelledby': id }), (!categoryName && { 'aria-label': ariaLabel }), { role: "list" }, rest),
+                            chipArray.map((child, i) => (React__namespace.createElement("li", { className: css(_default$8.chipGroupListItem), key: i }, child))),
+                            numChildren > numChips && (React__namespace.createElement("li", { className: css(_default$8.chipGroupListItem) },
                                 React__namespace.createElement(Chip, { isOverflowChip: true, onClick: event => {
                                         this.toggleCollapse();
                                         onOverflowChipClick(event);
                                     }, component: "button" }, isOpen ? expandedText : collapsedTextResult))))),
-                    isClosable && (React__namespace.createElement("div", { className: css(_default$7.chipGroupClose) },
+                    isClosable && (React__namespace.createElement("div", { className: css(_default$8.chipGroupClose) },
                         React__namespace.createElement(Button, { variant: "plain", "aria-label": closeBtnAriaLabel, onClick: onClick, id: `remove_group_${id}`, "aria-labelledby": `remove_group_${id} ${id}`, ouiaId: ouiaId || closeBtnAriaLabel },
                             React__namespace.createElement(TimesCircleIcon$1, { "aria-hidden": "true" }))))));
             };
@@ -5959,7 +5959,7 @@
                 }
             }
             const hasOnClear = onClear !== Select.defaultProps.onClear;
-            const clearBtn = (React__namespace.createElement("button", { className: css(_default$h.button, _default$h.modifiers.plain, _default$a.selectToggleClear), onClick: e => {
+            const clearBtn = (React__namespace.createElement("button", { className: css(_default$i.button, _default$i.modifiers.plain, _default$b.selectToggleClear), onClick: e => {
                     this.clearSelection(e);
                     onClear(e);
                 }, "aria-label": clearSelectionsAriaLabel, type: "button", disabled: isDisabled, ref: this.clearRef, onKeyDown: event => {
@@ -5975,8 +5975,8 @@
             }
             if (hasInlineFilter) {
                 const filterBox = (React__namespace.createElement(React__namespace.Fragment, null,
-                    React__namespace.createElement("div", { key: "inline-filter", className: css(_default$a.selectMenuSearch) },
-                        React__namespace.createElement("input", { key: "inline-filter-input", type: "search", className: css(_default$e.formControl, _default$e.modifiers.search), onChange: this.onChange, placeholder: inlineFilterPlaceholderText, onKeyDown: event => {
+                    React__namespace.createElement("div", { key: "inline-filter", className: css(_default$b.selectMenuSearch) },
+                        React__namespace.createElement("input", { key: "inline-filter-input", type: "search", className: css(_default$f.formControl, _default$f.modifiers.search), onChange: this.onChange, placeholder: inlineFilterPlaceholderText, onKeyDown: event => {
                                 if (event.key === KeyTypes.ArrowUp) {
                                     this.handleMenuKeys(0, 0, 'up');
                                     event.preventDefault();
@@ -6061,46 +6061,46 @@
                 }
             }
             const innerMenu = (React__namespace.createElement(SelectMenu, Object.assign({}, props, { isGrouped: isGrouped, selected: selections }, variantProps, { openedOnEnter: openedOnEnter, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, sendRef: this.sendRef, keyHandler: this.handleMenuKeys, maxHeight: maxHeight, ref: this.menuComponentRef, footer: footer, footerRef: this.footerRef, isLastOptionBeforeFooter: this.isLastOptionBeforeFooter }), variantChildren));
-            const menuContainer = footer ? React__namespace.createElement("div", { className: css(_default$a.selectMenu) },
+            const menuContainer = footer ? React__namespace.createElement("div", { className: css(_default$b.selectMenu) },
                 " ",
                 innerMenu,
                 " ") : innerMenu;
-            const popperContainer = (React__namespace.createElement("div", Object.assign({ className: css(_default$a.select, isOpen && _default$a.modifiers.expanded, validated === ValidatedOptions.success && _default$a.modifiers.success, validated === ValidatedOptions.warning && _default$a.modifiers.warning, validated === ValidatedOptions.error && _default$a.modifiers.invalid, direction === SelectDirection.up && _default$a.modifiers.top, className) }, (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })), isOpen && menuContainer));
-            const mainContainer = (React__namespace.createElement("div", Object.assign({ className: css(_default$a.select, isOpen && _default$a.modifiers.expanded, validated === ValidatedOptions.success && _default$a.modifiers.success, validated === ValidatedOptions.warning && _default$a.modifiers.warning, validated === ValidatedOptions.error && _default$a.modifiers.invalid, direction === SelectDirection.up && _default$a.modifiers.top, className), ref: this.parentRef }, getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })),
+            const popperContainer = (React__namespace.createElement("div", Object.assign({ className: css(_default$b.select, isOpen && _default$b.modifiers.expanded, validated === ValidatedOptions.success && _default$b.modifiers.success, validated === ValidatedOptions.warning && _default$b.modifiers.warning, validated === ValidatedOptions.error && _default$b.modifiers.invalid, direction === SelectDirection.up && _default$b.modifiers.top, className) }, (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })), isOpen && menuContainer));
+            const mainContainer = (React__namespace.createElement("div", Object.assign({ className: css(_default$b.select, isOpen && _default$b.modifiers.expanded, validated === ValidatedOptions.success && _default$b.modifiers.success, validated === ValidatedOptions.warning && _default$b.modifiers.warning, validated === ValidatedOptions.error && _default$b.modifiers.invalid, direction === SelectDirection.up && _default$b.modifiers.top, className), ref: this.parentRef }, getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })),
                 React__namespace.createElement(SelectToggle, Object.assign({ id: selectToggleId, parentRef: this.parentRef, menuRef: this.menuComponentRef }, (footer && { footerRef: this.footerRef }), { isOpen: isOpen, isPlain: isPlain, hasPlaceholderStyle: hasPlaceholderStyle && (!selections.length || selections[0] === null || isSelectedPlaceholder), onToggle: this.onToggle, onEnter: this.onEnter, onClose: this.onClose, variant: variant, "aria-labelledby": `${ariaLabelledBy || ''} ${selectToggleId}`, "aria-label": toggleAriaLabel, handleTypeaheadKeys: this.handleTypeaheadKeys, isDisabled: isDisabled, hasClearButton: hasOnClear, hasFooter: footer !== undefined, onClickTypeaheadToggleButton: this.onClickTypeaheadToggleButton }),
-                    customContent && (React__namespace.createElement("div", { className: css(_default$a.selectToggleWrapper) },
-                        toggleIcon && React__namespace.createElement("span", { className: css(_default$a.selectToggleIcon) }, toggleIcon),
-                        React__namespace.createElement("span", { className: css(_default$a.selectToggleText) }, placeholderText))),
+                    customContent && (React__namespace.createElement("div", { className: css(_default$b.selectToggleWrapper) },
+                        toggleIcon && React__namespace.createElement("span", { className: css(_default$b.selectToggleIcon) }, toggleIcon),
+                        React__namespace.createElement("span", { className: css(_default$b.selectToggleText) }, placeholderText))),
                     variant === SelectVariant.single && !customContent && (React__namespace.createElement(React__namespace.Fragment, null,
-                        React__namespace.createElement("div", { className: css(_default$a.selectToggleWrapper) },
-                            toggleIcon && React__namespace.createElement("span", { className: css(_default$a.selectToggleIcon) }, toggleIcon),
-                            React__namespace.createElement("span", { className: css(_default$a.selectToggleText) }, this.getDisplay(selections[0], 'node') || placeholderText || childPlaceholderText)),
+                        React__namespace.createElement("div", { className: css(_default$b.selectToggleWrapper) },
+                            toggleIcon && React__namespace.createElement("span", { className: css(_default$b.selectToggleIcon) }, toggleIcon),
+                            React__namespace.createElement("span", { className: css(_default$b.selectToggleText) }, this.getDisplay(selections[0], 'node') || placeholderText || childPlaceholderText)),
                         hasOnClear && hasAnySelections && clearBtn)),
                     variant === SelectVariant.checkbox && !customContent && (React__namespace.createElement(React__namespace.Fragment, null,
-                        React__namespace.createElement("div", { className: css(_default$a.selectToggleWrapper) },
-                            toggleIcon && React__namespace.createElement("span", { className: css(_default$a.selectToggleIcon) }, toggleIcon),
-                            React__namespace.createElement("span", { className: css(_default$a.selectToggleText) }, placeholderText),
-                            !isCheckboxSelectionBadgeHidden && hasAnySelections && (React__namespace.createElement("div", { className: css(_default$a.selectToggleBadge) },
-                                React__namespace.createElement("span", { className: css(_default$b.badge, _default$b.modifiers.read) }, this.generateSelectedBadge())))),
+                        React__namespace.createElement("div", { className: css(_default$b.selectToggleWrapper) },
+                            toggleIcon && React__namespace.createElement("span", { className: css(_default$b.selectToggleIcon) }, toggleIcon),
+                            React__namespace.createElement("span", { className: css(_default$b.selectToggleText) }, placeholderText),
+                            !isCheckboxSelectionBadgeHidden && hasAnySelections && (React__namespace.createElement("div", { className: css(_default$b.selectToggleBadge) },
+                                React__namespace.createElement("span", { className: css(_default$c.badge, _default$c.modifiers.read) }, this.generateSelectedBadge())))),
                         hasOnClear && hasAnySelections && clearBtn)),
                     variant === SelectVariant.typeahead && !customContent && (React__namespace.createElement(React__namespace.Fragment, null,
-                        React__namespace.createElement("div", { className: css(_default$a.selectToggleWrapper) },
-                            toggleIcon && React__namespace.createElement("span", { className: css(_default$a.selectToggleIcon) }, toggleIcon),
-                            React__namespace.createElement("input", { className: css(_default$e.formControl, _default$a.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-typeahead`, "aria-label": typeAheadAriaLabel, placeholder: placeholderText, value: typeaheadInputValue !== null
+                        React__namespace.createElement("div", { className: css(_default$b.selectToggleWrapper) },
+                            toggleIcon && React__namespace.createElement("span", { className: css(_default$b.selectToggleIcon) }, toggleIcon),
+                            React__namespace.createElement("input", { className: css(_default$f.formControl, _default$b.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-typeahead`, "aria-label": typeAheadAriaLabel, placeholder: placeholderText, value: typeaheadInputValue !== null
                                     ? typeaheadInputValue
                                     : this.getDisplay(selections[0], 'text') || '', type: "text", onClick: this.onClick, onChange: this.onChange, autoComplete: "off", disabled: isDisabled, ref: this.inputRef })),
                         hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn)),
                     variant === SelectVariant.typeaheadMulti && !customContent && (React__namespace.createElement(React__namespace.Fragment, null,
-                        React__namespace.createElement("div", { className: css(_default$a.selectToggleWrapper) },
-                            toggleIcon && React__namespace.createElement("span", { className: css(_default$a.selectToggleIcon) }, toggleIcon),
+                        React__namespace.createElement("div", { className: css(_default$b.selectToggleWrapper) },
+                            toggleIcon && React__namespace.createElement("span", { className: css(_default$b.selectToggleIcon) }, toggleIcon),
                             selections && Array.isArray(selections) && selections.length > 0 && selectedChips,
-                            React__namespace.createElement("input", { className: css(_default$e.formControl, _default$a.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === ValidatedOptions.error, placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: "off", disabled: isDisabled, ref: this.inputRef })),
+                            React__namespace.createElement("input", { className: css(_default$f.formControl, _default$b.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === ValidatedOptions.error, placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: "off", disabled: isDisabled, ref: this.inputRef })),
                         hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn)),
-                    validated === ValidatedOptions.success && (React__namespace.createElement("span", { className: css(_default$a.selectToggleStatusIcon) },
+                    validated === ValidatedOptions.success && (React__namespace.createElement("span", { className: css(_default$b.selectToggleStatusIcon) },
                         React__namespace.createElement(CheckCircleIcon$1, { "aria-hidden": "true" }))),
-                    validated === ValidatedOptions.error && (React__namespace.createElement("span", { className: css(_default$a.selectToggleStatusIcon) },
+                    validated === ValidatedOptions.error && (React__namespace.createElement("span", { className: css(_default$b.selectToggleStatusIcon) },
                         React__namespace.createElement(ExclamationCircleIcon$1, { "aria-hidden": "true" }))),
-                    validated === ValidatedOptions.warning && (React__namespace.createElement("span", { className: css(_default$a.selectToggleStatusIcon) },
+                    validated === ValidatedOptions.warning && (React__namespace.createElement("span", { className: css(_default$b.selectToggleStatusIcon) },
                         React__namespace.createElement(ExclamationTriangleIcon$1, { "aria-hidden": "true" })))),
                 isOpen && menuAppendTo === 'inline' && menuContainer));
             const getParentElement = () => {
@@ -6188,11 +6188,11 @@
                 checkedProps.defaultChecked = defaultChecked;
             }
             checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
-            return (React__namespace.createElement("div", { className: css(_default$8.check, !label && _default$8.modifiers.standalone, className) },
-                React__namespace.createElement("input", Object.assign({}, props, { className: css(_default$8.checkInput), type: "checkbox", onChange: this.handleChange, "aria-invalid": !isValid, "aria-label": ariaLabel, disabled: isDisabled, ref: elem => elem && (elem.indeterminate = isChecked === null) }, checkedProps, getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))),
-                label && (React__namespace.createElement("label", { className: css(_default$8.checkLabel, isDisabled && _default$8.modifiers.disabled), htmlFor: props.id }, label)),
-                description && React__namespace.createElement("span", { className: css(_default$8.checkDescription) }, description),
-                body && React__namespace.createElement("span", { className: css(_default$8.checkBody) }, body)));
+            return (React__namespace.createElement("div", { className: css(_default$9.check, !label && _default$9.modifiers.standalone, className) },
+                React__namespace.createElement("input", Object.assign({}, props, { className: css(_default$9.checkInput), type: "checkbox", onChange: this.handleChange, "aria-invalid": !isValid, "aria-label": ariaLabel, disabled: isDisabled, ref: elem => elem && (elem.indeterminate = isChecked === null) }, checkedProps, getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))),
+                label && (React__namespace.createElement("label", { className: css(_default$9.checkLabel, isDisabled && _default$9.modifiers.disabled), htmlFor: props.id }, label)),
+                description && React__namespace.createElement("span", { className: css(_default$9.checkDescription) }, description),
+                body && React__namespace.createElement("span", { className: css(_default$9.checkBody) }, body)));
         }
     }
     Checkbox.displayName = 'Checkbox';
@@ -6231,7 +6231,7 @@
 
     var GripVerticalIcon$1 = GripVerticalIcon;
 
-    var _default$5 = {
+    var _default$6 = {
       "button": "pf-c-button",
       "modifiers": {
         "noPadding": "pf-m-no-padding",
@@ -6270,13 +6270,13 @@
 
     const PopoverContent = (_a) => {
         var { className = null, children } = _a, props = __rest$1(_a, ["className", "children"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(_default$5.popoverContent, className) }, props), children));
+        return (React__namespace.createElement("div", Object.assign({ className: css(_default$6.popoverContent, className) }, props), children));
     };
     PopoverContent.displayName = 'PopoverContent';
 
     const PopoverBody = (_a) => {
         var { children, id } = _a, props = __rest$1(_a, ["children", "id"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(_default$5.popoverBody), id: id }, props), children));
+        return (React__namespace.createElement("div", Object.assign({ className: css(_default$6.popoverBody), id: id }, props), children));
     };
     PopoverBody.displayName = 'PopoverBody';
 
@@ -6288,7 +6288,7 @@
 
     const PopoverFooter = (_a) => {
         var { children, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("footer", Object.assign({ className: css(_default$5.popoverFooter, className) }, props), children));
+        return (React__namespace.createElement("footer", Object.assign({ className: css(_default$6.popoverFooter, className) }, props), children));
     };
     PopoverFooter.displayName = 'PopoverFooter';
 
@@ -6309,7 +6309,7 @@
 
     const PopoverArrow = (_a) => {
         var { className = '' } = _a, props = __rest$1(_a, ["className"]);
-        return React__namespace.createElement("div", Object.assign({ className: css(_default$5.popoverArrow, className) }, props));
+        return React__namespace.createElement("div", Object.assign({ className: css(_default$6.popoverArrow, className) }, props));
     };
     PopoverArrow.displayName = 'PopoverArrow';
 
@@ -6405,18 +6405,18 @@
             }, 0);
         };
         const positionModifiers = {
-            top: _default$5.modifiers.top,
-            bottom: _default$5.modifiers.bottom,
-            left: _default$5.modifiers.left,
-            right: _default$5.modifiers.right,
-            'top-start': _default$5.modifiers.topLeft,
-            'top-end': _default$5.modifiers.topRight,
-            'bottom-start': _default$5.modifiers.bottomLeft,
-            'bottom-end': _default$5.modifiers.bottomRight,
-            'left-start': _default$5.modifiers.leftTop,
-            'left-end': _default$5.modifiers.leftBottom,
-            'right-start': _default$5.modifiers.rightTop,
-            'right-end': _default$5.modifiers.rightBottom
+            top: _default$6.modifiers.top,
+            bottom: _default$6.modifiers.bottom,
+            left: _default$6.modifiers.left,
+            right: _default$6.modifiers.right,
+            'top-start': _default$6.modifiers.topLeft,
+            'top-end': _default$6.modifiers.topRight,
+            'bottom-start': _default$6.modifiers.bottomLeft,
+            'bottom-end': _default$6.modifiers.bottomRight,
+            'left-start': _default$6.modifiers.leftTop,
+            'left-end': _default$6.modifiers.leftBottom,
+            'right-start': _default$6.modifiers.rightTop,
+            'right-end': _default$6.modifiers.rightBottom
         };
         const hasCustomMinWidth = minWidth !== popoverMinWidth.value;
         const hasCustomMaxWidth = maxWidth !== popoverMaxWidth.value;
@@ -6512,7 +6512,7 @@
                     }
                     return node;
                 }
-            }, preventScrollOnDeactivate: true, className: css(_default$5.popover, hasNoPadding && _default$5.modifiers.noPadding, hasAutoWidth && _default$5.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
+            }, preventScrollOnDeactivate: true, className: css(_default$6.popover, hasNoPadding && _default$6.modifiers.noPadding, hasAutoWidth && _default$6.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
                 minWidth: hasCustomMinWidth ? minWidth : null,
                 maxWidth: hasCustomMaxWidth ? maxWidth : null,
                 opacity,
@@ -6529,7 +6529,7 @@
     };
     Popover.displayName = 'Popover';
 
-    var _default$4 = {
+    var _default$5 = {
       "button": "pf-c-button",
       "emptyState": "pf-c-empty-state",
       "emptyStateBody": "pf-c-empty-state__body",
@@ -6559,12 +6559,12 @@
     })(EmptyStateVariant || (EmptyStateVariant = {}));
     const EmptyState = (_a) => {
         var { children, className = '', variant = EmptyStateVariant.full, isFullHeight } = _a, props = __rest$1(_a, ["children", "className", "variant", "isFullHeight"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(_default$4.emptyState, variant === 'xs' && _default$4.modifiers.xs, variant === 'small' && _default$4.modifiers.sm, variant === 'large' && _default$4.modifiers.lg, variant === 'xl' && _default$4.modifiers.xl, isFullHeight && _default$4.modifiers.fullHeight, className) }, props),
-            React__namespace.createElement("div", { className: css(_default$4.emptyStateContent) }, children)));
+        return (React__namespace.createElement("div", Object.assign({ className: css(_default$5.emptyState, variant === 'xs' && _default$5.modifiers.xs, variant === 'small' && _default$5.modifiers.sm, variant === 'large' && _default$5.modifiers.lg, variant === 'xl' && _default$5.modifiers.xl, isFullHeight && _default$5.modifiers.fullHeight, className) }, props),
+            React__namespace.createElement("div", { className: css(_default$5.emptyStateContent) }, children)));
     };
     EmptyState.displayName = 'EmptyState';
 
-    var _default$3 = {
+    var _default$4 = {
       "button": "pf-c-button",
       "inlineEdit": "pf-c-inline-edit",
       "inlineEditAction": "pf-c-inline-edit__action",
@@ -6590,11 +6590,11 @@
     const Bullseye = (_a) => {
         var { children = null, className = '', component = 'div' } = _a, props = __rest$1(_a, ["children", "className", "component"]);
         const Component = component;
-        return (React__namespace.createElement(Component, Object.assign({ className: css(_default$j.bullseye, className) }, props), children));
+        return (React__namespace.createElement(Component, Object.assign({ className: css(_default$k.bullseye, className) }, props), children));
     };
     Bullseye.displayName = 'Bullseye';
 
-    var _default$2 = {
+    var _default$3 = {
       "button": "pf-c-button",
       "modifiers": {
         "hidden": "pf-m-hidden",
@@ -6670,7 +6670,7 @@
       "tableToggleIcon": "pf-c-table__toggle-icon"
     };
 
-    var _default$1 = {
+    var _default$2 = {
       "button": "pf-c-button",
       "modifiers": {
         "grid": "pf-m-grid",
@@ -6702,7 +6702,7 @@
       "tableToggleIcon": "pf-c-table__toggle-icon"
     };
 
-    var _default = {
+    var _default$1 = {
       "dropdown": "pf-c-dropdown",
       "modifiers": {
         "treeView": "pf-m-tree-view",
@@ -6856,7 +6856,7 @@
 
     const TableComposableBase = (_a) => {
         var _b, _c;
-        var { children, className, variant, borders = true, isStickyHeader = false, gridBreakPoint = exports.TableGridBreakpoint.gridMd, 'aria-label': ariaLabel, role = 'grid', innerRef, ouiaId, ouiaSafe = true, isTreeTable = false, isNested = false } = _a, props = __rest$2(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested"]);
+        var { children, className, variant, borders = true, isStickyHeader = false, gridBreakPoint = exports.TableGridBreakpoint.gridMd, 'aria-label': ariaLabel, role = 'grid', innerRef, ouiaId, ouiaSafe = true, isTreeTable = false, isNested = false, nestedHeaderColumnSpans } = _a, props = __rest$2(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "nestedHeaderColumnSpans"]);
         const tableRef = innerRef || React__namespace.useRef(null);
         React__namespace.useEffect(() => {
             document.addEventListener('keydown', handleKeys);
@@ -6870,9 +6870,9 @@
             };
         }, [tableRef, tableRef.current]);
         const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe);
-        const grid = (_b = _default$1.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
+        const grid = (_b = _default$2.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
         const breakPointPrefix = `treeView${gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1)}`;
-        const treeGrid = (_c = _default.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
+        const treeGrid = (_c = _default$1.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
         const handleKeys = (event) => {
             if (isNested ||
                 !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
@@ -6889,27 +6889,37 @@
             const getFocusableElement = (element) => element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
             handleArrows(event, rows, (element) => element === activeElement.closest('tr'), getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
         };
-        return (React__namespace.createElement("table", Object.assign({ "aria-label": ariaLabel, role: role, className: css(className, _default$2.table, isTreeTable ? treeGrid : grid, _default$2.modifiers[variant], !borders && _default$2.modifiers.noBorderRows, isStickyHeader && _default$2.modifiers.stickyHeader, isTreeTable && _default.modifiers.treeView, isNested && 'pf-m-nested'), ref: tableRef }, (isTreeTable && { role: 'treegrid' }), ouiaProps, props), children));
+        return (React__namespace.createElement("table", Object.assign({ "aria-label": ariaLabel, role: role, className: css(className, _default$3.table, isTreeTable ? treeGrid : grid, _default$3.modifiers[variant], !borders && _default$3.modifiers.noBorderRows, isStickyHeader && _default$3.modifiers.stickyHeader, isTreeTable && _default$1.modifiers.treeView, isNested && 'pf-m-nested'), ref: tableRef }, (isTreeTable && { role: 'treegrid' }), ouiaProps, props),
+            nestedHeaderColumnSpans &&
+                nestedHeaderColumnSpans.map((span, index) => {
+                    if (span === 1) {
+                        return React__namespace.createElement("col", { key: index });
+                    }
+                    else {
+                        return React__namespace.createElement("colgroup", { key: index, span: span });
+                    }
+                }),
+            children));
     };
     const TableComposable = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TableComposableBase, Object.assign({}, props, { innerRef: ref }))));
     TableComposable.displayName = 'TableComposable';
 
     const TheadBase = (_a) => {
-        var { children, className, noWrap = false, innerRef } = _a, props = __rest$2(_a, ["children", "className", "noWrap", "innerRef"]);
-        return (React__namespace.createElement("thead", Object.assign({ className: css(className, noWrap && _default$2.modifiers.nowrap), ref: innerRef }, props), children));
+        var { children, className, noWrap = false, innerRef, hasNestedHeader } = _a, props = __rest$2(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
+        return (React__namespace.createElement("thead", Object.assign({ className: css(className, noWrap && _default$3.modifiers.nowrap, hasNestedHeader && _default$3.modifiers.nestedColumnHeader), ref: innerRef }, props), children));
     };
     const Thead = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TheadBase, Object.assign({}, props, { innerRef: ref }))));
     Thead.displayName = 'Thead';
 
     const TbodyBase = (_a) => {
         var { children, className, isExpanded, innerRef } = _a, props = __rest$2(_a, ["children", "className", "isExpanded", "innerRef"]);
-        return (React__namespace.createElement("tbody", Object.assign({ role: "rowgroup", className: css(className, isExpanded && _default$2.modifiers.expanded), ref: innerRef }, props), children));
+        return (React__namespace.createElement("tbody", Object.assign({ role: "rowgroup", className: css(className, isExpanded && _default$3.modifiers.expanded), ref: innerRef }, props), children));
     };
     const Tbody = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TbodyBase, Object.assign({}, props, { innerRef: ref }))));
     Tbody.displayName = 'Tbody';
 
     const TrBase = (_a) => {
-        var { children, className, isExpanded, isEditable, isHidden = false, isHoverable = false, isRowSelected = false, innerRef, ouiaId, ouiaSafe = true, onRowClick } = _a, props = __rest$2(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isHoverable", "isRowSelected", "innerRef", "ouiaId", "ouiaSafe", "onRowClick"]);
+        var { children, className, isExpanded, isEditable, isHidden = false, isHoverable = false, isRowSelected = false, innerRef, ouiaId, ouiaSafe = true, resetOffset = false, onRowClick } = _a, props = __rest$2(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isHoverable", "isRowSelected", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick"]);
         const ouiaProps = useOUIAProps('TableRow', ouiaId, ouiaSafe);
         let onKeyDown = null;
         if (onRowClick) {
@@ -6920,11 +6930,23 @@
                 }
             };
         }
-        return (React__namespace.createElement("tr", Object.assign({ className: css(className, isExpanded !== undefined && _default$2.tableExpandableRow, isExpanded && _default$2.modifiers.expanded, isEditable && _default$3.modifiers.inlineEditable, isHoverable && _default$2.modifiers.hoverable, isRowSelected && _default$2.modifiers.selected), hidden: isHidden || (isExpanded !== undefined && !isExpanded) }, (isHoverable && { tabIndex: 0 }), { ref: innerRef }, (onRowClick && { onClick: onRowClick, onKeyDown }), ouiaProps, props), children));
+        return (React__namespace.createElement("tr", Object.assign({ className: css(className, isExpanded !== undefined && _default$3.tableExpandableRow, isExpanded && _default$3.modifiers.expanded, isEditable && _default$4.modifiers.inlineEditable, isHoverable && _default$3.modifiers.hoverable, isRowSelected && _default$3.modifiers.selected, resetOffset && _default$3.modifiers.firstCellOffsetReset), hidden: isHidden || (isExpanded !== undefined && !isExpanded) }, (isHoverable && { tabIndex: 0 }), { ref: innerRef }, (onRowClick && { onClick: onRowClick, onKeyDown }), ouiaProps, props), children));
     };
     const Tr = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TrBase, Object.assign({}, props, { innerRef: ref }))));
     Tr.displayName = 'Tr';
 
+    var _default = {
+      "modifiers": {
+        "borderRight": "pf-m-border-right",
+        "borderLeft": "pf-m-border-left",
+        "stickyHeader": "pf-m-sticky-header"
+      },
+      "scrollInnerWrapper": "pf-c-scroll-inner-wrapper",
+      "scrollOuterWrapper": "pf-c-scroll-outer-wrapper",
+      "table": "pf-c-table",
+      "tableStickyColumn": "pf-c-table__sticky-column"
+    };
+
     const HelpIconConfig = {
       name: 'HelpIcon',
       height: 1024,
@@ -6964,14 +6986,14 @@
             }
             onMouseEnterProp(event);
         };
-        const text = (React__namespace.createElement(Component, Object.assign({ onMouseEnter: onMouseEnter, className: css(className, wrapModifier && _default$2.modifiers[wrapModifier], _default$2.tableText) }, props), children));
+        const text = (React__namespace.createElement(Component, Object.assign({ onMouseEnter: onMouseEnter, className: css(className, wrapModifier && _default$3.modifiers[wrapModifier], _default$3.tableText) }, props), children));
         return tooltip !== '' ? (React__namespace.createElement(Tooltip, Object.assign({ content: tooltip, isVisible: true }, tooltipProps), text)) : (text);
     };
     TableText.displayName = 'TableText';
 
-    const HeaderCellInfoWrapper = ({ children, info, className, variant = 'tooltip', popoverProps, tooltipProps, ariaLabel }) => (React__namespace.createElement("div", { className: css(_default$2.tableColumnHelp, className) },
+    const HeaderCellInfoWrapper = ({ children, info, className, variant = 'tooltip', popoverProps, tooltipProps, ariaLabel }) => (React__namespace.createElement("div", { className: css(_default$3.tableColumnHelp, className) },
         typeof children === 'string' ? React__namespace.createElement(TableText, null, children) : children,
-        React__namespace.createElement("span", { className: css(_default$2.tableColumnHelpAction) }, variant === 'tooltip' ? (React__namespace.createElement(Tooltip, Object.assign({ content: info }, tooltipProps),
+        React__namespace.createElement("span", { className: css(_default$3.tableColumnHelpAction) }, variant === 'tooltip' ? (React__namespace.createElement(Tooltip, Object.assign({ content: info }, tooltipProps),
             React__namespace.createElement(Button, { variant: "plain", "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info' },
                 React__namespace.createElement(HelpIcon$1, { noVerticalAlign: true })))) : (React__namespace.createElement(Popover, Object.assign({ bodyContent: info }, popoverProps),
             React__namespace.createElement(Button, { variant: "plain", "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info' },
@@ -6980,7 +7002,7 @@
 
     const info = ({ tooltip, tooltipProps, popover, popoverProps, className, ariaLabel }) => {
         const infoObj = (value) => ({
-            className: _default$2.modifiers.help,
+            className: _default$3.modifiers.help,
             children: tooltip ? (React__namespace.createElement(HeaderCellInfoWrapper, { variant: "tooltip", info: tooltip, tooltipProps: tooltipProps, ariaLabel: ariaLabel, className: className }, value)) : (React__namespace.createElement(HeaderCellInfoWrapper, { variant: "popover", info: popover, popoverProps: popoverProps, ariaLabel: ariaLabel, className: className }, value))
         });
         return infoObj;
@@ -7039,17 +7061,17 @@
         else {
             SortedByIcon = ArrowsAltVIcon$1;
         }
-        return (React__namespace.createElement("button", Object.assign({}, props, { type: type, className: css(className, _default$2.tableButton), onClick: event => onSort && onSort(event) }),
-            React__namespace.createElement("div", { className: css(className, _default$2.tableButtonContent) },
+        return (React__namespace.createElement("button", Object.assign({}, props, { type: type, className: css(className, _default$3.tableButton), onClick: event => onSort && onSort(event) }),
+            React__namespace.createElement("div", { className: css(className, _default$3.tableButtonContent) },
                 React__namespace.createElement(TableText, null, children),
-                React__namespace.createElement("span", { className: css(_default$2.tableSortIndicator) },
+                React__namespace.createElement("span", { className: css(_default$3.tableSortIndicator) },
                     React__namespace.createElement(SortedByIcon, null)))));
     };
     SortColumn.displayName = 'SortColumn';
 
     const sortableFavorites = (sort) => () => sortable(React__namespace.createElement(StarIcon$1, { "aria-hidden": true }), {
         columnIndex: sort.columnIndex,
-        className: _default$2.modifiers.favorite,
+        className: _default$3.modifiers.favorite,
         ariaLabel: 'Sort favorites',
         column: {
             extraParams: {
@@ -7081,7 +7103,7 @@
             onSort && onSort(event, columnIndex, reversedDirection, extraData);
         }
         return {
-            className: css(_default$2.tableSort, isSortedBy && _default$2.modifiers.selected, className),
+            className: css(_default$3.tableSort, isSortedBy && _default$3.modifiers.selected, className),
             'aria-sort': isSortedBy ? `${sortBy.direction}ending` : 'none',
             children: (React__namespace.createElement(SortColumn, { isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortBy.direction : '', onSort: sortClicked, "aria-label": ariaLabel }, label))
         };
@@ -7136,7 +7158,7 @@
             })), (rowData &&
             (rowData.disableCheckbox || rowData.disableSelection) && {
             disabled: true,
-            className: _default$8.checkInput
+            className: _default$9.checkInput
         })), (!rowData && isHeaderSelectDisabled && { disabled: true }));
         let selectName = 'check-all';
         if (rowId !== -1 && selectVariant === exports.RowSelectVariant.checkbox) {
@@ -7146,7 +7168,7 @@
             selectName = 'radioGroup';
         }
         return {
-            className: css(_default$2.tableCheck),
+            className: css(_default$3.tableCheck),
             component: 'td',
             isVisible: !rowData || !rowData.fullWidth,
             children: (React__namespace.createElement(SelectColumn, Object.assign({}, customProps, { selectVariant: selectVariant, onSelect: selectClick, name: selectName }), label))
@@ -7154,7 +7176,7 @@
     };
 
     const cellWidth = (width) => () => ({
-        className: css(_default$2.modifiers[typeof width === 'number' ? `width_${width}` : `width${capitalize(width)}`])
+        className: css(_default$3.modifiers[typeof width === 'number' ? `width_${width}` : `width${capitalize(width)}`])
     });
 
     const visibilityModifiers = [
@@ -7171,10 +7193,10 @@
         'visibleOn_2xl'
     ];
     const Visibility = visibilityModifiers
-        .filter(key => _default$2.modifiers[key])
+        .filter(key => _default$3.modifiers[key])
         .reduce((acc, curr) => {
         const key2 = curr.replace('_2xl', '2Xl');
-        acc[key2] = _default$2.modifiers[curr];
+        acc[key2] = _default$3.modifiers[curr];
         return acc;
     }, {});
     const classNames = (...classes) => () => ({
@@ -9774,7 +9796,7 @@
     }
 
     const ThBase = (_a) => {
-        var { children, className, component = 'th', dataLabel, scope = 'col', textCenter = false, sort = null, modifier, select = null, tooltip = '', onMouseEnter: onMouseEnterProp = () => { }, width, visibility, innerRef, info: infoProps } = _a, props = __rest$2(_a, ["children", "className", "component", "dataLabel", "scope", "textCenter", "sort", "modifier", "select", "tooltip", "onMouseEnter", "width", "visibility", "innerRef", "info"]);
+        var { children, className, component = 'th', dataLabel, scope = 'col', textCenter = false, sort = null, modifier, select = null, tooltip = '', onMouseEnter: onMouseEnterProp = () => { }, width, visibility, innerRef, info: infoProps, isStickyColumn = false, hasRightBorder = false, stickyMinWidth = '120px', stickyLeftOffset, isSubheader = false } = _a, props = __rest$2(_a, ["children", "className", "component", "dataLabel", "scope", "textCenter", "sort", "modifier", "select", "tooltip", "onMouseEnter", "width", "visibility", "innerRef", "info", "isStickyColumn", "hasRightBorder", "stickyMinWidth", "stickyLeftOffset", "isSubheader"]);
         const [showTooltip, setShowTooltip] = React__namespace.useState(false);
         const onMouseEnter = (event) => {
             if (event.target.offsetWidth < event.target.scrollWidth) {
@@ -9837,7 +9859,9 @@
         // selectable adds this but we don't want it
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         isVisible = null, className: mergedClassName = '', component: MergedComponent = component } = merged, mergedProps = __rest$2(merged, ["children", "isVisible", "className", "component"]);
-        const cell = (React__namespace.createElement(MergedComponent, Object.assign({ "data-label": dataLabel, onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp, scope: component === 'th' && children ? scope : null, ref: innerRef, className: css(className, textCenter && _default$2.modifiers.center, modifier && _default$2.modifiers[modifier], mergedClassName) }, mergedProps, props), transformedChildren));
+        const cell = (React__namespace.createElement(MergedComponent, Object.assign({ "data-label": dataLabel, onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp, scope: component === 'th' && children ? scope : null, ref: innerRef, className: css(className, textCenter && _default$3.modifiers.center, isSubheader && _default$3.tableSubhead, isStickyColumn && _default.tableStickyColumn, hasRightBorder && _default.modifiers.borderRight, modifier && _default$3.modifiers[modifier], mergedClassName) }, mergedProps, props, (isStickyColumn && {
+            style: Object.assign({ '--pf-c-table__sticky-column--MinWidth': stickyMinWidth ? stickyMinWidth : undefined, '--pf-c-table__sticky-column--Left': stickyLeftOffset ? stickyLeftOffset : undefined }, props.style)
+        })), transformedChildren));
         const canDefault = tooltip === '' ? typeof children === 'string' : true;
         return tooltip !== null && canDefault && showTooltip ? (React__namespace.createElement(Tooltip, { content: tooltip || (tooltip === '' && children), isVisible: true }, cell)) : (cell);
     };
@@ -9915,14 +9939,14 @@
                 children: (React__namespace.createElement(ActionsColumn, { items: resolvedActions, dropdownPosition: dropdownPosition, dropdownDirection: dropdownDirection, isDisabled: resolvedIsDisabled, rowData: rowData, extraData: extraData, actionsToggle: actionsToggle }, label))
             }
             : {};
-        return Object.assign({ className: css(_default$2.tableAction), style: { width: 'auto', paddingRight: 0 }, isVisible: true }, renderProps);
+        return Object.assign({ className: css(_default$3.tableAction), style: { width: 'auto', paddingRight: 0 }, isVisible: true }, renderProps);
     };
 
     const CollapseColumn = (_a) => {
         var { className = '', children = null, isOpen, onToggle } = _a, props = __rest$2(_a, ["className", "children", "isOpen", "onToggle"]);
         return (React__namespace.createElement(React__namespace.Fragment, null,
-            isOpen !== undefined && (React__namespace.createElement(Button, Object.assign({ className: css(className, isOpen && _default$2.modifiers.expanded) }, props, { variant: "plain", "aria-label": "Details", onClick: onToggle, "aria-expanded": isOpen }),
-                React__namespace.createElement("div", { className: css(_default$2.tableToggleIcon) },
+            isOpen !== undefined && (React__namespace.createElement(Button, Object.assign({ className: css(className, isOpen && _default$3.modifiers.expanded) }, props, { variant: "plain", "aria-label": "Details", onClick: onToggle, "aria-expanded": isOpen }),
+                React__namespace.createElement("div", { className: css(_default$3.tableToggleIcon) },
                     React__namespace.createElement(AngleDownIcon$1, null)))),
             children));
     };
@@ -9930,7 +9954,7 @@
 
     const ExpandableRowContent = (_a) => {
         var { children = null } = _a, props = __rest$2(_a, ["children"]);
-        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(_default$2.tableExpandableRowContent) }), children));
+        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(_default$3.tableExpandableRowContent) }), children));
     };
     ExpandableRowContent.displayName = 'ExpandableRowContent';
 
@@ -9950,7 +9974,7 @@
             onCollapse && onCollapse(event, rowIndex, rowData && !rowData.isOpen, rowData, extraData);
         }
         return {
-            className: rowData.isOpen !== undefined && css(_default$2.tableToggle),
+            className: rowData.isOpen !== undefined && css(_default$3.tableToggle),
             isVisible: !rowData.fullWidth,
             children: (React__namespace.createElement(CollapseColumn, { "aria-labelledby": `${rowLabeledBy}${rowIndex} ${expandId}${rowIndex}`, onToggle: onToggle, id: expandId + rowIndex, isOpen: rowData && rowData.isOpen }, value))
         };
@@ -9962,7 +9986,7 @@
             // todo: rewrite this logic, it is not type safe
             colSpan: !rowData.cells || rowData.cells.length === 1 ? colSpan + !!rowData.fullWidth : 1,
             id: contentId + rowIndex + (columnIndex ? '-' + columnIndex : ''),
-            className: rowData.noPadding && css(_default$2.modifiers.noPadding)
+            className: rowData.noPadding && css(_default$3.modifiers.noPadding)
         };
         return expandedRowFormatter;
     };
@@ -9987,8 +10011,8 @@
             onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
         }
         return {
-            className: css(_default$2.tableCompoundExpansionToggle, props.isOpen && _default$2.modifiers.expanded),
-            children: props.isOpen !== undefined && (React__namespace.createElement("button", { type: "button", className: css(_default$2.tableButton), onClick: onToggle, "aria-expanded": props.isOpen, "aria-controls": props.ariaControls },
+            className: css(_default$3.tableCompoundExpansionToggle, props.isOpen && _default$3.modifiers.expanded),
+            children: props.isOpen !== undefined && (React__namespace.createElement("button", { type: "button", className: css(_default$3.tableButton), onClick: onToggle, "aria-expanded": props.isOpen, "aria-controls": props.ariaControls },
                 React__namespace.createElement(TableText, null, title)))
         };
     };
@@ -10030,7 +10054,7 @@
         }
         const additionalProps = rowData.favoritesProps || {};
         return {
-            className: css(_default$2.tableFavorite, rowData && rowData.favorited && _default$2.modifiers.favorited),
+            className: css(_default$3.tableFavorite, rowData && rowData.favorited && _default$3.modifiers.favorited),
             isVisible: !rowData || !rowData.fullWidth,
             children: (React__namespace.createElement(FavoritesCell, Object.assign({ rowIndex: rowIndex, onFavorite: favoritesClick, isFavorited: rowData && rowData.favorited }, additionalProps)))
         };
@@ -10067,8 +10091,8 @@
     const treeRow = (onCollapse, onCheckChange, onToggleRowDetails) => (value, { rowIndex, rowData }) => {
         const { isExpanded, isDetailsExpanded, 'aria-level': level, 'aria-setsize': setsize, toggleAriaLabel, checkAriaLabel, showDetailsAriaLabel, isChecked, checkboxId, icon } = rowData.props;
         const content = value.title || value;
-        const text = (React__namespace.createElement("div", { className: css(_default.tableTreeViewText), key: "tree-view-text" },
-            icon && (React__namespace.createElement("span", { className: css(_default.tableTreeViewIcon), key: "tree-view-text-icon" }, icon)),
+        const text = (React__namespace.createElement("div", { className: css(_default$1.tableTreeViewText), key: "tree-view-text" },
+            icon && (React__namespace.createElement("span", { className: css(_default$1.tableTreeViewIcon), key: "tree-view-text-icon" }, icon)),
             React__namespace.createElement("span", { className: "pf-c-table__text", key: "table-text" }, content)));
         const onChange = (isChecked, event) => {
             onCheckChange(event, isChecked, rowIndex, content, rowData);
@@ -10076,15 +10100,15 @@
         return {
             component: 'th',
             className: 'pf-c-table__tree-view-title-cell',
-            children: level !== undefined ? (React__namespace.createElement("div", { className: css(_default.tableTreeViewMain) },
-                setsize > 0 && (React__namespace.createElement("span", { className: css(_default.tableToggle), key: "table-toggle" },
-                    React__namespace.createElement(Button, { variant: "plain", onClick: event => onCollapse && onCollapse(event, rowIndex, content, rowData), className: css(isExpanded && _default$2.modifiers.expanded), "aria-expanded": isExpanded, "aria-label": toggleAriaLabel || `${isExpanded ? 'Collapse' : 'Expand'} row ${rowIndex}` },
-                        React__namespace.createElement("div", { className: css(_default.tableToggleIcon) },
+            children: level !== undefined ? (React__namespace.createElement("div", { className: css(_default$1.tableTreeViewMain) },
+                setsize > 0 && (React__namespace.createElement("span", { className: css(_default$1.tableToggle), key: "table-toggle" },
+                    React__namespace.createElement(Button, { variant: "plain", onClick: event => onCollapse && onCollapse(event, rowIndex, content, rowData), className: css(isExpanded && _default$3.modifiers.expanded), "aria-expanded": isExpanded, "aria-label": toggleAriaLabel || `${isExpanded ? 'Collapse' : 'Expand'} row ${rowIndex}` },
+                        React__namespace.createElement("div", { className: css(_default$1.tableToggleIcon) },
                             React__namespace.createElement(AngleDownIcon$1, { "aria-hidden": "true" }))))),
-                !!onCheckChange && (React__namespace.createElement("span", { className: css(_default.tableCheck), key: "table-check" },
+                !!onCheckChange && (React__namespace.createElement("span", { className: css(_default$1.tableCheck), key: "table-check" },
                     React__namespace.createElement(Checkbox, { id: checkboxId || `checkbox_${rowIndex}`, "aria-label": checkAriaLabel || `Row ${rowIndex} checkbox`, isChecked: isChecked, onChange: onChange }))),
                 text,
-                !!onToggleRowDetails && (React__namespace.createElement("span", { className: css(_default.tableTreeViewDetailsToggle), key: "view-details-toggle" },
+                !!onToggleRowDetails && (React__namespace.createElement("span", { className: css(_default$1.tableTreeViewDetailsToggle), key: "view-details-toggle" },
                     React__namespace.createElement(Button, { variant: "plain", "aria-expanded": isDetailsExpanded, "aria-label": showDetailsAriaLabel || 'Show row details', onClick: event => onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData) },
                         React__namespace.createElement("span", { className: "pf-c-table__details-toggle-icon" },
                             React__namespace.createElement(EllipsisHIcon$1, { "aria-hidden": true }))))))) : (text)
@@ -10194,7 +10218,7 @@
         isVisible = null, children: mergedChildren = null, className: mergedClassName = '', component: MergedComponent = component } = merged, mergedProps = __rest$2(merged, ["isVisible", "children", "className", "component"]);
         const treeTableTitleCell = (className && className.includes('pf-c-table__tree-view-title-cell')) ||
             (mergedClassName && mergedClassName.includes('pf-c-table__tree-view-title-cell'));
-        return (React__namespace.createElement(MergedComponent, Object.assign({}, (!treeTableTitleCell && { 'data-label': dataLabel }), { className: css(className, textCenter && _default$2.modifiers.center, noPadding && _default$2.modifiers.noPadding, _default$2.modifiers[modifier], draggableParams && _default$2.tableDraggable, mergedClassName), ref: innerRef }, mergedProps, props), mergedChildren || children));
+        return (React__namespace.createElement(MergedComponent, Object.assign({}, (!treeTableTitleCell && { 'data-label': dataLabel }), { className: css(className, textCenter && _default$3.modifiers.center, noPadding && _default$3.modifiers.noPadding, _default$3.modifiers[modifier], draggableParams && _default$3.tableDraggable, mergedClassName), ref: innerRef }, mergedProps, props), mergedChildren || children));
     };
     const Td = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TdBase, Object.assign({}, props, { innerRef: ref }))));
     Td.displayName = 'Td';
@@ -11588,14 +11612,14 @@
         /* eslint-enable @typescript-eslint/no-unused-vars */
         saveAriaLabel, cancelAriaLabel, editAriaLabel } = _a, props = __rest$2(_a, ["onClick", "className", "editing", "valid", "saveAriaLabel", "cancelAriaLabel", "editAriaLabel"]);
         return (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement("div", { className: css(_default$3.inlineEditGroup, _default$3.modifiers.iconGroup, 'pf-m-action-group') },
-                React__namespace.createElement("div", { className: css(_default$3.inlineEditAction) },
+            React__namespace.createElement("div", { className: css(_default$4.inlineEditGroup, _default$4.modifiers.iconGroup, 'pf-m-action-group') },
+                React__namespace.createElement("div", { className: css(_default$4.inlineEditAction) },
                     React__namespace.createElement(Button, Object.assign({ "aria-label": saveAriaLabel }, props, { onClick: e => onClick(e, 'save'), variant: "plain" }),
                         React__namespace.createElement(CheckIcon$1, null))),
-                React__namespace.createElement("div", { className: css(_default$3.inlineEditAction) },
+                React__namespace.createElement("div", { className: css(_default$4.inlineEditAction) },
                     React__namespace.createElement(Button, Object.assign({ "aria-label": cancelAriaLabel }, props, { onClick: e => onClick(e, 'cancel'), variant: "plain" }),
                         React__namespace.createElement(TimesIcon$1, null)))),
-            React__namespace.createElement("div", { className: css(_default$3.inlineEditAction, _default$3.modifiers.enableEditable) },
+            React__namespace.createElement("div", { className: css(_default$4.inlineEditAction, _default$4.modifiers.enableEditable) },
                 React__namespace.createElement(Button, Object.assign({ "aria-label": editAriaLabel }, props, { onClick: e => onClick(e, 'edit'), variant: "plain" }),
                     React__namespace.createElement(PencilAltIcon$1, null)))));
     };
@@ -11663,7 +11687,7 @@
             return result;
         }
         return {
-            className: _default$2.tableInlineEditAction,
+            className: _default$3.tableInlineEditAction,
             component: 'td',
             isVisible: true,
             children: (React__namespace.createElement(EditColumn, { saveAriaLabel: (rowData && rowData.rowSaveBtnAriaLabel && rowData.rowSaveBtnAriaLabel(rowIndex)) ||
@@ -11674,19 +11698,19 @@
     };
 
     const breakWord = () => ({
-        className: _default$2.modifiers.breakWord
+        className: _default$3.modifiers.breakWord
     });
     const fitContent = () => ({
-        className: _default$2.modifiers.fitContent
+        className: _default$3.modifiers.fitContent
     });
     const nowrap = () => ({
-        className: _default$2.modifiers.nowrap
+        className: _default$3.modifiers.nowrap
     });
     const truncate = () => ({
-        className: _default$2.modifiers.truncate
+        className: _default$3.modifiers.truncate
     });
     const wrappable = () => ({
-        className: _default$2.modifiers.wrap
+        className: _default$3.modifiers.wrap
     });
 
     const textCenter = () => ({ textCenter: true });
@@ -11946,12 +11970,24 @@
     };
     Caption.displayName = 'Caption';
 
+    const OuterScrollContainer = (_a) => {
+        var { children, className } = _a, props = __rest$2(_a, ["children", "className"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(className, _default.scrollOuterWrapper) }, props), children));
+    };
+    OuterScrollContainer.displayName = 'OuterScrollContainer';
+
+    const InnerScrollContainer = (_a) => {
+        var { children, className } = _a, props = __rest$2(_a, ["children", "className"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(className, _default.scrollInnerWrapper) }, props), children));
+    };
+    InnerScrollContainer.displayName = 'InnerScrollContainer';
+
     const TreeRowWrapper = (_a) => {
         var { className, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         rowProps, row } = _a, props = __rest$2(_a, ["className", "rowProps", "row"]);
         const { 'aria-level': level, 'aria-posinset': posinset, 'aria-setsize': setsize, isExpanded, isDetailsExpanded, isHidden } = row.props;
-        return (React__namespace.createElement(Tr, Object.assign({ "aria-level": level, "aria-posinset": posinset, "aria-setsize": setsize, "aria-expanded": !!isExpanded, isHidden: isHidden, className: css(className, isExpanded && _default$2.modifiers.expanded, isDetailsExpanded && _default.modifiers.treeViewDetailsExpanded) }, props)));
+        return (React__namespace.createElement(Tr, Object.assign({ "aria-level": level, "aria-posinset": posinset, "aria-setsize": setsize, "aria-expanded": !!isExpanded, isHidden: isHidden, className: css(className, isExpanded && _default$3.modifiers.expanded, isDetailsExpanded && _default$1.modifiers.treeViewDetailsExpanded) }, props)));
     };
     TreeRowWrapper.displayName = 'TreeRowWrapper';
 
@@ -12019,7 +12055,7 @@
                     caption && React__namespace.createElement("caption", null, caption),
                     children)));
             if (onRowEdit) {
-                return React__namespace.createElement("form", { className: css(_default$3.inlineEdit) }, table);
+                return React__namespace.createElement("form", { className: css(_default$4.inlineEdit) }, table);
             }
             return table;
         }
@@ -12165,20 +12201,20 @@
         };
         const select = (React__namespace.createElement(Select, Object.assign({}, props.editableSelectProps, { onSelect: onSelectHandler }, (clearSelection && { onClear }), { isOpen: isOpen, onToggle: onToggle, selections: selections }), options));
         return (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement("div", { className: _default$3.inlineEditValue }, Array.isArray(value) ? value.join(', ') : value),
-            React__namespace.createElement("div", { className: _default$3.inlineEditInput },
+            React__namespace.createElement("div", { className: _default$4.inlineEditValue }, Array.isArray(value) ? value.join(', ') : value),
+            React__namespace.createElement("div", { className: _default$4.inlineEditInput },
                 select,
-                React__namespace.createElement("div", { className: css(_default$9.formHelperText, _default$9.modifiers.error), "aria-live": "polite" }, props.errorText))));
+                React__namespace.createElement("div", { className: css(_default$a.formHelperText, _default$a.modifiers.error), "aria-live": "polite" }, props.errorText))));
     };
     EditableSelectInputCell.displayName = 'EditableSelectInputCell';
 
     const EditableTextCell = ({ value, rowIndex, cellIndex, props, handleTextInputChange, inputAriaLabel, isDisabled = false }) => (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement("div", { className: _default$3.inlineEditValue }, value),
-        React__namespace.createElement("div", { className: _default$3.inlineEditInput },
+        React__namespace.createElement("div", { className: _default$4.inlineEditValue }, value),
+        React__namespace.createElement("div", { className: _default$4.inlineEditInput },
             React__namespace.createElement(TextInput, { isDisabled: isDisabled, value: props.editableValue !== undefined ? props.editableValue : value, validated: props.isValid !== false ? 'default' : 'error', type: "text", onChange: (newValue, event) => {
                     handleTextInputChange(newValue, event, rowIndex, cellIndex);
                 }, "aria-label": inputAriaLabel }),
-            React__namespace.createElement("div", { className: css(_default$9.formHelperText, _default$9.modifiers.error), "aria-live": "polite" }, props.errorText))));
+            React__namespace.createElement("div", { className: css(_default$a.formHelperText, _default$a.modifiers.error), "aria-live": "polite" }, props.errorText))));
     EditableTextCell.displayName = 'EditableTextCell';
 
     const ContextHeader = (_a) => {
@@ -12203,6 +12239,8 @@
     exports.FavoritesCell = FavoritesCell;
     exports.HeaderCell = HeaderCell;
     exports.HeaderCellInfoWrapper = HeaderCellInfoWrapper;
+    exports.InnerScrollContainer = InnerScrollContainer;
+    exports.OuterScrollContainer = OuterScrollContainer;
     exports.RowWrapper = RowWrapper;
     exports.SelectColumn = SelectColumn;
     exports.SortColumn = SortColumn;