@patternfly/react-core 4.202.33 → 4.202.36

package/dist/umd/react-core.js

@@ -96,7 +96,7 @@
     }
 
     Promise.resolve().then(function () { return backdrop; });
-    var styles$1h = {
+    var styles$1i = {
       "backdrop": "pf-c-backdrop",
       "backdropOpen": "pf-c-backdrop__open"
     };
@@ -3484,12 +3484,12 @@
     };
 
     Promise.resolve().then(function () { return bullseye; });
-    var styles$1g = {
+    var styles$1h = {
       "bullseye": "pf-l-bullseye"
     };
 
     Promise.resolve().then(function () { return aboutModalBox; });
-    var styles$1f = {
+    var styles$1g = {
       "aboutModalBox": "pf-c-about-modal-box",
       "aboutModalBoxBrand": "pf-c-about-modal-box__brand",
       "aboutModalBoxBrandImage": "pf-c-about-modal-box__brand-image",
@@ -3506,7 +3506,7 @@
     };
 
     Promise.resolve().then(function () { return content; });
-    var styles$1e = {
+    var styles$1f = {
       "content": "pf-c-content",
       "modifiers": {
         "visited": "pf-m-visited",
@@ -3516,14 +3516,14 @@
 
     const AboutModalBoxContent = (_a) => {
         var { children, className = '', trademark, id, noAboutModalBoxContentContainer = false } = _a, props = __rest$1(_a, ["children", "className", "trademark", "id", "noAboutModalBoxContentContainer"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$1f.aboutModalBoxContent, className), id: id }, props),
-            React__namespace.createElement("div", { className: css('pf-c-about-modal-box__body') }, noAboutModalBoxContentContainer ? children : React__namespace.createElement("div", { className: css(styles$1e.content) }, children)),
-            React__namespace.createElement("p", { className: css(styles$1f.aboutModalBoxStrapline) }, trademark)));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$1g.aboutModalBoxContent, className), id: id }, props),
+            React__namespace.createElement("div", { className: css('pf-c-about-modal-box__body') }, noAboutModalBoxContentContainer ? children : React__namespace.createElement("div", { className: css(styles$1f.content) }, children)),
+            React__namespace.createElement("p", { className: css(styles$1g.aboutModalBoxStrapline) }, trademark)));
     };
     AboutModalBoxContent.displayName = 'AboutModalBoxContent';
 
     Promise.resolve().then(function () { return title; });
-    var styles$1d = {
+    var styles$1e = {
       "modifiers": {
         "4xl": "pf-m-4xl",
         "3xl": "pf-m-3xl",
@@ -3557,13 +3557,13 @@
     const Title = (_a) => {
         var { className = '', children = '', headingLevel: HeadingLevel, size = headingLevelSizeMap[HeadingLevel], ouiaId, ouiaSafe = true } = _a, props = __rest$1(_a, ["className", "children", "headingLevel", "size", "ouiaId", "ouiaSafe"]);
         const ouiaProps = useOUIAProps(Title.displayName, ouiaId, ouiaSafe);
-        return (React__namespace.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css(styles$1d.title, size && styles$1d.modifiers[size], className) }), children));
+        return (React__namespace.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css(styles$1e.title, size && styles$1e.modifiers[size], className) }), children));
     };
     Title.displayName = 'Title';
 
     const AboutModalBoxHeader = (_a) => {
         var { className = '', productName = '', id } = _a, props = __rest$1(_a, ["className", "productName", "id"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$1f.aboutModalBoxHeader, className) }, props),
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$1g.aboutModalBoxHeader, className) }, props),
             React__namespace.createElement(Title, { headingLevel: "h1", size: "4xl", id: id }, productName)));
     };
     AboutModalBoxHeader.displayName = 'AboutModalBoxHeader';
@@ -3581,14 +3581,14 @@
             /* eslint-disable camelcase */
             backgroundImageSrc !== ''
                 ? { [c_about_modal_box__hero_sm_BackgroundImage$1.name]: `url(${backgroundImageSrc})` }
-                : {}, className: css(styles$1f.aboutModalBoxHero, className) }, props)));
+                : {}, className: css(styles$1g.aboutModalBoxHero, className) }, props)));
     };
     AboutModalBoxHero.displayName = 'AboutModalBoxHero';
 
     const AboutModalBoxBrand = (_a) => {
         var { className = '', src = '', alt } = _a, props = __rest$1(_a, ["className", "src", "alt"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$1f.aboutModalBoxBrand, className) }, props),
-            React__namespace.createElement("img", { className: css(styles$1f.aboutModalBoxBrandImage), src: src, alt: alt })));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$1g.aboutModalBoxBrand, className) }, props),
+            React__namespace.createElement("img", { className: css(styles$1g.aboutModalBoxBrandImage), src: src, alt: alt })));
     };
     AboutModalBoxBrand.displayName = 'AboutModalBoxBrand';
 
@@ -3624,7 +3624,7 @@
     };
 
     Promise.resolve().then(function () { return spinner; });
-    var styles$1c = {
+    var styles$1d = {
       "modifiers": {
         "sm": "pf-m-sm",
         "md": "pf-m-md",
@@ -3650,10 +3650,10 @@
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', isSVG = false, diameter, 'aria-label': ariaLabel, 'aria-labelledBy': ariaLabelledBy } = _a, props = __rest$1(_a, ["className", "size", 'aria-valuetext', "isSVG", "diameter", 'aria-label', 'aria-labelledBy']);
         const Component = isSVG ? 'svg' : 'span';
-        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$1c.spinner, styles$1c.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy }), (!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' }), props), isSVG ? (React__namespace.createElement("circle", { className: styles$1c.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement("span", { className: css(styles$1c.spinnerClipper) }),
-            React__namespace.createElement("span", { className: css(styles$1c.spinnerLeadBall) }),
-            React__namespace.createElement("span", { className: css(styles$1c.spinnerTailBall) })))));
+        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$1d.spinner, styles$1d.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy }), (!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' }), props), isSVG ? (React__namespace.createElement("circle", { className: styles$1d.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement("span", { className: css(styles$1d.spinnerClipper) }),
+            React__namespace.createElement("span", { className: css(styles$1d.spinnerLeadBall) }),
+            React__namespace.createElement("span", { className: css(styles$1d.spinnerTailBall) })))));
     };
     Spinner.displayName = 'Spinner';
 
@@ -3800,7 +3800,7 @@
 
     const AboutModalBoxCloseButton = (_a) => {
         var { className = '', onClose = () => undefined, 'aria-label': ariaLabel = 'Close Dialog' } = _a, props = __rest$1(_a, ["className", "onClose", 'aria-label']);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$1f.aboutModalBoxClose, className) }, props),
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$1g.aboutModalBoxClose, className) }, props),
             React__namespace.createElement(Button, { variant: "plain", onClick: onClose, "aria-label": ariaLabel },
                 React__namespace.createElement(TimesIcon$1, null))));
     };
@@ -3808,13 +3808,13 @@
 
     const AboutModalBox = (_a) => {
         var { children, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("div", Object.assign({ role: "dialog", "aria-modal": "true", className: css(styles$1f.aboutModalBox, className) }, props), children));
+        return (React__namespace.createElement("div", Object.assign({ role: "dialog", "aria-modal": "true", className: css(styles$1g.aboutModalBox, className) }, props), children));
     };
     AboutModalBox.displayName = 'AboutModalBox';
 
     const Backdrop = (_a) => {
         var { children = null, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$1h.backdrop, className) }), children));
+        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$1i.backdrop, className) }), children));
     };
     Backdrop.displayName = 'Backdrop';
 
