@patternfly/react-core 4.220.2 → 4.221.2

package/dist/umd/react-core.js

@@ -123,7 +123,7 @@
     };
 
     /*!
-    * tabbable 5.3.2
+    * tabbable 5.3.3
     * @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
     */
     var candidateSelectors = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]:not(slot)', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])', 'details>summary:first-of-type', 'details'];
@@ -158,6 +158,12 @@
      * @returns {ShadowRoot|boolean} ShadowRoot if available or boolean indicating if a shadowRoot is attached but not available.
      */
 
+    /**
+     * @callback ShadowRootFilter
+     * @param {Element} shadowHostNode the element which contains shadow content
+     * @returns {boolean} true if a shadow root could potentially contain valid candidates.
+     */
+
     /**
      * @typedef {Object} CandidatesScope
      * @property {Element} scope contains inner candidates
@@ -171,6 +177,7 @@
      *  or a boolean stating if it has an undisclosed shadow root
      * @property {(node: Element) => boolean} filter filter candidates
      * @property {boolean} flatten if true then result will flatten any CandidatesScope into the returned list
+     * @property {ShadowRootFilter} shadowRootFilter filter shadow roots;
      */
 
     /**
@@ -213,8 +220,9 @@
 
           var shadowRoot = element.shadowRoot || // check for an undisclosed shadow
           typeof options.getShadowRoot === 'function' && options.getShadowRoot(element);
+          var validShadowRoot = !options.shadowRootFilter || options.shadowRootFilter(element);
 
-          if (shadowRoot) {
+          if (shadowRoot && validShadowRoot) {
             // add shadow dom scope IIF a shadow root node was given; otherwise, an undisclosed
             //  shadow exists, so look at light dom children as fallback BUT create a scope for any
             //  child candidates found because they're likely slotted elements (elements that are
@@ -495,6 +503,18 @@
 
       return true;
     };
+
+    var isValidShadowRootTabbable = function isValidShadowRootTabbable(shadowHostNode) {
+      var tabIndex = parseInt(shadowHostNode.getAttribute('tabindex'), 10);
+
+      if (isNaN(tabIndex) || tabIndex >= 0) {
+        return true;
+      } // If a custom element has an explicit negative tabindex,
+      // browsers will not allow tab targeting said element's children.
+
+
+      return false;
+    };
     /**
      * @param {Array.<Element|CandidatesScope>} candidates
      * @returns Element[]
@@ -536,7 +556,8 @@
         candidates = getCandidatesIteratively([el], options.includeContainer, {
           filter: isNodeMatchingSelectorTabbable.bind(null, options),
           flatten: false,
-          getShadowRoot: options.getShadowRoot
+          getShadowRoot: options.getShadowRoot,
+          shadowRootFilter: isValidShadowRootTabbable
         });
       } else {
         candidates = getCandidates(el, options.includeContainer, isNodeMatchingSelectorTabbable.bind(null, options));
@@ -4089,7 +4110,8 @@
       "card": "pf-c-card",
       "modifiers": {
         "plain": "pf-m-plain"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     Promise.resolve().then(function () { return content; });
@@ -4207,7 +4229,8 @@
         "end": "pf-m-end",
         "overpassFont": "pf-m-overpass-font"
       },
-      "spinner": "pf-c-spinner"
+      "spinner": "pf-c-spinner",
+      "themeDark": "pf-theme-dark"
     };
 
     Promise.resolve().then(function () { return spinner; });
@@ -4524,7 +4547,8 @@
         "bordered": "pf-m-bordered",
         "expanded": "pf-m-expanded",
         "fixed": "pf-m-fixed"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     const AccordionContext = React__namespace.createContext({});
@@ -4630,7 +4654,8 @@
         "expanded": "pf-m-expanded",
         "truncate": "pf-m-truncate",
         "overpassFont": "pf-m-overpass-font"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     Promise.resolve().then(function () { return accessibility; });
@@ -4759,6 +4784,7 @@
         "rightBottom": "pf-m-right-bottom",
         "textAlignLeft": "pf-m-text-align-left"
       },
+      "themeDark": "pf-theme-dark",
       "tooltip": "pf-c-tooltip",
       "tooltipArrow": "pf-c-tooltip__arrow",
       "tooltipContent": "pf-c-tooltip__content"
@@ -5122,7 +5148,8 @@
         "external": "pf-m-external",
         "link": "pf-m-link",
         "action": "pf-m-action"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     Promise.resolve().then(function () { return formControl; });
@@ -5140,7 +5167,8 @@
         "placeholder": "pf-m-placeholder",
         "resizeVertical": "pf-m-resize-vertical",
         "resizeHorizontal": "pf-m-resize-horizontal"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     const ThIconConfig = {
@@ -5203,7 +5231,8 @@
         "ariaDisabled": "pf-m-aria-disabled",
         "icon": "pf-m-icon",
         "description": "pf-m-description"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     exports.DropdownPosition = void 0;
@@ -5831,7 +5860,8 @@
       "modifiers": {
         "read": "pf-m-read",
         "unread": "pf-m-unread"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     const Badge = (_a) => {
@@ -6369,7 +6399,8 @@
         "sticky": "pf-m-sticky",
         "disabled": "pf-m-disabled",
         "inline": "pf-m-inline"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     const Banner = (_a) => {
@@ -6417,7 +6448,8 @@
       "modifiers": {
         "current": "pf-m-current",
         "overpassFont": "pf-m-overpass-font"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     const Breadcrumb = (_a) => {
@@ -6624,7 +6656,8 @@
       "selectToggleStatusIcon": "pf-c-select__toggle-status-icon",
       "selectToggleText": "pf-c-select__toggle-text",
       "selectToggleTypeahead": "pf-c-select__toggle-typeahead",
-      "selectToggleWrapper": "pf-c-select__toggle-wrapper"
+      "selectToggleWrapper": "pf-c-select__toggle-wrapper",
+      "themeDark": "pf-theme-dark"
     };
 
     const TimesCircleIconConfig = {
@@ -6691,7 +6724,8 @@
         "inactive": "pf-m-inactive",
         "hidden": "pf-m-hidden",
         "expanded": "pf-m-expanded"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     Promise.resolve().then(function () { return check; });
@@ -7309,7 +7343,8 @@
       "modifiers": {
         "overflow": "pf-m-overflow",
         "draggable": "pf-m-draggable"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     class Chip extends React__namespace.Component {
@@ -8048,7 +8083,7 @@
             });
         }
         render() {
-            const _a = this.props, { children, chipGroupProps, chipGroupComponent, className, customContent, variant, direction, onSelect, onClear, onBlur, toggleId, isOpen, isGrouped, isPlain, isDisabled, hasPlaceholderStyle, validated, selections: selectionsProp, typeAheadAriaLabel, clearSelectionsAriaLabel, toggleAriaLabel, removeSelectionAriaLabel, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, placeholderText, width, maxHeight, toggleIcon, ouiaId, ouiaSafe, hasInlineFilter, isCheckboxSelectionBadgeHidden, inlineFilterPlaceholderText, 
+            const _a = this.props, { children, chipGroupProps, chipGroupComponent, className, customContent, variant, direction, onSelect, onClear, onBlur, toggleId, isOpen, isGrouped, isPlain, isDisabled, hasPlaceholderStyle, validated, selections: selectionsProp, typeAheadAriaLabel, typeAheadAriaDescribedby, clearSelectionsAriaLabel, toggleAriaLabel, removeSelectionAriaLabel, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, placeholderText, width, maxHeight, toggleIcon, ouiaId, ouiaSafe, hasInlineFilter, isCheckboxSelectionBadgeHidden, inlineFilterPlaceholderText, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
             onFilter, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
@@ -8058,7 +8093,7 @@
             /* eslint-enable @typescript-eslint/no-unused-vars */
             menuAppendTo, favorites, onFavorite, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject, shouldResetOnSelect, isFlipEnabled } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "onBlur", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "clearSelectionsAriaLabel", "toggleAriaLabel", "removeSelectionAriaLabel", 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid', "placeholderText", "width", "maxHeight", "toggleIcon", "ouiaId", "ouiaSafe", "hasInlineFilter", "isCheckboxSelectionBadgeHidden", "inlineFilterPlaceholderText", "onFilter", "onTypeaheadInputChanged", "onCreateOption", "isCreatable", "onToggle", "createText", "noResultsFoundText", "customBadgeText", "inputIdPrefix", "inputAutoComplete", "isInputValuePersisted", "isInputFilterPersisted", "menuAppendTo", "favorites", "onFavorite", "favoritesLabel", "footer", "loadingVariant", "isCreateSelectOptionObject", "shouldResetOnSelect", "isFlipEnabled"]);
+            favoritesLabel, footer, loadingVariant, isCreateSelectOptionObject, shouldResetOnSelect, isFlipEnabled } = _a, props = __rest$1(_a, ["children", "chipGroupProps", "chipGroupComponent", "className", "customContent", "variant", "direction", "onSelect", "onClear", "onBlur", "toggleId", "isOpen", "isGrouped", "isPlain", "isDisabled", "hasPlaceholderStyle", "validated", "selections", "typeAheadAriaLabel", "typeAheadAriaDescribedby", "clearSelectionsAriaLabel", "toggleAriaLabel", "removeSelectionAriaLabel", 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-invalid', "placeholderText", "width", "maxHeight", "toggleIcon", "ouiaId", "ouiaSafe", "hasInlineFilter", "isCheckboxSelectionBadgeHidden", "inlineFilterPlaceholderText", "onFilter", "onTypeaheadInputChanged", "onCreateOption", "isCreatable", "onToggle", "createText", "noResultsFoundText", "customBadgeText", "inputIdPrefix", "inputAutoComplete", "isInputValuePersisted", "isInputFilterPersisted", "menuAppendTo", "favorites", "onFavorite", "favoritesLabel", "footer", "loadingVariant", "isCreateSelectOptionObject", "shouldResetOnSelect", "isFlipEnabled"]);
             const { focusFirstOption: openedOnEnter, typeaheadCurrIndex, typeaheadInputValue, typeaheadFilteredChildren, favoritesGroup } = this.state;
             const selectToggleId = toggleId || `pf-select-toggle-id-${currentId$1++}`;
             const selections = Array.isArray(selectionsProp) ? selectionsProp : [selectionsProp];
@@ -8232,8 +8267,8 @@
                 " ",
                 innerMenu,
                 " ") : innerMenu;
-            const popperContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$_.select, isOpen && styles$_.modifiers.expanded, validated === exports.ValidatedOptions.success && styles$_.modifiers.success, validated === exports.ValidatedOptions.warning && styles$_.modifiers.warning, validated === exports.ValidatedOptions.error && styles$_.modifiers.invalid, direction === exports.SelectDirection.up && styles$_.modifiers.top, className) }, (width && { style: { width } }), (validated !== exports.ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== exports.ValidatedOptions.default && { 'aria-invalid': ariaInvalid })), isOpen && menuContainer));
-            const mainContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$_.select, isOpen && styles$_.modifiers.expanded, validated === exports.ValidatedOptions.success && styles$_.modifiers.success, validated === exports.ValidatedOptions.warning && styles$_.modifiers.warning, validated === exports.ValidatedOptions.error && styles$_.modifiers.invalid, direction === exports.SelectDirection.up && styles$_.modifiers.top, className), ref: this.parentRef }, getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), (width && { style: { width } }), (validated !== exports.ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== exports.ValidatedOptions.default && { 'aria-invalid': ariaInvalid })),
+            const popperContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$_.select, isOpen && styles$_.modifiers.expanded, validated === exports.ValidatedOptions.success && styles$_.modifiers.success, validated === exports.ValidatedOptions.warning && styles$_.modifiers.warning, validated === exports.ValidatedOptions.error && styles$_.modifiers.invalid, direction === exports.SelectDirection.up && styles$_.modifiers.top, className) }, (width && { style: { width } }), (ariaDescribedby && { 'aria-describedby': ariaDescribedby }), (validated !== exports.ValidatedOptions.default && { 'aria-invalid': ariaInvalid })), isOpen && menuContainer));
+            const mainContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$_.select, isOpen && styles$_.modifiers.expanded, validated === exports.ValidatedOptions.success && styles$_.modifiers.success, validated === exports.ValidatedOptions.warning && styles$_.modifiers.warning, validated === exports.ValidatedOptions.error && styles$_.modifiers.invalid, direction === exports.SelectDirection.up && styles$_.modifiers.top, className), ref: this.parentRef }, getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), (width && { style: { width } }), (ariaDescribedby && { 'aria-describedby': ariaDescribedby }), (validated !== exports.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, onBlur: onBlur, variant: variant, "aria-labelledby": `${ariaLabelledBy || ''} ${selectToggleId}`, "aria-label": toggleAriaLabel, handleTypeaheadKeys: this.handleTypeaheadKeys, moveFocusToLastMenuItem: this.moveFocusToLastMenuItem, isDisabled: isDisabled, hasClearButton: hasOnClear, hasFooter: footer !== undefined, onClickTypeaheadToggleButton: this.onClickTypeaheadToggleButton }),
                     customContent && (React__namespace.createElement("div", { className: css(styles$_.selectToggleWrapper) },
                         toggleIcon && React__namespace.createElement("span", { className: css(styles$_.selectToggleIcon) }, toggleIcon),
@@ -8253,15 +8288,15 @@
                     variant === exports.SelectVariant.typeahead && !customContent && (React__namespace.createElement(React__namespace.Fragment, null,
                         React__namespace.createElement("div", { className: css(styles$_.selectToggleWrapper) },
                             toggleIcon && React__namespace.createElement("span", { className: css(styles$_.selectToggleIcon) }, toggleIcon),
-                            React__namespace.createElement("input", { className: css(formStyles.formControl, styles$_.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-typeahead`, "aria-label": typeAheadAriaLabel, placeholder: placeholderText, value: typeaheadInputValue !== null
+                            React__namespace.createElement("input", Object.assign({ className: css(formStyles.formControl, styles$_.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-typeahead`, "aria-label": typeAheadAriaLabel }, (typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby }), { placeholder: placeholderText, value: typeaheadInputValue !== null
                                     ? typeaheadInputValue
-                                    : this.getDisplay(selections[0], 'text') || '', type: "text", onClick: this.onClick, onChange: this.onChange, autoComplete: inputAutoComplete, disabled: isDisabled, ref: this.inputRef })),
+                                    : this.getDisplay(selections[0], 'text') || '', type: "text", onClick: this.onClick, onChange: this.onChange, autoComplete: inputAutoComplete, disabled: isDisabled, ref: this.inputRef }))),
                         hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn)),
                     variant === exports.SelectVariant.typeaheadMulti && !customContent && (React__namespace.createElement(React__namespace.Fragment, null,
                         React__namespace.createElement("div", { className: css(styles$_.selectToggleWrapper) },
                             toggleIcon && React__namespace.createElement("span", { className: css(styles$_.selectToggleIcon) }, toggleIcon),
                             selections && Array.isArray(selections) && selections.length > 0 && selectedChips,
-                            React__namespace.createElement("input", { className: css(formStyles.formControl, styles$_.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === exports.ValidatedOptions.error, placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: inputAutoComplete, disabled: isDisabled, ref: this.inputRef })),
+                            React__namespace.createElement("input", Object.assign({ className: css(formStyles.formControl, styles$_.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === exports.ValidatedOptions.error }, (typeAheadAriaDescribedby && { 'aria-describedby': typeAheadAriaDescribedby }), { placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: inputAutoComplete, disabled: isDisabled, ref: this.inputRef }))),
                         hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn)),
                     validated === exports.ValidatedOptions.success && (React__namespace.createElement("span", { className: css(styles$_.selectToggleStatusIcon) },
                         React__namespace.createElement(CheckCircleIcon$1, { "aria-hidden": "true" }))),
@@ -8305,6 +8340,7 @@
         'aria-describedby': '',
         'aria-invalid': false,
         typeAheadAriaLabel: '',
+        typeAheadAriaDescribedby: '',
         clearSelectionsAriaLabel: 'Clear all',
         toggleAriaLabel: 'Options menu',
         removeSelectionAriaLabel: 'Remove',
@@ -8388,7 +8424,8 @@
         "disabled": "pf-m-disabled",
         "hover": "pf-m-hover",
         "focus": "pf-m-focus"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     exports.Weekday = void 0;
@@ -8803,7 +8840,8 @@
         "inline": "pf-m-inline",
         "block": "pf-m-block",
         "code": "pf-m-code"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     Promise.resolve().then(function () { return popover; });
@@ -8839,6 +8877,7 @@
       "popoverTitle": "pf-c-popover__title",
       "popoverTitleIcon": "pf-c-popover__title-icon",
       "popoverTitleText": "pf-c-popover__title-text",
+      "themeDark": "pf-theme-dark",
       "title": "pf-c-title"
     };
 