@@ -3824,7 +3824,7 @@
             return null;
         }
         return (React__namespace.createElement(Backdrop, null,
-            React__namespace.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true }, className: css(styles$1g.bullseye) },
+            React__namespace.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true }, className: css(styles$1h.bullseye) },
                 React__namespace.createElement(AboutModalBox, { className: className, "aria-labelledby": aboutModalBoxHeaderId, "aria-describedby": aboutModalBoxContentId },
                     React__namespace.createElement(AboutModalBoxBrand, { src: brandImageSrc, alt: brandImageAlt }),
                     React__namespace.createElement(AboutModalBoxCloseButton, { "aria-label": closeButtonAriaLabel, onClose: onClose }),
@@ -3876,20 +3876,20 @@
             target.appendChild(container);
             target.addEventListener('keydown', this.handleEscKeyClick, false);
             if (this.props.isOpen) {
-                target.classList.add(css(styles$1h.backdropOpen));
+                target.classList.add(css(styles$1i.backdropOpen));
             }
             else {
-                target.classList.remove(css(styles$1h.backdropOpen));
+                target.classList.remove(css(styles$1i.backdropOpen));
             }
         }
         componentDidUpdate() {
             const target = this.getElement(this.props.appendTo);
             if (this.props.isOpen) {
-                target.classList.add(css(styles$1h.backdropOpen));
+                target.classList.add(css(styles$1i.backdropOpen));
                 this.toggleSiblingsFromScreenReaders(true);
             }
             else {
-                target.classList.remove(css(styles$1h.backdropOpen));
+                target.classList.remove(css(styles$1i.backdropOpen));
                 this.toggleSiblingsFromScreenReaders(false);
             }
         }
@@ -3899,7 +3899,7 @@
                 target.removeChild(this.state.container);
             }
             target.removeEventListener('keydown', this.handleEscKeyClick, false);
-            target.classList.remove(css(styles$1h.backdropOpen));
+            target.classList.remove(css(styles$1i.backdropOpen));
         }
         render() {
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -3925,7 +3925,7 @@
     };
 
     Promise.resolve().then(function () { return accordion; });
-    var styles$1b = {
+    var styles$1c = {
       "accordion": "pf-c-accordion",
       "accordionExpandedContent": "pf-c-accordion__expanded-content",
       "accordionExpandedContentBody": "pf-c-accordion__expanded-content-body",
@@ -3945,7 +3945,7 @@
     const Accordion = (_a) => {
         var { children = null, className = '', 'aria-label': ariaLabel = '', headingLevel = 'h3', asDefinitionList = true, isBordered = false, displaySize = 'default' } = _a, props = __rest$1(_a, ["children", "className", 'aria-label', "headingLevel", "asDefinitionList", "isBordered", "displaySize"]);
         const AccordionList = asDefinitionList ? 'dl' : 'div';
-        return (React__namespace.createElement(AccordionList, Object.assign({ className: css(styles$1b.accordion, isBordered && styles$1b.modifiers.bordered, displaySize === 'large' && styles$1b.modifiers.displayLg, className), "aria-label": ariaLabel }, props),
+        return (React__namespace.createElement(AccordionList, Object.assign({ className: css(styles$1c.accordion, isBordered && styles$1c.modifiers.bordered, displaySize === 'large' && styles$1c.modifiers.displayLg, className), "aria-label": ariaLabel }, props),
             React__namespace.createElement(AccordionContext.Provider, { value: {
                     ContentContainer: asDefinitionList ? 'dd' : 'div',
                     ToggleContainer: asDefinitionList ? 'dt' : headingLevel
@@ -3953,14 +3953,14 @@
     };
     Accordion.displayName = 'Accordion';
 
-    const AccordionExpandedContentBody = ({ children = null }) => React__namespace.createElement("div", { className: css(styles$1b.accordionExpandedContentBody) }, children);
+    const AccordionExpandedContentBody = ({ children = null }) => React__namespace.createElement("div", { className: css(styles$1c.accordionExpandedContentBody) }, children);
     AccordionExpandedContentBody.displayName = 'AccordionExpandedContentBody';
 
     const AccordionContent = (_a) => {
         var { className = '', children = null, id = '', isHidden = false, isFixed = false, isCustomContent = false, 'aria-label': ariaLabel = '', component } = _a, props = __rest$1(_a, ["className", "children", "id", "isHidden", "isFixed", "isCustomContent", 'aria-label', "component"]);
         return (React__namespace.createElement(AccordionContext.Consumer, null, ({ ContentContainer }) => {
             const Container = component || ContentContainer;
-            return (React__namespace.createElement(Container, Object.assign({ id: id, className: css(styles$1b.accordionExpandedContent, isFixed && styles$1b.modifiers.fixed, !isHidden && styles$1b.modifiers.expanded, className), hidden: isHidden, "aria-label": ariaLabel }, props), isCustomContent ? children : React__namespace.createElement(AccordionExpandedContentBody, null, children)));
+            return (React__namespace.createElement(Container, Object.assign({ id: id, className: css(styles$1c.accordionExpandedContent, isFixed && styles$1c.modifiers.fixed, !isHidden && styles$1c.modifiers.expanded, className), hidden: isHidden, "aria-label": ariaLabel }, props), isCustomContent ? children : React__namespace.createElement(AccordionExpandedContentBody, null, children)));
         }));
     };
     AccordionContent.displayName = 'AccordionContent';
@@ -3986,16 +3986,16 @@
         return (React__namespace.createElement(AccordionContext.Consumer, null, ({ ToggleContainer }) => {
             const Container = component || ToggleContainer;
             return (React__namespace.createElement(Container, null,
-                React__namespace.createElement("button", Object.assign({ id: id, className: css(styles$1b.accordionToggle, isExpanded && styles$1b.modifiers.expanded, className), "aria-expanded": isExpanded, type: "button" }, props),
-                    React__namespace.createElement("span", { className: css(styles$1b.accordionToggleText) }, children),
-                    React__namespace.createElement("span", { className: css(styles$1b.accordionToggleIcon) },
+                React__namespace.createElement("button", Object.assign({ id: id, className: css(styles$1c.accordionToggle, isExpanded && styles$1c.modifiers.expanded, className), "aria-expanded": isExpanded, type: "button" }, props),
+                    React__namespace.createElement("span", { className: css(styles$1c.accordionToggleText) }, children),
+                    React__namespace.createElement("span", { className: css(styles$1c.accordionToggleIcon) },
                         React__namespace.createElement(AngleRightIcon$1, null)))));
         }));
     };
     AccordionToggle.displayName = 'AccordionToggle';
 
     Promise.resolve().then(function () { return actionList; });
-    var styles$1a = {
+    var styles$1b = {
       "actionList": "pf-c-action-list",
       "actionListGroup": "pf-c-action-list__group",
       "modifiers": {
@@ -4005,13 +4005,13 @@
 
     const ActionList = (_a) => {
         var { children, isIconList, className = '' } = _a, props = __rest$1(_a, ["children", "isIconList", "className"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$1a.actionList, isIconList && styles$1a.modifiers.icons, className) }, props), children));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$1b.actionList, isIconList && styles$1b.modifiers.icons, className) }, props), children));
     };
     ActionList.displayName = 'ActionList';
 
     const ActionListGroup = (_a) => {
         var { children, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$1a.actionListGroup, className) }, props), children));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$1b.actionListGroup, className) }, props), children));
     };
     ActionListGroup.displayName = 'ActionListGroup';
 
@@ -4022,7 +4022,7 @@
     ActionListItem.displayName = 'ActionListItem';
 
     Promise.resolve().then(function () { return alert; });
-    var styles$19 = {
+    var styles$1a = {
       "alert": "pf-c-alert",
       "alertAction": "pf-c-alert__action",
       "alertActionGroup": "pf-c-alert__action-group",
@@ -4143,7 +4143,7 @@
     const AlertIcon = (_a) => {
         var { variant, customIcon, className = '' } = _a, props = __rest$1(_a, ["variant", "customIcon", "className"]);
         const Icon = variantIcons$2[variant];
-        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$19.alertIcon, className) }), customIcon || React__namespace.createElement(Icon, null)));
+        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$1a.alertIcon, className) }), customIcon || React__namespace.createElement(Icon, null)));
     };
 
     const AlertContext = React__namespace.createContext(null);
@@ -4156,7 +4156,7 @@
     var maxLines$2 = c_alert__title_max_lines;
 
     Promise.resolve().then(function () { return tooltip; });
-    var styles$18 = {
+    var styles$19 = {
       "modifiers": {
         "top": "pf-m-top",
         "topLeft": "pf-m-top-left",
@@ -4179,13 +4179,13 @@
 
     const TooltipContent = (_a) => {
         var { className, children, isLeftAligned } = _a, props = __rest$1(_a, ["className", "children", "isLeftAligned"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$18.tooltipContent, isLeftAligned && styles$18.modifiers.textAlignLeft, className) }, props), children));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$19.tooltipContent, isLeftAligned && styles$19.modifiers.textAlignLeft, className) }, props), children));
     };
     TooltipContent.displayName = 'TooltipContent';
 
     const TooltipArrow = (_a) => {
         var { className } = _a, props = __rest$1(_a, ["className"]);
-        return React__namespace.createElement("div", Object.assign({ className: css(styles$18.tooltipArrow, className) }, props));
+        return React__namespace.createElement("div", Object.assign({ className: css(styles$19.tooltipArrow, className) }, props));
     };
     TooltipArrow.displayName = 'TooltipArrow';
 
@@ -4285,21 +4285,21 @@
             }, exitDelay);
         };
         const positionModifiers = {
-            top: styles$18.modifiers.top,
-            bottom: styles$18.modifiers.bottom,
-            left: styles$18.modifiers.left,
-            right: styles$18.modifiers.right,
-            'top-start': styles$18.modifiers.topLeft,
-            'top-end': styles$18.modifiers.topRight,
-            'bottom-start': styles$18.modifiers.bottomLeft,
-            'bottom-end': styles$18.modifiers.bottomRight,
-            'left-start': styles$18.modifiers.leftTop,
-            'left-end': styles$18.modifiers.leftBottom,
-            'right-start': styles$18.modifiers.rightTop,
-            'right-end': styles$18.modifiers.rightBottom
+            top: styles$19.modifiers.top,
+            bottom: styles$19.modifiers.bottom,
+            left: styles$19.modifiers.left,
+            right: styles$19.modifiers.right,
+            'top-start': styles$19.modifiers.topLeft,
+            'top-end': styles$19.modifiers.topRight,
+            'bottom-start': styles$19.modifiers.bottomLeft,
+            'bottom-end': styles$19.modifiers.bottomRight,
+            'left-start': styles$19.modifiers.leftTop,
+            'left-end': styles$19.modifiers.leftBottom,
+            'right-start': styles$19.modifiers.rightTop,
+            'right-end': styles$19.modifiers.rightBottom
         };
         const hasCustomMaxWidth = maxWidth !== tooltipMaxWidth.value;