@@ -9342,7 +9381,8 @@
         "plain": "pf-m-plain",
         "text": "pf-m-text",
         "disabled": "pf-m-disabled"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     const SearchIconConfig = {
@@ -9466,7 +9506,8 @@
       "inputGroupText": "pf-c-input-group__text",
       "modifiers": {
         "plain": "pf-m-plain"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     class FormSelect extends React__namespace.Component {
@@ -9583,10 +9624,11 @@
     TextArea.displayName = 'TextArea';
 
     const InputGroup = (_a) => {
-        var { className = '', children } = _a, props = __rest$1(_a, ["className", "children"]);
+        var { className = '', children, innerRef } = _a, props = __rest$1(_a, ["className", "children", "innerRef"]);
         const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
         const idItem = React__namespace.Children.toArray(children).find((child) => !formCtrls.includes(child.type.displayName) && child.props.id);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$P.inputGroup, className) }, props), idItem
+        const inputGroupRef = innerRef || React__namespace.useRef(null);
+        return (React__namespace.createElement("div", Object.assign({ ref: inputGroupRef, className: css(styles$P.inputGroup, className) }, props), idItem
             ? React__namespace.Children.map(children, (child) => formCtrls.includes(child.type.displayName)
                 ? React__namespace.cloneElement(child, { 'aria-describedby': idItem.props.id })
                 : child)
@@ -9768,7 +9810,8 @@
         "expanded": "pf-m-expanded",
         "disabled": "pf-m-disabled",
         "noPadding": "pf-m-no-padding"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     Promise.resolve().then(function () { return dataListGrid; });
@@ -10004,9 +10047,9 @@
         render() {
             const _a = this.props, { className, children, onSelectDataListItem, selectedDataListItemId, isCompact, wrapModifier, 
             /* eslint-disable @typescript-eslint/no-unused-vars */
-            onDragStart, onDragMove, onDragCancel, onDragFinish, gridBreakpoint, itemOrder } = _a, 
+            onDragStart, onDragMove, onDragCancel, onDragFinish, gridBreakpoint, itemOrder, selectableRow } = _a, 
             /* eslint-enable @typescript-eslint/no-unused-vars */
-            props = __rest$1(_a, ["className", "children", "onSelectDataListItem", "selectedDataListItemId", "isCompact", "wrapModifier", "onDragStart", "onDragMove", "onDragCancel", "onDragFinish", "gridBreakpoint", "itemOrder"]);
+            props = __rest$1(_a, ["className", "children", "onSelectDataListItem", "selectedDataListItemId", "isCompact", "wrapModifier", "onDragStart", "onDragMove", "onDragCancel", "onDragFinish", "gridBreakpoint", "itemOrder", "selectableRow"]);
             const { dragging } = this.state;
             const isSelectable = onSelectDataListItem !== undefined;
             const updateSelectedDataListItem = (id) => {
@@ -10021,6 +10064,7 @@
                     isSelectable,
                     selectedDataListItemId,
                     updateSelectedDataListItem,
+                    selectableRow,
                     isDraggable: this.html5DragDrop,
                     dragStart: this.dragStart,
                     dragEnd: this.dragEnd,
@@ -10114,8 +10158,8 @@
     }
     class DataListItem extends React__namespace.Component {
         render() {
-            const _a = this.props, { children, isExpanded, className, id, 'aria-labelledby': ariaLabelledBy } = _a, props = __rest$1(_a, ["children", "isExpanded", "className", "id", 'aria-labelledby']);
-            return (React__namespace.createElement(DataListContext.Consumer, null, ({ isSelectable, selectedDataListItemId, updateSelectedDataListItem, isDraggable, dragStart, dragEnd, drop }) => {
+            const _a = this.props, { children, isExpanded, className, id, 'aria-labelledby': ariaLabelledBy, selectableInputAriaLabel } = _a, props = __rest$1(_a, ["children", "isExpanded", "className", "id", 'aria-labelledby', "selectableInputAriaLabel"]);
+            return (React__namespace.createElement(DataListContext.Consumer, null, ({ isSelectable, selectedDataListItemId, updateSelectedDataListItem, selectableRow, isDraggable, dragStart, dragEnd, drop }) => {
                 const selectDataListItem = (event) => {
                     let target = event.target;
                     while (event.currentTarget !== target) {
@@ -10146,10 +10190,17 @@
                     onDragEnd: dragEnd,
                     onDragStart: dragStart
                 };
-                return (React__namespace.createElement("li", Object.assign({ id: id, className: css(styles$O.dataListItem, isExpanded && styles$O.modifiers.expanded, isSelectable && styles$O.modifiers.selectable, selectedDataListItemId && selectedDataListItemId === id && styles$O.modifiers.selected, className), "aria-labelledby": ariaLabelledBy }, (isSelectable && { tabIndex: 0, onClick: selectDataListItem, onKeyDown }), (isSelectable && selectedDataListItemId === id && { 'aria-selected': true }), props, dragProps), React__namespace.Children.map(children, child => React__namespace.isValidElement(child) &&
-                    React__namespace.cloneElement(child, {
-                        rowid: ariaLabelledBy
-                    }))));
+                const isSelected = selectedDataListItemId === id;
+                const selectableInputAriaProps = selectableInputAriaLabel
+                    ? { 'aria-label': selectableInputAriaLabel }
+                    : { 'aria-labelledby': ariaLabelledBy };
+                const selectableInputType = (selectableRow === null || selectableRow === void 0 ? void 0 : selectableRow.type) === 'multiple' ? 'checkbox' : 'radio';
+                return (React__namespace.createElement("li", Object.assign({ id: id, className: css(styles$O.dataListItem, isExpanded && styles$O.modifiers.expanded, isSelectable && styles$O.modifiers.selectable, selectedDataListItemId && isSelected && styles$O.modifiers.selected, className), "aria-labelledby": ariaLabelledBy }, (isSelectable && { tabIndex: 0, onClick: selectDataListItem, onKeyDown }), (isSelectable && isSelected && { 'aria-selected': true }), props, dragProps),
+                    selectableRow && (React__namespace.createElement("input", Object.assign({ className: "pf-screen-reader", type: selectableInputType, checked: isSelected, onChange: event => selectableRow.onChange(id, event), tabIndex: -1 }, selectableInputAriaProps))),
+                    React__namespace.Children.map(children, child => React__namespace.isValidElement(child) &&
+                        React__namespace.cloneElement(child, {
+                            rowid: ariaLabelledBy
+                        }))));
             }));
         }
     }
@@ -10227,7 +10278,8 @@
         "error": "pf-m-error",
         "alignRight": "pf-m-align-right",
         "top": "pf-m-top"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     const OutlinedCalendarAltIconConfig = {
@@ -10498,7 +10550,8 @@
         "inlineOn_2xl": "pf-m-inline-on-2xl",
         "staticOn_2xl": "pf-m-static-on-2xl"
       },
-      "pageMain": "pf-c-page__main"
+      "pageMain": "pf-c-page__main",
+      "themeDark": "pf-theme-dark"
     };
 
     exports.DrawerColorVariant = void 0;
@@ -14074,7 +14127,8 @@
         "success": "pf-m-success",
         "error": "pf-m-error",
         "dynamic": "pf-m-dynamic"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     const HelperText = (_a) => {
@@ -14137,7 +14191,8 @@
         "link": "pf-m-link",
         "inline": "pf-m-inline",
         "plain": "pf-m-plain"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     const Hint = (_a) => {
@@ -14459,12 +14514,14 @@
         "red": "pf-m-red",
         "purple": "pf-m-purple",
         "cyan": "pf-m-cyan",
+        "gold": "pf-m-gold",
         "outline": "pf-m-outline",
         "overflow": "pf-m-overflow",
         "add": "pf-m-add",
         "editable": "pf-m-editable",
         "editableActive": "pf-m-editable-active"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     Promise.resolve().then(function () { return labelGroup; });
@@ -14759,6 +14816,7 @@
       "loginMainHeader": "pf-c-login__main-header",
       "loginMainHeaderDesc": "pf-c-login__main-header-desc",
       "loginMainHeaderUtilities": "pf-c-login__main-header-utilities",
+      "themeDark": "pf-theme-dark",
       "title": "pf-c-title"
     };
 
@@ -14965,6 +15023,7 @@
       },
       "nav": "pf-c-nav",
       "page": "pf-c-page",
+      "themeDark": "pf-theme-dark",
       "toolbar": "pf-c-toolbar",
       "toolbarContentSection": "pf-c-toolbar__content-section",
       "toolbarExpandableContent": "pf-c-toolbar__expandable-content"
@@ -15008,6 +15067,7 @@
         "shadowTop": "pf-m-shadow-top",
         "fill": "pf-m-fill",
         "noFill": "pf-m-no-fill",
+        "light_100": "pf-m-light-100",
         "dark_100": "pf-m-dark-100",
         "dark_200": "pf-m-dark-200",
         "padding": "pf-m-padding",
@@ -15047,7 +15107,8 @@
       "pageMainTabs": "pf-c-page__main-tabs",
       "pageMainWizard": "pf-c-page__main-wizard",
       "pageSidebar": "pf-c-page__sidebar",
-      "pageSidebarBody": "pf-c-page__sidebar-body"
+      "pageSidebarBody": "pf-c-page__sidebar-body",
+      "themeDark": "pf-theme-dark"
     };
 
     const global_breakpoint_xl = {
@@ -15308,7 +15369,8 @@
         "selected": "pf-m-selected",
         "favorite": "pf-m-favorite",
         "favorited": "pf-m-favorited"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     const MenuContext = React__namespace.createContext({
@@ -15819,7 +15881,8 @@
         "active": "pf-m-active",
         "fullWidth": "pf-m-full-width"
       },
-      "textInputGroup": "pf-c-text-input-group"
+      "textInputGroup": "pf-c-text-input-group",
+      "themeDark": "pf-theme-dark"
     };
 
     class MenuToggleBase extends React__namespace.Component {
@@ -15878,7 +15941,8 @@
         "info": "pf-m-info",
         "help": "pf-m-help",
         "icon": "pf-m-icon"
-      }
+      },
+      "themeDark": "pf-theme-dark"
     };
 
     const ModalBoxBody = (_a) => {
@@ -16288,7 +16352,8 @@
       "progressIndicator": "pf-c-progress__indicator",
       "progressMeasure": "pf-c-progress__measure",
       "progressStatus": "pf-c-progress__status",
-      "progressStatusIcon": "pf-c-progress__status-icon"
+      "progressStatusIcon": "pf-c-progress__status-icon",
+      "themeDark": "pf-theme-dark"
     };
 
     const ProgressBar = (_a) => {
@@ -16509,7 +16574,8 @@
       "navSectionTitle": "pf-c-nav__section-title",
       "navSubnav": "pf-c-nav__subnav",
       "navToggle": "pf-c-nav__toggle",
-      "navToggleIcon": "pf-c-nav__toggle-icon"
+      "navToggleIcon": "pf-c-nav__toggle-icon",
+      "themeDark": "pf-theme-dark"
     };
 
     const navContextDefaults = {};
@@ -16875,7 +16941,8 @@
         "attention": "pf-m-attention"
       },
       "notificationBadge": "pf-c-notification-badge",
-      "notificationBadgeCount": "pf-c-notification-badge__count"
+      "notificationBadgeCount": "pf-c-notification-badge__count",
+      "themeDark": "pf-theme-dark"
     };
 
     const AttentionBellIconConfig = {
@@ -16944,7 +17011,8 @@
       "notificationDrawerListItemHeader": "pf-c-notification-drawer__list-item-header",
       "notificationDrawerListItemHeaderIcon": "pf-c-notification-drawer__list-item-header-icon",
       "notificationDrawerListItemHeaderTitle": "pf-c-notification-drawer__list-item-header-title",
-      "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp"
+      "notificationDrawerListItemTimestamp": "pf-c-notification-drawer__list-item-timestamp",
+      "themeDark": "pf-theme-dark"
     };
 
     const NotificationDrawerBase = (_a) => {
@@ -17165,7 +17233,8 @@
       "optionsMenuToggleButton": "pf-c-options-menu__toggle-button",
       "optionsMenuToggleButtonIcon": "pf-c-options-menu__toggle-button-icon",
       "optionsMenuToggleIcon": "pf-c-options-menu__toggle-icon",
-      "optionsMenuToggleText": "pf-c-options-menu__toggle-text"
+      "optionsMenuToggleText": "pf-c-options-menu__toggle-text",
+      "themeDark": "pf-theme-dark"
     };
 
     exports.OptionsMenuPosition = void 0;
@@ -17573,7 +17642,8 @@
       "paginationNav": "pf-c-pagination__nav",
       "paginationNavControl": "pf-c-pagination__nav-control",
       "paginationNavPageSelect": "pf-c-pagination__nav-page-select",
-      "paginationTotalItems": "pf-c-pagination__total-items"
+      "paginationTotalItems": "pf-c-pagination__total-items",
+      "themeDark": "pf-theme-dark"
     };
 
     class Navigation extends React__namespace.Component {
@@ -18090,10 +18160,56 @@
       "searchInputNav": "pf-c-search-input__nav",
       "searchInputText": "pf-c-search-input__text",
       "searchInputTextInput": "pf-c-search-input__text-input",
-      "searchInputUtilities": "pf-c-search-input__utilities"
+      "searchInputUtilities": "pf-c-search-input__utilities",
+      "themeDark": "pf-theme-dark"
     };
 
-    const AdvancedSearchMenu = ({ parentRef, parentInputRef, value = '', attributes = [], formAdditionalItems, hasWordsAttrLabel = 'Has words', advancedSearchDelimiter, getAttrValueMap, onChange, onSearch, onClear, resetButtonLabel = 'Reset', submitSearchButtonLabel = 'Search', isSearchMenuOpen, onToggleAdvancedMenu }) => {
+    Promise.resolve().then(function () { return panel; });
+    var styles$m = {
+      "modifiers": {
+        "bordered": "pf-m-bordered",
+        "raised": "pf-m-raised",
+        "scrollable": "pf-m-scrollable"
+      },
+      "panel": "pf-c-panel",
+      "panelFooter": "pf-c-panel__footer",
+      "panelHeader": "pf-c-panel__header",
+      "panelMain": "pf-c-panel__main",
+      "panelMainBody": "pf-c-panel__main-body"
+    };
+
+    const PanelBase = (_a) => {
+        var { className, children, variant, isScrollable, innerRef } = _a, props = __rest$1(_a, ["className", "children", "variant", "isScrollable", "innerRef"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$m.panel, variant === 'raised' && styles$m.modifiers.raised, variant === 'bordered' && styles$m.modifiers.bordered, isScrollable && styles$m.modifiers.scrollable, className), ref: innerRef }, props), children));
+    };
+    const Panel = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(PanelBase, Object.assign({ innerRef: ref }, props))));
+    Panel.displayName = 'Panel';
+
+    const PanelMain = (_a) => {
+        var { className, children, maxHeight } = _a, props = __rest$1(_a, ["className", "children", "maxHeight"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$m.panelMain, className), style: { '--pf-c-panel__main--MaxHeight': maxHeight } }, props), children));
+    };
+    PanelMain.displayName = 'PanelMain';
+
+    const PanelMainBody = (_a) => {
+        var { className, children } = _a, props = __rest$1(_a, ["className", "children"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$m.panelMainBody, className) }, props), children));
+    };
+    PanelMainBody.displayName = 'PanelMainBody';
+
+    const PanelHeader = (_a) => {
+        var { className, children } = _a, props = __rest$1(_a, ["className", "children"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$m.panelHeader, className) }, props), children));
+    };
+    PanelHeader.displayName = 'PanelHeader';
+
+    const PanelFooter = (_a) => {
+        var { className, children } = _a, props = __rest$1(_a, ["className", "children"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$m.panelFooter, className) }, props), children));
+    };
+    PanelFooter.displayName = 'PanelFooter';
+
+    const AdvancedSearchMenu = ({ className, parentRef, parentInputRef, value = '', attributes = [], formAdditionalItems, hasWordsAttrLabel = 'Has words', advancedSearchDelimiter, getAttrValueMap, onChange, onSearch, onClear, resetButtonLabel = 'Reset', submitSearchButtonLabel = 'Search', isSearchMenuOpen, onToggleAdvancedMenu }) => {
         const firstAttrRef = React__namespace.useRef(null);
         const [putFocusBackOnInput, setPutFocusBackOnInput] = React__namespace.useState(false);
         React__namespace.useEffect(() => {
@@ -18189,19 +18305,73 @@
                 React__namespace.createElement(TextInput, { type: "text", id: randomId, value: getValue('haswords'), onChange: (value, evt) => handleValueChange('haswords', value, evt) })))));
             return formGroups;
         };
-        return isSearchMenuOpen ? (React__namespace.createElement("div", { className: styles$n.searchInputMenu },
-            React__namespace.createElement("div", { className: styles$n.searchInputMenuBody },
-                React__namespace.createElement(Form, null,
-                    buildFormGroups(),
-                    formAdditionalItems ? formAdditionalItems : null,
-                    React__namespace.createElement(ActionGroup, null,
-                        React__namespace.createElement(Button, { variant: "primary", type: "submit", onClick: onSearchHandler }, submitSearchButtonLabel),
-                        !!onClear && (React__namespace.createElement(Button, { variant: "link", type: "reset", onClick: onClear }, resetButtonLabel))))))) : null;
+        return isSearchMenuOpen ? (React__namespace.createElement(Panel, { variant: "raised", className: css(className) },
+            React__namespace.createElement(PanelMain, null,
+                React__namespace.createElement(PanelMainBody, null,
+                    React__namespace.createElement(Form, null,
+                        buildFormGroups(),
+                        formAdditionalItems ? formAdditionalItems : null,
+                        React__namespace.createElement(ActionGroup, null,
+                            React__namespace.createElement(Button, { variant: "primary", type: "submit", onClick: onSearchHandler, isDisabled: !value }, submitSearchButtonLabel),
+                            !!onClear && (React__namespace.createElement(Button, { variant: "link", type: "reset", onClick: onClear }, resetButtonLabel)))))))) : null;
     };
     AdvancedSearchMenu.displayName = 'SearchInput';
 
+    Promise.resolve().then(function () { return textInputGroup; });
+    var styles$l = {
+      "button": "pf-c-button",
+      "chipGroup": "pf-c-chip-group",
+      "chipGroupList": "pf-c-chip-group__list",
+      "modifiers": {
+        "disabled": "pf-m-disabled",
+        "plain": "pf-m-plain",
+        "icon": "pf-m-icon",
+        "hint": "pf-m-hint"
+      },
+      "textInputGroup": "pf-c-text-input-group",
+      "textInputGroupGroup": "pf-c-text-input-group__group",
+      "textInputGroupIcon": "pf-c-text-input-group__icon",
+      "textInputGroupMain": "pf-c-text-input-group__main",
+      "textInputGroupText": "pf-c-text-input-group__text",
+      "textInputGroupTextInput": "pf-c-text-input-group__text-input",
+      "textInputGroupUtilities": "pf-c-text-input-group__utilities"
+    };
+
+    const TextInputGroupContext = React__namespace.createContext({
+        isDisabled: false
+    });
+    const TextInputGroup = (_a) => {
+        var { children, className, isDisabled, innerRef } = _a, props = __rest$1(_a, ["children", "className", "isDisabled", "innerRef"]);
+        const textInputGroupRef = innerRef || React__namespace.useRef(null);
+        return (React__namespace.createElement(TextInputGroupContext.Provider, { value: { isDisabled } },
+            React__namespace.createElement("div", Object.assign({ ref: textInputGroupRef, className: css(styles$l.textInputGroup, isDisabled && styles$l.modifiers.disabled, className) }, props), children)));
+    };
+    TextInputGroup.displayName = 'TextInputGroup';
+
+    const TextInputGroupMain = (_a) => {
+        var { children, className, icon, type = 'text', hint, onChange = () => undefined, onFocus, onBlur, 'aria-label': ariaLabel = 'Type to filter', value: inputValue, placeholder: inputPlaceHolder, innerRef } = _a, props = __rest$1(_a, ["children", "className", "icon", "type", "hint", "onChange", "onFocus", "onBlur", 'aria-label', "value", "placeholder", "innerRef"]);
+        const { isDisabled } = React__namespace.useContext(TextInputGroupContext);
+        const textInputGroupInputInputRef = innerRef || React__namespace.useRef(null);
+        const handleChange = (event) => {
+            onChange(event.currentTarget.value, event);
+        };
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$l.textInputGroupMain, icon && styles$l.modifiers.icon, className) }, props),
+            children,
+            React__namespace.createElement("span", { className: css(styles$l.textInputGroupText) },
+                hint && (React__namespace.createElement("input", { className: css(styles$l.textInputGroupTextInput, styles$l.modifiers.hint), type: "text", disabled: true, "aria-hidden": "true", value: hint })),
+                icon && React__namespace.createElement("span", { className: css(styles$l.textInputGroupIcon) }, icon),
+                React__namespace.createElement("input", { ref: textInputGroupInputInputRef, type: type, className: css(styles$l.textInputGroupTextInput), "aria-label": ariaLabel, disabled: isDisabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, value: inputValue || '', placeholder: inputPlaceHolder }))));
+    };
+    TextInputGroupMain.displayName = 'TextInputGroupMain';
+
+    const TextInputGroupUtilities = (_a) => {
+        var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$l.textInputGroupUtilities, className) }, props), children));
+    };
+    TextInputGroupUtilities.displayName = 'TextInputGroupUtilities';
+
     const SearchInputBase = (_a) => {
-        var { className, value = '', attributes = [], formAdditionalItems, hasWordsAttrLabel = 'Has words', advancedSearchDelimiter, placeholder, hint, onChange, onSearch, onClear, onToggleAdvancedSearch, isAdvancedSearchOpen, resultsCount, onNextClick, onPreviousClick, innerRef, 'aria-label': ariaLabel = 'Search input', resetButtonLabel = 'Reset', openMenuButtonAriaLabel = 'Open advanced search', submitSearchButtonLabel = 'Search', isDisabled = false } = _a, props = __rest$1(_a, ["className", "value", "attributes", "formAdditionalItems", "hasWordsAttrLabel", "advancedSearchDelimiter", "placeholder", "hint", "onChange", "onSearch", "onClear", "onToggleAdvancedSearch", "isAdvancedSearchOpen", "resultsCount", "onNextClick", "onPreviousClick", "innerRef", 'aria-label', "resetButtonLabel", "openMenuButtonAriaLabel", "submitSearchButtonLabel", "isDisabled"]);
+        var { className, value = '', attributes = [], formAdditionalItems, hasWordsAttrLabel = 'Has words', advancedSearchDelimiter, placeholder, hint, onChange, onSearch, onClear, onToggleAdvancedSearch, isAdvancedSearchOpen, resultsCount, onNextClick, onPreviousClick, innerRef, 'aria-label': ariaLabel = 'Search input', resetButtonLabel = 'Reset', openMenuButtonAriaLabel = 'Open advanced search', previousNavigationButtonAriaLabel = 'Previous', isPreviousNavigationButtonDisabled = false, isNextNavigationButtonDisabled = false, nextNavigationButtonAriaLabel = 'Next', submitSearchButtonLabel = 'Search', isDisabled = false } = _a, props = __rest$1(_a, ["className", "value", "attributes", "formAdditionalItems", "hasWordsAttrLabel", "advancedSearchDelimiter", "placeholder", "hint", "onChange", "onSearch", "onClear", "onToggleAdvancedSearch", "isAdvancedSearchOpen", "resultsCount", "onNextClick", "onPreviousClick", "innerRef", 'aria-label', "resetButtonLabel", "openMenuButtonAriaLabel", "previousNavigationButtonAriaLabel", "isPreviousNavigationButtonDisabled", "isNextNavigationButtonDisabled", "nextNavigationButtonAriaLabel", "submitSearchButtonLabel", "isDisabled"]);
         const [isSearchMenuOpen, setIsSearchMenuOpen] = React__namespace.useState(false);
         const [searchValue, setSearchValue] = React__namespace.useState(value);
         const searchInputRef = React__namespace.useRef(null);
@@ -18218,11 +18388,11 @@
         React__namespace.useEffect(() => {
             setIsSearchMenuOpen(isAdvancedSearchOpen);
         }, [isAdvancedSearchOpen]);
-        const onChangeHandler = (event) => {
+        const onChangeHandler = (value, event) => {
             if (onChange) {
-                onChange(event.currentTarget.value, event);
+                onChange(value, event);
             }
-            setSearchValue(event.currentTarget.value);
+            setSearchValue(value);
         };
         const onToggle = (e) => {
             const isOpen = !isSearchMenuOpen;
@@ -18267,30 +18437,39 @@
                 searchInputInputRef.current.focus();
             }
         };
-        return (React__namespace.createElement("div", Object.assign({ className: css(className, styles$n.searchInput), ref: searchInputRef }, props),
-            React__namespace.createElement(InputGroup, null,
-                React__namespace.createElement("div", { className: css(styles$n.searchInputBar) },
-                    React__namespace.createElement("span", { className: css(styles$n.searchInputText) },
-                        React__namespace.createElement("span", { className: css(styles$n.searchInputIcon) },
-                            React__namespace.createElement(SearchIcon$1, null)),
-                        hint && (React__namespace.createElement("input", { className: css(styles$n.searchInputTextInput, styles$n.modifiers.hint), type: "text", disabled: true, "aria-hidden": "true", value: hint })),
-                        React__namespace.createElement("input", { ref: searchInputInputRef, className: css(styles$n.searchInputTextInput), value: searchValue, placeholder: placeholder, "aria-label": ariaLabel, onKeyDown: onEnter, onChange: onChangeHandler, disabled: isDisabled })),
-                    value && (React__namespace.createElement("span", { className: css(styles$n.searchInputUtilities) },
-                        resultsCount && (React__namespace.createElement("span", { className: css(styles$n.searchInputCount) },
-                            React__namespace.createElement(Badge, { isRead: true }, resultsCount))),
-                        !!onNextClick && !!onPreviousClick && (React__namespace.createElement("span", { className: css(styles$n.searchInputNav) },
-                            React__namespace.createElement(Button, { variant: exports.ButtonVariant.plain, "aria-label": "Previous", isDisabled: isDisabled, onClick: onPreviousClick },
-                                React__namespace.createElement(AngleUpIcon$1, null)),
-                            React__namespace.createElement(Button, { variant: exports.ButtonVariant.plain, "aria-label": "Next", isDisabled: isDisabled, onClick: onNextClick },
-                                React__namespace.createElement(AngleDownIcon$1, null)))),
-                        !!onClear && (React__namespace.createElement("span", { className: "pf-c-search-input__clear" },
-                            React__namespace.createElement(Button, { variant: exports.ButtonVariant.plain, isDisabled: isDisabled, "aria-label": resetButtonLabel, onClick: onClearInput },
-                                React__namespace.createElement(TimesIcon$1, null))))))),
+        const buildSearchTextInputGroup = (_a = {}) => {
+            var searchInputProps = __rest$1(_a, []);
+            return (React__namespace.createElement(TextInputGroup, Object.assign({ isDisabled: isDisabled }, searchInputProps),
+                React__namespace.createElement(TextInputGroupMain, { hint: hint, icon: React__namespace.createElement(SearchIcon$1, null), innerRef: searchInputInputRef, value: searchValue, placeholder: placeholder, "aria-label": ariaLabel, onKeyDown: onEnter, onChange: onChangeHandler }),
+                value && (React__namespace.createElement(TextInputGroupUtilities, null,
+                    resultsCount && React__namespace.createElement(Badge, { isRead: true }, resultsCount),
+                    !!onNextClick && !!onPreviousClick && (React__namespace.createElement("div", { className: "pf-c-text-input-group__group" },
+                        React__namespace.createElement(Button, { variant: exports.ButtonVariant.plain, "aria-label": previousNavigationButtonAriaLabel, isDisabled: isDisabled || isPreviousNavigationButtonDisabled, onClick: onPreviousClick },
+                            React__namespace.createElement(AngleUpIcon$1, null)),
+                        React__namespace.createElement(Button, { variant: exports.ButtonVariant.plain, "aria-label": nextNavigationButtonAriaLabel, isDisabled: isDisabled || isNextNavigationButtonDisabled, onClick: onNextClick },
+                            React__namespace.createElement(AngleDownIcon$1, null)))),
+                    !!onClear && (React__namespace.createElement(Button, { variant: exports.ButtonVariant.plain, isDisabled: isDisabled, "aria-label": resetButtonLabel, onClick: onClearInput },
+                        React__namespace.createElement(TimesIcon$1, null)))))));
+        };
+        const buildSearchTextInputGroupWithExtraButtons = (_a = {}) => {
+            var searchInputProps = __rest$1(_a, []);
+            return (React__namespace.createElement(InputGroup, Object.assign({}, searchInputProps),
+                buildSearchTextInputGroup(),
                 (attributes.length > 0 || onToggleAdvancedSearch) && (React__namespace.createElement(Button, { className: isSearchMenuOpen && 'pf-m-expanded', variant: exports.ButtonVariant.control, "aria-label": openMenuButtonAriaLabel, onClick: onToggle, isDisabled: isDisabled, "aria-expanded": isSearchMenuOpen },
                     React__namespace.createElement(CaretDownIcon$1, null))),
-                !!onSearch && (React__namespace.createElement(Button, { type: "submit", variant: exports.ButtonVariant.control, "aria-label": submitSearchButtonLabel, onClick: onSearchHandler, isDisabled: isDisabled },
-                    React__namespace.createElement(ArrowRightIcon$1, null)))),
-            attributes.length > 0 && (React__namespace.createElement(AdvancedSearchMenu, { value: value, parentRef: searchInputRef, parentInputRef: searchInputInputRef, onSearch: onSearch, onClear: onClear, onChange: onChange, onToggleAdvancedMenu: onToggle, resetButtonLabel: resetButtonLabel, submitSearchButtonLabel: submitSearchButtonLabel, attributes: attributes, formAdditionalItems: formAdditionalItems, hasWordsAttrLabel: hasWordsAttrLabel, advancedSearchDelimiter: advancedSearchDelimiter, getAttrValueMap: getAttrValueMap, isSearchMenuOpen: isSearchMenuOpen }))));
+                !!onSearch && (React__namespace.createElement(Button, { type: "submit", variant: exports.ButtonVariant.control, "aria-label": submitSearchButtonLabel, onClick: onSearchHandler, isDisabled: isDisabled || !searchValue },
+                    React__namespace.createElement(ArrowRightIcon$1, null)))));
+        };
+        const searchInputProps = Object.assign(Object.assign({}, props), { className: className && css(className), innerRef: searchInputRef });
+        if (!!onSearch || attributes.length > 0 || !!onToggleAdvancedSearch) {
+            if (attributes.length > 0) {
+                return (React__namespace.createElement("div", Object.assign({ className: css(className, styles$n.searchInput), ref: searchInputRef }, props),
+                    buildSearchTextInputGroupWithExtraButtons(),
+                    React__namespace.createElement(AdvancedSearchMenu, { className: styles$n.searchInputMenu, value: value, parentRef: searchInputRef, parentInputRef: searchInputInputRef, onSearch: onSearch, onClear: onClear, onChange: onChange, onToggleAdvancedMenu: onToggle, resetButtonLabel: resetButtonLabel, submitSearchButtonLabel: submitSearchButtonLabel, attributes: attributes, formAdditionalItems: formAdditionalItems, hasWordsAttrLabel: hasWordsAttrLabel, advancedSearchDelimiter: advancedSearchDelimiter, getAttrValueMap: getAttrValueMap, isSearchMenuOpen: isSearchMenuOpen })));
+            }
+            return buildSearchTextInputGroupWithExtraButtons(Object.assign({}, searchInputProps));
+        }
+        return buildSearchTextInputGroup(searchInputProps);
     };
     SearchInputBase.displayName = 'SearchInputBase';
     const SearchInput = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(SearchInputBase, Object.assign({}, props, { innerRef: ref }))));