-        const content = (React__namespace.createElement("div", Object.assign({ className: css(styles$18.tooltip, className), role: "tooltip", id: id, style: {
+        const content = (React__namespace.createElement("div", Object.assign({ className: css(styles$19.tooltip, className), role: "tooltip", id: id, style: {
                 maxWidth: hasCustomMaxWidth ? maxWidth : null,
                 opacity,
                 transition: getOpacityTransition(animationDuration)
@@ -4336,7 +4336,7 @@
         var { 'aria-label': ariaLabel, variantLabel, onToggleExpand, isExpanded } = _a, props = __rest$1(_a, ['aria-label', "variantLabel", "onToggleExpand", "isExpanded"]);
         const { title, variantLabel: alertVariantLabel } = React__namespace.useContext(AlertContext);
         return (React__namespace.createElement(Button, Object.assign({ variant: exports.ButtonVariant.plain, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": ariaLabel === '' ? `Toggle ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel }, props),
-            React__namespace.createElement("span", { className: css(styles$19.alertToggleIcon) },
+            React__namespace.createElement("span", { className: css(styles$1a.alertToggleIcon) },
                 React__namespace.createElement(AngleRightIcon$1, { "aria-hidden": "true" }))));
     };
     AlertToggleExpandButton.displayName = 'AlertToggleExpandButton';
@@ -4420,20 +4420,20 @@
         if (dismissed) {
             return null;
         }
-        const Title = (React__namespace.createElement(TitleHeadingLevel, Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css(styles$19.alertTitle, truncateTitle && styles$19.modifiers.truncate) }), getHeadingContent));
-        return (React__namespace.createElement("div", Object.assign({ ref: divRef, className: css(styles$19.alert, isInline && styles$19.modifiers.inline, isPlain && styles$19.modifiers.plain, isExpandable && styles$19.modifiers.expandable, isExpanded && styles$19.modifiers.expanded, styles$19.modifiers[variant], className), "aria-label": ariaLabel }, ouiaProps, (isLiveRegion && {
+        const Title = (React__namespace.createElement(TitleHeadingLevel, Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css(styles$1a.alertTitle, truncateTitle && styles$1a.modifiers.truncate) }), getHeadingContent));
+        return (React__namespace.createElement("div", Object.assign({ ref: divRef, className: css(styles$1a.alert, isInline && styles$1a.modifiers.inline, isPlain && styles$1a.modifiers.plain, isExpandable && styles$1a.modifiers.expandable, isExpanded && styles$1a.modifiers.expanded, styles$1a.modifiers[variant], className), "aria-label": ariaLabel }, ouiaProps, (isLiveRegion && {
             'aria-live': 'polite',
             'aria-atomic': 'false'
         }), { onMouseEnter: myOnMouseEnter, onMouseLeave: myOnMouseLeave }, props),
             isExpandable && (React__namespace.createElement(AlertContext.Provider, { value: { title, variantLabel } },
-                React__namespace.createElement("div", { className: css(styles$19.alertToggle) },
+                React__namespace.createElement("div", { className: css(styles$1a.alertToggle) },
                     React__namespace.createElement(AlertToggleExpandButton, { isExpanded: isExpanded, onToggleExpand: onToggleExpand, "aria-label": toggleAriaLabel })))),
             React__namespace.createElement(AlertIcon, { variant: variant, customIcon: customIcon }),
             isTooltipVisible ? (React__namespace.createElement(Tooltip, { content: getHeadingContent, position: tooltipPosition }, Title)) : (Title),
             actionClose && (React__namespace.createElement(AlertContext.Provider, { value: { title, variantLabel } },
-                React__namespace.createElement("div", { className: css(styles$19.alertAction) }, actionClose))),
-            children && (!isExpandable || (isExpandable && isExpanded)) && (React__namespace.createElement("div", { className: css(styles$19.alertDescription) }, children)),
-            actionLinks && React__namespace.createElement("div", { className: css(styles$19.alertActionGroup) }, actionLinks)));
+                React__namespace.createElement("div", { className: css(styles$1a.alertAction) }, actionClose))),
+            children && (!isExpandable || (isExpandable && isExpanded)) && (React__namespace.createElement("div", { className: css(styles$1a.alertDescription) }, children)),
+            actionLinks && React__namespace.createElement("div", { className: css(styles$1a.alertActionGroup) }, actionLinks)));
     };
     Alert.displayName = 'Alert';
 
@@ -4453,7 +4453,7 @@
     AlertActionLink.displayName = 'AlertActionLink';
 
     Promise.resolve().then(function () { return alertGroup; });
-    var styles$17 = {
+    var styles$18 = {
       "alertGroup": "pf-c-alert-group",
       "alertGroupOverflowButton": "pf-c-alert-group__overflow-button",
       "modifiers": {
@@ -4463,10 +4463,10 @@
 
     const AlertGroupInline = (_a) => {
         var { className, children, isToast, isLiveRegion, onOverflowClick, overflowMessage } = _a, rest = __rest$1(_a, ["className", "children", "isToast", "isLiveRegion", "onOverflowClick", "overflowMessage"]);
-        return (React__namespace.createElement("ul", Object.assign({ "aria-live": isLiveRegion ? 'polite' : null, "aria-atomic": isLiveRegion ? false : null, className: css(styles$17.alertGroup, className, isToast ? styles$17.modifiers.toast : '') }, rest),
+        return (React__namespace.createElement("ul", Object.assign({ "aria-live": isLiveRegion ? 'polite' : null, "aria-atomic": isLiveRegion ? false : null, className: css(styles$18.alertGroup, className, isToast ? styles$18.modifiers.toast : '') }, rest),
             React__namespace.Children.toArray(children).map((Alert, index) => (React__namespace.createElement("li", { key: index }, Alert))),
             overflowMessage && (React__namespace.createElement("li", null,
-                React__namespace.createElement("button", { onClick: onOverflowClick, className: css(styles$17.alertGroupOverflowButton) }, overflowMessage)))));
+                React__namespace.createElement("button", { onClick: onOverflowClick, className: css(styles$18.alertGroupOverflowButton) }, overflowMessage)))));
     };
     AlertGroupInline.displayName = 'AlertGroupInline';
 
@@ -4512,7 +4512,7 @@
     AlertGroup.displayName = 'AlertGroup';
 
     Promise.resolve().then(function () { return appLauncher; });
-    var styles$16 = {
+    var styles$17 = {
       "appLauncher": "pf-c-app-launcher",
       "appLauncherGroup": "pf-c-app-launcher__group",
       "appLauncherGroupTitle": "pf-c-app-launcher__group-title",
@@ -4570,7 +4570,7 @@
     var ThIcon$1 = ThIcon;
 
     Promise.resolve().then(function () { return dropdown; });
-    var styles$15 = {
+    var styles$16 = {
       "badge": "pf-c-badge",
       "check": "pf-c-check",
       "divider": "pf-c-divider",
@@ -4751,12 +4751,12 @@
             return (React__namespace.createElement(DropdownArrowContext.Provider, { value: {
                     keyHandler: this.childKeyHandler,
                     sendRef: this.sendRef
-                } }, component === 'div' ? (React__namespace.createElement(DropdownContext.Consumer, null, ({ onSelect, menuClass }) => (React__namespace.createElement("div", { className: css(menuClass, position === exports.DropdownPosition.right && styles$15.modifiers.alignRight, formatBreakpointMods(alignments, styles$15, 'align-'), className), hidden: !isOpen, onClick: event => onSelect && onSelect(event), ref: setMenuComponentRef }, children)))) : ((isGrouped && (React__namespace.createElement(DropdownContext.Consumer, null, ({ menuClass, menuComponent }) => {
+                } }, component === 'div' ? (React__namespace.createElement(DropdownContext.Consumer, null, ({ onSelect, menuClass }) => (React__namespace.createElement("div", { className: css(menuClass, position === exports.DropdownPosition.right && styles$16.modifiers.alignRight, formatBreakpointMods(alignments, styles$16, 'align-'), className), hidden: !isOpen, onClick: event => onSelect && onSelect(event), ref: setMenuComponentRef }, children)))) : ((isGrouped && (React__namespace.createElement(DropdownContext.Consumer, null, ({ menuClass, menuComponent }) => {
                 const MenuComponent = (menuComponent || 'div');
-                return (React__namespace.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === exports.DropdownPosition.right && styles$15.modifiers.alignRight, formatBreakpointMods(alignments, styles$15, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
+                return (React__namespace.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === exports.DropdownPosition.right && styles$16.modifiers.alignRight, formatBreakpointMods(alignments, styles$16, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
             }))) || (React__namespace.createElement(DropdownContext.Consumer, null, ({ menuClass, menuComponent }) => {
                 const MenuComponent = (menuComponent || component);
-                return (React__namespace.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === exports.DropdownPosition.right && styles$15.modifiers.alignRight, formatBreakpointMods(alignments, styles$15, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
+                return (React__namespace.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === exports.DropdownPosition.right && styles$16.modifiers.alignRight, formatBreakpointMods(alignments, styles$16, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
             })))));
         }
     }
@@ -4771,7 +4771,7 @@
         isGrouped: false,
         setMenuComponentRef: null
     };
-    DropdownMenu.validToggleClasses = [styles$15.dropdownToggle, styles$15.dropdownToggleButton];
+    DropdownMenu.validToggleClasses = [styles$16.dropdownToggle, styles$16.dropdownToggleButton];
     DropdownMenu.focusFirstRef = (refCollection) => {
         if (refCollection && refCollection[0] && refCollection[0].focus) {
             setTimeout(() => refCollection[0].focus());
@@ -4823,8 +4823,8 @@
             return (React__namespace.createElement(DropdownContext.Consumer, null, ({ baseClass, baseComponent, id: contextId, ouiaId, ouiaComponentType, ouiaSafe, alignments }) => {
                 const BaseComponent = baseComponent;
                 const menuContainer = (React__namespace.createElement(DropdownMenu, { setMenuComponentRef: this.setMenuComponentRef, component: component, isOpen: isOpen, position: position, "aria-labelledby": contextId ? `${contextId}-toggle` : id, isGrouped: isGrouped, autoFocus: openedOnEnter && autoFocus, alignments: alignments }, renderedContent));
-                const popperContainer = (React__namespace.createElement("div", { className: css(baseClass, direction === exports.DropdownDirection.up && styles$15.modifiers.top, position === exports.DropdownPosition.right && styles$15.modifiers.alignRight, isOpen && styles$15.modifiers.expanded, className) }, isOpen && menuContainer));
-                const mainContainer = (React__namespace.createElement(BaseComponent, Object.assign({}, props, { className: css(baseClass, direction === exports.DropdownDirection.up && styles$15.modifiers.top, position === exports.DropdownPosition.right && styles$15.modifiers.alignRight, isOpen && styles$15.modifiers.expanded, isFullHeight && styles$15.modifiers.fullHeight, className), ref: this.baseComponentRef }, getOUIAProps(ouiaComponentType, ouiaId, ouiaSafe)),
+                const popperContainer = (React__namespace.createElement("div", { className: css(baseClass, direction === exports.DropdownDirection.up && styles$16.modifiers.top, position === exports.DropdownPosition.right && styles$16.modifiers.alignRight, isOpen && styles$16.modifiers.expanded, className) }, isOpen && menuContainer));
+                const mainContainer = (React__namespace.createElement(BaseComponent, Object.assign({}, props, { className: css(baseClass, direction === exports.DropdownDirection.up && styles$16.modifiers.top, position === exports.DropdownPosition.right && styles$16.modifiers.alignRight, isOpen && styles$16.modifiers.expanded, isFullHeight && styles$16.modifiers.fullHeight, className), ref: this.baseComponentRef }, getOUIAProps(ouiaComponentType, ouiaId, ouiaSafe)),
                     React__namespace.Children.map(toggle, oneToggle => React__namespace.cloneElement(oneToggle, {
                         parentRef: this.baseComponentRef,
                         getMenuRef: this.getMenuComponentRef,
@@ -4870,9 +4870,9 @@
         var { onSelect, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         ref, // Types of Ref are different for React.FunctionComponent vs React.Component
-        ouiaId, ouiaSafe, alignments, contextProps } = _a, props = __rest$1(_a, ["onSelect", "ref", "ouiaId", "ouiaSafe", "alignments", "contextProps"]);
-        return (React__namespace.createElement(DropdownContext.Provider, { value: Object.assign({ onSelect: event => onSelect && onSelect(event), toggleTextClass: styles$15.dropdownToggleText, toggleIconClass: styles$15.dropdownToggleImage, toggleIndicatorClass: styles$15.dropdownToggleIcon, menuClass: styles$15.dropdownMenu, itemClass: styles$15.dropdownMenuItem, toggleClass: styles$15.dropdownToggle, baseClass: styles$15.dropdown, baseComponent: 'div', sectionClass: styles$15.dropdownGroup, sectionTitleClass: styles$15.dropdownGroupTitle, sectionComponent: 'section', disabledClass: styles$15.modifiers.disabled, plainTextClass: styles$15.modifiers.text, ouiaId: useOUIAId(Dropdown.displayName, ouiaId), ouiaSafe, ouiaComponentType: Dropdown.displayName, alignments }, contextProps) },
-            React__namespace.createElement(DropdownWithContext, Object.assign({}, props))));
+        ouiaId, ouiaSafe, alignments, contextProps, menuAppendTo = 'inline' } = _a, props = __rest$1(_a, ["onSelect", "ref", "ouiaId", "ouiaSafe", "alignments", "contextProps", "menuAppendTo"]);
+        return (React__namespace.createElement(DropdownContext.Provider, { value: Object.assign({ onSelect: event => onSelect && onSelect(event), toggleTextClass: styles$16.dropdownToggleText, toggleIconClass: styles$16.dropdownToggleImage, toggleIndicatorClass: styles$16.dropdownToggleIcon, menuClass: styles$16.dropdownMenu, itemClass: styles$16.dropdownMenuItem, toggleClass: styles$16.dropdownToggle, baseClass: styles$16.dropdown, baseComponent: 'div', sectionClass: styles$16.dropdownGroup, sectionTitleClass: styles$16.dropdownGroupTitle, sectionComponent: 'section', disabledClass: styles$16.modifiers.disabled, plainTextClass: styles$16.modifiers.text, ouiaId: useOUIAId(Dropdown.displayName, ouiaId), ouiaSafe, ouiaComponentType: Dropdown.displayName, alignments }, contextProps) },
+            React__namespace.createElement(DropdownWithContext, Object.assign({ menuAppendTo: menuAppendTo }, props))));
     };
     Dropdown.displayName = 'Dropdown';
 
@@ -4956,7 +4956,7 @@
             /* eslint-disable @typescript-eslint/no-unused-vars */
             const _a = this.props, { className, children, isHovered, context, onClick, component, role, isDisabled, isAriaDisabled, isPlainText, index, href, tooltip, tooltipProps, id, componentID, listItemClassName, additionalChild, customChild, enterTriggersArrowDown, icon, autoFocus, styleChildren, description, inoperableEvents } = _a, additionalProps = __rest$1(_a, ["className", "children", "isHovered", "context", "onClick", "component", "role", "isDisabled", "isAriaDisabled", "isPlainText", "index", "href", "tooltip", "tooltipProps", "id", "componentID", "listItemClassName", "additionalChild", "customChild", "enterTriggersArrowDown", "icon", "autoFocus", "styleChildren", "description", "inoperableEvents"]);
             /* eslint-enable @typescript-eslint/no-unused-vars */
-            let classes = css(icon && styles$15.modifiers.icon, isAriaDisabled && styles$15.modifiers.ariaDisabled, className);
+            let classes = css(icon && styles$16.modifiers.icon, isAriaDisabled && styles$16.modifiers.ariaDisabled, className);
             if (component === 'a') {
                 additionalProps['aria-disabled'] = isDisabled || isAriaDisabled;
             }
@@ -4971,17 +4971,17 @@
             const renderDefaultComponent = (tag) => {
                 const Component = tag;
                 const componentContent = description ? (React__namespace.createElement(React__namespace.Fragment, null,
-                    React__namespace.createElement("div", { className: styles$15.dropdownMenuItemMain },
-                        icon && React__namespace.createElement("span", { className: css(styles$15.dropdownMenuItemIcon) }, icon),
+                    React__namespace.createElement("div", { className: styles$16.dropdownMenuItemMain },
+                        icon && React__namespace.createElement("span", { className: css(styles$16.dropdownMenuItemIcon) }, icon),
                         children),
-                    React__namespace.createElement("div", { className: styles$15.dropdownMenuItemDescription }, description))) : (React__namespace.createElement(React__namespace.Fragment, null,
-                    icon && React__namespace.createElement("span", { className: css(styles$15.dropdownMenuItemIcon) }, icon),
+                    React__namespace.createElement("div", { className: styles$16.dropdownMenuItemDescription }, description))) : (React__namespace.createElement(React__namespace.Fragment, null,
+                    icon && React__namespace.createElement("span", { className: css(styles$16.dropdownMenuItemIcon) }, icon),
                     children));
                 return (React__namespace.createElement(Component, Object.assign({}, additionalProps, (isDisabled || isAriaDisabled ? preventedEvents(inoperableEvents) : null), { href: href, ref: this.ref, className: classes, id: componentID }), componentContent));
             };
             return (React__namespace.createElement(DropdownContext.Consumer, null, ({ onSelect, itemClass, disabledClass, plainTextClass }) => {
                 if (this.props.role !== 'separator') {
-                    classes = css(classes, isDisabled && disabledClass, isPlainText && plainTextClass, itemClass, description && styles$15.modifiers.description);
+                    classes = css(classes, isDisabled && disabledClass, isPlainText && plainTextClass, itemClass, description && styles$16.modifiers.description);
                 }
                 if (customChild) {
                     return React__namespace.cloneElement(customChild, {
@@ -5036,7 +5036,7 @@
     DropdownItem.displayName = 'DropdownItem';
 
     Promise.resolve().then(function () { return divider; });
-    var styles$14 = {
+    var styles$15 = {
       "divider": "pf-c-divider",
       "modifiers": {
         "hidden": "pf-m-hidden",
@@ -5111,7 +5111,7 @@
     const Divider = (_a) => {
         var { className, component = exports.DividerVariant.hr, isVertical = false, inset } = _a, props = __rest$1(_a, ["className", "component", "isVertical", "inset"]);
         const Component = component;
-        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$14.divider, isVertical && styles$14.modifiers.vertical, formatBreakpointMods(inset, styles$14), className) }, (component !== 'hr' && { role: 'separator' }), props)));
+        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$15.divider, isVertical && styles$15.modifiers.vertical, formatBreakpointMods(inset, styles$15), className) }, (component !== 'hr' && { role: 'separator' }), props)));
     };
     Divider.displayName = 'Divider';
 
@@ -5140,8 +5140,8 @@
 
     const buttonVariantStyles = {
         default: '',
-        primary: styles$15.modifiers.primary,
-        secondary: styles$15.modifiers.secondary
+        primary: styles$16.modifiers.primary,
+        secondary: styles$16.modifiers.secondary
     };
     class Toggle extends React__namespace.Component {
         constructor() {
@@ -5206,7 +5206,7 @@
             isActive, bubbleEvent, onEnter, parentRef, getMenuRef, 
             /* eslint-enable @typescript-eslint/no-unused-vars */
             id, type } = _a, props = __rest$1(_a, ["className", "children", "isOpen", "isDisabled", "isPlain", "isText", "isPrimary", "isSplitButton", "toggleVariant", "onToggle", 'aria-haspopup', "isActive", "bubbleEvent", "onEnter", "parentRef", "getMenuRef", "id", "type"]);
-            return (React__namespace.createElement(DropdownContext.Consumer, null, ({ toggleClass }) => (React__namespace.createElement("button", Object.assign({}, props, { id: id, ref: this.buttonRef, className: css(isSplitButton ? styles$15.dropdownToggleButton : toggleClass || styles$15.dropdownToggle, isActive && styles$15.modifiers.active, isPlain && styles$15.modifiers.plain, isText && styles$15.modifiers.text, isPrimary && styles$15.modifiers.primary, buttonVariantStyles[toggleVariant], className), type: type || 'button', onClick: event => onToggle(!isOpen, event), "aria-expanded": isOpen, "aria-haspopup": ariaHasPopup, onKeyDown: event => this.onKeyDown(event), disabled: isDisabled }), children))));
+            return (React__namespace.createElement(DropdownContext.Consumer, null, ({ toggleClass }) => (React__namespace.createElement("button", Object.assign({}, props, { id: id, ref: this.buttonRef, className: css(isSplitButton ? styles$16.dropdownToggleButton : toggleClass || styles$16.dropdownToggle, isActive && styles$16.modifiers.active, isPlain && styles$16.modifiers.plain, isText && styles$16.modifiers.text, isPrimary && styles$16.modifiers.primary, buttonVariantStyles[toggleVariant], className), type: type || 'button', onClick: event => onToggle(!isOpen, event), "aria-expanded": isOpen, "aria-haspopup": ariaHasPopup, onKeyDown: event => this.onKeyDown(event), disabled: isDisabled }), children))));
         }
     }
     Toggle.displayName = 'Toggle';
@@ -5247,7 +5247,7 @@
         return (React__namespace.createElement(Toggle, Object.assign({ id: id, className: className, isOpen: isOpen, "aria-label": ariaLabel, parentRef: parentRef, getMenuRef: getMenuRef, isActive: isActive, isPlain: isPlain || true, isDisabled: isDisabled, onToggle: onToggle, bubbleEvent: bubbleEvent }, props),
             React__namespace.createElement(Badge, Object.assign({}, badgeProps),
                 children,
-                React__namespace.createElement("span", { className: css(styles$15.dropdownToggleIcon) },
+                React__namespace.createElement("span", { className: css(styles$16.dropdownToggleIcon) },
                     React__namespace.createElement(CaretDownIcon$1, null)))));
     };
     BadgeToggle.displayName = 'BadgeToggle';
@@ -5293,7 +5293,7 @@
             ToggleIndicator && (React__namespace.createElement("span", { className: css(!splitButtonItems && toggleIndicatorClass) },
                 React__namespace.createElement(ToggleIndicator, null)))))));
         if (splitButtonItems) {
-            return (React__namespace.createElement("div", { className: css(styles$15.dropdownToggle, styles$15.modifiers.splitButton, splitButtonVariant === 'action' && styles$15.modifiers.action, (toggleVariant === 'primary' || isPrimary) && splitButtonVariant === 'action' && styles$15.modifiers.primary, isDisabled && styles$15.modifiers.disabled) },
+            return (React__namespace.createElement("div", { className: css(styles$16.dropdownToggle, styles$16.modifiers.splitButton, splitButtonVariant === 'action' && styles$16.modifiers.action, (toggleVariant === 'primary' || isPrimary) && splitButtonVariant === 'action' && styles$16.modifiers.primary, isDisabled && styles$16.modifiers.disabled) },
                 splitButtonItems,
                 toggle));
         }
@@ -5328,8 +5328,8 @@
             onChange, checked } = _a, 
             /* eslint-enable @typescript-eslint/no-unused-vars */
             props = __rest$1(_a, ["className", "isValid", "isDisabled", "isChecked", "children", "ouiaId", "ouiaSafe", "onChange", "checked"]);
-            const text = children && (React__namespace.createElement("span", { className: css(styles$15.dropdownToggleText, className), "aria-hidden": "true", id: `${props.id}-text` }, children));
-            return (React__namespace.createElement("label", { className: css(styles$15.dropdownToggleCheck, className), htmlFor: props.id },
+            const text = children && (React__namespace.createElement("span", { className: css(styles$16.dropdownToggleText, className), "aria-hidden": "true", id: `${props.id}-text` }, children));
+            return (React__namespace.createElement("label", { className: css(styles$16.dropdownToggleCheck, className), htmlFor: props.id },
                 React__namespace.createElement("input", Object.assign({}, props, (this.calculateChecked() !== undefined && { onChange: this.handleChange }), { type: "checkbox", ref: elem => elem && (elem.indeterminate = isChecked === null), "aria-invalid": !isValid, disabled: isDisabled, checked: this.calculateChecked() }, getOUIAProps(DropdownToggleCheckbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))),
                 text));
         }
@@ -5345,7 +5345,7 @@
     class DropdownToggleAction extends React__namespace.Component {
         render() {
             const _a = this.props, { id, className, onClick, isDisabled, children } = _a, props = __rest$1(_a, ["id", "className", "onClick", "isDisabled", "children"]);
-            return (React__namespace.createElement("button", Object.assign({ id: id, className: css(styles$15.dropdownToggleButton, className), onClick: onClick }, (isDisabled && { disabled: true, 'aria-disabled': true }), props), children));
+            return (React__namespace.createElement("button", Object.assign({ id: id, className: css(styles$16.dropdownToggleButton, className), onClick: onClick }, (isDisabled && { disabled: true, 'aria-disabled': true }), props), children));
         }
     }
     DropdownToggleAction.displayName = 'DropdownToggleAction';
@@ -5371,7 +5371,7 @@
         var { 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         className = '', children } = _a, props = __rest$1(_a, ["className", "children"]);
-        return (React__namespace.createElement("span", Object.assign({ className: css(styles$16.appLauncherMenuItemIcon) }, props), children));
+        return (React__namespace.createElement("span", Object.assign({ className: css(styles$17.appLauncherMenuItemIcon) }, props), children));
     };
     ApplicationLauncherIcon.displayName = 'ApplicationLauncherIcon';
 
@@ -5400,7 +5400,7 @@
         icon && React__namespace.createElement(ApplicationLauncherIcon, null, icon),
         icon ? React__namespace.createElement(ApplicationLauncherText, null, children) : children,
         isExternal && (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement("span", { className: css(styles$16.appLauncherMenuItemExternalIcon) },
+            React__namespace.createElement("span", { className: css(styles$17.appLauncherMenuItemExternalIcon) },
                 React__namespace.createElement(ExternalLinkAltIcon$1, null)),
             React__namespace.createElement("span", { className: css(a11yStyles.screenReader) }, "(opens new window)")))))));
     ApplicationLauncherContent.displayName = 'ApplicationLauncherContent';
@@ -5426,8 +5426,8 @@
     const ApplicationLauncherItem = (_a) => {
         var { className = '', id, children, icon = null, isExternal = false, href, tooltip = null, tooltipProps = null, component = 'a', isFavorite = null, ariaIsFavoriteLabel = 'starred', ariaIsNotFavoriteLabel = 'not starred', customChild, enterTriggersArrowDown = false } = _a, props = __rest$1(_a, ["className", "id", "children", "icon", "isExternal", "href", "tooltip", "tooltipProps", "component", "isFavorite", "ariaIsFavoriteLabel", "ariaIsNotFavoriteLabel", "customChild", "enterTriggersArrowDown"]);
         return (React__namespace.createElement(ApplicationLauncherItemContext.Provider, { value: { isExternal, icon } },
-            React__namespace.createElement(ApplicationLauncherContext.Consumer, null, ({ onFavorite }) => (React__namespace.createElement(DropdownItem, Object.assign({ id: id, component: component, href: href || null, className: css(isExternal && styles$16.modifiers.external, isFavorite !== null && styles$16.modifiers.link, className), listItemClassName: css(onFavorite && styles$16.appLauncherMenuWrapper, isFavorite && styles$16.modifiers.favorite), tooltip: tooltip, tooltipProps: tooltipProps }, (enterTriggersArrowDown === true && { enterTriggersArrowDown }), (customChild && { customChild }), (isFavorite !== null && {
-                additionalChild: (React__namespace.createElement("button", { className: css(styles$16.appLauncherMenuItem, styles$16.modifiers.action), "aria-label": isFavorite ? ariaIsFavoriteLabel : ariaIsNotFavoriteLabel, onClick: () => {
+            React__namespace.createElement(ApplicationLauncherContext.Consumer, null, ({ onFavorite }) => (React__namespace.createElement(DropdownItem, Object.assign({ id: id, component: component, href: href || null, className: css(isExternal && styles$17.modifiers.external, isFavorite !== null && styles$17.modifiers.link, className), listItemClassName: css(onFavorite && styles$17.appLauncherMenuWrapper, isFavorite && styles$17.modifiers.favorite), tooltip: tooltip, tooltipProps: tooltipProps }, (enterTriggersArrowDown === true && { enterTriggersArrowDown }), (customChild && { customChild }), (isFavorite !== null && {
+                additionalChild: (React__namespace.createElement("button", { className: css(styles$17.appLauncherMenuItem, styles$17.modifiers.action), "aria-label": isFavorite ? ariaIsFavoriteLabel : ariaIsNotFavoriteLabel, onClick: () => {
                         onFavorite((id || getUniqueId('app-launcher-option')).replace('favorite-', ''), isFavorite);
                     } },
                     React__namespace.createElement(StarIcon$1, null)))
@@ -5501,7 +5501,7 @@
             super(...arguments);
             this.createSearchBox = () => {
                 const { onSearch, searchPlaceholderText, searchProps } = this.props;
-                return (React__namespace.createElement("div", { key: "search", className: css(styles$16.appLauncherMenuSearch) },
+                return (React__namespace.createElement("div", { key: "search", className: css(styles$17.appLauncherMenuSearch) },
                     React__namespace.createElement(ApplicationLauncherItem, { customChild: React__namespace.createElement("input", Object.assign({ type: "search", className: css(formStyles.formControl), placeholder: searchPlaceholderText, onChange: e => onSearch(e.target.value) }, searchProps)) })));
             };
         }
@@ -5545,15 +5545,15 @@
             return (React__namespace.createElement(ApplicationLauncherContext.Provider, { value: { onFavorite } },
                 React__namespace.createElement(DropdownContext.Provider, { value: {
                         onSelect,
-                        menuClass: styles$16.appLauncherMenu,
-                        itemClass: styles$16.appLauncherMenuItem,
-                        toggleClass: styles$16.appLauncherToggle,
-                        baseClass: styles$16.appLauncher,
+                        menuClass: styles$17.appLauncherMenu,
+                        itemClass: styles$17.appLauncherMenuItem,
+                        toggleClass: styles$17.appLauncherToggle,
+                        baseClass: styles$17.appLauncher,
                         baseComponent: 'nav',
-                        sectionClass: styles$16.appLauncherGroup,
-                        sectionTitleClass: styles$16.appLauncherGroupTitle,
+                        sectionClass: styles$17.appLauncherGroup,
+                        sectionTitleClass: styles$17.appLauncherGroupTitle,
                         sectionComponent: 'section',
-                        disabledClass: styles$16.modifiers.disabled,
+                        disabledClass: styles$17.modifiers.disabled,
                         ouiaComponentType: ApplicationLauncher.displayName
                     } },
                     React__namespace.createElement(DropdownWithContext, Object.assign({}, props, { dropdownItems: renderableItems, isOpen: isOpen, className: className, "aria-label": ariaLabel, menuAppendTo: menuAppendTo, toggle: React__namespace.createElement(DropdownToggle, { id: toggleId, toggleIndicator: null, isOpen: isOpen, onToggle: onToggle, isDisabled: isDisabled, "aria-label": ariaLabel }, toggleIcon), isGrouped: isGrouped })))));
@@ -5581,7 +5581,7 @@
     };
 
     Promise.resolve().then(function () { return avatar; });
-    var styles$13 = {
+    var styles$14 = {
       "avatar": "pf-c-avatar",
       "modifiers": {
         "light": "pf-m-light",
@@ -5595,12 +5595,12 @@
 
     const Avatar = (_a) => {
         var { className = '', src = '', alt, border, size } = _a, props = __rest$1(_a, ["className", "src", "alt", "border", "size"]);
-        return (React__namespace.createElement("img", Object.assign({ src: src, alt: alt, className: css(styles$13.avatar, styles$13.modifiers[size], border === 'light' && styles$13.modifiers.light, border === 'dark' && styles$13.modifiers.dark, className) }, props)));
+        return (React__namespace.createElement("img", Object.assign({ src: src, alt: alt, className: css(styles$14.avatar, styles$14.modifiers[size], border === 'light' && styles$14.modifiers.light, border === 'dark' && styles$14.modifiers.dark, className) }, props)));
     };
     Avatar.displayName = 'Avatar';
 
     Promise.resolve().then(function () { return backToTop; });
-    var styles$12 = {
+    var styles$13 = {
       "backToTop": "pf-c-back-to-top",
       "button": "pf-c-button",
       "modifiers": {
@@ -5667,7 +5667,7 @@
         const handleClick = () => {
             scrollElement.scrollTo({ top: 0, behavior: 'smooth' });
         };
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$12.backToTop, !visible && styles$12.modifiers.hidden, className), ref: innerRef, onClick: handleClick }, props),
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$13.backToTop, !visible && styles$13.modifiers.hidden, className), ref: innerRef, onClick: handleClick }, props),
             React__namespace.createElement(Button, { variant: "primary", icon: React__namespace.createElement(AngleUpIcon$1, { "aria-hidden": "true" }), iconPosition: "right" }, title)));
     };
     const BackToTop = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(BackToTopBase, Object.assign({ innerRef: ref }, props))));
@@ -5716,7 +5716,7 @@
     var cssVarNameFilter = c_background_image_Filter;
 
     Promise.resolve().then(function () { return backgroundImage; });
-    var styles$11 = {
+    var styles$12 = {
       "backgroundImage": "pf-c-background-image",
       "backgroundImageFilter": "pf-c-background-image__filter"
     };
@@ -5750,13 +5750,13 @@
             [cssVarNameLg.name]: getUrlValue('lg'),
             [cssVarNameFilter.name]: `url(#${filterId})`
         };
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$11.backgroundImage, className), style: style }, props),
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$12.backgroundImage, className), style: style }, props),
             React__namespace.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "pf-c-background-image__filter", width: "0", height: "0" }, React__namespace.cloneElement(filter, { id: filterId }))));
     };
     BackgroundImage.displayName = 'BackgroundImage';
 
     Promise.resolve().then(function () { return banner; });
-    var styles$10 = {
+    var styles$11 = {
       "banner": "pf-c-banner",
       "button": "pf-c-button",
       "card": "pf-c-card",
@@ -5773,15 +5773,31 @@
 
     const Banner = (_a) => {
         var { children, className, variant = 'default', isSticky = false } = _a, props = __rest$1(_a, ["children", "className", "variant", "isSticky"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$10.banner, styles$10.modifiers[variant], isSticky && styles$10.modifiers.sticky, className) }, props), children));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$11.banner, styles$11.modifiers[variant], isSticky && styles$11.modifiers.sticky, className) }, props), children));
     };
     Banner.displayName = 'Banner';
 
+    Promise.resolve().then(function () { return brand; });
+    var styles$10 = {
+      "brand": "pf-c-brand",
+      "modifiers": {
+        "picture": "pf-m-picture"
+      }
+    };
+
     const Brand = (_a) => {
-        var { className = '', src = '', alt } = _a, props = __rest$1(_a, ["className", "src", "alt"]);
+        var { className = '', src = '', alt, children, widths, heights, style } = _a, props = __rest$1(_a, ["className", "src", "alt", "children", "widths", "heights", "style"]);
+        if (children !== undefined && widths !== undefined) {
+            style = Object.assign(Object.assign({}, style), setBreakpointCssVars(widths, '--pf-c-brand--Width'));
+        }
+        if (children !== undefined && heights !== undefined) {
+            style = Object.assign(Object.assign({}, style), setBreakpointCssVars(heights, '--pf-c-brand--Height'));
+        }
         return (
         /** the brand component currently contains no styling the 'pf-c-brand' string will be used for the className */
-        React__namespace.createElement("img", Object.assign({}, props, { className: css('pf-c-brand', className), src: src, alt: alt })));
+        children !== undefined ? (React__namespace.createElement("picture", Object.assign({ className: css(styles$10.brand, styles$10.modifiers.picture, className), style: style }, props),
+            children,
+            React__namespace.createElement("img", { src: src, alt: alt }))) : (React__namespace.createElement("img", Object.assign({}, props, { className: css(styles$10.brand, className), src: src, alt: alt }))));
     };
     Brand.displayName = 'Brand';
 
@@ -8715,15 +8731,15 @@
             };
             this.onDocClick = (event) => {
                 const { isOpen, parentRef, onToggle } = this.props;
-                if (isOpen && parentRef && !parentRef.contains(event.target)) {
+                if (isOpen && (parentRef === null || parentRef === void 0 ? void 0 : parentRef.current) && !parentRef.current.contains(event.target)) {
                     onToggle(null, false);
                     this.toggle.current.focus();
                 }
             };
             this.onEscPress = (event) => {
-                const { isOpen, parentRef, onToggle } = this.props;
+                const { isOpen, onToggle } = this.props;
                 const keyCode = event.keyCode || event.which;
-                if (isOpen && keyCode === KEY_CODES.ESCAPE_KEY && parentRef && parentRef.contains(event.target)) {
+                if (isOpen && keyCode === KEY_CODES.ESCAPE_KEY) {
                     onToggle(null, false);
                     this.toggle.current.focus();
                 }
@@ -8954,6 +8970,7 @@
         constructor(props) {
             super(props);
             this.parentRef = React__namespace.createRef();
+            this.popperRef = React__namespace.createRef();
             this.onEnterPressed = (event) => {
                 if (event.charCode === KEY_CODES.ENTER) {
                     this.props.onSearchButtonClick();
@@ -8977,10 +8994,10 @@
                 React__namespace.createElement(ContextSelectorContext.Provider, { value: { onSelect } },
                     React__namespace.createElement(ContextSelectorMenuList, { isOpen: isOpen }, children)),
                 footer))));
-            const popperContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$Q.contextSelector, isOpen && styles$Q.modifiers.expanded, className), ref: this.parentRef }, props), isOpen && menuContainer));
+            const popperContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$Q.contextSelector, isOpen && styles$Q.modifiers.expanded, className), ref: this.popperRef }, props), isOpen && menuContainer));
             const mainContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$Q.contextSelector, isOpen && styles$Q.modifiers.expanded, isFullHeight && styles$Q.modifiers.fullHeight, className), ref: this.parentRef }, getOUIAProps(ContextSelector.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props),
                 screenReaderLabel && (React__namespace.createElement("span", { id: screenReaderLabelId, hidden: true }, screenReaderLabel)),
-                React__namespace.createElement(ContextSelectorToggle, { onToggle: onToggle, isOpen: isOpen, toggleText: toggleText, id: toggleId, parentRef: this.parentRef.current, "aria-labelledby": `${screenReaderLabelId} ${toggleId}`, isPlain: isPlain, isText: isText }),
+                React__namespace.createElement(ContextSelectorToggle, { onToggle: onToggle, isOpen: isOpen, toggleText: toggleText, id: toggleId, parentRef: menuAppendTo === 'inline' ? this.parentRef : this.popperRef, "aria-labelledby": `${screenReaderLabelId} ${toggleId}`, isPlain: isPlain, isText: isText }),
                 isOpen && menuAppendTo === 'inline' && menuContainer));
             const getParentElement = () => {
                 if (this.parentRef && this.parentRef.current) {
@@ -15313,7 +15330,7 @@
             modalBody,
             modalBoxFooter));
         return (React__namespace.createElement(Backdrop, null,
-            React__namespace.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true }, className: css(styles$1g.bullseye) }, modalBox)));
+            React__namespace.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true }, className: css(styles$1h.bullseye) }, modalBox)));
     };
     ModalContent.displayName = 'ModalContent';
 
@@ -15372,10 +15389,10 @@
             target.appendChild(container);
             target.addEventListener('keydown', this.handleEscKeyClick, false);
             if (this.props.isOpen) {
-                target.classList.add(css(styles$1h.backdropOpen));
+                target.classList.add(css(styles$1i.backdropOpen));
             }
             else {
-                target.classList.remove(css(styles$1h.backdropOpen));
+                target.classList.remove(css(styles$1i.backdropOpen));
             }
             if (this.isEmpty(title) && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
                 // eslint-disable-next-line no-console
@@ -15390,11 +15407,11 @@
             const { appendTo } = this.props;
             const target = this.getElement(appendTo);
             if (this.props.isOpen) {
-                target.classList.add(css(styles$1h.backdropOpen));
+                target.classList.add(css(styles$1i.backdropOpen));
                 this.toggleSiblingsFromScreenReaders(true);
             }
             else {
-                target.classList.remove(css(styles$1h.backdropOpen));
+                target.classList.remove(css(styles$1i.backdropOpen));
                 this.toggleSiblingsFromScreenReaders(false);
             }
         }
@@ -15405,7 +15422,7 @@
                 target.removeChild(this.state.container);
             }
             target.removeEventListener('keydown', this.handleEscKeyClick, false);
-            target.classList.remove(css(styles$1h.backdropOpen));
+            target.classList.remove(css(styles$1i.backdropOpen));
         }
         render() {
             const _a = this.props, { 
@@ -16330,7 +16347,7 @@
 
     const TextContent = (_a) => {
         var { children = null, className = '', isVisited = false } = _a, props = __rest$1(_a, ["children", "className", "isVisited"]);
-        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$1e.content, isVisited && styles$1e.modifiers.visited, className) }), children));
+        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$1f.content, isVisited && styles$1f.modifiers.visited, className) }), children));
     };
     TextContent.displayName = 'TextContent';
 