@@ -18316,20 +18495,21 @@
     SidebarPanel.displayName = 'SidebarPanel';
 
     Promise.resolve().then(function () { return simpleList; });
-    var styles$m = {
+    var styles$k = {
       "modifiers": {
         "current": "pf-m-current"
       },
       "simpleList": "pf-c-simple-list",
       "simpleListItemLink": "pf-c-simple-list__item-link",
       "simpleListSection": "pf-c-simple-list__section",
-      "simpleListTitle": "pf-c-simple-list__title"
+      "simpleListTitle": "pf-c-simple-list__title",
+      "themeDark": "pf-theme-dark"
     };
 
     const SimpleListGroup = (_a) => {
         var { children = null, className = '', title = '', titleClassName = '', id = '' } = _a, props = __rest$1(_a, ["children", "className", "title", "titleClassName", "id"]);
-        return (React__namespace.createElement("section", Object.assign({ className: css(styles$m.simpleListSection) }, props),
-            React__namespace.createElement("h2", { id: id, className: css(styles$m.simpleListTitle, titleClassName), "aria-hidden": "true" }, title),
+        return (React__namespace.createElement("section", Object.assign({ className: css(styles$k.simpleListSection) }, props),
+            React__namespace.createElement("h2", { id: id, className: css(styles$k.simpleListTitle, titleClassName), "aria-hidden": "true" }, title),
             React__namespace.createElement("ul", { className: css(className), "aria-labelledby": id }, children)));
     };
     SimpleListGroup.displayName = 'SimpleListGroup';
@@ -18359,7 +18539,7 @@
                     updateCurrentRef: this.handleCurrentUpdate,
                     isControlled
                 } },
-                React__namespace.createElement("div", Object.assign({ className: css(styles$m.simpleList, className) }, props),
+                React__namespace.createElement("div", Object.assign({ className: css(styles$k.simpleList, className) }, props),
                     isGrouped && children,
                     !isGrouped && React__namespace.createElement("ul", null, children))));
         }
@@ -18392,7 +18572,7 @@
                         href
                     };
                 return (React__namespace.createElement("li", Object.assign({ className: css(className) }, props),
-                    React__namespace.createElement(Component, Object.assign({ className: css(styles$m.simpleListItemLink, isCurrentItem && styles$m.modifiers.current, componentClassName), onClick: (evt) => {
+                    React__namespace.createElement(Component, Object.assign({ className: css(styles$k.simpleListItemLink, isCurrentItem && styles$k.modifiers.current, componentClassName), onClick: (evt) => {
                             onClick(evt);
                             updateCurrentRef(this.ref, this.props);
                         }, ref: this.ref }, componentProps, additionalComponentProps), children)));
@@ -18413,7 +18593,7 @@
     };
 
     Promise.resolve().then(function () { return skeleton; });
-    var styles$l = {
+    var styles$j = {
       "modifiers": {
         "circle": "pf-m-circle",
         "square": "pf-m-square",
@@ -18442,15 +18622,16 @@
         "textMd": "pf-m-text-md",
         "textSm": "pf-m-text-sm"
       },
-      "skeleton": "pf-c-skeleton"
+      "skeleton": "pf-c-skeleton",
+      "themeDark": "pf-theme-dark"
     };
 
     const Skeleton = (_a) => {
         var { className, width, height, fontSize, shape, screenreaderText } = _a, props = __rest$1(_a, ["className", "width", "height", "fontSize", "shape", "screenreaderText"]);
         const fontHeightClassName = fontSize
-            ? Object.values(styles$l.modifiers).find(key => key === `pf-m-text-${fontSize}`)
+            ? Object.values(styles$j.modifiers).find(key => key === `pf-m-text-${fontSize}`)
             : undefined;
-        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$l.skeleton, fontSize && fontHeightClassName, shape === 'circle' && styles$l.modifiers.circle, shape === 'square' && styles$l.modifiers.square, className) }, ((width || height) && {
+        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$j.skeleton, fontSize && fontHeightClassName, shape === 'circle' && styles$j.modifiers.circle, shape === 'square' && styles$j.modifiers.square, className) }, ((width || height) && {
             style: Object.assign({ '--pf-c-skeleton--Width': width ? width : undefined, '--pf-c-skeleton--Height': height ? height : undefined }, props.style)
         })),
             React__namespace.createElement("span", { className: "pf-u-screen-reader" }, screenreaderText)));
@@ -18458,7 +18639,7 @@
     Skeleton.displayName = 'Skeleton';
 
     Promise.resolve().then(function () { return skipToContent; });
-    var styles$k = {
+    var styles$i = {
       "skipToContent": "pf-c-skip-to-content"
     };
 
@@ -18475,7 +18656,7 @@
         render() {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const _a = this.props, { children, className, href, show, type } = _a, rest = __rest$1(_a, ["children", "className", "href", "show", "type"]);
-            return (React__namespace.createElement("a", Object.assign({}, rest, { className: css(buttonStyles.button, buttonStyles.modifiers.primary, styles$k.skipToContent, className), ref: this.componentRef, href: href }), children));
+            return (React__namespace.createElement("a", Object.assign({}, rest, { className: css(buttonStyles.button, buttonStyles.modifiers.primary, styles$i.skipToContent, className), ref: this.componentRef, href: href }), children));
         }
     }
     SkipToContent.displayName = 'SkipToContent';
@@ -18484,7 +18665,7 @@
     };
 
     Promise.resolve().then(function () { return slider; });
-    var styles$j = {
+    var styles$h = {
       "formControl": "pf-c-form-control",
       "inputGroup": "pf-c-input-group",
       "inputGroupText": "pf-c-input-group__text",
@@ -18509,9 +18690,9 @@
     const SliderStep = (_a) => {
         var { className, label, value, isTickHidden = false, isLabelHidden = false, isActive = false } = _a, props = __rest$1(_a, ["className", "label", "value", "isTickHidden", "isLabelHidden", "isActive"]);
         const style = { '--pf-c-slider__step--Left': `${value}%` };
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$j.sliderStep, isActive && styles$j.modifiers.active, className), style: style }, props),
-            !isTickHidden && React__namespace.createElement("div", { className: css(styles$j.sliderStepTick) }),
-            !isLabelHidden && label && React__namespace.createElement("div", { className: css(styles$j.sliderStepLabel) }, label)));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$h.sliderStep, isActive && styles$h.modifiers.active, className), style: style }, props),
+            !isTickHidden && React__namespace.createElement("div", { className: css(styles$h.sliderStepTick) }),
+            !isLabelHidden && label && React__namespace.createElement("div", { className: css(styles$h.sliderStepLabel) }, label)));
     };
     SliderStep.displayName = 'SliderStep';
 
@@ -18697,7 +18878,7 @@
             }
         };
         const displayInput = () => {
-            const textInput = (React__namespace.createElement(TextInput, { className: css(styles$j.formControl), isDisabled: isDisabled, type: "number", value: localInputValue, "aria-label": inputAriaLabel, onKeyDown: handleKeyPressOnInput, onChange: onChangeHandler, onClick: onInputFocus, onFocus: onInputFocus, onBlur: onBlur }));
+            const textInput = (React__namespace.createElement(TextInput, { className: css(styles$h.formControl), isDisabled: isDisabled, type: "number", value: localInputValue, "aria-label": inputAriaLabel, onKeyDown: handleKeyPressOnInput, onChange: onChangeHandler, onClick: onInputFocus, onFocus: onInputFocus, onBlur: onBlur }));
             if (inputLabel) {
                 return (React__namespace.createElement(InputGroup, null,
                     textInput,
@@ -18723,28 +18904,28 @@
             }
             return builtSteps;
         };
-        const thumbComponent = (React__namespace.createElement("div", { className: css(styles$j.sliderThumb), ref: thumbRef, tabIndex: isDisabled ? -1 : 0, role: "slider", "aria-valuemin": customSteps ? customSteps[0].value : min, "aria-valuemax": customSteps ? customSteps[customSteps.length - 1].value : max, "aria-valuenow": localValue, "aria-valuetext": findAriaTextValue(), "aria-label": thumbAriaLabel, "aria-disabled": isDisabled, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, onMouseDown: !isDisabled ? handleMouseDown : null, onTouchStart: !isDisabled ? handleTouchStart : null, onKeyDown: !isDisabled ? handleThumbKeys : null, onClick: !isDisabled ? onThumbClick : null }));
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$j.slider, className, isDisabled && styles$j.modifiers.disabled), style: Object.assign(Object.assign({}, style), inputStyle) }, props),
-            leftActions && React__namespace.createElement("div", { className: css(styles$j.sliderActions) }, leftActions),
-            React__namespace.createElement("div", { className: css(styles$j.sliderMain) },
-                React__namespace.createElement("div", { className: css(styles$j.sliderRail), ref: sliderRailRef, onClick: !isDisabled ? onSliderRailClick : null },
-                    React__namespace.createElement("div", { className: css(styles$j.sliderRailTrack) })),
-                customSteps && (React__namespace.createElement("div", { className: css(styles$j.sliderSteps), "aria-hidden": "true" }, customSteps.map(stepObj => {
+        const thumbComponent = (React__namespace.createElement("div", { className: css(styles$h.sliderThumb), ref: thumbRef, tabIndex: isDisabled ? -1 : 0, role: "slider", "aria-valuemin": customSteps ? customSteps[0].value : min, "aria-valuemax": customSteps ? customSteps[customSteps.length - 1].value : max, "aria-valuenow": localValue, "aria-valuetext": findAriaTextValue(), "aria-label": thumbAriaLabel, "aria-disabled": isDisabled, "aria-describedby": ariaDescribedby, "aria-labelledby": ariaLabelledby, onMouseDown: !isDisabled ? handleMouseDown : null, onTouchStart: !isDisabled ? handleTouchStart : null, onKeyDown: !isDisabled ? handleThumbKeys : null, onClick: !isDisabled ? onThumbClick : null }));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$h.slider, className, isDisabled && styles$h.modifiers.disabled), style: Object.assign(Object.assign({}, style), inputStyle) }, props),
+            leftActions && React__namespace.createElement("div", { className: css(styles$h.sliderActions) }, leftActions),
+            React__namespace.createElement("div", { className: css(styles$h.sliderMain) },
+                React__namespace.createElement("div", { className: css(styles$h.sliderRail), ref: sliderRailRef, onClick: !isDisabled ? onSliderRailClick : null },
+                    React__namespace.createElement("div", { className: css(styles$h.sliderRailTrack) })),
+                customSteps && (React__namespace.createElement("div", { className: css(styles$h.sliderSteps), "aria-hidden": "true" }, customSteps.map(stepObj => {
                     const minValue = customSteps[0].value;
                     const maxValue = customSteps[customSteps.length - 1].value;
                     const stepValue = getStepValue(stepObj.value, minValue, maxValue);
                     return (React__namespace.createElement(SliderStep, { key: stepObj.value, value: stepValue, label: stepObj.label, isLabelHidden: stepObj.isLabelHidden, isActive: stepObj.value <= localValue }));
                 }))),
-                !customSteps && (showTicks || showBoundaries) && (React__namespace.createElement("div", { className: css(styles$j.sliderSteps), "aria-hidden": "true" }, buildSteps())),
+                !customSteps && (showTicks || showBoundaries) && (React__namespace.createElement("div", { className: css(styles$h.sliderSteps), "aria-hidden": "true" }, buildSteps())),
                 hasTooltipOverThumb ? (React__namespace.createElement(Tooltip, { entryDelay: 0, content: findAriaTextValue() }, thumbComponent)) : (thumbComponent),
-                isInputVisible && inputPosition === 'aboveThumb' && (React__namespace.createElement("div", { className: css(styles$j.sliderValue, styles$j.modifiers.floating) }, displayInput()))),
-            isInputVisible && inputPosition === 'right' && React__namespace.createElement("div", { className: css(styles$j.sliderValue) }, displayInput()),
-            rightActions && React__namespace.createElement("div", { className: css(styles$j.sliderActions) }, rightActions)));
+                isInputVisible && inputPosition === 'aboveThumb' && (React__namespace.createElement("div", { className: css(styles$h.sliderValue, styles$h.modifiers.floating) }, displayInput()))),
+            isInputVisible && inputPosition === 'right' && React__namespace.createElement("div", { className: css(styles$h.sliderValue) }, displayInput()),
+            rightActions && React__namespace.createElement("div", { className: css(styles$h.sliderActions) }, rightActions)));
     };
     Slider.displayName = 'Slider';
 
     Promise.resolve().then(function () { return _switch; });
-    var styles$i = {
+    var styles$g = {
       "modifiers": {
         "reverse": "pf-m-reverse",
         "off": "pf-m-off",
@@ -18754,7 +18935,8 @@
       "switchInput": "pf-c-switch__input",
       "switchLabel": "pf-c-switch__label",
       "switchToggle": "pf-c-switch__toggle",
-      "switchToggleIcon": "pf-c-switch__toggle-icon"
+      "switchToggleIcon": "pf-c-switch__toggle-icon",
+      "themeDark": "pf-theme-dark"
     };
 
     class Switch extends React__namespace.Component {
@@ -18774,14 +18956,14 @@
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             id, className, label, labelOff, isChecked, defaultChecked, hasCheckIcon, isDisabled, onChange, isReversed, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["id", "className", "label", "labelOff", "isChecked", "defaultChecked", "hasCheckIcon", "isDisabled", "onChange", "isReversed", "ouiaId", "ouiaSafe"]);
             const isAriaLabelledBy = props['aria-label'] === '';
-            return (React__namespace.createElement("label", Object.assign({ className: css(styles$i.switch, isReversed && styles$i.modifiers.reverse, className), htmlFor: this.id }, getOUIAProps(Switch.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)),
-                React__namespace.createElement("input", Object.assign({ id: this.id, className: css(styles$i.switchInput), type: "checkbox", onChange: event => onChange(event.target.checked, event) }, ([true, false].includes(defaultChecked) && { defaultChecked }), (![true, false].includes(defaultChecked) && { checked: isChecked }), { disabled: isDisabled, "aria-labelledby": isAriaLabelledBy ? `${this.id}-on` : null }, props)),
+            return (React__namespace.createElement("label", Object.assign({ className: css(styles$g.switch, isReversed && styles$g.modifiers.reverse, className), htmlFor: this.id }, getOUIAProps(Switch.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe)),
+                React__namespace.createElement("input", Object.assign({ id: this.id, className: css(styles$g.switchInput), type: "checkbox", onChange: event => onChange(event.target.checked, event) }, ([true, false].includes(defaultChecked) && { defaultChecked }), (![true, false].includes(defaultChecked) && { checked: isChecked }), { disabled: isDisabled, "aria-labelledby": isAriaLabelledBy ? `${this.id}-on` : null }, props)),
                 label !== undefined ? (React__namespace.createElement(React__namespace.Fragment, null,
-                    React__namespace.createElement("span", { className: css(styles$i.switchToggle) }, hasCheckIcon && (React__namespace.createElement("span", { className: css(styles$i.switchToggleIcon), "aria-hidden": "true" },
+                    React__namespace.createElement("span", { className: css(styles$g.switchToggle) }, hasCheckIcon && (React__namespace.createElement("span", { className: css(styles$g.switchToggleIcon), "aria-hidden": "true" },
                         React__namespace.createElement(CheckIcon$1, { noVerticalAlign: true })))),
-                    React__namespace.createElement("span", { className: css(styles$i.switchLabel, styles$i.modifiers.on), id: isAriaLabelledBy ? `${this.id}-on` : null, "aria-hidden": "true" }, label),
-                    React__namespace.createElement("span", { className: css(styles$i.switchLabel, styles$i.modifiers.off), id: isAriaLabelledBy ? `${this.id}-off` : null, "aria-hidden": "true" }, labelOff !== undefined ? labelOff : label))) : (React__namespace.createElement("span", { className: css(styles$i.switchToggle) },
-                    React__namespace.createElement("div", { className: css(styles$i.switchToggleIcon), "aria-hidden": "true" },
+                    React__namespace.createElement("span", { className: css(styles$g.switchLabel, styles$g.modifiers.on), id: isAriaLabelledBy ? `${this.id}-on` : null, "aria-hidden": "true" }, label),
+                    React__namespace.createElement("span", { className: css(styles$g.switchLabel, styles$g.modifiers.off), id: isAriaLabelledBy ? `${this.id}-off` : null, "aria-hidden": "true" }, labelOff !== undefined ? labelOff : label))) : (React__namespace.createElement("span", { className: css(styles$g.switchToggle) },
+                    React__namespace.createElement("div", { className: css(styles$g.switchToggleIcon), "aria-hidden": "true" },
                         React__namespace.createElement(CheckIcon$1, { noVerticalAlign: true }))))));
         }
     }
@@ -18795,7 +18977,7 @@
     };
 
     Promise.resolve().then(function () { return tabs; });
-    var styles$h = {
+    var styles$f = {
       "button": "pf-c-button",
       "modifiers": {
         "fill": "pf-m-fill",
@@ -18874,7 +19056,8 @@
       "tabsToggle": "pf-c-tabs__toggle",
       "tabsToggleButton": "pf-c-tabs__toggle-button",
       "tabsToggleIcon": "pf-c-tabs__toggle-icon",
-      "tabsToggleText": "pf-c-tabs__toggle-text"
+      "tabsToggleText": "pf-c-tabs__toggle-text",
+      "themeDark": "pf-theme-dark"
     };
 
     const TabButton = (_a) => {
@@ -18917,12 +19100,12 @@
                 return null;
             }
         };
-        const tabButton = (React__namespace.createElement(TabButton, Object.assign({ parentInnerRef: innerRef, className: css(styles$h.tabsLink, isDisabled && href && styles$h.modifiers.disabled, isAriaDisabled && styles$h.modifiers.ariaDisabled), disabled: isButtonElement ? isDisabled : null, "aria-disabled": isDisabled || isAriaDisabled, tabIndex: getDefaultTabIdx(), onClick: (event) => handleTabClick(event, eventKey, tabContentRef) }, (isAriaDisabled ? preventedEvents : null), { id: `pf-tab-${eventKey}-${childId || uniqueId}`, "aria-controls": ariaControls, tabContentRef: tabContentRef, ouiaId: childOuiaId, href: href, role: "tab", "aria-selected": eventKey === localActiveKey }, props), title));
-        return (React__namespace.createElement("li", { className: css(styles$h.tabsItem, eventKey === localActiveKey && styles$h.modifiers.current, handleTabClose && styles$h.modifiers.action, handleTabClose && (isDisabled || isAriaDisabled) && styles$h.modifiers.disabled, childClassName), role: "presentation" },
+        const tabButton = (React__namespace.createElement(TabButton, Object.assign({ parentInnerRef: innerRef, className: css(styles$f.tabsLink, isDisabled && href && styles$f.modifiers.disabled, isAriaDisabled && styles$f.modifiers.ariaDisabled), disabled: isButtonElement ? isDisabled : null, "aria-disabled": isDisabled || isAriaDisabled, tabIndex: getDefaultTabIdx(), onClick: (event) => handleTabClick(event, eventKey, tabContentRef) }, (isAriaDisabled ? preventedEvents : null), { id: `pf-tab-${eventKey}-${childId || uniqueId}`, "aria-controls": ariaControls, tabContentRef: tabContentRef, ouiaId: childOuiaId, href: href, role: "tab", "aria-selected": eventKey === localActiveKey }, props), title));
+        return (React__namespace.createElement("li", { className: css(styles$f.tabsItem, eventKey === localActiveKey && styles$f.modifiers.current, handleTabClose && styles$f.modifiers.action, handleTabClose && (isDisabled || isAriaDisabled) && styles$f.modifiers.disabled, childClassName), role: "presentation" },
             tooltip ? React__namespace.createElement(Tooltip, Object.assign({}, tooltip.props), tabButton) : tabButton,
-            handleTabClose !== undefined && (React__namespace.createElement("span", { className: css(styles$h.tabsItemClose) },
+            handleTabClose !== undefined && (React__namespace.createElement("span", { className: css(styles$f.tabsItemClose) },
                 React__namespace.createElement(Button, { variant: "plain", "aria-label": closeButtonAriaLabel || 'Close tab', onClick: (event) => handleTabClose(event, eventKey, tabContentRef), isDisabled: isCloseDisabled },
-                    React__namespace.createElement("span", { className: css(styles$h.tabsItemCloseIcon) },
+                    React__namespace.createElement("span", { className: css(styles$f.tabsItemCloseIcon) },
                         React__namespace.createElement(TimesIcon$1, null)))))));
     };
     const Tab = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TabBase, Object.assign({ innerRef: ref }, props)));
@@ -18942,7 +19125,7 @@
     var PlusIcon$1 = PlusIcon;
 
     Promise.resolve().then(function () { return tabContent; });
-    var styles$g = {
+    var styles$e = {
       "modifiers": {
         "light_300": "pf-m-light-300",
         "padding": "pf-m-padding"
@@ -18953,7 +19136,7 @@
 
     const variantStyle$1 = {
         default: '',
-        light300: styles$g.modifiers.light_300
+        light300: styles$e.modifiers.light_300
     };
     const TabContentBase = (_a) => {
         var { id, activeKey, 'aria-label': ariaLabel, child, children, className, eventKey, innerRef, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["id", "activeKey", 'aria-label', "child", "children", "className", "eventKey", "innerRef", "ouiaId", "ouiaSafe"]);
@@ -18980,7 +19163,7 @@
     })(exports.TabsComponent || (exports.TabsComponent = {}));
     const variantStyle = {
         default: '',
-        light300: styles$h.modifiers.colorSchemeLight_300
+        light300: styles$f.modifiers.colorSchemeLight_300
     };
     class Tabs extends React__namespace.Component {
         constructor(props) {
@@ -19152,19 +19335,19 @@
                     handleTabClick: (...args) => this.handleTabClick(...args),
                     handleTabClose: onClose
                 } },
-                React__namespace.createElement(Component, Object.assign({ "aria-label": ariaLabel, className: css(styles$h.tabs, isFilled && styles$h.modifiers.fill, isSecondary && styles$h.modifiers.secondary, isVertical && styles$h.modifiers.vertical, isVertical && expandable && formatBreakpointMods(expandable, styles$h), isVertical && expandable && isExpandedLocal && styles$h.modifiers.expanded, isBox && styles$h.modifiers.box, showScrollButtons && !isVertical && styles$h.modifiers.scrollable, usePageInsets && styles$h.modifiers.pageInsets, !hasBorderBottom && styles$h.modifiers.noBorderBottom, hasSecondaryBorderBottom && styles$h.modifiers.borderBottom, formatBreakpointMods(inset, styles$h), variantStyle[variant], className) }, getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { id: id && id }, props),
-                    expandable && isVertical && (React__namespace.createElement(GenerateId, null, randomId => (React__namespace.createElement("div", { className: css(styles$h.tabsToggle) },
-                        React__namespace.createElement("div", { className: css(styles$h.tabsToggleButton) },
+                React__namespace.createElement(Component, Object.assign({ "aria-label": ariaLabel, className: css(styles$f.tabs, isFilled && styles$f.modifiers.fill, isSecondary && styles$f.modifiers.secondary, isVertical && styles$f.modifiers.vertical, isVertical && expandable && formatBreakpointMods(expandable, styles$f), isVertical && expandable && isExpandedLocal && styles$f.modifiers.expanded, isBox && styles$f.modifiers.box, showScrollButtons && !isVertical && styles$f.modifiers.scrollable, usePageInsets && styles$f.modifiers.pageInsets, !hasBorderBottom && styles$f.modifiers.noBorderBottom, hasSecondaryBorderBottom && styles$f.modifiers.borderBottom, formatBreakpointMods(inset, styles$f), variantStyle[variant], className) }, getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { id: id && id }, props),
+                    expandable && isVertical && (React__namespace.createElement(GenerateId, null, randomId => (React__namespace.createElement("div", { className: css(styles$f.tabsToggle) },
+                        React__namespace.createElement("div", { className: css(styles$f.tabsToggleButton) },
                             React__namespace.createElement(Button, { onClick: () => toggleTabs(!isExpandedLocal), variant: "plain", "aria-label": toggleAriaLabel, "aria-expanded": isExpandedLocal, id: `${randomId}-button`, "aria-labelledby": `${randomId}-text ${randomId}-button` },
-                                React__namespace.createElement("span", { className: css(styles$h.tabsToggleIcon) },
+                                React__namespace.createElement("span", { className: css(styles$f.tabsToggleIcon) },
                                     React__namespace.createElement(AngleRightIcon$1, { "arian-hidden": "true" })),
                                 toggleText && (React__namespace.createElement("span", { className: css('pf-c-tabs__toggle-text'), id: `${randomId}-text` }, toggleText)))))))),
-                    React__namespace.createElement("button", { className: css(styles$h.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary), "aria-label": leftScrollAriaLabel, onClick: this.scrollLeft, disabled: disableLeftScrollButton, "aria-hidden": disableLeftScrollButton },
+                    React__namespace.createElement("button", { className: css(styles$f.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary), "aria-label": leftScrollAriaLabel, onClick: this.scrollLeft, disabled: disableLeftScrollButton, "aria-hidden": disableLeftScrollButton },
                         React__namespace.createElement(AngleLeftIcon$1, null)),
-                    React__namespace.createElement("ul", { className: css(styles$h.tabsList), ref: this.tabList, onScroll: this.handleScrollButtons, role: "tablist" }, filteredChildren),
-                    React__namespace.createElement("button", { className: css(styles$h.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary), "aria-label": rightScrollAriaLabel, onClick: this.scrollRight, disabled: disableRightScrollButton, "aria-hidden": disableRightScrollButton },
+                    React__namespace.createElement("ul", { className: css(styles$f.tabsList), ref: this.tabList, onScroll: this.handleScrollButtons, role: "tablist" }, filteredChildren),
+                    React__namespace.createElement("button", { className: css(styles$f.tabsScrollButton, isSecondary && buttonStyles.modifiers.secondary), "aria-label": rightScrollAriaLabel, onClick: this.scrollRight, disabled: disableRightScrollButton, "aria-hidden": disableRightScrollButton },
                         React__namespace.createElement(AngleRightIcon$1, null)),
-                    onAdd !== undefined && (React__namespace.createElement("span", { className: css(styles$h.tabsAdd) },
+                    onAdd !== undefined && (React__namespace.createElement("span", { className: css(styles$f.tabsAdd) },
                         React__namespace.createElement(Button, { variant: "plain", "aria-label": addButtonAriaLabel || 'Add tab', onClick: onAdd },
                             React__namespace.createElement(PlusIcon$1, null))))),
                 filteredChildren
@@ -19196,30 +19379,31 @@
 
     const TabContentBody = (_a) => {
         var { children, className, hasPadding } = _a, props = __rest$1(_a, ["children", "className", "hasPadding"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$g.tabContentBody, hasPadding && styles$g.modifiers.padding, className) }, props), children));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$e.tabContentBody, hasPadding && styles$e.modifiers.padding, className) }, props), children));
     };
     TabContentBody.displayName = 'TabContentBody';
 
     const TabTitleText = (_a) => {
         var { children, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("span", Object.assign({ className: css(styles$h.tabsItemText, className) }, props), children));
+        return (React__namespace.createElement("span", Object.assign({ className: css(styles$f.tabsItemText, className) }, props), children));
     };
     TabTitleText.displayName = 'TabTitleText';
 
     const TabTitleIcon = (_a) => {
         var { children, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("span", Object.assign({ className: css(styles$h.tabsItemIcon, className) }, props), children));
+        return (React__namespace.createElement("span", Object.assign({ className: css(styles$f.tabsItemIcon, className) }, props), children));
     };
     TabTitleIcon.displayName = 'TabTitleIcon';
 
     Promise.resolve().then(function () { return tile; });
-    var styles$f = {
+    var styles$d = {
       "modifiers": {
         "selected": "pf-m-selected",
         "disabled": "pf-m-disabled",
         "displayLg": "pf-m-display-lg",
         "stacked": "pf-m-stacked"
       },
+      "themeDark": "pf-theme-dark",
       "tile": "pf-c-tile",
       "tileBody": "pf-c-tile__body",
       "tileHeader": "pf-c-tile__header",
@@ -19229,11 +19413,11 @@
 
     const Tile = (_a) => {
         var { children, title, icon, isStacked, isSelected, isDisabled, isDisplayLarge, className } = _a, props = __rest$1(_a, ["children", "title", "icon", "isStacked", "isSelected", "isDisabled", "isDisplayLarge", "className"]);
-        return (React__namespace.createElement("div", Object.assign({ role: "option", "aria-selected": isSelected }, (isDisabled && { 'aria-disabled': isDisabled }), { className: css(styles$f.tile, isSelected && styles$f.modifiers.selected, isDisabled && styles$f.modifiers.disabled, isDisplayLarge && styles$f.modifiers.displayLg, className), tabIndex: 0 }, props),
-            React__namespace.createElement("div", { className: css(styles$f.tileHeader, isStacked && styles$f.modifiers.stacked) },
-                icon && React__namespace.createElement("div", { className: css(styles$f.tileIcon) }, icon),
-                React__namespace.createElement("div", { className: css(styles$f.tileTitle) }, title)),
-            children && React__namespace.createElement("div", { className: css(styles$f.tileBody) }, children)));
+        return (React__namespace.createElement("div", Object.assign({ role: "option", "aria-selected": isSelected }, (isDisabled && { 'aria-disabled': isDisabled }), { className: css(styles$d.tile, isSelected && styles$d.modifiers.selected, isDisabled && styles$d.modifiers.disabled, isDisplayLarge && styles$d.modifiers.displayLg, className), tabIndex: 0 }, props),
+            React__namespace.createElement("div", { className: css(styles$d.tileHeader, isStacked && styles$d.modifiers.stacked) },
+                icon && React__namespace.createElement("div", { className: css(styles$d.tileIcon) }, icon),
+                React__namespace.createElement("div", { className: css(styles$d.tileTitle) }, title)),
+            children && React__namespace.createElement("div", { className: css(styles$d.tileBody) }, children)));
     };
     Tile.displayName = 'Tile';
 
@@ -19709,12 +19893,13 @@
     };
 
     Promise.resolve().then(function () { return toggleGroup; });
-    var styles$e = {
+    var styles$c = {
       "modifiers": {
         "compact": "pf-m-compact",
         "selected": "pf-m-selected",
         "disabled": "pf-m-disabled"
       },
+      "themeDark": "pf-theme-dark",
       "toggleGroup": "pf-c-toggle-group",
       "toggleGroupButton": "pf-c-toggle-group__button",
       "toggleGroupIcon": "pf-c-toggle-group__icon",
@@ -19727,7 +19912,7 @@
         ToggleGroupItemVariant["icon"] = "icon";
         ToggleGroupItemVariant["text"] = "text";
     })(ToggleGroupItemVariant || (ToggleGroupItemVariant = {}));
-    const ToggleGroupItemElement = ({ variant, children }) => (React__namespace.createElement("span", { className: css(variant === 'icon' && styles$e.toggleGroupIcon, variant === 'text' && styles$e.toggleGroupText) }, children));
+    const ToggleGroupItemElement = ({ variant, children }) => (React__namespace.createElement("span", { className: css(variant === 'icon' && styles$c.toggleGroupIcon, variant === 'text' && styles$c.toggleGroupText) }, children));
     ToggleGroupItemElement.displayName = 'ToggleGroupItemElement';
 
     const ToggleGroupItem = (_a) => {
@@ -19739,8 +19924,8 @@
             /* eslint-disable no-console */
             console.warn('An accessible aria-label is required when using the toggle group item icon variant.');
         }
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$e.toggleGroupItem, className) }, props),
-            React__namespace.createElement("button", Object.assign({ type: "button", className: css(styles$e.toggleGroupButton, isSelected && styles$e.modifiers.selected), "aria-pressed": isSelected, onClick: handleChange }, (ariaLabel && { 'aria-label': ariaLabel }), (isDisabled && { disabled: true }), (buttonId && { id: buttonId })),
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$c.toggleGroupItem, className) }, props),
+            React__namespace.createElement("button", Object.assign({ type: "button", className: css(styles$c.toggleGroupButton, isSelected && styles$c.modifiers.selected), "aria-pressed": isSelected, onClick: handleChange }, (ariaLabel && { 'aria-label': ariaLabel }), (isDisabled && { disabled: true }), (buttonId && { id: buttonId })),
                 icon ? React__namespace.createElement(ToggleGroupItemElement, { variant: ToggleGroupItemVariant.icon }, icon) : null,
                 text ? React__namespace.createElement(ToggleGroupItemElement, { variant: ToggleGroupItemVariant.text }, text) : null)));
     };
@@ -19754,12 +19939,12 @@
                 ? child
                 : React__namespace.cloneElement(child, areAllGroupsDisabled ? { isDisabled: true } : {});
         });
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$e.toggleGroup, isCompact && styles$e.modifiers.compact, className), role: "group", "aria-label": ariaLabel }, props), toggleGroupItemList));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$c.toggleGroup, isCompact && styles$c.modifiers.compact, className), role: "group", "aria-label": ariaLabel }, props), toggleGroupItemList));
     };
     ToggleGroup.displayName = 'ToggleGroup';
 
     Promise.resolve().then(function () { return toolbar; });