@@ -16352,7 +16369,7 @@
         var { children = null, className = '', component = exports.TextVariants.p, isVisitedLink = false, ouiaId, ouiaSafe = true } = _a, props = __rest$1(_a, ["children", "className", "component", "isVisitedLink", "ouiaId", "ouiaSafe"]);
         const Component = component;
         const ouiaProps = useOUIAProps(Text.displayName, ouiaId, ouiaSafe);
-        return (React__namespace.createElement(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css(isVisitedLink && component === exports.TextVariants.a && styles$1e.modifiers.visited, className) }), children));
+        return (React__namespace.createElement(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css(isVisitedLink && component === exports.TextVariants.a && styles$1f.modifiers.visited, className) }), children));
     };
     Text.displayName = 'Text';
 
@@ -18409,7 +18426,7 @@
             }
         }
         render() {
-            const _a = this.props, { className, children, activeKey, defaultActiveKey, id, isFilled, isSecondary, isVertical, isBox, leftScrollAriaLabel, rightScrollAriaLabel, 'aria-label': ariaLabel, component, ouiaId, ouiaSafe, mountOnEnter, unmountOnExit, usePageInsets, inset, variant, expandable, isExpanded, defaultIsExpanded, toggleText, toggleAriaLabel, onToggle } = _a, props = __rest$1(_a, ["className", "children", "activeKey", "defaultActiveKey", "id", "isFilled", "isSecondary", "isVertical", "isBox", "leftScrollAriaLabel", "rightScrollAriaLabel", 'aria-label', "component", "ouiaId", "ouiaSafe", "mountOnEnter", "unmountOnExit", "usePageInsets", "inset", "variant", "expandable", "isExpanded", "defaultIsExpanded", "toggleText", "toggleAriaLabel", "onToggle"]);
+            const _a = this.props, { className, children, activeKey, defaultActiveKey, id, isFilled, isSecondary, isVertical, isBox, hasBorderBottom, leftScrollAriaLabel, rightScrollAriaLabel, 'aria-label': ariaLabel, component, ouiaId, ouiaSafe, mountOnEnter, unmountOnExit, usePageInsets, inset, variant, expandable, isExpanded, defaultIsExpanded, toggleText, toggleAriaLabel, onToggle } = _a, props = __rest$1(_a, ["className", "children", "activeKey", "defaultActiveKey", "id", "isFilled", "isSecondary", "isVertical", "isBox", "hasBorderBottom", "leftScrollAriaLabel", "rightScrollAriaLabel", 'aria-label', "component", "ouiaId", "ouiaSafe", "mountOnEnter", "unmountOnExit", "usePageInsets", "inset", "variant", "expandable", "isExpanded", "defaultIsExpanded", "toggleText", "toggleAriaLabel", "onToggle"]);
             const { showScrollButtons, disableLeftScrollButton, disableRightScrollButton, shownKeys, uncontrolledActiveKey, uncontrolledIsExpandedLocal } = this.state;
             const filteredChildren = React__namespace.Children.toArray(children)
                 .filter(Boolean)
@@ -18435,7 +18452,7 @@
                     uniqueId,
                     handleTabClick: (...args) => this.handleTabClick(...args)
                 } },