-    var styles$d = {
+    var styles$b = {
       "button": "pf-c-button",
       "chipGroup": "pf-c-chip-group",
       "divider": "pf-c-divider",
@@ -19955,7 +20140,7 @@
     const ToolbarItem = (_a) => {
         var { className, variant, visibility, visiblity, alignment, spacer, widths, id, children, isAllExpanded } = _a, props = __rest$1(_a, ["className", "variant", "visibility", "visiblity", "alignment", "spacer", "widths", "id", "children", "isAllExpanded"]);
         if (variant === exports.ToolbarItemVariant.separator) {
-            return React__namespace.createElement(Divider, Object.assign({ className: css(styles$d.modifiers.vertical, className) }, props));
+            return React__namespace.createElement(Divider, Object.assign({ className: css(styles$b.modifiers.vertical, className) }, props));
         }
         if (visiblity !== undefined) {
             // eslint-disable-next-line no-console
@@ -19966,8 +20151,8 @@
         if (widths) {
             Object.entries(widths || {}).map(([breakpoint, value]) => (widthStyles[`--pf-c-toolbar__item--Width${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value));
         }
-        return (React__namespace.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React__namespace.createElement("div", Object.assign({ className: css(styles$d.toolbarItem, variant &&
-                styles$d.modifiers[toCamel(variant)], isAllExpanded && styles$d.modifiers.expanded, formatBreakpointMods(visibility || visiblity, styles$d, '', getBreakpoint(width)), formatBreakpointMods(alignment, styles$d, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles$d, '', getBreakpoint(width)), className) }, (variant === 'label' && { 'aria-hidden': true }), { id: id }, props, (widths && { style: Object.assign(Object.assign({}, widthStyles), props.style) })), children))));
+        return (React__namespace.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React__namespace.createElement("div", Object.assign({ className: css(styles$b.toolbarItem, variant &&
+                styles$b.modifiers[toCamel(variant)], isAllExpanded && styles$b.modifiers.expanded, formatBreakpointMods(visibility || visiblity, styles$b, '', getBreakpoint(width)), formatBreakpointMods(alignment, styles$b, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles$b, '', getBreakpoint(width)), className) }, (variant === 'label' && { 'aria-hidden': true }), { id: id }, props, (widths && { style: Object.assign(Object.assign({}, widthStyles), props.style) })), children))));
     };
     ToolbarItem.displayName = 'ToolbarItem';
 
@@ -19985,7 +20170,7 @@
                 console.warn('The ToolbarGroup visiblity prop has been deprecated. ' +
                     'Please use the correctly spelled visibility prop instead.');
             }
-            return (React__namespace.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React__namespace.createElement("div", Object.assign({ className: css(styles$d.toolbarGroup, variant && styles$d.modifiers[toCamel(variant)], formatBreakpointMods(visibility || visiblity, styles$d, '', getBreakpoint(width)), formatBreakpointMods(alignment, styles$d, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles$d, '', getBreakpoint(width)), formatBreakpointMods(spaceItems, styles$d, '', getBreakpoint(width)), className) }, props, { ref: innerRef }), children))));
+            return (React__namespace.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React__namespace.createElement("div", Object.assign({ className: css(styles$b.toolbarGroup, variant && styles$b.modifiers[toCamel(variant)], formatBreakpointMods(visibility || visiblity, styles$b, '', getBreakpoint(width)), formatBreakpointMods(alignment, styles$b, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles$b, '', getBreakpoint(width)), formatBreakpointMods(spaceItems, styles$b, '', getBreakpoint(width)), className) }, props, { ref: innerRef }), children))));
         }
     }
     const ToolbarGroup = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(ToolbarGroupWithRef, Object.assign({}, props, { innerRef: ref }))));
@@ -20004,8 +20189,8 @@
                 collapseListedFilters =
                     (canUseDOM ? window.innerWidth : 1200) < globalBreakpoints[collapseListedFiltersBreakpoint];
             }
-            return (React__namespace.createElement("div", Object.assign({ className: css(styles$d.toolbarContent, (numberOfFilters === 0 || isExpanded) && styles$d.modifiers.hidden, className) }, ((numberOfFilters === 0 || isExpanded) && { hidden: true }), { ref: chipGroupContentRef }, props),
-                React__namespace.createElement(ToolbarGroup, Object.assign({ className: css(collapseListedFilters && styles$d.modifiers.hidden) }, (collapseListedFilters && { hidden: true }), (collapseListedFilters && { 'aria-hidden': true }))),
+            return (React__namespace.createElement("div", Object.assign({ className: css(styles$b.toolbarContent, (numberOfFilters === 0 || isExpanded) && styles$b.modifiers.hidden, className) }, ((numberOfFilters === 0 || isExpanded) && { hidden: true }), { ref: chipGroupContentRef }, props),
+                React__namespace.createElement(ToolbarGroup, Object.assign({ className: css(collapseListedFilters && styles$b.modifiers.hidden) }, (collapseListedFilters && { hidden: true }), (collapseListedFilters && { 'aria-hidden': true }))),
                 collapseListedFilters && numberOfFilters > 0 && !isExpanded && (React__namespace.createElement(ToolbarGroup, null,
                     React__namespace.createElement(ToolbarItem, null, numberOfFiltersText(numberOfFilters)))),
                 showClearFiltersButton && !isExpanded && !customChipGroupContent && (React__namespace.createElement(ToolbarItem, null,
@@ -20061,7 +20246,7 @@
                 const isExpanded = isToggleManaged ? isManagedToggleExpanded : isExpandedProp;
                 const numberOfFilters = this.getNumberOfFilters();
                 const showClearFiltersButton = numberOfFilters > 0;
-                return (React__namespace.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React__namespace.createElement("div", Object.assign({ className: css(styles$d.toolbar, isFullHeight && styles$d.modifiers.fullHeight, isStatic && styles$d.modifiers.static, usePageInsets && styles$d.modifiers.pageInsets, isSticky && styles$d.modifiers.sticky, formatBreakpointMods(inset, styles$d, '', getBreakpoint(width)), className), id: randomId }, getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId), props),
+                return (React__namespace.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React__namespace.createElement("div", Object.assign({ className: css(styles$b.toolbar, isFullHeight && styles$b.modifiers.fullHeight, isStatic && styles$b.modifiers.static, usePageInsets && styles$b.modifiers.pageInsets, isSticky && styles$b.modifiers.sticky, formatBreakpointMods(inset, styles$b, '', getBreakpoint(width)), className), id: randomId }, getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId), props),
                     React__namespace.createElement(ToolbarContext.Provider, { value: {
                             isExpanded,
                             toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded,
@@ -20103,9 +20288,9 @@
             const clearChipGroups = () => {
                 clearAllFilters();
             };
-            return (React__namespace.createElement("div", Object.assign({ className: css(styles$d.toolbarExpandableContent, className), ref: expandableContentRef }, props),
+            return (React__namespace.createElement("div", Object.assign({ className: css(styles$b.toolbarExpandableContent, className), ref: expandableContentRef }, props),
                 React__namespace.createElement(ToolbarGroup, null),
-                numberOfFilters > 0 && (React__namespace.createElement(ToolbarGroup, { className: styles$d.modifiers.chipContainer },
+                numberOfFilters > 0 && (React__namespace.createElement(ToolbarGroup, { className: styles$b.modifiers.chipContainer },
                     React__namespace.createElement(ToolbarGroup, { ref: chipContainerRef }),
                     showClearFiltersButton && !customChipGroupContent && (React__namespace.createElement(ToolbarItem, null,
                         React__namespace.createElement(Button, { variant: "link", onClick: clearChipGroups, isInline: true }, clearFiltersButtonText))),
@@ -20132,7 +20317,7 @@
                 console.warn('The ToolbarContent visiblity prop has been deprecated. ' +
                     'Please use the correctly spelled visibility prop instead.');
             }
-            return (React__namespace.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React__namespace.createElement("div", Object.assign({ className: css(styles$d.toolbarContent, formatBreakpointMods(visibility || visiblity, styles$d, '', getBreakpoint(width)), formatBreakpointMods(alignment, styles$d, '', getBreakpoint(width)), className) }, props),
+            return (React__namespace.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React__namespace.createElement("div", Object.assign({ className: css(styles$b.toolbarContent, formatBreakpointMods(visibility || visiblity, styles$b, '', getBreakpoint(width)), formatBreakpointMods(alignment, styles$b, '', getBreakpoint(width)), className) }, props),
                 React__namespace.createElement(ToolbarContext.Consumer, null, ({ clearAllFilters: clearAllFiltersContext, clearFiltersButtonText: clearFiltersButtonContext, showClearFiltersButton: showClearFiltersButtonContext, toolbarId: toolbarIdContext }) => {
                     const expandableContentId = `${toolbarId ||
                     toolbarIdContext}-expandable-content-${ToolbarContent.currentId++}`;
@@ -20141,7 +20326,7 @@
                             expandableContentId,
                             chipContainerRef: this.chipContainerRef
                         } },
-                        React__namespace.createElement("div", { className: css(styles$d.toolbarContentSection) }, children),
+                        React__namespace.createElement("div", { className: css(styles$b.toolbarContentSection) }, children),
                         React__namespace.createElement(ToolbarExpandableContent, { id: expandableContentId, isExpanded: isExpanded, expandableContentRef: this.expandableContentRef, chipContainerRef: this.chipContainerRef, clearAllFilters: clearAllFilters || clearAllFiltersContext, showClearFiltersButton: showClearFiltersButton || showClearFiltersButtonContext, clearFiltersButtonText: clearFiltersButtonText || clearFiltersButtonContext })));
                 })))));
         }
@@ -20155,7 +20340,7 @@
 
     const ToolbarExpandIconWrapper = (_a) => {
         var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("span", Object.assign({}, props, { className: css(styles$d.toolbarExpandAllIcon, className) }), children));
+        return (React__namespace.createElement("span", Object.assign({}, props, { className: css(styles$b.toolbarExpandAllIcon, className) }), children));
     };
     ToolbarExpandIconWrapper.displayName = 'ToolbarExpandIconWrapper';
 
@@ -20227,17 +20412,17 @@
             return (React__namespace.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React__namespace.createElement(ToolbarContext.Consumer, null, ({ isExpanded, toggleIsExpanded }) => (React__namespace.createElement(ToolbarContentContext.Consumer, null, ({ expandableContentRef, expandableContentId }) => {
                 if (expandableContentRef.current && expandableContentRef.current.classList) {
                     if (isExpanded) {
-                        expandableContentRef.current.classList.add(styles$d.modifiers.expanded);
+                        expandableContentRef.current.classList.add(styles$b.modifiers.expanded);
                     }
                     else {
-                        expandableContentRef.current.classList.remove(styles$d.modifiers.expanded);
+                        expandableContentRef.current.classList.remove(styles$b.modifiers.expanded);
                     }
                 }
                 const breakpointMod = {};
                 breakpointMod[breakpoint] = 'show';
-                return (React__namespace.createElement("div", Object.assign({ className: css(styles$d.toolbarGroup, styles$d.modifiers.toggleGroup, variant &&
-                        styles$d.modifiers[toCamel(variant)], formatBreakpointMods(breakpointMod, styles$d, '', getBreakpoint(width)), formatBreakpointMods(visibility || visiblity, styles$d, '', getBreakpoint(width)), formatBreakpointMods(alignment, styles$d, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles$d, '', getBreakpoint(width)), formatBreakpointMods(spaceItems, styles$d, '', getBreakpoint(width)), className) }, props),
-                    React__namespace.createElement("div", { className: css(styles$d.toolbarToggle) },
+                return (React__namespace.createElement("div", Object.assign({ className: css(styles$b.toolbarGroup, styles$b.modifiers.toggleGroup, variant &&
+                        styles$b.modifiers[toCamel(variant)], formatBreakpointMods(breakpointMod, styles$b, '', getBreakpoint(width)), formatBreakpointMods(visibility || visiblity, styles$b, '', getBreakpoint(width)), formatBreakpointMods(alignment, styles$b, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles$b, '', getBreakpoint(width)), formatBreakpointMods(spaceItems, styles$b, '', getBreakpoint(width)), className) }, props),
+                    React__namespace.createElement("div", { className: css(styles$b.toolbarToggle) },
                         React__namespace.createElement(Button, Object.assign({ variant: "plain", onClick: toggleIsExpanded, "aria-label": "Show Filters" }, (isExpanded && { 'aria-expanded': true }), { "aria-haspopup": isExpanded && this.isContentPopup(), "aria-controls": expandableContentId }), toggleIcon)),
                     isExpanded
                         ? ReactDOM__namespace.createPortal(children, expandableContentRef.current.firstElementChild)
@@ -20248,7 +20433,7 @@
     ToolbarToggleGroup.displayName = 'ToolbarToggleGroup';
 
     Promise.resolve().then(function () { return numberInput; });
-    var styles$c = {
+    var styles$a = {
       "formControl": "pf-c-form-control",
       "inputGroup": "pf-c-input-group",
       "numberInput": "pf-c-number-input",
@@ -20268,19 +20453,19 @@
     };
     const NumberInput = (_a) => {
         var { value = 0, className, widthChars, isDisabled = false, onMinus = () => { }, onChange, onBlur, onPlus = () => { }, unit, unitPosition = 'after', min, max, inputName, inputAriaLabel = 'Input', minusBtnAriaLabel = 'Minus', plusBtnAriaLabel = 'Plus', inputProps, minusBtnProps, plusBtnProps } = _a, props = __rest$1(_a, ["value", "className", "widthChars", "isDisabled", "onMinus", "onChange", "onBlur", "onPlus", "unit", "unitPosition", "min", "max", "inputName", "inputAriaLabel", "minusBtnAriaLabel", "plusBtnAriaLabel", "inputProps", "minusBtnProps", "plusBtnProps"]);
-        const numberInputUnit = React__namespace.createElement("div", { className: css(styles$c.numberInputUnit) }, unit);
+        const numberInputUnit = React__namespace.createElement("div", { className: css(styles$a.numberInputUnit) }, unit);
         const keyDownHandler = inputProps && inputProps.onKeyDown ? inputProps.onKeyDown : defaultKeyDownHandler({ inputName, onMinus, onPlus });
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$c.numberInput, className) }, (widthChars && {
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$a.numberInput, className) }, (widthChars && {
             style: Object.assign({ '--pf-c-number-input--c-form-control--width-chars': widthChars }, props.style)
         }), props),
             unit && unitPosition === 'before' && numberInputUnit,
             React__namespace.createElement(InputGroup, null,
                 React__namespace.createElement(Button, Object.assign({ variant: "control", "aria-label": minusBtnAriaLabel, isDisabled: isDisabled || value <= min, onClick: evt => onMinus(evt, inputName) }, minusBtnProps),
-                    React__namespace.createElement("span", { className: css(styles$c.numberInputIcon) },
+                    React__namespace.createElement("span", { className: css(styles$a.numberInputIcon) },
                         React__namespace.createElement(MinusIcon$1, { "aria-hidden": "true" }))),
-                React__namespace.createElement("input", Object.assign({ className: css(styles$c.formControl), type: "number", value: value, name: inputName, "aria-label": inputAriaLabel }, (isDisabled && { disabled: isDisabled }), (onChange && { onChange }), (onBlur && { onBlur }), (!onChange && { readOnly: true }), inputProps, { onKeyDown: keyDownHandler })),
+                React__namespace.createElement("input", Object.assign({ className: css(styles$a.formControl), type: "number", value: value, name: inputName, "aria-label": inputAriaLabel }, (isDisabled && { disabled: isDisabled }), (onChange && { onChange }), (onBlur && { onBlur }), (!onChange && { readOnly: true }), inputProps, { onKeyDown: keyDownHandler })),
                 React__namespace.createElement(Button, Object.assign({ variant: "control", "aria-label": plusBtnAriaLabel, isDisabled: isDisabled || value >= max, onClick: evt => onPlus(evt, inputName) }, plusBtnProps),
-                    React__namespace.createElement("span", { className: css(styles$c.numberInputIcon) },
+                    React__namespace.createElement("span", { className: css(styles$a.numberInputIcon) },
                         React__namespace.createElement(PlusIcon$1, { "aria-hidden": "true" })))),
             unit && unitPosition === 'after' && numberInputUnit));
     };
@@ -20297,7 +20482,7 @@
     TreeViewList.displayName = 'TreeViewList';
 
     Promise.resolve().then(function () { return treeView; });
-    var styles$b = {
+    var styles$9 = {
       "badge": "pf-c-badge",
       "modifiers": {
         "compact": "pf-m-compact",
@@ -20308,6 +20493,7 @@
         "read": "pf-m-read",
         "truncate": "pf-m-truncate"
       },
+      "themeDark": "pf-theme-dark",
       "treeView": "pf-c-tree-view",
       "treeViewAction": "pf-c-tree-view__action",
       "treeViewContent": "pf-c-tree-view__content",
@@ -20341,36 +20527,36 @@
         }, [isExpanded, defaultExpanded]);
         const Component = hasCheck ? 'div' : 'button';
         const ToggleComponent = hasCheck ? 'button' : 'div';
-        const renderToggle = (randomId) => (React__default["default"].createElement(ToggleComponent, Object.assign({ className: css(styles$b.treeViewNodeToggle), onClick: () => {
+        const renderToggle = (randomId) => (React__default["default"].createElement(ToggleComponent, Object.assign({ className: css(styles$9.treeViewNodeToggle), onClick: () => {
                 if (hasCheck) {
                     setIsExpanded(!internalIsExpanded);
                 }
             } }, (hasCheck && { 'aria-labelledby': `label-${randomId}` }), { tabIndex: -1 }),
-            React__default["default"].createElement("span", { className: css(styles$b.treeViewNodeToggleIcon) },
+            React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeToggleIcon) },
                 React__default["default"].createElement(AngleRightIcon$1, { "aria-hidden": "true" }))));
-        const renderCheck = (randomId) => (React__default["default"].createElement("span", { className: css(styles$b.treeViewNodeCheck) },
+        const renderCheck = (randomId) => (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeCheck) },
             React__default["default"].createElement("input", Object.assign({ type: "checkbox", onChange: (evt) => onCheck && onCheck(evt, itemData, parentItem), onClick: (evt) => evt.stopPropagation(), ref: elem => elem && (elem.indeterminate = checkProps.checked === null) }, checkProps, { checked: checkProps.checked === null ? false : checkProps.checked, id: randomId, tabIndex: -1 }))));
-        const iconRendered = (React__default["default"].createElement("span", { className: css(styles$b.treeViewNodeIcon) },
+        const iconRendered = (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeIcon) },
             !internalIsExpanded && icon,
             internalIsExpanded && (expandedIcon || icon)));
         const renderNodeContent = (randomId) => {
             const content = (React__default["default"].createElement(React__default["default"].Fragment, null,
-                isCompact && title && React__default["default"].createElement("span", { className: css(styles$b.treeViewNodeTitle) }, title),
-                hasCheck ? (React__default["default"].createElement("label", { className: css(styles$b.treeViewNodeText), htmlFor: randomId, id: `label-${randomId}` }, name)) : (React__default["default"].createElement("span", { className: css(styles$b.treeViewNodeText) }, name))));
-            return isCompact ? React__default["default"].createElement("div", { className: css(styles$b.treeViewNodeContent) }, content) : content;
+                isCompact && title && React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeTitle) }, title),
+                hasCheck ? (React__default["default"].createElement("label", { className: css(styles$9.treeViewNodeText), htmlFor: randomId, id: `label-${randomId}` }, name)) : (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeText) }, name))));
+            return isCompact ? React__default["default"].createElement("div", { className: css(styles$9.treeViewNodeContent) }, content) : content;
         };
         const badgeRendered = (React__default["default"].createElement(React__default["default"].Fragment, null,
-            hasBadge && children && (React__default["default"].createElement("span", { className: css(styles$b.treeViewNodeCount) },
+            hasBadge && children && (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeCount) },
                 React__default["default"].createElement(Badge, Object.assign({}, badgeProps), customBadgeContent ? customBadgeContent : children.props.data.length))),
-            hasBadge && !children && customBadgeContent !== undefined && (React__default["default"].createElement("span", { className: css(styles$b.treeViewNodeCount) },
+            hasBadge && !children && customBadgeContent !== undefined && (React__default["default"].createElement("span", { className: css(styles$9.treeViewNodeCount) },
                 React__default["default"].createElement(Badge, Object.assign({}, badgeProps), customBadgeContent)))));
-        return (React__default["default"].createElement("li", Object.assign({ id: id, className: css(styles$b.treeViewListItem, internalIsExpanded && styles$b.modifiers.expanded) }, (internalIsExpanded && { 'aria-expanded': 'true' }), { role: "treeitem", tabIndex: -1 }),
-            React__default["default"].createElement("div", { className: css(styles$b.treeViewContent) },
-                React__default["default"].createElement(GenerateId, { prefix: "checkbox-id" }, randomId => (React__default["default"].createElement(Component, { className: css(styles$b.treeViewNode, !children &&
+        return (React__default["default"].createElement("li", Object.assign({ id: id, className: css(styles$9.treeViewListItem, internalIsExpanded && styles$9.modifiers.expanded) }, (internalIsExpanded && { 'aria-expanded': 'true' }), { role: "treeitem", tabIndex: -1 }),
+            React__default["default"].createElement("div", { className: css(styles$9.treeViewContent) },
+                React__default["default"].createElement(GenerateId, { prefix: "checkbox-id" }, randomId => (React__default["default"].createElement(Component, { className: css(styles$9.treeViewNode, !children &&
                         activeItems &&
                         activeItems.length > 0 &&
                         activeItems.some(item => compareItems && item && compareItems(item, itemData))
-                        ? styles$b.modifiers.current
+                        ? styles$9.modifiers.current
                         : ''), onClick: (evt) => {
                         if (!hasCheck) {
                             onSelect && onSelect(evt, itemData, parentItem);
@@ -20379,13 +20565,13 @@
                             }
                         }
                     }, tabIndex: -1 },
-                    React__default["default"].createElement("div", { className: css(styles$b.treeViewNodeContainer) },
+                    React__default["default"].createElement("div", { className: css(styles$9.treeViewNodeContainer) },
                         children && renderToggle(randomId),
                         hasCheck && renderCheck(randomId),
                         icon && iconRendered,
                         renderNodeContent(randomId),
                         badgeRendered)))),
-                action && React__default["default"].createElement("div", { className: css(styles$b.treeViewAction) }, action)),
+                action && React__default["default"].createElement("div", { className: css(styles$9.treeViewAction) }, action)),
             internalIsExpanded && children));
     };
     const TreeViewListItem = React__default["default"].memo(TreeViewListItemBase, (prevProps, nextProps) => {
@@ -20519,8 +20705,8 @@
             };
             this.variantStyleModifiers = {
                 default: '',
-                compact: styles$b.modifiers.compact,
-                compactNoBackground: [styles$b.modifiers.compact, styles$b.modifiers.noBackground]
+                compact: styles$9.modifiers.compact,
+                compactNoBackground: [styles$9.modifiers.compact, styles$9.modifiers.noBackground]
             };
         }
         componentDidMount() {
@@ -20549,7 +20735,7 @@
         render() {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const _a = this.props, { children, hasChecks, hasGuides, variant, className } = _a, props = __rest$1(_a, ["children", "hasChecks", "hasGuides", "variant", "className"]);
-            return (React__namespace.createElement("div", Object.assign({ className: css(styles$b.treeView, hasGuides && styles$b.modifiers.guides, this.variantStyleModifiers[variant], className), ref: this.treeRef }, props), children));
+            return (React__namespace.createElement("div", Object.assign({ className: css(styles$9.treeView, hasGuides && styles$9.modifiers.guides, this.variantStyleModifiers[variant], className), ref: this.treeRef }, props), children));
         }
     }
 
@@ -20567,13 +20753,13 @@
 
     const TreeViewSearch = (_a) => {
         var { className, onSearch, id, name, 'aria-label': ariaLabel } = _a, props = __rest$1(_a, ["className", "onSearch", "id", "name", 'aria-label']);
-        return (React__namespace.createElement("div", { className: css(styles$b.treeViewSearch, className) },
+        return (React__namespace.createElement("div", { className: css(styles$9.treeViewSearch, className) },
             React__namespace.createElement("input", Object.assign({ className: css(formStyles.formControl, formStyles.modifiers.search), onChange: onSearch, id: id, name: name, "aria-label": ariaLabel, type: "search" }, props))));
     };
     TreeViewSearch.displayName = 'TreeViewSearch';
 
     Promise.resolve().then(function () { return wizard; });
-    var styles$a = {
+    var styles$8 = {
       "button": "pf-c-button",
       "card": "pf-c-card",
       "drawer": "pf-c-drawer",
@@ -20587,6 +20773,7 @@
         "noPadding": "pf-m-no-padding"
       },
       "pageMainWizard": "pf-c-page__main-wizard",
+      "themeDark": "pf-theme-dark",
       "wizard": "pf-c-wizard",
       "wizardClose": "pf-c-wizard__close",
       "wizardDescription": "pf-c-wizard__description",
@@ -20613,17 +20800,17 @@
       "wizardToggleSeparator": "pf-c-wizard__toggle-separator"
     };
 
-    const WizardFooterInternal = ({ onNext, onBack, onClose, isValid, firstStep, activeStep, nextButtonText, backButtonText, cancelButtonText }) => (React__namespace.createElement("footer", { className: css(styles$a.wizardFooter) },
+    const WizardFooterInternal = ({ onNext, onBack, onClose, isValid, firstStep, activeStep, nextButtonText, backButtonText, cancelButtonText }) => (React__namespace.createElement("footer", { className: css(styles$8.wizardFooter) },
         React__namespace.createElement(Button, { variant: exports.ButtonVariant.primary, type: "submit", onClick: onNext, isDisabled: !isValid }, nextButtonText),
         !activeStep.hideBackButton && (React__namespace.createElement(Button, { variant: exports.ButtonVariant.secondary, onClick: onBack, isDisabled: firstStep }, backButtonText)),
-        !activeStep.hideCancelButton && (React__namespace.createElement("div", { className: styles$a.wizardFooterCancel },
+        !activeStep.hideCancelButton && (React__namespace.createElement("div", { className: styles$8.wizardFooterCancel },
             React__namespace.createElement(Button, { variant: exports.ButtonVariant.link, onClick: onClose }, cancelButtonText)))));
     WizardFooterInternal.displayName = 'WizardFooterInternal';
 
     const WizardBody = ({ children, hasNoBodyPadding = false, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, mainComponent = 'div' }) => {
         const MainComponent = mainComponent;
-        return (React__namespace.createElement(MainComponent, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: css(styles$a.wizardMain) },
-            React__namespace.createElement("div", { className: css(styles$a.wizardMainBody, hasNoBodyPadding && styles$a.modifiers.noPadding) }, children)));
+        return (React__namespace.createElement(MainComponent, { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: css(styles$8.wizardMain) },
+            React__namespace.createElement("div", { className: css(styles$8.wizardMainBody, hasNoBodyPadding && styles$8.modifiers.noPadding) }, children)));
     };
     WizardBody.displayName = 'WizardBody';
 
@@ -20649,18 +20836,18 @@
             }
         }
         return (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement("button", { onClick: () => onNavToggle(!isNavOpen), className: css(styles$a.wizardToggle, isNavOpen && 'pf-m-expanded'), "aria-label": ariaLabel, "aria-expanded": isNavOpen },
-                React__namespace.createElement("span", { className: css(styles$a.wizardToggleList) },
-                    React__namespace.createElement("span", { className: css(styles$a.wizardToggleListItem) },
-                        React__namespace.createElement("span", { className: css(styles$a.wizardToggleNum) }, activeStepIndex),
+            React__namespace.createElement("button", { onClick: () => onNavToggle(!isNavOpen), className: css(styles$8.wizardToggle, isNavOpen && 'pf-m-expanded'), "aria-label": ariaLabel, "aria-expanded": isNavOpen },
+                React__namespace.createElement("span", { className: css(styles$8.wizardToggleList) },
+                    React__namespace.createElement("span", { className: css(styles$8.wizardToggleListItem) },
+                        React__namespace.createElement("span", { className: css(styles$8.wizardToggleNum) }, activeStepIndex),
                         " ",
                         activeStepName,
-                        activeStepSubName && React__namespace.createElement(AngleRightIcon$1, { className: css(styles$a.wizardToggleSeparator), "aria-hidden": "true" })),
-                    activeStepSubName && React__namespace.createElement("span", { className: css(styles$a.wizardToggleListItem) }, activeStepSubName)),
-                React__namespace.createElement("span", { className: css(styles$a.wizardToggleIcon) },
+                        activeStepSubName && React__namespace.createElement(AngleRightIcon$1, { className: css(styles$8.wizardToggleSeparator), "aria-hidden": "true" })),
+                    activeStepSubName && React__namespace.createElement("span", { className: css(styles$8.wizardToggleListItem) }, activeStepSubName)),
+                React__namespace.createElement("span", { className: css(styles$8.wizardToggleIcon) },
                     React__namespace.createElement(CaretDownIcon$1, { "aria-hidden": "true" }))),
-            React__namespace.createElement("div", { className: css(styles$a.wizardOuterWrap) },
-                React__namespace.createElement("div", { className: css(styles$a.wizardInnerWrap) },
+            React__namespace.createElement("div", { className: css(styles$8.wizardOuterWrap) },
+                React__namespace.createElement("div", { className: css(styles$8.wizardInnerWrap) },
                     nav(isNavOpen),
                     React__namespace.createElement(WizardBody, { mainComponent: isInPage ? 'div' : 'main', "aria-label": mainAriaLabel, "aria-labelledby": mainAriaLabelledBy, hasNoBodyPadding: hasNoBodyPadding }, activeStep.component)),
                 children)));
@@ -20668,12 +20855,12 @@
     WizardToggle.displayName = 'WizardToggle';
 
     const WizardNav = ({ children, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, isOpen = false, returnList = false }) => {
-        const innerList = React__namespace.createElement("ol", { className: css(styles$a.wizardNavList) }, children);
+        const innerList = React__namespace.createElement("ol", { className: css(styles$8.wizardNavList) }, children);
         if (returnList) {
             return innerList;
         }
-        return (React__namespace.createElement("nav", { className: css(styles$a.wizardNav, isOpen && styles$a.modifiers.expanded), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy },
-            React__namespace.createElement("ol", { className: css(styles$a.wizardNavList) }, children)));
+        return (React__namespace.createElement("nav", { className: css(styles$8.wizardNav, isOpen && styles$8.modifiers.expanded), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy },
+            React__namespace.createElement("ol", { className: css(styles$8.wizardNavList) }, children)));
     };
     WizardNav.displayName = 'WizardNav';
 
@@ -20695,11 +20882,11 @@
             tabIndex: isDisabled ? -1 : undefined,
             href
         };
-        return (React__namespace.createElement("li", { className: css(styles$a.wizardNavItem, isExpandable && styles$a.modifiers.expandable, isExpandable && isExpanded && styles$a.modifiers.expanded) },
-            React__namespace.createElement(NavItemComponent, Object.assign({}, rest, (navItemComponent === 'a' ? Object.assign({}, linkProps) : Object.assign({}, btnProps)), (id && { id: id.toString() }), { onClick: () => (isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step)), className: css(styles$a.wizardNavLink, isCurrent && styles$a.modifiers.current, isDisabled && styles$a.modifiers.disabled), "aria-disabled": isDisabled ? true : null, "aria-current": isCurrent && !children ? 'step' : false }, (isExpandable && { 'aria-expanded': isExpanded })), isExpandable ? (React__namespace.createElement(React__namespace.Fragment, null,
-                React__namespace.createElement("span", { className: css(styles$a.wizardNavLinkText) }, content),
-                React__namespace.createElement("span", { className: css(styles$a.wizardNavLinkToggle) },
-                    React__namespace.createElement("span", { className: css(styles$a.wizardNavLinkToggleIcon) },
+        return (React__namespace.createElement("li", { className: css(styles$8.wizardNavItem, isExpandable && styles$8.modifiers.expandable, isExpandable && isExpanded && styles$8.modifiers.expanded) },
+            React__namespace.createElement(NavItemComponent, Object.assign({}, rest, (navItemComponent === 'a' ? Object.assign({}, linkProps) : Object.assign({}, btnProps)), (id && { id: id.toString() }), { onClick: () => (isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onNavItemClick(step)), className: css(styles$8.wizardNavLink, isCurrent && styles$8.modifiers.current, isDisabled && styles$8.modifiers.disabled), "aria-disabled": isDisabled ? true : null, "aria-current": isCurrent && !children ? 'step' : false }, (isExpandable && { 'aria-expanded': isExpanded })), isExpandable ? (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement("span", { className: css(styles$8.wizardNavLinkText) }, content),
+                React__namespace.createElement("span", { className: css(styles$8.wizardNavLinkToggle) },
+                    React__namespace.createElement("span", { className: css(styles$8.wizardNavLinkToggleIcon) },
                         React__namespace.createElement(AngleRightIcon$1, null))))) : (content)),
             children));
     };
@@ -20716,11 +20903,11 @@
     const WizardContextProvider = WizardContext.Provider;
     const WizardContextConsumer = WizardContext.Consumer;
 
-    const WizardHeader = ({ onClose = () => undefined, title, description, hideClose, closeButtonAriaLabel, titleId, descriptionComponent: Component = 'p', descriptionId }) => (React__namespace.createElement("div", { className: css(styles$a.wizardHeader) },
-        !hideClose && (React__namespace.createElement(Button, { variant: "plain", className: css(styles$a.wizardClose), "aria-label": closeButtonAriaLabel, onClick: onClose },
+    const WizardHeader = ({ onClose = () => undefined, title, description, hideClose, closeButtonAriaLabel, titleId, descriptionComponent: Component = 'p', descriptionId }) => (React__namespace.createElement("div", { className: css(styles$8.wizardHeader) },
+        !hideClose && (React__namespace.createElement(Button, { variant: "plain", className: css(styles$8.wizardClose), "aria-label": closeButtonAriaLabel, onClick: onClose },
             React__namespace.createElement(TimesIcon$1, { "aria-hidden": "true" }))),
-        React__namespace.createElement(Title, { headingLevel: "h2", size: "3xl", className: css(styles$a.wizardTitle), "aria-label": title, id: titleId }, title || React__namespace.createElement(React__namespace.Fragment, null, "\u00A0")),
-        description && (React__namespace.createElement(Component, { className: css(styles$a.wizardDescription), id: descriptionId }, description))));
+        React__namespace.createElement(Title, { headingLevel: "h2", size: "3xl", className: css(styles$8.wizardTitle), "aria-label": title, id: titleId }, title || React__namespace.createElement(React__namespace.Fragment, null, "\u00A0")),
+        description && (React__namespace.createElement(Component, { className: css(styles$8.wizardDescription), id: descriptionId }, description))));
     WizardHeader.displayName = 'WizardHeader';
 
     class Wizard extends React__namespace.Component {
@@ -20947,7 +21134,7 @@
             };
             const divStyles = Object.assign(Object.assign({}, (height ? { height } : {})), (width ? { width } : {}));
             const wizard = (React__namespace.createElement(WizardContextProvider, { value: context },
-                React__namespace.createElement("div", Object.assign({}, rest, { className: css(styles$a.wizard, activeStep && activeStep.isFinishedStep && 'pf-m-finished', className), style: Object.keys(divStyles).length ? divStyles : undefined }),
+                React__namespace.createElement("div", Object.assign({}, rest, { className: css(styles$8.wizard, activeStep && activeStep.isFinishedStep && 'pf-m-finished', className), style: Object.keys(divStyles).length ? divStyles : undefined }),
                     title && (React__namespace.createElement(WizardHeader, { titleId: this.titleId, descriptionId: this.descriptionId, onClose: onClose, title: title, description: description, descriptionComponent: descriptionComponent, closeButtonAriaLabel: closeButtonAriaLabel, hideClose: hideClose })),
                     React__namespace.createElement(WizardToggle, { mainAriaLabel: mainAriaLabel, isInPage: isOpen === undefined, mainAriaLabelledBy: (title || mainAriaLabelledBy) && (mainAriaLabelledBy || this.titleId), isNavOpen: this.state.isNavOpen, onNavToggle: isNavOpen => this.setState({ isNavOpen }), nav: nav, steps: steps, activeStep: activeStep, hasNoBodyPadding: hasNoBodyPadding }, footer || (React__namespace.createElement(WizardFooterInternal, { onNext: this.onNext, onBack: this.onBack, onClose: onClose, isValid: isValid, firstStep: firstStep, activeStep: activeStep, nextButtonText: (activeStep && activeStep.nextButtonText) || nextButtonText, backButtonText: backButtonText, cancelButtonText: cancelButtonText }))))));
             if (isOpen !== undefined) {
@@ -20986,7 +21173,7 @@
         isNavExpandable: false
     };
 
-    const WizardFooter = ({ children }) => (React__namespace.createElement("footer", { className: css(styles$a.wizardFooter) }, children));
+    const WizardFooter = ({ children }) => (React__namespace.createElement("footer", { className: css(styles$8.wizardFooter) }, children));
     WizardFooter.displayName = 'WizardFooter';
 
     const DragDropContext = React__namespace.createContext({
@@ -20998,7 +21185,7 @@
     DragDrop.displayName = 'DragDrop';
 
     Promise.resolve().then(function () { return dragDrop; });
-    var styles$9 = {
+    var styles$7 = {
       "draggable": "pf-c-draggable",
       "droppable": "pf-c-droppable",
       "modifiers": {
@@ -21047,8 +21234,8 @@
     // Reset per-element state
     function resetDroppableItem(droppableItem) {
         removeBlankDiv(droppableItem.node);
-        droppableItem.node.classList.remove(styles$9.modifiers.dragging);
-        droppableItem.node.classList.remove(styles$9.modifiers.dragOutside);
+        droppableItem.node.classList.remove(styles$7.modifiers.dragging);
+        droppableItem.node.classList.remove(styles$7.modifiers.dragOutside);
         droppableItem.draggableNodes.forEach((n, i) => {
             n.style.transform = '';
             n.style.transition = '';
@@ -21123,7 +21310,7 @@
                 const { node, rect, isDraggingHost, draggableNodes, draggableNodesRects } = droppableItem;
                 if (overlaps(ev, rect)) {
                     // Add valid dropzone style
-                    node.classList.remove(styles$9.modifiers.dragOutside);
+                    node.classList.remove(styles$7.modifiers.dragOutside);
                     hoveringDroppable = node;
                     // Check if we need to add a blank div row
                     if (node.getAttribute('blankDiv') !== 'true' && !isDraggingHost) {
@@ -21159,8 +21346,8 @@
                 }
                 else {
                     resetDroppableItem(droppableItem);
-                    node.classList.add(styles$9.modifiers.dragging);
-                    node.classList.add(styles$9.modifiers.dragOutside);
+                    node.classList.add(styles$7.modifiers.dragging);
+                    node.classList.add(styles$7.modifiers.dragOutside);
                 }
             });
             // Move hovering draggable and style it based on cursor position
@@ -21208,7 +21395,7 @@
             const rect = dragging.getBoundingClientRect();
             const droppableNodes = Array.from(document.querySelectorAll(`[data-pf-droppable="${zone}"]`));
             const droppableItems = droppableNodes.reduce((acc, cur) => {
-                cur.classList.add(styles$9.modifiers.dragging);
+                cur.classList.add(styles$7.modifiers.dragging);
                 const draggableNodes = Array.from(cur.querySelectorAll(`[data-pf-draggable-zone="${zone}"]`));
                 const isDraggingHost = cur.contains(dragging);
                 if (isDraggingHost) {
@@ -21244,7 +21431,7 @@
             // Comment out this line to debug while dragging by right clicking
             // document.addEventListener('contextmenu', mouseUpListener);
         };
-        const childProps = Object.assign({ 'data-pf-draggable-zone': isDragging ? null : zone, draggable: true, className: css(styles$9.draggable, isDragging && styles$9.modifiers.dragging, !isValidDrag && styles$9.modifiers.dragOutside, className), onDragStart,
+        const childProps = Object.assign({ 'data-pf-draggable-zone': isDragging ? null : zone, draggable: true, className: css(styles$7.draggable, isDragging && styles$7.modifiers.dragging, !isValidDrag && styles$7.modifiers.dragOutside, className), onDragStart,
             onTransitionEnd,
             style }, props);
         return (React__namespace.createElement(React__namespace.Fragment, null,
@@ -21258,108 +21445,12 @@
         const childProps = Object.assign({ 'data-pf-droppable': zone, 'data-pf-droppableid': droppableId, 
             // if has no wrapper is set, don't overwrite children className with the className prop
             className: hasNoWrapper && React__namespace.Children.count(children) === 1
-                ? css(styles$9.droppable, className, children.props.className)
-                : css(styles$9.droppable, className) }, props);
+                ? css(styles$7.droppable, className, children.props.className)
+                : css(styles$7.droppable, className) }, props);
         return (React__namespace.createElement(DroppableContext.Provider, { value: { zone, droppableId } }, hasNoWrapper ? (React__namespace.cloneElement(children, childProps)) : (React__namespace.createElement("div", Object.assign({}, childProps), children))));
     };
     Droppable.displayName = 'Droppable';
 
-    Promise.resolve().then(function () { return textInputGroup; });
-    var styles$8 = {
-      "button": "pf-c-button",
-      "chipGroup": "pf-c-chip-group",
-      "chipGroupList": "pf-c-chip-group__list",
-      "modifiers": {
-        "disabled": "pf-m-disabled",
-        "plain": "pf-m-plain",
-        "icon": "pf-m-icon",
-        "hint": "pf-m-hint"
-      },
-      "textInputGroup": "pf-c-text-input-group",
-      "textInputGroupGroup": "pf-c-text-input-group__group",
-      "textInputGroupIcon": "pf-c-text-input-group__icon",
-      "textInputGroupMain": "pf-c-text-input-group__main",
-      "textInputGroupText": "pf-c-text-input-group__text",
-      "textInputGroupTextInput": "pf-c-text-input-group__text-input",
-      "textInputGroupUtilities": "pf-c-text-input-group__utilities"
-    };
-
-    const TextInputGroupContext = React__namespace.createContext({
-        isDisabled: false
-    });
-    const TextInputGroup = (_a) => {
-        var { children, className, isDisabled } = _a, props = __rest$1(_a, ["children", "className", "isDisabled"]);
-        return (React__namespace.createElement(TextInputGroupContext.Provider, { value: { isDisabled } },
-            React__namespace.createElement("div", Object.assign({ className: css(styles$8.textInputGroup, isDisabled && styles$8.modifiers.disabled, className) }, props), children)));
-    };
-    TextInputGroup.displayName = 'TextInputGroup';
-
-    const TextInputGroupMain = (_a) => {
-        var { children, className, icon, type = 'text', hint, onChange = () => undefined, onFocus, onBlur, 'aria-label': ariaLabel = 'Type to filter', value: inputValue, placeholder: inputPlaceHolder } = _a, props = __rest$1(_a, ["children", "className", "icon", "type", "hint", "onChange", "onFocus", "onBlur", 'aria-label', "value", "placeholder"]);
-        const { isDisabled } = React__namespace.useContext(TextInputGroupContext);
-        const handleChange = (event) => {
-            onChange(event.currentTarget.value, event);
-        };
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$8.textInputGroupMain, icon && styles$8.modifiers.icon, className) }, props),
-            children,
-            React__namespace.createElement("span", { className: css(styles$8.textInputGroupText) },
-                hint && (React__namespace.createElement("input", { className: css(styles$8.textInputGroupTextInput, styles$8.modifiers.hint), type: "text", disabled: true, "aria-hidden": "true", value: hint })),
-                icon && React__namespace.createElement("span", { className: css(styles$8.textInputGroupIcon) }, icon),
-                React__namespace.createElement("input", { type: type, className: css(styles$8.textInputGroupTextInput), "aria-label": ariaLabel, disabled: isDisabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, value: inputValue || '', placeholder: inputPlaceHolder }))));
-    };
-    TextInputGroupMain.displayName = 'TextInputGroupMain';
-
-    const TextInputGroupUtilities = (_a) => {
-        var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$8.textInputGroupUtilities, className) }, props), children));
-    };
-    TextInputGroupUtilities.displayName = 'TextInputGroupUtilities';
-
-    Promise.resolve().then(function () { return panel; });
-    var styles$7 = {
-      "modifiers": {
-        "bordered": "pf-m-bordered",
-        "raised": "pf-m-raised",
-        "scrollable": "pf-m-scrollable"
-      },
-      "panel": "pf-c-panel",
-      "panelFooter": "pf-c-panel__footer",
-      "panelHeader": "pf-c-panel__header",
-      "panelMain": "pf-c-panel__main",
-      "panelMainBody": "pf-c-panel__main-body"
-    };
-
-    const PanelBase = (_a) => {
-        var { className, children, variant, isScrollable, innerRef } = _a, props = __rest$1(_a, ["className", "children", "variant", "isScrollable", "innerRef"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$7.panel, variant === 'raised' && styles$7.modifiers.raised, variant === 'bordered' && styles$7.modifiers.bordered, isScrollable && styles$7.modifiers.scrollable, className), ref: innerRef }, props), children));
-    };
-    const Panel = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(PanelBase, Object.assign({ innerRef: ref }, props))));
-    Panel.displayName = 'Panel';
-
-    const PanelMain = (_a) => {
-        var { className, children, maxHeight } = _a, props = __rest$1(_a, ["className", "children", "maxHeight"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$7.panelMain, className), style: { '--pf-c-panel__main--MaxHeight': maxHeight } }, props), children));
-    };
-    PanelMain.displayName = 'PanelMain';
-
-    const PanelMainBody = (_a) => {
-        var { className, children } = _a, props = __rest$1(_a, ["className", "children"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$7.panelMainBody, className) }, props), children));
-    };
-    PanelMainBody.displayName = 'PanelMainBody';
-
-    const PanelHeader = (_a) => {
-        var { className, children } = _a, props = __rest$1(_a, ["className", "children"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$7.panelHeader, className) }, props), children));
-    };
-    PanelHeader.displayName = 'PanelHeader';
-
-    const PanelFooter = (_a) => {
-        var { className, children } = _a, props = __rest$1(_a, ["className", "children"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$7.panelFooter, className) }, props), children));
-    };
-    PanelFooter.displayName = 'PanelFooter';
-
     Promise.resolve().then(function () { return truncate; });
     var styles$6 = {
       "truncate": "pf-c-truncate",
@@ -22536,6 +22627,14 @@
         __proto__: null
     });
 
+    var panel = /*#__PURE__*/Object.freeze({
+        __proto__: null
+    });
+
+    var textInputGroup = /*#__PURE__*/Object.freeze({
+        __proto__: null
+    });
+
     var simpleList = /*#__PURE__*/Object.freeze({
         __proto__: null
     });
@@ -22592,14 +22691,6 @@
         __proto__: null
     });
 
-    var textInputGroup = /*#__PURE__*/Object.freeze({
-        __proto__: null
-    });
-
-    var panel = /*#__PURE__*/Object.freeze({
-        __proto__: null
-    });
-
     var truncate = /*#__PURE__*/Object.freeze({
         __proto__: null
     });