-                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, formatBreakpointMods(inset, styles$h), variantStyle[variant], className) }, getOUIAProps(Tabs.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { id: id && id }, props),
+                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, 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(Button, { onClick: () => toggleTabs(!isExpandedLocal), variant: "plain", "aria-label": toggleAriaLabel, "aria-expanded": isExpandedLocal, id: `${randomId}-button`, "aria-labelledby": `${randomId}-text ${randomId}-button` },
@@ -18462,6 +18479,7 @@
         isSecondary: false,
         isVertical: false,
         isBox: false,
+        hasBorderBottom: true,
         leftScrollAriaLabel: 'Scroll left',
         rightScrollAriaLabel: 'Scroll right',
         component: exports.TabsComponent.div,
@@ -20688,7 +20706,7 @@
     const Bullseye = (_a) => {
         var { children = null, className = '', component = 'div' } = _a, props = __rest$1(_a, ["children", "className", "component"]);
         const Component = component;
-        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$1g.bullseye, className) }, props), children));
+        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$1h.bullseye, className) }, props), children));
     };
     Bullseye.displayName = 'Bullseye';
 
@@ -21637,6 +21655,10 @@
         __proto__: null
     });
 
+    var brand = /*#__PURE__*/Object.freeze({
+        __proto__: null
+    });
+
     var breadcrumb = /*#__PURE__*/Object.freeze({
         __proto__: null
     });