@patternfly/quickstarts 2.0.1 → 2.2.1

package/dist/quickstarts-full.es.js

@@ -86,7 +86,7 @@ function createCommonjsModule(fn) {
 	return fn(module, module.exports), module.exports;
 }
 
-var _default$w = {
+var _default$x = {
   "backdrop": "pf-c-backdrop",
   "backdropOpen": "pf-c-backdrop__open"
 };
@@ -3084,11 +3084,11 @@ const Popper = ({ trigger, popper, popperMatchesTriggerWidth = true, direction =
 };
 Popper.displayName = 'Popper';
 
-var _default$v = {
+var _default$w = {
   "bullseye": "pf-l-bullseye"
 };
 
-var _default$u = {
+var _default$v = {
   "content": "pf-c-content",
   "modifiers": {
     "visited": "pf-m-visited",
@@ -3096,7 +3096,7 @@ var _default$u = {
   }
 };
 
-var _default$t = {
+var _default$u = {
   "modifiers": {
     "4xl": "pf-m-4xl",
     "3xl": "pf-m-3xl",
@@ -3130,11 +3130,11 @@ var headingLevelSizeMap;
 const Title = (_a) => {
     var { className = '', children = '', headingLevel: HeadingLevel, size = headingLevelSizeMap[HeadingLevel], ouiaId, ouiaSafe = true } = _a, props = __rest$2(_a, ["className", "children", "headingLevel", "size", "ouiaId", "ouiaSafe"]);
     const ouiaProps = useOUIAProps$1(Title.displayName, ouiaId, ouiaSafe);
-    return (React.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css(_default$t.title, size && _default$t.modifiers[size], className) }), children));
+    return (React.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css(_default$u.title, size && _default$u.modifiers[size], className) }), children));
 };
 Title.displayName = 'Title';
 
-var _default$s = {
+var _default$t = {
   "button": "pf-c-button",
   "buttonIcon": "pf-c-button__icon",
   "buttonProgress": "pf-c-button__progress",
@@ -3164,7 +3164,7 @@ var _default$s = {
   "spinner": "pf-c-spinner"
 };
 
-var _default$r = {
+var _default$s = {
   "modifiers": {
     "sm": "pf-m-sm",
     "md": "pf-m-md",
@@ -3190,10 +3190,10 @@ const Spinner$1 = (_a) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', isSVG = false, diameter } = _a, props = __rest$2(_a, ["className", "size", 'aria-valuetext', "isSVG", "diameter"]);
     const Component = isSVG ? 'svg' : 'span';
-    return (React.createElement(Component, Object.assign({ className: css(_default$r.spinner, _default$r.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), props), isSVG ? (React.createElement("circle", { className: _default$r.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: css(_default$r.spinnerClipper) }),
-        React.createElement("span", { className: css(_default$r.spinnerLeadBall) }),
-        React.createElement("span", { className: css(_default$r.spinnerTailBall) })))));
+    return (React.createElement(Component, Object.assign({ className: css(_default$s.spinner, _default$s.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), props), isSVG ? (React.createElement("circle", { className: _default$s.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: css(_default$s.spinnerClipper) }),
+        React.createElement("span", { className: css(_default$s.spinnerLeadBall) }),
+        React.createElement("span", { className: css(_default$s.spinnerTailBall) })))));
 };
 Spinner$1.displayName = 'Spinner';
 
@@ -3234,12 +3234,12 @@ const ButtonBase$1 = (_a) => {
             return 0;
         }
     };
-    return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isDisabled || isAriaDisabled, "aria-label": ariaLabel, className: css(_default$s.button, _default$s.modifiers[variant], isBlock && _default$s.modifiers.block, isDisabled && _default$s.modifiers.disabled, isAriaDisabled && _default$s.modifiers.ariaDisabled, isActive && _default$s.modifiers.active, isInline && variant === ButtonVariant$1.link && _default$s.modifiers.inline, isDanger && (variant === ButtonVariant$1.secondary || variant === ButtonVariant$1.link) && _default$s.modifiers.danger, isLoading !== null && _default$s.modifiers.progress, isLoading && _default$s.modifiers.inProgress, isSmall && _default$s.modifiers.small, isLarge && _default$s.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : null, ref: innerRef }, ouiaProps),
-        isLoading && (React.createElement("span", { className: css(_default$s.buttonProgress) },
+    return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isDisabled || isAriaDisabled, "aria-label": ariaLabel, className: css(_default$t.button, _default$t.modifiers[variant], isBlock && _default$t.modifiers.block, isDisabled && _default$t.modifiers.disabled, isAriaDisabled && _default$t.modifiers.ariaDisabled, isActive && _default$t.modifiers.active, isInline && variant === ButtonVariant$1.link && _default$t.modifiers.inline, isDanger && (variant === ButtonVariant$1.secondary || variant === ButtonVariant$1.link) && _default$t.modifiers.danger, isLoading !== null && _default$t.modifiers.progress, isLoading && _default$t.modifiers.inProgress, isSmall && _default$t.modifiers.small, isLarge && _default$t.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : null, ref: innerRef }, ouiaProps),
+        isLoading && (React.createElement("span", { className: css(_default$t.buttonProgress) },
             React.createElement(Spinner$1, { size: spinnerSize$1.md, "aria-valuetext": spinnerAriaValueText }))),
-        variant !== ButtonVariant$1.plain && icon && iconPosition === 'left' && (React.createElement("span", { className: css(_default$s.buttonIcon, _default$s.modifiers.start) }, icon)),
+        variant !== ButtonVariant$1.plain && icon && iconPosition === 'left' && (React.createElement("span", { className: css(_default$t.buttonIcon, _default$t.modifiers.start) }, icon)),
         children,
-        variant !== ButtonVariant$1.plain && icon && iconPosition === 'right' && (React.createElement("span", { className: css(_default$s.buttonIcon, _default$s.modifiers.end) }, icon))));
+        variant !== ButtonVariant$1.plain && icon && iconPosition === 'right' && (React.createElement("span", { className: css(_default$t.buttonIcon, _default$t.modifiers.end) }, icon))));
 };
 const Button$1 = React.forwardRef((props, ref) => (React.createElement(ButtonBase$1, Object.assign({ innerRef: ref }, props))));
 Button$1.displayName = 'Button';
@@ -3577,7 +3577,7 @@ const TimesIcon = createIcon(TimesIconConfig);
 
 const Backdrop = (_a) => {
     var { children = null, className = '' } = _a, props = __rest$2(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({}, props, { className: css(_default$w.backdrop, className) }), children));
+    return (React.createElement("div", Object.assign({}, props, { className: css(_default$x.backdrop, className) }), children));
 };
 Backdrop.displayName = 'Backdrop';
 
@@ -3592,7 +3592,7 @@ const AngleRightIconConfig = {
 
 const AngleRightIcon = createIcon(AngleRightIconConfig);
 
-var _default$q = {
+var _default$r = {
   "alert": "pf-c-alert",
   "alertAction": "pf-c-alert__action",
   "alertActionGroup": "pf-c-alert__action-group",
@@ -3611,7 +3611,7 @@ var _default$q = {
   }
 };
 
-var _default$p = {
+var _default$q = {
   "hidden": "pf-u-hidden",
   "hiddenOnLg": "pf-u-hidden-on-lg",
   "hiddenOnMd": "pf-u-hidden-on-md",
@@ -3697,7 +3697,7 @@ const variantIcons = {
 const AlertIcon = (_a) => {
     var { variant, customIcon, className = '' } = _a, props = __rest$2(_a, ["variant", "customIcon", "className"]);
     const Icon = variantIcons[variant];
-    return (React.createElement("div", Object.assign({}, props, { className: css(_default$q.alertIcon, className) }), customIcon || React.createElement(Icon, null)));
+    return (React.createElement("div", Object.assign({}, props, { className: css(_default$r.alertIcon, className) }), customIcon || React.createElement(Icon, null)));
 };
 
 const AlertContext = React.createContext(null);
@@ -3708,7 +3708,7 @@ const c_alert__title_max_lines = {
   "var": "var(--pf-c-alert__title--max-lines)"
 };
 
-var _default$o = {
+var _default$p = {
   "modifiers": {
     "top": "pf-m-top",
     "bottom": "pf-m-bottom",
@@ -3723,13 +3723,13 @@ var _default$o = {
 
 const TooltipContent = (_a) => {
     var { className, children, isLeftAligned } = _a, props = __rest$2(_a, ["className", "children", "isLeftAligned"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$o.tooltipContent, isLeftAligned && _default$o.modifiers.textAlignLeft, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(_default$p.tooltipContent, isLeftAligned && _default$p.modifiers.textAlignLeft, className) }, props), children));
 };
 TooltipContent.displayName = 'TooltipContent';
 
 const TooltipArrow = (_a) => {
     var { className } = _a, props = __rest$2(_a, ["className"]);
-    return React.createElement("div", Object.assign({ className: css(_default$o.tooltipArrow, className) }, props));
+    return React.createElement("div", Object.assign({ className: css(_default$p.tooltipArrow, className) }, props));
 };
 TooltipArrow.displayName = 'TooltipArrow';
 
@@ -3820,13 +3820,13 @@ const Tooltip = (_a) => {
         }, exitDelay);
     };
     const positionModifiers = {
-        top: _default$o.modifiers.top,
-        bottom: _default$o.modifiers.bottom,
-        left: _default$o.modifiers.left,
-        right: _default$o.modifiers.right
+        top: _default$p.modifiers.top,
+        bottom: _default$p.modifiers.bottom,
+        left: _default$p.modifiers.left,
+        right: _default$p.modifiers.right
     };
     const hasCustomMaxWidth = maxWidth !== c_tooltip_MaxWidth.value;
-    const content = (React.createElement("div", Object.assign({ className: css(_default$o.tooltip, className), role: "tooltip", id: id, style: {
+    const content = (React.createElement("div", Object.assign({ className: css(_default$p.tooltip, className), role: "tooltip", id: id, style: {
             maxWidth: hasCustomMaxWidth ? maxWidth : null,
             opacity,
             transition: getOpacityTransition(animationDuration)
@@ -3871,7 +3871,7 @@ const Alert = (_a) => {
     var { variant = AlertVariant.default, isInline = false, isLiveRegion = false, variantLabel = `${capitalize(variant)} alert:`, 'aria-label': ariaLabel = `${capitalize(variant)} Alert`, actionClose, actionLinks, title, children = '', className = '', ouiaId, ouiaSafe = true, timeout = false, timeoutAnimation = 3000, onTimeout = () => { }, truncateTitle = 0, tooltipPosition, customIcon, onMouseEnter = () => { }, onMouseLeave = () => { } } = _a, props = __rest$2(_a, ["variant", "isInline", "isLiveRegion", "variantLabel", 'aria-label', "actionClose", "actionLinks", "title", "children", "className", "ouiaId", "ouiaSafe", "timeout", "timeoutAnimation", "onTimeout", "truncateTitle", "tooltipPosition", "customIcon", "onMouseEnter", "onMouseLeave"]);
     const ouiaProps = useOUIAProps$1(Alert.displayName, ouiaId, ouiaSafe, variant);
     const getHeadingContent = (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: css(_default$p.screenReader) }, variantLabel),
+        React.createElement("span", { className: css(_default$q.screenReader) }, variantLabel),
         title));
     const titleRef = React.useRef(null);
     const divRef = React.useRef();
@@ -3934,21 +3934,21 @@ const Alert = (_a) => {
     if (dismissed) {
         return null;
     }
-    const Title = (React.createElement("h4", Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css(_default$q.alertTitle, truncateTitle && _default$q.modifiers.truncate) }), getHeadingContent));
-    return (React.createElement("div", Object.assign({ ref: divRef, className: css(_default$q.alert, isInline && _default$q.modifiers.inline, _default$q.modifiers[variant], className), "aria-label": ariaLabel }, ouiaProps, (isLiveRegion && {
+    const Title = (React.createElement("h4", Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css(_default$r.alertTitle, truncateTitle && _default$r.modifiers.truncate) }), getHeadingContent));
+    return (React.createElement("div", Object.assign({ ref: divRef, className: css(_default$r.alert, isInline && _default$r.modifiers.inline, _default$r.modifiers[variant], className), "aria-label": ariaLabel }, ouiaProps, (isLiveRegion && {
         'aria-live': 'polite',
         'aria-atomic': 'false'
     }), { onMouseEnter: myOnMouseEnter, onMouseLeave: myOnMouseLeave }, props),
         React.createElement(AlertIcon, { variant: variant, customIcon: customIcon }),
         isTooltipVisible ? (React.createElement(Tooltip, { content: getHeadingContent, position: tooltipPosition }, Title)) : (Title),
         actionClose && (React.createElement(AlertContext.Provider, { value: { title, variantLabel } },
-            React.createElement("div", { className: css(_default$q.alertAction) }, actionClose))),
-        children && React.createElement("div", { className: css(_default$q.alertDescription) }, children),
-        actionLinks && React.createElement("div", { className: css(_default$q.alertActionGroup) }, actionLinks)));
+            React.createElement("div", { className: css(_default$r.alertAction) }, actionClose))),
+        children && React.createElement("div", { className: css(_default$r.alertDescription) }, children),
+        actionLinks && React.createElement("div", { className: css(_default$r.alertActionGroup) }, actionLinks)));
 };
 Alert.displayName = 'Alert';
 
-var _default$n = {
+var _default$o = {
   "formControl": "pf-c-form-control",
   "modifiers": {
     "success": "pf-m-success",
@@ -3964,7 +3964,7 @@ var _default$n = {
   }
 };
 
-var _default$m = {
+var _default$n = {
   "badge": "pf-c-badge",
   "check": "pf-c-check",
   "divider": "pf-c-divider",
@@ -4046,6 +4046,212 @@ const DropdownArrowContext = React.createContext({
     sendRef: null
 });
 
+class DropdownMenu extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.refsCollection = [];
+        this.componentWillUnmount = () => {
+            document.removeEventListener('keydown', this.onKeyDown);
+        };
+        this.onKeyDown = (event) => {
+            if (!this.props.isOpen ||
+                !Array.from(document.activeElement.classList).find(className => DropdownMenu.validToggleClasses.concat(this.context.toggleClass).includes(className))) {
+                return;
+            }
+            const refs = this.refsCollection;
+            if (event.key === 'ArrowDown') {
+                const firstFocusTargetCollection = refs.find(ref => ref && ref[0] && !ref[0].hasAttribute('disabled'));
+                DropdownMenu.focusFirstRef(firstFocusTargetCollection);
+            }
+            else if (event.key === 'ArrowUp') {
+                const collectionLength = refs.length;
+                const lastFocusTargetCollection = refs.slice(collectionLength - 1, collectionLength);
+                const lastFocusTarget = lastFocusTargetCollection && lastFocusTargetCollection[0];
+                DropdownMenu.focusFirstRef(lastFocusTarget);
+            }
+        };
+        this.childKeyHandler = (index, innerIndex, position, custom = false) => {
+            keyHandler(index, innerIndex, position, this.refsCollection, this.props.isGrouped ? this.refsCollection : React.Children.toArray(this.props.children), custom);
+        };
+        this.sendRef = (index, nodes, isDisabled, isSeparator) => {
+            this.refsCollection[index] = [];
+            nodes.map((node, innerIndex) => {
+                if (!node) {
+                    this.refsCollection[index][innerIndex] = null;
+                }
+                else if (!node.getAttribute) {
+                    // eslint-disable-next-line react/no-find-dom-node
+                    this.refsCollection[index][innerIndex] = ReactDOM.findDOMNode(node);
+                }
+                else if (isSeparator) {
+                    this.refsCollection[index][innerIndex] = null;
+                }
+                else {
+                    this.refsCollection[index][innerIndex] = node;
+                }
+            });
+        };
+    }
+    componentDidMount() {
+        document.addEventListener('keydown', this.onKeyDown);
+        const { autoFocus } = this.props;
+        if (autoFocus) {
+            // Focus first non-disabled element
+            const focusTargetCollection = this.refsCollection.find(ref => ref && ref[0] && !ref[0].hasAttribute('disabled'));
+            const focusTarget = focusTargetCollection && focusTargetCollection[0];
+            if (focusTarget && focusTarget.focus) {
+                setTimeout(() => focusTarget.focus());
+            }
+        }
+    }
+    shouldComponentUpdate() {
+        // reset refsCollection before updating to account for child removal between mounts
+        this.refsCollection = [];
+        return true;
+    }
+    extendChildren() {
+        const { children, isGrouped } = this.props;
+        if (isGrouped) {
+            let index = 0;
+            return React.Children.map(children, groupedChildren => {
+                const group = groupedChildren;
+                const props = {};
+                if (group.props && group.props.children) {
+                    if (Array.isArray(group.props.children)) {
+                        props.children = React.Children.map(group.props.children, option => React.cloneElement(option, {
+                            index: index++
+                        }));
+                    }
+                    else {
+                        props.children = React.cloneElement(group.props.children, {
+                            index: index++
+                        });
+                    }
+                }
+                return React.cloneElement(group, props);
+            });
+        }
+        return React.Children.map(children, (child, index) => React.cloneElement(child, {
+            index
+        }));
+    }
+    render() {
+        const _a = this.props, { className, isOpen, position, children, component, isGrouped, setMenuComponentRef, 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        openedOnEnter, alignments } = _a, props = __rest$2(_a, ["className", "isOpen", "position", "children", "component", "isGrouped", "setMenuComponentRef", "openedOnEnter", "alignments"]);
+        return (React.createElement(DropdownArrowContext.Provider, { value: {
+                keyHandler: this.childKeyHandler,
+                sendRef: this.sendRef
+            } }, component === 'div' ? (React.createElement(DropdownContext.Consumer, null, ({ onSelect, menuClass }) => (React.createElement("div", { className: css(menuClass, position === DropdownPosition.right && _default$n.modifiers.alignRight, formatBreakpointMods(alignments, _default$n, 'align-'), className), hidden: !isOpen, onClick: event => onSelect && onSelect(event), ref: setMenuComponentRef }, children)))) : ((isGrouped && (React.createElement(DropdownContext.Consumer, null, ({ menuClass, menuComponent }) => {
+            const MenuComponent = (menuComponent || 'div');
+            return (React.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === DropdownPosition.right && _default$n.modifiers.alignRight, formatBreakpointMods(alignments, _default$n, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
+        }))) || (React.createElement(DropdownContext.Consumer, null, ({ menuClass, menuComponent }) => {
+            const MenuComponent = (menuComponent || component);
+            return (React.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === DropdownPosition.right && _default$n.modifiers.alignRight, formatBreakpointMods(alignments, _default$n, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
+        })))));
+    }
+}
+DropdownMenu.displayName = 'DropdownMenu';
+DropdownMenu.defaultProps = {
+    className: '',
+    isOpen: true,
+    openedOnEnter: false,
+    autoFocus: true,
+    position: DropdownPosition.left,
+    component: 'ul',
+    isGrouped: false,
+    setMenuComponentRef: null
+};
+DropdownMenu.validToggleClasses = [_default$n.dropdownToggle, _default$n.dropdownToggleButton];
+DropdownMenu.focusFirstRef = (refCollection) => {
+    if (refCollection && refCollection[0] && refCollection[0].focus) {
+        setTimeout(() => refCollection[0].focus());
+    }
+};
+DropdownMenu.contextType = DropdownContext;
+
+class DropdownWithContext extends React.Component {
+    constructor(props) {
+        super(props);
+        this.openedOnEnter = false;
+        this.baseComponentRef = React.createRef();
+        this.menuComponentRef = React.createRef();
+        this.onEnter = () => {
+            this.openedOnEnter = true;
+        };
+        this.setMenuComponentRef = (element) => {
+            this.menuComponentRef = element;
+        };
+        this.getMenuComponentRef = () => this.menuComponentRef;
+        if (props.dropdownItems && props.dropdownItems.length > 0 && props.children) {
+            // eslint-disable-next-line no-console
+            console.error('Children and dropdownItems props have been provided. Only the dropdownItems prop items will be rendered');
+        }
+    }
+    componentDidUpdate() {
+        if (!this.props.isOpen) {
+            this.openedOnEnter = false;
+        }
+    }
+    render() {
+        const _a = this.props, { children, className, direction, dropdownItems, isOpen, isPlain, isGrouped, 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        onSelect, position, toggle, autoFocus, menuAppendTo } = _a, props = __rest$2(_a, ["children", "className", "direction", "dropdownItems", "isOpen", "isPlain", "isGrouped", "onSelect", "position", "toggle", "autoFocus", "menuAppendTo"]);
+        const id = toggle.props.id || `pf-dropdown-toggle-id-${DropdownWithContext.currentId++}`;
+        let component;
+        let renderedContent;
+        let ariaHasPopup = false;
+        if (dropdownItems && dropdownItems.length > 0) {
+            component = 'ul';
+            renderedContent = dropdownItems;
+            ariaHasPopup = true;
+        }
+        else {
+            component = 'div';
+            renderedContent = React.Children.toArray(children);
+        }
+        const openedOnEnter = this.openedOnEnter;
+        return (React.createElement(DropdownContext.Consumer, null, ({ baseClass, baseComponent, id: contextId, ouiaId, ouiaComponentType, ouiaSafe, alignments }) => {
+            const BaseComponent = baseComponent;
+            const menuContainer = (React.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.createElement("div", { className: css(baseClass, direction === DropdownDirection.up && _default$n.modifiers.top, position === DropdownPosition.right && _default$n.modifiers.alignRight, isOpen && _default$n.modifiers.expanded, className) }, isOpen && menuContainer));
+            const mainContainer = (React.createElement(BaseComponent, Object.assign({}, props, { className: css(baseClass, direction === DropdownDirection.up && _default$n.modifiers.top, position === DropdownPosition.right && _default$n.modifiers.alignRight, isOpen && _default$n.modifiers.expanded, className), ref: this.baseComponentRef }, getOUIAProps(ouiaComponentType, ouiaId, ouiaSafe)),
+                React.Children.map(toggle, oneToggle => React.cloneElement(oneToggle, {
+                    parentRef: this.baseComponentRef,
+                    getMenuRef: this.getMenuComponentRef,
+                    isOpen,
+                    id,
+                    isPlain,
+                    'aria-haspopup': ariaHasPopup,
+                    onEnter: () => this.onEnter()
+                })),
+                menuAppendTo === 'inline' && isOpen && menuContainer));
+            const getParentElement = () => {
+                if (this.baseComponentRef && this.baseComponentRef.current) {
+                    return this.baseComponentRef.current.parentElement;
+                }
+                return null;
+            };
+            return menuAppendTo === 'inline' ? (mainContainer) : (React.createElement(Popper, { trigger: mainContainer, popper: popperContainer, direction: direction, position: position, appendTo: menuAppendTo === 'parent' ? getParentElement() : menuAppendTo, isVisible: isOpen }));
+        }));
+    }
+}
+DropdownWithContext.displayName = 'DropdownWithContext';
+// seed for the aria-labelledby ID
+DropdownWithContext.currentId = 0;
+DropdownWithContext.defaultProps = {
+    className: '',
+    dropdownItems: [],
+    isOpen: false,
+    isPlain: false,
+    isGrouped: false,
+    position: DropdownPosition.left,
+    direction: DropdownDirection.down,
+    onSelect: () => undefined,
+    autoFocus: true,
+    menuAppendTo: 'inline'
+};
+
 class InternalDropdownItem extends React.Component {
     constructor() {
         super(...arguments);
@@ -4111,7 +4317,7 @@ class InternalDropdownItem extends React.Component {
         /* eslint-disable @typescript-eslint/no-unused-vars */
         const _a = this.props, { className, children, isHovered, context, onClick, component, role, isDisabled, isPlainText, index, href, tooltip, tooltipProps, id, componentID, listItemClassName, additionalChild, customChild, enterTriggersArrowDown, icon, autoFocus, styleChildren, description, inoperableEvents } = _a, additionalProps = __rest$2(_a, ["className", "children", "isHovered", "context", "onClick", "component", "role", "isDisabled", "isPlainText", "index", "href", "tooltip", "tooltipProps", "id", "componentID", "listItemClassName", "additionalChild", "customChild", "enterTriggersArrowDown", "icon", "autoFocus", "styleChildren", "description", "inoperableEvents"]);
         /* eslint-enable @typescript-eslint/no-unused-vars */
-        let classes = css(icon && _default$m.modifiers.icon, className);
+        let classes = css(icon && _default$n.modifiers.icon, className);
         if (component === 'a') {
             additionalProps['aria-disabled'] = isDisabled;
         }
@@ -4126,17 +4332,17 @@ class InternalDropdownItem extends React.Component {
         const renderDefaultComponent = (tag) => {
             const Component = tag;
             const componentContent = description ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: _default$m.dropdownMenuItemMain },
-                    icon && React.createElement("span", { className: css(_default$m.dropdownMenuItemIcon) }, icon),
+                React.createElement("div", { className: _default$n.dropdownMenuItemMain },
+                    icon && React.createElement("span", { className: css(_default$n.dropdownMenuItemIcon) }, icon),
                     children),
-                React.createElement("div", { className: _default$m.dropdownMenuItemDescription }, description))) : (React.createElement(React.Fragment, null,
-                icon && React.createElement("span", { className: css(_default$m.dropdownMenuItemIcon) }, icon),
+                React.createElement("div", { className: _default$n.dropdownMenuItemDescription }, description))) : (React.createElement(React.Fragment, null,
+                icon && React.createElement("span", { className: css(_default$n.dropdownMenuItemIcon) }, icon),
                 children));
             return (React.createElement(Component, Object.assign({}, additionalProps, (isDisabled ? preventedEvents(inoperableEvents) : null), { href: href, ref: this.ref, className: classes, id: componentID }), componentContent));
         };
         return (React.createElement(DropdownContext.Consumer, null, ({ onSelect, itemClass, disabledClass, plainTextClass }) => {
             if (this.props.role !== 'separator') {
-                classes = css(classes, isDisabled && disabledClass, isPlainText && plainTextClass, itemClass, description && _default$m.modifiers.description);
+                classes = css(classes, isDisabled && disabledClass, isPlainText && plainTextClass, itemClass, description && _default$n.modifiers.description);
             }
             if (customChild) {
                 return React.cloneElement(customChild, {
@@ -4180,7 +4386,17 @@ InternalDropdownItem.defaultProps = {
     inoperableEvents: ['onClick', 'onKeyPress']
 };
 
-var _default$l = {
+const DropdownItem = (_a) => {
+    var { children, className, component = 'a', isDisabled = false, isPlainText = false, isHovered = false, href, tooltip, tooltipProps = {}, listItemClassName, onClick, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref, // Types of Ref are different for React.FC vs React.Component
+    additionalChild, customChild, tabIndex = -1, icon = null, autoFocus, description = null, styleChildren, ouiaId, ouiaSafe } = _a, props = __rest$2(_a, ["children", "className", "component", "isDisabled", "isPlainText", "isHovered", "href", "tooltip", "tooltipProps", "listItemClassName", "onClick", "ref", "additionalChild", "customChild", "tabIndex", "icon", "autoFocus", "description", "styleChildren", "ouiaId", "ouiaSafe"]);
+    const ouiaProps = useOUIAProps$1(DropdownItem.displayName, ouiaId, ouiaSafe);
+    return (React.createElement(DropdownArrowContext.Consumer, null, context => (React.createElement(InternalDropdownItem, Object.assign({ context: context, role: "menuitem", tabIndex: tabIndex, className: className, component: component, isDisabled: isDisabled, isPlainText: isPlainText, isHovered: isHovered, href: href, tooltip: tooltip, tooltipProps: tooltipProps, listItemClassName: listItemClassName, onClick: onClick, additionalChild: additionalChild, customChild: customChild, icon: icon, autoFocus: autoFocus, styleChildren: styleChildren, description: description }, ouiaProps, props), children))));
+};
+DropdownItem.displayName = 'DropdownItem';
+
+var _default$m = {
   "divider": "pf-c-divider",
   "modifiers": {
     "vertical": "pf-m-vertical",
@@ -4244,7 +4460,7 @@ var DividerVariant;
 const Divider = (_a) => {
     var { className, component = DividerVariant.hr, isVertical = false, inset } = _a, props = __rest$2(_a, ["className", "component", "isVertical", "inset"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(_default$l.divider, isVertical && _default$l.modifiers.vertical, formatBreakpointMods(inset, _default$l), className) }, (component !== 'hr' && { role: 'separator' }), props)));
+    return (React.createElement(Component, Object.assign({ className: css(_default$m.divider, isVertical && _default$m.modifiers.vertical, formatBreakpointMods(inset, _default$m), className) }, (component !== 'hr' && { role: 'separator' }), props)));
 };
 Divider.displayName = 'Divider';
 
@@ -4269,7 +4485,87 @@ const CaretDownIconConfig = {
 
 const CaretDownIcon = createIcon(CaretDownIconConfig);
 
-var _default$k = {
+class Toggle extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.buttonRef = React.createRef();
+        this.componentDidMount = () => {
+            document.addEventListener('click', this.onDocClick);
+            document.addEventListener('touchstart', this.onDocClick);
+            document.addEventListener('keydown', this.onEscPress, { capture: true });
+        };
+        this.componentWillUnmount = () => {
+            document.removeEventListener('click', this.onDocClick);
+            document.removeEventListener('touchstart', this.onDocClick);
+            document.removeEventListener('keydown', this.onEscPress, { capture: true });
+        };
+        this.onDocClick = (event) => {
+            const { isOpen, parentRef, onToggle, getMenuRef } = this.props;
+            const menuRef = getMenuRef && getMenuRef();
+            const clickedOnToggle = parentRef && parentRef.current && parentRef.current.contains(event.target);
+            const clickedWithinMenu = menuRef && menuRef.contains && menuRef.contains(event.target);
+            if (isOpen && !(clickedOnToggle || clickedWithinMenu)) {
+                onToggle(false, event);
+            }
+        };
+        this.onEscPress = (event) => {
+            const { parentRef, getMenuRef } = this.props;
+            const keyCode = event.keyCode || event.which;
+            const menuRef = getMenuRef && getMenuRef();
+            const escFromToggle = parentRef && parentRef.current && parentRef.current.contains(event.target);
+            const escFromWithinMenu = menuRef && menuRef.contains && menuRef.contains(event.target);
+            if (this.props.isOpen &&
+                (keyCode === KEY_CODES.ESCAPE_KEY || event.key === 'Tab') &&
+                (escFromToggle || escFromWithinMenu)) {
+                this.props.onToggle(false, event);
+                this.buttonRef.current.focus();
+            }
+        };
+        this.onKeyDown = (event) => {
+            if (event.key === 'Tab' && !this.props.isOpen) {
+                return;
+            }
+            if ((event.key === 'Tab' || event.key === 'Enter' || event.key === ' ') && this.props.isOpen) {
+                if (!this.props.bubbleEvent) {
+                    event.stopPropagation();
+                }
+                event.preventDefault();
+                this.props.onToggle(!this.props.isOpen, event);
+            }
+            else if ((event.key === 'Enter' || event.key === ' ' || event.key === 'ArrowDown') && !this.props.isOpen) {
+                if (!this.props.bubbleEvent) {
+                    event.stopPropagation();
+                }
+                event.preventDefault();
+                this.props.onToggle(!this.props.isOpen, event);
+                this.props.onEnter();
+            }
+        };
+    }
+    render() {
+        const _a = this.props, { className, children, isOpen, isDisabled, isPlain, isPrimary, isSplitButton, onToggle, 'aria-haspopup': ariaHasPopup, 
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        isActive, bubbleEvent, onEnter, parentRef, getMenuRef, 
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+        id, type } = _a, props = __rest$2(_a, ["className", "children", "isOpen", "isDisabled", "isPlain", "isPrimary", "isSplitButton", "onToggle", 'aria-haspopup', "isActive", "bubbleEvent", "onEnter", "parentRef", "getMenuRef", "id", "type"]);
+        return (React.createElement(DropdownContext.Consumer, null, ({ toggleClass }) => (React.createElement("button", Object.assign({}, props, { id: id, ref: this.buttonRef, className: css(isSplitButton ? _default$n.dropdownToggleButton : toggleClass || _default$n.dropdownToggle, isActive && _default$n.modifiers.active, isPlain && _default$n.modifiers.plain, isPrimary && _default$n.modifiers.primary, className), type: type || 'button', onClick: event => onToggle(!isOpen, event), "aria-expanded": isOpen, "aria-haspopup": ariaHasPopup, onKeyDown: event => this.onKeyDown(event), disabled: isDisabled }), children))));
+    }
+}
+Toggle.displayName = 'Toggle';
+Toggle.defaultProps = {
+    className: '',
+    isOpen: false,
+    isActive: false,
+    isDisabled: false,
+    isPlain: false,
+    isPrimary: false,
+    isSplitButton: false,
+    onToggle: () => { },
+    onEnter: () => { },
+    bubbleEvent: false
+};
+
+var _default$l = {
   "badge": "pf-c-badge",
   "modifiers": {
     "read": "pf-m-read",
@@ -4279,10 +4575,34 @@ var _default$k = {
 
 const Badge = (_a) => {
     var { isRead = false, className = '', children = '' } = _a, props = __rest$2(_a, ["isRead", "className", "children"]);
-    return (React.createElement("span", Object.assign({}, props, { className: css(_default$k.badge, (isRead ? _default$k.modifiers.read : _default$k.modifiers.unread), className) }), children));
+    return (React.createElement("span", Object.assign({}, props, { className: css(_default$l.badge, (isRead ? _default$l.modifiers.read : _default$l.modifiers.unread), className) }), children));
 };
 Badge.displayName = 'Badge';
 
+const DropdownToggle = (_a) => {
+    var { id = '', children = null, className = '', isOpen = false, parentRef = null, getMenuRef = null, isDisabled = false, isPlain = false, isPrimary = false, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    isActive = false, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    onToggle = (_isOpen) => undefined, icon = null, toggleIndicator: ToggleIndicator = CaretDownIcon, splitButtonItems, splitButtonVariant = 'checkbox', 'aria-haspopup': ariaHasPopup, ouiaId, ouiaSafe, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref } = _a, // Types of Ref are different for React.FC vs React.Component
+    props = __rest$2(_a, ["id", "children", "className", "isOpen", "parentRef", "getMenuRef", "isDisabled", "isPlain", "isPrimary", "isActive", "onToggle", "icon", "toggleIndicator", "splitButtonItems", "splitButtonVariant", 'aria-haspopup', "ouiaId", "ouiaSafe", "ref"]);
+    const ouiaProps = useOUIAProps$1(DropdownToggle.displayName, ouiaId, ouiaSafe);
+    const toggle = (React.createElement(DropdownContext.Consumer, null, ({ toggleTextClass, toggleIndicatorClass, toggleIconClass }) => (React.createElement(Toggle, Object.assign({}, props, { id: id, className: className, isOpen: isOpen, parentRef: parentRef, getMenuRef: getMenuRef, isActive: isActive, isDisabled: isDisabled, isPlain: isPlain, isPrimary: isPrimary, onToggle: onToggle, "aria-haspopup": ariaHasPopup }, ouiaProps, (splitButtonItems && { isSplitButton: true, 'aria-label': props['aria-label'] || 'Select' })),
+        icon && React.createElement("span", { className: css(toggleIconClass) }, icon),
+        children && React.createElement("span", { className: ToggleIndicator && css(toggleTextClass) }, children),
+        ToggleIndicator && (React.createElement("span", { className: css(!splitButtonItems && toggleIndicatorClass) },
+            React.createElement(ToggleIndicator, null)))))));
+    if (splitButtonItems) {
+        return (React.createElement("div", { className: css(_default$n.dropdownToggle, _default$n.modifiers.splitButton, splitButtonVariant === 'action' && _default$n.modifiers.action, isDisabled && _default$n.modifiers.disabled) },
+            splitButtonItems,
+            toggle));
+    }
+    return toggle;
+};
+DropdownToggle.displayName = 'DropdownToggle';
+
 const ApplicationLauncherSeparator = (_a) => {
     var props = __rest$2(_a, ["children"]);
     return React.createElement(DropdownSeparator, Object.assign({}, props));
@@ -4444,7 +4764,7 @@ class TextInputBase extends React.Component {
         if (customIconDimensions) {
             customIconStyle.backgroundSize = customIconDimensions;
         }
-        return (React.createElement("input", Object.assign({}, props, { onFocus: this.onFocus, onBlur: this.onBlur, className: css(_default$n.formControl, validated === ValidatedOptions.success && _default$n.modifiers.success, validated === ValidatedOptions.warning && _default$n.modifiers.warning, ((iconVariant && iconVariant !== 'search') || customIconUrl) && _default$n.modifiers.icon, iconVariant && _default$n.modifiers[iconVariant], className), onChange: this.handleChange, type: type, value: value, "aria-invalid": validated === ValidatedOptions.error, required: isRequired, disabled: isDisabled, readOnly: isReadOnly, ref: innerRef || this.inputRef }, ((customIconUrl || customIconDimensions) && { style: customIconStyle }))));
+        return (React.createElement("input", Object.assign({}, props, { onFocus: this.onFocus, onBlur: this.onBlur, className: css(_default$o.formControl, validated === ValidatedOptions.success && _default$o.modifiers.success, validated === ValidatedOptions.warning && _default$o.modifiers.warning, ((iconVariant && iconVariant !== 'search') || customIconUrl) && _default$o.modifiers.icon, iconVariant && _default$o.modifiers[iconVariant], className), onChange: this.handleChange, type: type, value: value, "aria-invalid": validated === ValidatedOptions.error, required: isRequired, disabled: isDisabled, readOnly: isReadOnly, ref: innerRef || this.inputRef }, ((customIconUrl || customIconDimensions) && { style: customIconStyle }))));
     }
 }
 TextInputBase.displayName = 'TextInputBase';
@@ -4462,7 +4782,7 @@ TextInputBase.defaultProps = {
 const TextInput = React.forwardRef((props, ref) => (React.createElement(TextInputBase, Object.assign({}, props, { innerRef: ref }))));
 TextInput.displayName = 'TextInput';
 
-var _default$j = {
+var _default$k = {
   "check": "pf-c-check",
   "checkLabel": "pf-c-check__label",
   "chipGroup": "pf-c-chip-group",
@@ -4530,7 +4850,7 @@ const TimesCircleIconConfig = {
 
 const TimesCircleIcon = createIcon(TimesCircleIconConfig);
 
-var _default$i = {
+var _default$j = {
   "form": "pf-c-form",
   "formActions": "pf-c-form__actions",
   "formFieldGroup": "pf-c-form__field-group",
@@ -4577,7 +4897,7 @@ var _default$i = {
   }
 };
 
-var _default$h = {
+var _default$i = {
   "check": "pf-c-check",
   "checkBody": "pf-c-check__body",
   "checkDescription": "pf-c-check__description",
@@ -4688,21 +5008,21 @@ class SelectOption extends React.Component {
             console.error('Please provide an id to use the favorites feature.');
         }
         const generatedId = id || getUniqueId('select-option');
-        const favoriteButton = (onFavorite) => (React.createElement("button", { className: css(_default$j.selectMenuItem, _default$j.modifiers.action, _default$j.modifiers.favoriteAction), "aria-label": isFavorite ? ariaIsFavoriteLabel : ariaIsNotFavoriteLabel, onClick: () => {
+        const favoriteButton = (onFavorite) => (React.createElement("button", { className: css(_default$k.selectMenuItem, _default$k.modifiers.action, _default$k.modifiers.favoriteAction), "aria-label": isFavorite ? ariaIsFavoriteLabel : ariaIsNotFavoriteLabel, onClick: () => {
                 onFavorite(generatedId.replace('favorite-', ''), isFavorite);
             }, onKeyDown: event => {
                 this.onKeyDown(event, 1, () => onFavorite(generatedId.replace('favorite-', '')));
             }, ref: this.favoriteRef },
-            React.createElement("span", { className: css(_default$j.selectMenuItemActionIcon) },
+            React.createElement("span", { className: css(_default$k.selectMenuItemActionIcon) },
                 React.createElement(StarIcon, null))));
-        const itemDisplay = itemCount ? (React.createElement("span", { className: css(_default$j.selectMenuItemRow) },
-            React.createElement("span", { className: css(_default$j.selectMenuItemText) }, children || (value && value.toString && value.toString())),
-            React.createElement("span", { className: css(_default$j.selectMenuItemCount) }, itemCount))) : (children || value.toString());
+        const itemDisplay = itemCount ? (React.createElement("span", { className: css(_default$k.selectMenuItemRow) },
+            React.createElement("span", { className: css(_default$k.selectMenuItemText) }, children || (value && value.toString && value.toString())),
+            React.createElement("span", { className: css(_default$k.selectMenuItemCount) }, itemCount))) : (children || value.toString());
         return (React.createElement(SelectConsumer, null, ({ onSelect, onClose, variant, inputIdPrefix, onFavorite }) => (React.createElement(React.Fragment, null,
-            variant !== SelectVariant.checkbox && (React.createElement("li", { id: generatedId, role: "presentation", className: css(isLoading && _default$j.selectListItem, !isLoad && !isLoading && _default$j.selectMenuWrapper, isFavorite && _default$j.modifiers.favorite, isFocused && _default$j.modifiers.focus, isLoading && _default$j.modifiers.loading), ref: this.liRef },
+            variant !== SelectVariant.checkbox && (React.createElement("li", { id: generatedId, role: "presentation", className: css(isLoading && _default$k.selectListItem, !isLoad && !isLoading && _default$k.selectMenuWrapper, isFavorite && _default$k.modifiers.favorite, isFocused && _default$k.modifiers.focus, isLoading && _default$k.modifiers.loading), ref: this.liRef },
                 isLoading && children,
                 !isLoading && (React.createElement(React.Fragment, null,
-                    React.createElement(Component, Object.assign({}, props, { className: css(_default$j.selectMenuItem, isLoad && _default$j.modifiers.load, isSelected && _default$j.modifiers.selected, isDisabled && _default$j.modifiers.disabled, description && _default$j.modifiers.description, isFavorite !== null && _default$j.modifiers.link, className), onClick: (event) => {
+                    React.createElement(Component, Object.assign({}, props, { className: css(_default$k.selectMenuItem, isLoad && _default$k.modifiers.load, isSelected && _default$k.modifiers.selected, isDisabled && _default$k.modifiers.disabled, description && _default$k.modifiers.description, isFavorite !== null && _default$k.modifiers.link, className), onClick: (event) => {
                             if (isLoad) {
                                 onClick(event);
                                 event.stopPropagation();
@@ -4716,36 +5036,36 @@ class SelectOption extends React.Component {
                             this.onKeyDown(event, 0);
                         }, type: "button" }),
                         description && (React.createElement(React.Fragment, null,
-                            React.createElement("span", { className: css(_default$j.selectMenuItemMain) },
+                            React.createElement("span", { className: css(_default$k.selectMenuItemMain) },
                                 itemDisplay,
-                                isSelected && (React.createElement("span", { className: css(_default$j.selectMenuItemIcon) },
+                                isSelected && (React.createElement("span", { className: css(_default$k.selectMenuItemIcon) },
                                     React.createElement(CheckIcon, { "aria-hidden": true })))),
-                            React.createElement("span", { className: css(_default$j.selectMenuItemDescription) }, description))),
+                            React.createElement("span", { className: css(_default$k.selectMenuItemDescription) }, description))),
                         !description && (React.createElement(React.Fragment, null,
                             itemDisplay,
-                            isSelected && (React.createElement("span", { className: css(_default$j.selectMenuItemIcon) },
+                            isSelected && (React.createElement("span", { className: css(_default$k.selectMenuItemIcon) },
                                 React.createElement(CheckIcon, { "aria-hidden": true })))))),
                     isFavorite !== null && id && favoriteButton(onFavorite))))),
-            variant === SelectVariant.checkbox && isLoad && (React.createElement("button", { className: css(_default$j.selectMenuItem, _default$j.modifiers.load, isFocused && _default$j.modifiers.focus, className), onKeyDown: (event) => {
+            variant === SelectVariant.checkbox && isLoad && (React.createElement("button", { className: css(_default$k.selectMenuItem, _default$k.modifiers.load, isFocused && _default$k.modifiers.focus, className), onKeyDown: (event) => {
                     this.onKeyDown(event, 0, undefined, true);
                 }, onClick: (event) => {
                     onClick(event);
                     event.stopPropagation();
                 }, ref: this.ref }, children || (value && value.toString && value.toString()))),
-            variant === SelectVariant.checkbox && isLoading && (React.createElement("div", { className: css(_default$j.selectListItem, isLoading && _default$j.modifiers.loading, className) }, children)),
-            variant === SelectVariant.checkbox && !isNoResultsOption && !isLoading && !isLoad && (React.createElement("label", Object.assign({}, props, { className: css(_default$h.check, _default$j.selectMenuItem, isDisabled && _default$j.modifiers.disabled, description && _default$j.modifiers.description, className), onKeyDown: (event) => {
+            variant === SelectVariant.checkbox && isLoading && (React.createElement("div", { className: css(_default$k.selectListItem, isLoading && _default$k.modifiers.loading, className) }, children)),
+            variant === SelectVariant.checkbox && !isNoResultsOption && !isLoading && !isLoad && (React.createElement("label", Object.assign({}, props, { className: css(_default$i.check, _default$k.selectMenuItem, isDisabled && _default$k.modifiers.disabled, description && _default$k.modifiers.description, className), onKeyDown: (event) => {
                     this.onKeyDown(event, 0, undefined, true);
                 } }),
-                React.createElement("input", { id: inputId || `${inputIdPrefix}-${value.toString()}`, className: css(_default$h.checkInput), type: "checkbox", onChange: event => {
+                React.createElement("input", { id: inputId || `${inputIdPrefix}-${value.toString()}`, className: css(_default$i.checkInput), type: "checkbox", onChange: event => {
                         if (!isDisabled) {
                             onClick(event);
                             onSelect(event, value);
                         }
                     }, ref: this.ref, checked: isChecked || false, disabled: isDisabled }),
-                React.createElement("span", { className: css(_default$h.checkLabel, isDisabled && _default$j.modifiers.disabled) }, itemDisplay),
-                description && React.createElement("div", { className: css(_default$h.checkDescription) }, description))),
+                React.createElement("span", { className: css(_default$i.checkLabel, isDisabled && _default$k.modifiers.disabled) }, itemDisplay),
+                description && React.createElement("div", { className: css(_default$i.checkDescription) }, description))),
             variant === SelectVariant.checkbox && isNoResultsOption && !isLoading && !isLoad && (React.createElement("div", null,
-                React.createElement(Component, Object.assign({}, props, { className: css(_default$j.selectMenuItem, isSelected && _default$j.modifiers.selected, isDisabled && _default$j.modifiers.disabled, className), role: "option", "aria-selected": isSelected || null, ref: this.ref, onKeyDown: (event) => {
+                React.createElement(Component, Object.assign({}, props, { className: css(_default$k.selectMenuItem, isSelected && _default$k.modifiers.selected, isDisabled && _default$k.modifiers.disabled, className), role: "option", "aria-selected": isSelected || null, ref: this.ref, onKeyDown: (event) => {
                         this.onKeyDown(event, 0, undefined, true);
                     }, type: "button" }), itemDisplay)))))));
     }
@@ -4772,8 +5092,8 @@ SelectOption.defaultProps = {
 
 const SelectGroup = (_a) => {
     var { children = [], className = '', label = '', titleId = '' } = _a, props = __rest$2(_a, ["children", "className", "label", "titleId"]);
-    return (React.createElement(SelectConsumer, null, ({ variant }) => (React.createElement("div", Object.assign({}, props, { className: css(_default$j.selectMenuGroup, className) }),
-        React.createElement("div", { className: css(_default$j.selectMenuGroupTitle), id: titleId, "aria-hidden": true }, label),
+    return (React.createElement(SelectConsumer, null, ({ variant }) => (React.createElement("div", Object.assign({}, props, { className: css(_default$k.selectMenuGroup, className) }),
+        React.createElement("div", { className: css(_default$k.selectMenuGroupTitle), id: titleId, "aria-hidden": true }, label),
         variant === SelectVariant.checkbox ? children : React.createElement("ul", { role: "listbox" }, children)))));
 };
 SelectGroup.displayName = 'SelectGroup';
@@ -4846,7 +5166,7 @@ class SelectMenuWithRef extends React.Component {
                 }
                 return React.cloneElement(group, {
                     titleId: group.props.label && group.props.label.replace(/\W/g, '-'),
-                    children: group.props.children ? (React.createElement("fieldset", { "aria-labelledby": group.props.label && group.props.label.replace(/\W/g, '-'), className: css(_default$j.selectMenuFieldset) }, React.Children.map(group.props.children, (option) => option.type === Divider
+                    children: group.props.children ? (React.createElement("fieldset", { "aria-labelledby": group.props.label && group.props.label.replace(/\W/g, '-'), className: css(_default$k.selectMenuFieldset) }, React.Children.map(group.props.children, (option) => option.type === Divider
                         ? option
                         : React.cloneElement(option, {
                             isChecked: this.checkForValue(option.props.value, checked),
@@ -4871,7 +5191,7 @@ class SelectMenuWithRef extends React.Component {
         const _a = this.props, { children, isCustomContent, className, isExpanded, openedOnEnter, selected, checked, isGrouped, sendRef, keyHandler, maxHeight, noResultsFoundText, createText, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, hasInlineFilter, innerRef, footer, footerRef } = _a, props = __rest$2(_a, ["children", "isCustomContent", "className", "isExpanded", "openedOnEnter", "selected", "checked", "isGrouped", "sendRef", "keyHandler", "maxHeight", "noResultsFoundText", "createText", 'aria-label', 'aria-labelledby', "hasInlineFilter", "innerRef", "footer", "footerRef"]);
         /* eslint-enable @typescript-eslint/no-unused-vars */
         let Component = 'div';
-        const variantProps = Object.assign({ ref: innerRef, className: css(!footer ? _default$j.selectMenu : 'pf-c-select__menu-list', className) }, (maxHeight && { style: { maxHeight, overflow: 'auto' } }));
+        const variantProps = Object.assign({ ref: innerRef, className: css(!footer ? _default$k.selectMenu : 'pf-c-select__menu-list', className) }, (maxHeight && { style: { maxHeight, overflow: 'auto' } }));
         const extendedChildren = () => variant === SelectVariant.checkbox
             ? this.extendCheckboxChildren(children)
             : this.extendChildren(inputIdPrefix);
@@ -4880,10 +5200,10 @@ class SelectMenuWithRef extends React.Component {
         }
         else if (hasInlineFilter) {
             if (React.Children.count(children) === 0) {
-                variantProps.children = React.createElement("fieldset", { className: css(_default$j.selectMenuFieldset) });
+                variantProps.children = React.createElement("fieldset", { className: css(_default$k.selectMenuFieldset) });
             }
             else {
-                variantProps.children = (React.createElement("fieldset", { "aria-label": ariaLabel, "aria-labelledby": (!ariaLabel && ariaLabelledBy) || null, className: css(_default$i.formFieldset) },
+                variantProps.children = (React.createElement("fieldset", { "aria-label": ariaLabel, "aria-labelledby": (!ariaLabel && ariaLabelledBy) || null, className: css(_default$j.formFieldset) },
                     children.shift(),
                     extendedChildren()));
             }
@@ -4899,7 +5219,7 @@ class SelectMenuWithRef extends React.Component {
         }
         return (React.createElement(React.Fragment, null,
             React.createElement(Component, Object.assign({}, variantProps, props)),
-            footer && (React.createElement("div", { className: css(_default$j.selectMenuFooter), ref: footerRef }, footer))));
+            footer && (React.createElement("div", { className: css(_default$k.selectMenuFooter), ref: footerRef }, footer))));
     }
     render() {
         return React.createElement(SelectConsumer, null, context => this.renderSelectMenu(context));
@@ -5051,7 +5371,7 @@ class SelectToggle extends React.Component {
             'aria-haspopup': (variant !== SelectVariant.checkbox && 'listbox') || null
         };
         return (React.createElement(React.Fragment, null,
-            !isTypeahead && (React.createElement("button", Object.assign({}, props, toggleProps, { ref: this.toggle, type: type, className: css(_default$j.selectToggle, isDisabled && _default$j.modifiers.disabled, isPlain && _default$j.modifiers.plain, isActive && _default$j.modifiers.active, className), 
+            !isTypeahead && (React.createElement("button", Object.assign({}, props, toggleProps, { ref: this.toggle, type: type, className: css(_default$k.selectToggle, isDisabled && _default$k.modifiers.disabled, isPlain && _default$k.modifiers.plain, isActive && _default$k.modifiers.active, className), 
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 onClick: _event => {
                     onToggle(!isOpen);
@@ -5060,9 +5380,9 @@ class SelectToggle extends React.Component {
                     }
                 }, onKeyDown: this.onKeyDown, disabled: isDisabled }),
                 children,
-                React.createElement("span", { className: css(_default$j.selectToggleArrow) },
+                React.createElement("span", { className: css(_default$k.selectToggleArrow) },
                     React.createElement(CaretDownIcon, null)))),
-            isTypeahead && (React.createElement("div", Object.assign({}, props, { ref: this.toggle, className: css(_default$j.selectToggle, isDisabled && _default$j.modifiers.disabled, isPlain && _default$j.modifiers.plain, isTypeahead && _default$j.modifiers.typeahead, className), 
+            isTypeahead && (React.createElement("div", Object.assign({}, props, { ref: this.toggle, className: css(_default$k.selectToggle, isDisabled && _default$k.modifiers.disabled, isPlain && _default$k.modifiers.plain, isTypeahead && _default$k.modifiers.typeahead, className), 
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 onClick: _event => {
                     if (!isDisabled) {
@@ -5070,7 +5390,7 @@ class SelectToggle extends React.Component {
                     }
                 }, onKeyDown: this.onKeyDown }),
                 children,
-                React.createElement("button", Object.assign({}, toggleProps, { type: type, className: css(_default$s.button, _default$j.selectToggleButton, _default$j.modifiers.plain), "aria-label": ariaLabel, onClick: _event => {
+                React.createElement("button", Object.assign({}, toggleProps, { type: type, className: css(_default$t.button, _default$k.selectToggleButton, _default$k.modifiers.plain), "aria-label": ariaLabel, onClick: _event => {
                         onToggle(!isOpen);
                         if (isOpen) {
                             onClose();
@@ -5079,7 +5399,7 @@ class SelectToggle extends React.Component {
                     } }, ((variant === SelectVariant.typeahead || variant === SelectVariant.typeaheadMulti) && {
                     tabIndex: -1
                 }), { disabled: isDisabled }),
-                    React.createElement(CaretDownIcon, { className: css(_default$j.selectToggleArrow) }))))));
+                    React.createElement(CaretDownIcon, { className: css(_default$k.selectToggleArrow) }))))));
     }
 }
 SelectToggle.displayName = 'SelectToggle';
@@ -5101,7 +5421,7 @@ SelectToggle.defaultProps = {
     onClickTypeaheadToggleButton: () => { }
 };
 
-var _default$g = {
+var _default$h = {
   "chipGroup": "pf-c-chip-group",
   "chipGroupClose": "pf-c-chip-group__close",
   "chipGroupLabel": "pf-c-chip-group__label",
@@ -5113,7 +5433,7 @@ var _default$g = {
   }
 };
 
-var _default$f = {
+var _default$g = {
   "badge": "pf-c-badge",
   "button": "pf-c-button",
   "chip": "pf-c-chip",
@@ -5132,8 +5452,8 @@ class Chip extends React.Component {
         this.renderOverflowChip = () => {
             const { children, className, onClick, ouiaId } = this.props;
             const Component = this.props.component;
-            return (React.createElement(Component, Object.assign({ onClick: onClick, className: css(_default$f.chip, _default$f.modifiers.overflow, className) }, (this.props.component === 'button' ? { type: 'button' } : {}), getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
-                React.createElement("span", { className: css(_default$f.chipText) }, children)));
+            return (React.createElement(Component, Object.assign({ onClick: onClick, className: css(_default$g.chip, _default$g.modifiers.overflow, className) }, (this.props.component === 'button' ? { type: 'button' } : {}), getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
+                React.createElement("span", { className: css(_default$g.chipText) }, children)));
         };
         this.renderChip = (randomId) => {
             const { children, tooltipPosition } = this.props;
@@ -5155,8 +5475,8 @@ class Chip extends React.Component {
     renderInnerChip(id) {
         const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId } = this.props;
         const Component = component;
-        return (React.createElement(Component, Object.assign({ className: css(_default$f.chip, className) }, (this.state.isTooltipVisible && { tabIndex: 0 }), getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
-            React.createElement("span", { ref: this.span, className: css(_default$f.chipText), id: id }, children),
+        return (React.createElement(Component, Object.assign({ className: css(_default$g.chip, className) }, (this.state.isTooltipVisible && { tabIndex: 0 }), getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
+            React.createElement("span", { ref: this.span, className: css(_default$g.chipText), id: id }, children),
             !isReadOnly && (React.createElement(Button$1, { onClick: onClick, variant: "plain", "aria-label": closeBtnAriaLabel, id: `remove_${id}`, "aria-labelledby": `remove_${id} ${id}`, ouiaId: ouiaId || closeBtnAriaLabel },
                 React.createElement(TimesIcon, { "aria-hidden": "true" })))));
     }
@@ -5201,8 +5521,8 @@ class ChipGroup extends React.Component {
         const { categoryName, tooltipPosition } = this.props;
         const { isTooltipVisible } = this.state;
         return isTooltipVisible ? (React.createElement(Tooltip, { position: tooltipPosition, content: categoryName },
-            React.createElement("span", { tabIndex: 0, ref: this.headingRef, className: css(_default$g.chipGroupLabel), id: id, "aria-label": categoryName },
-                React.createElement("span", { "aria-hidden": "true" }, categoryName)))) : (React.createElement("span", { ref: this.headingRef, className: css(_default$g.chipGroupLabel), "aria-hidden": "true", id: id }, categoryName));
+            React.createElement("span", { tabIndex: 0, ref: this.headingRef, className: css(_default$h.chipGroupLabel), id: id, "aria-label": categoryName },
+                React.createElement("span", { "aria-hidden": "true" }, categoryName)))) : (React.createElement("span", { ref: this.headingRef, className: css(_default$h.chipGroupLabel), "aria-hidden": "true", id: id }, categoryName));
     }
     render() {
         const _a = this.props, { categoryName, children, className, isClosable, closeBtnAriaLabel, 'aria-label': ariaLabel, onClick, onOverflowChipClick, numChips, expandedText, collapsedText, ouiaId, 
@@ -5219,17 +5539,17 @@ class ChipGroup extends React.Component {
             const chipArray = !isOpen
                 ? React.Children.toArray(children).slice(0, numChips)
                 : React.Children.toArray(children);
-            return (React.createElement("div", Object.assign({ className: css(_default$g.chipGroup, className, categoryName && _default$g.modifiers.category) }, getOUIAProps(ChipGroup.displayName, ouiaId)),
-                React.createElement("div", { className: css(_default$g.chipGroupMain) },
+            return (React.createElement("div", Object.assign({ className: css(_default$h.chipGroup, className, categoryName && _default$h.modifiers.category) }, getOUIAProps(ChipGroup.displayName, ouiaId)),
+                React.createElement("div", { className: css(_default$h.chipGroupMain) },
                     categoryName && this.renderLabel(id),
-                    React.createElement("ul", Object.assign({ className: css(_default$g.chipGroupList) }, (categoryName && { 'aria-labelledby': id }), (!categoryName && { 'aria-label': ariaLabel }), { role: "list" }, rest),
-                        chipArray.map((child, i) => (React.createElement("li", { className: css(_default$g.chipGroupListItem), key: i }, child))),
-                        numChildren > numChips && (React.createElement("li", { className: css(_default$g.chipGroupListItem) },
+                    React.createElement("ul", Object.assign({ className: css(_default$h.chipGroupList) }, (categoryName && { 'aria-labelledby': id }), (!categoryName && { 'aria-label': ariaLabel }), { role: "list" }, rest),
+                        chipArray.map((child, i) => (React.createElement("li", { className: css(_default$h.chipGroupListItem), key: i }, child))),
+                        numChildren > numChips && (React.createElement("li", { className: css(_default$h.chipGroupListItem) },
                             React.createElement(Chip, { isOverflowChip: true, onClick: event => {
                                     this.toggleCollapse();
                                     onOverflowChipClick(event);
                                 }, component: "button" }, isOpen ? expandedText : collapsedTextResult))))),
-                isClosable && (React.createElement("div", { className: css(_default$g.chipGroupClose) },
+                isClosable && (React.createElement("div", { className: css(_default$h.chipGroupClose) },
                     React.createElement(Button$1, { variant: "plain", "aria-label": closeBtnAriaLabel, onClick: onClick, id: `remove_group_${id}`, "aria-labelledby": `remove_group_${id} ${id}`, ouiaId: ouiaId || closeBtnAriaLabel },
                         React.createElement(TimesCircleIcon, { "aria-hidden": "true" }))))));
         };
@@ -5718,7 +6038,7 @@ class Select extends React.Component {
             }
         }
         const hasOnClear = onClear !== Select.defaultProps.onClear;
-        const clearBtn = (React.createElement("button", { className: css(_default$s.button, _default$s.modifiers.plain, _default$j.selectToggleClear), onClick: e => {
+        const clearBtn = (React.createElement("button", { className: css(_default$t.button, _default$t.modifiers.plain, _default$k.selectToggleClear), onClick: e => {
                 this.clearSelection(e);
                 onClear(e);
             }, "aria-label": clearSelectionsAriaLabel, type: "button", disabled: isDisabled, ref: this.clearRef, onKeyDown: event => {
@@ -5734,8 +6054,8 @@ class Select extends React.Component {
         }
         if (hasInlineFilter) {
             const filterBox = (React.createElement(React.Fragment, null,
-                React.createElement("div", { key: "inline-filter", className: css(_default$j.selectMenuSearch) },
-                    React.createElement("input", { key: "inline-filter-input", type: "search", className: css(_default$n.formControl, _default$n.modifiers.search), onChange: this.onChange, placeholder: inlineFilterPlaceholderText, onKeyDown: event => {
+                React.createElement("div", { key: "inline-filter", className: css(_default$k.selectMenuSearch) },
+                    React.createElement("input", { key: "inline-filter-input", type: "search", className: css(_default$o.formControl, _default$o.modifiers.search), onChange: this.onChange, placeholder: inlineFilterPlaceholderText, onKeyDown: event => {
                             if (event.key === KeyTypes.ArrowUp) {
                                 this.handleMenuKeys(0, 0, 'up');
                                 event.preventDefault();
@@ -5820,46 +6140,46 @@ class Select extends React.Component {
             }
         }
         const innerMenu = (React.createElement(SelectMenu, Object.assign({}, props, { isGrouped: isGrouped, selected: selections }, variantProps, { openedOnEnter: openedOnEnter, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, sendRef: this.sendRef, keyHandler: this.handleMenuKeys, maxHeight: maxHeight, ref: this.menuComponentRef, footer: footer, footerRef: this.footerRef }), variantChildren));
-        const menuContainer = footer ? React.createElement("div", { className: css(_default$j.selectMenu) },
+        const menuContainer = footer ? React.createElement("div", { className: css(_default$k.selectMenu) },
             " ",
             innerMenu,
             " ") : innerMenu;
-        const popperContainer = (React.createElement("div", Object.assign({ className: css(_default$j.select, isOpen && _default$j.modifiers.expanded, validated === ValidatedOptions.success && _default$j.modifiers.success, validated === ValidatedOptions.warning && _default$j.modifiers.warning, validated === ValidatedOptions.error && _default$j.modifiers.invalid, direction === SelectDirection.up && _default$j.modifiers.top, className) }, (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })), isOpen && menuContainer));
-        const mainContainer = (React.createElement("div", Object.assign({ className: css(_default$j.select, isOpen && _default$j.modifiers.expanded, validated === ValidatedOptions.success && _default$j.modifiers.success, validated === ValidatedOptions.warning && _default$j.modifiers.warning, validated === ValidatedOptions.error && _default$j.modifiers.invalid, direction === SelectDirection.up && _default$j.modifiers.top, className), ref: this.parentRef }, getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })),
+        const popperContainer = (React.createElement("div", Object.assign({ className: css(_default$k.select, isOpen && _default$k.modifiers.expanded, validated === ValidatedOptions.success && _default$k.modifiers.success, validated === ValidatedOptions.warning && _default$k.modifiers.warning, validated === ValidatedOptions.error && _default$k.modifiers.invalid, direction === SelectDirection.up && _default$k.modifiers.top, className) }, (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })), isOpen && menuContainer));
+        const mainContainer = (React.createElement("div", Object.assign({ className: css(_default$k.select, isOpen && _default$k.modifiers.expanded, validated === ValidatedOptions.success && _default$k.modifiers.success, validated === ValidatedOptions.warning && _default$k.modifiers.warning, validated === ValidatedOptions.error && _default$k.modifiers.invalid, direction === SelectDirection.up && _default$k.modifiers.top, className), ref: this.parentRef }, getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })),
             React.createElement(SelectToggle, Object.assign({ id: selectToggleId, parentRef: this.parentRef, menuRef: this.menuComponentRef }, (footer && { footerRef: this.footerRef }), { isOpen: isOpen, isPlain: isPlain, onToggle: this.onToggle, onEnter: this.onEnter, onClose: this.onClose, variant: variant, "aria-labelledby": `${ariaLabelledBy || ''} ${selectToggleId}`, "aria-label": toggleAriaLabel, handleTypeaheadKeys: this.handleTypeaheadKeys, isDisabled: isDisabled, hasClearButton: hasOnClear, hasFooter: footer !== undefined, onClickTypeaheadToggleButton: this.onClickTypeaheadToggleButton }),
-                customContent && (React.createElement("div", { className: css(_default$j.selectToggleWrapper) },
-                    toggleIcon && React.createElement("span", { className: css(_default$j.selectToggleIcon) }, toggleIcon),
-                    React.createElement("span", { className: css(_default$j.selectToggleText) }, placeholderText))),
+                customContent && (React.createElement("div", { className: css(_default$k.selectToggleWrapper) },
+                    toggleIcon && React.createElement("span", { className: css(_default$k.selectToggleIcon) }, toggleIcon),
+                    React.createElement("span", { className: css(_default$k.selectToggleText) }, placeholderText))),
                 variant === SelectVariant.single && !customContent && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: css(_default$j.selectToggleWrapper) },
-                        toggleIcon && React.createElement("span", { className: css(_default$j.selectToggleIcon) }, toggleIcon),
-                        React.createElement("span", { className: css(_default$j.selectToggleText) }, this.getDisplay(selections[0], 'node') || placeholderText || childPlaceholderText)),
+                    React.createElement("div", { className: css(_default$k.selectToggleWrapper) },
+                        toggleIcon && React.createElement("span", { className: css(_default$k.selectToggleIcon) }, toggleIcon),
+                        React.createElement("span", { className: css(_default$k.selectToggleText) }, this.getDisplay(selections[0], 'node') || placeholderText || childPlaceholderText)),
                     hasOnClear && hasAnySelections && clearBtn)),
                 variant === SelectVariant.checkbox && !customContent && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: css(_default$j.selectToggleWrapper) },
-                        toggleIcon && React.createElement("span", { className: css(_default$j.selectToggleIcon) }, toggleIcon),
-                        React.createElement("span", { className: css(_default$j.selectToggleText) }, placeholderText),
-                        !isCheckboxSelectionBadgeHidden && hasAnySelections && (React.createElement("div", { className: css(_default$j.selectToggleBadge) },
-                            React.createElement("span", { className: css(_default$k.badge, _default$k.modifiers.read) }, this.generateSelectedBadge())))),
+                    React.createElement("div", { className: css(_default$k.selectToggleWrapper) },
+                        toggleIcon && React.createElement("span", { className: css(_default$k.selectToggleIcon) }, toggleIcon),
+                        React.createElement("span", { className: css(_default$k.selectToggleText) }, placeholderText),
+                        !isCheckboxSelectionBadgeHidden && hasAnySelections && (React.createElement("div", { className: css(_default$k.selectToggleBadge) },
+                            React.createElement("span", { className: css(_default$l.badge, _default$l.modifiers.read) }, this.generateSelectedBadge())))),
                     hasOnClear && hasAnySelections && clearBtn)),
                 variant === SelectVariant.typeahead && !customContent && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: css(_default$j.selectToggleWrapper) },
-                        toggleIcon && React.createElement("span", { className: css(_default$j.selectToggleIcon) }, toggleIcon),
-                        React.createElement("input", { className: css(_default$n.formControl, _default$j.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-typeahead`, "aria-label": typeAheadAriaLabel, placeholder: placeholderText, value: typeaheadInputValue !== null
+                    React.createElement("div", { className: css(_default$k.selectToggleWrapper) },
+                        toggleIcon && React.createElement("span", { className: css(_default$k.selectToggleIcon) }, toggleIcon),
+                        React.createElement("input", { className: css(_default$o.formControl, _default$k.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-typeahead`, "aria-label": typeAheadAriaLabel, placeholder: placeholderText, value: typeaheadInputValue !== null
                                 ? typeaheadInputValue
                                 : this.getDisplay(selections[0], 'text') || '', type: "text", onClick: this.onClick, onChange: this.onChange, autoComplete: "off", disabled: isDisabled, ref: this.inputRef })),
                     hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn)),
                 variant === SelectVariant.typeaheadMulti && !customContent && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: css(_default$j.selectToggleWrapper) },
-                        toggleIcon && React.createElement("span", { className: css(_default$j.selectToggleIcon) }, toggleIcon),
+                    React.createElement("div", { className: css(_default$k.selectToggleWrapper) },
+                        toggleIcon && React.createElement("span", { className: css(_default$k.selectToggleIcon) }, toggleIcon),
                         selections && Array.isArray(selections) && selections.length > 0 && selectedChips,
-                        React.createElement("input", { className: css(_default$n.formControl, _default$j.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === ValidatedOptions.error, placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: "off", disabled: isDisabled, ref: this.inputRef })),
+                        React.createElement("input", { className: css(_default$o.formControl, _default$k.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === ValidatedOptions.error, placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: "off", disabled: isDisabled, ref: this.inputRef })),
                     hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn)),
-                validated === ValidatedOptions.success && (React.createElement("span", { className: css(_default$j.selectToggleStatusIcon) },
+                validated === ValidatedOptions.success && (React.createElement("span", { className: css(_default$k.selectToggleStatusIcon) },
                     React.createElement(CheckCircleIcon$1, { "aria-hidden": "true" }))),
-                validated === ValidatedOptions.error && (React.createElement("span", { className: css(_default$j.selectToggleStatusIcon) },
+                validated === ValidatedOptions.error && (React.createElement("span", { className: css(_default$k.selectToggleStatusIcon) },
                     React.createElement(ExclamationCircleIcon$1, { "aria-hidden": "true" }))),
-                validated === ValidatedOptions.warning && (React.createElement("span", { className: css(_default$j.selectToggleStatusIcon) },
+                validated === ValidatedOptions.warning && (React.createElement("span", { className: css(_default$k.selectToggleStatusIcon) },
                     React.createElement(ExclamationTriangleIcon, { "aria-hidden": "true" })))),
             isOpen && menuAppendTo === 'inline' && menuContainer));
         const getParentElement = () => {
@@ -5926,7 +6246,7 @@ const ArrowRightIconConfig = {
 
 const ArrowRightIcon$1 = createIcon(ArrowRightIconConfig);
 
-var _default$e = {
+var _default$f = {
   "card": "pf-c-card",
   "cardActions": "pf-c-card__actions",
   "cardBody": "pf-c-card__body",
@@ -5977,7 +6297,7 @@ const SearchIconConfig = {
 
 const SearchIcon$1 = createIcon(SearchIconConfig);
 
-var _default$d = {
+var _default$e = {
   "formControl": "pf-c-form-control",
   "inputGroup": "pf-c-input-group",
   "inputGroupText": "pf-c-input-group__text",
@@ -6005,7 +6325,7 @@ class FormSelect extends React.Component {
         /* find selected option and get placeholder flag */
         const selectedOption = React.Children.toArray(children).find((option) => option.props.value === value);
         const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder;
-        return (React.createElement("select", Object.assign({}, props, { className: css(_default$n.formControl, className, validated === ValidatedOptions.success && _default$n.modifiers.success, validated === ValidatedOptions.warning && _default$n.modifiers.warning, isSelectedPlaceholder && _default$n.modifiers.placeholder), "aria-invalid": validated === ValidatedOptions.error }, getOUIAProps(FormSelect.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { onChange: this.handleChange, disabled: isDisabled, required: isRequired, value: value }), children));
+        return (React.createElement("select", Object.assign({}, props, { className: css(_default$o.formControl, className, validated === ValidatedOptions.success && _default$o.modifiers.success, validated === ValidatedOptions.warning && _default$o.modifiers.warning, isSelectedPlaceholder && _default$o.modifiers.placeholder), "aria-invalid": validated === ValidatedOptions.error }, getOUIAProps(FormSelect.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { onChange: this.handleChange, disabled: isDisabled, required: isRequired, value: value }), children));
     }
 }
 FormSelect.displayName = 'FormSelect';
@@ -6066,7 +6386,7 @@ class TextAreaBase extends React.Component {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         props = __rest$2(_a, ["className", "value", "validated", "isRequired", "isDisabled", "isReadOnly", "resizeOrientation", "innerRef", "readOnly", "disabled", "autoResize", "onChange"]);
         const orientation = `resize${capitalize(resizeOrientation)}`;
-        return (React.createElement("textarea", Object.assign({ className: css(_default$n.formControl, className, resizeOrientation !== TextAreResizeOrientation.both && _default$n.modifiers[orientation], validated === ValidatedOptions.success && _default$n.modifiers.success, validated === ValidatedOptions.warning && _default$n.modifiers.warning), onChange: this.handleChange }, (typeof this.props.defaultValue !== 'string' && { value }), { "aria-invalid": validated === ValidatedOptions.error, required: isRequired, disabled: isDisabled || disabled, readOnly: isReadOnly || readOnly, ref: innerRef }, props)));
+        return (React.createElement("textarea", Object.assign({ className: css(_default$o.formControl, className, resizeOrientation !== TextAreResizeOrientation.both && _default$o.modifiers[orientation], validated === ValidatedOptions.success && _default$o.modifiers.success, validated === ValidatedOptions.warning && _default$o.modifiers.warning), onChange: this.handleChange }, (typeof this.props.defaultValue !== 'string' && { value }), { "aria-invalid": validated === ValidatedOptions.error, required: isRequired, disabled: isDisabled || disabled, readOnly: isReadOnly || readOnly, ref: innerRef }, props)));
     }
 }
 TextAreaBase.displayName = 'TextArea';
@@ -6086,7 +6406,7 @@ const InputGroup = (_a) => {
     var { className = '', children } = _a, props = __rest$2(_a, ["className", "children"]);
     const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
     const idItem = React.Children.toArray(children).find((child) => !formCtrls.includes(child.type.displayName) && child.props.id);
-    return (React.createElement("div", Object.assign({ className: css(_default$d.inputGroup, className) }, props), idItem
+    return (React.createElement("div", Object.assign({ className: css(_default$e.inputGroup, className) }, props), idItem
         ? React.Children.map(children, (child) => formCtrls.includes(child.type.displayName)
             ? React.cloneElement(child, { 'aria-describedby': idItem.props.id })
             : child)
@@ -6094,7 +6414,7 @@ const InputGroup = (_a) => {
 };
 InputGroup.displayName = 'InputGroup';
 
-var _default$c = {
+var _default$d = {
   "button": "pf-c-button",
   "modifiers": {
     "noPadding": "pf-m-no-padding",
@@ -6114,13 +6434,13 @@ var _default$c = {
 
 const PopoverContent = (_a) => {
     var { className = null, children } = _a, props = __rest$2(_a, ["className", "children"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$c.popoverContent, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(_default$d.popoverContent, className) }, props), children));
 };
 PopoverContent.displayName = 'PopoverContent';
 
 const PopoverBody = (_a) => {
     var { children, id } = _a, props = __rest$2(_a, ["children", "id"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$c.popoverBody), id: id }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(_default$d.popoverBody), id: id }, props), children));
 };
 PopoverBody.displayName = 'PopoverBody';
 
@@ -6132,7 +6452,7 @@ PopoverHeader.displayName = 'PopoverHeader';
 
 const PopoverFooter = (_a) => {
     var { children, className = '' } = _a, props = __rest$2(_a, ["children", "className"]);
-    return (React.createElement("footer", Object.assign({ className: css(_default$c.popoverFooter, className) }, props), children));
+    return (React.createElement("footer", Object.assign({ className: css(_default$d.popoverFooter, className) }, props), children));
 };
 PopoverFooter.displayName = 'PopoverFooter';
 
@@ -6153,7 +6473,7 @@ PopoverCloseButton.displayName = 'PopoverCloseButton';
 
 const PopoverArrow = (_a) => {
     var { className = '' } = _a, props = __rest$2(_a, ["className"]);
-    return React.createElement("div", Object.assign({ className: css(_default$c.popoverArrow, className) }, props));
+    return React.createElement("div", Object.assign({ className: css(_default$d.popoverArrow, className) }, props));
 };
 PopoverArrow.displayName = 'PopoverArrow';
 
@@ -6239,10 +6559,10 @@ const Popover = (_a) => {
         }, 0);
     };
     const positionModifiers = {
-        top: _default$c.modifiers.top,
-        bottom: _default$c.modifiers.bottom,
-        left: _default$c.modifiers.left,
-        right: _default$c.modifiers.right
+        top: _default$d.modifiers.top,
+        bottom: _default$d.modifiers.bottom,
+        left: _default$d.modifiers.left,
+        right: _default$d.modifiers.right
     };
     const hasCustomMinWidth = minWidth !== c_popover_MinWidth.value;
     const hasCustomMaxWidth = maxWidth !== c_popover_MaxWidth.value;
@@ -6338,7 +6658,7 @@ const Popover = (_a) => {
                 }
                 return node;
             }
-        }, preventScrollOnDeactivate: true, className: css(_default$c.popover, hasNoPadding && _default$c.modifiers.noPadding, hasAutoWidth && _default$c.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
+        }, preventScrollOnDeactivate: true, className: css(_default$d.popover, hasNoPadding && _default$d.modifiers.noPadding, hasAutoWidth && _default$d.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
             minWidth: hasCustomMinWidth ? minWidth : null,
             maxWidth: hasCustomMaxWidth ? maxWidth : null,
             opacity,
@@ -6354,7 +6674,7 @@ const Popover = (_a) => {
 };
 Popover.displayName = 'Popover';
 
-var _default$b = {
+var _default$c = {
   "drawer": "pf-c-drawer",
   "drawerActions": "pf-c-drawer__actions",
   "drawerBody": "pf-c-drawer__body",
@@ -6431,7 +6751,7 @@ const Drawer = (_a) => {
     var { className = '', children, isExpanded = false, isInline = false, isStatic = false, position = 'right', onExpand = () => { } } = _a, props = __rest$2(_a, ["className", "children", "isExpanded", "isInline", "isStatic", "position", "onExpand"]);
     const drawerRef = React.useRef();
     return (React.createElement(DrawerContext.Provider, { value: { isExpanded, isStatic, onExpand, position, drawerRef } },
-        React.createElement("div", Object.assign({ className: css(_default$b.drawer, isExpanded && _default$b.modifiers.expanded, isInline && _default$b.modifiers.inline, isStatic && _default$b.modifiers.static, position === 'left' && _default$b.modifiers.panelLeft, position === 'bottom' && _default$b.modifiers.panelBottom, className), ref: drawerRef }, props), children)));
+        React.createElement("div", Object.assign({ className: css(_default$c.drawer, isExpanded && _default$c.modifiers.expanded, isInline && _default$c.modifiers.inline, isStatic && _default$c.modifiers.static, position === 'left' && _default$c.modifiers.panelLeft, position === 'bottom' && _default$c.modifiers.panelBottom, className), ref: drawerRef }, props), children)));
 };
 Drawer.displayName = 'Drawer';
 
@@ -6439,7 +6759,7 @@ const DrawerActions = (_a) => {
     var { 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', children } = _a, props = __rest$2(_a, ["className", "children"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$b.drawerActions, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(_default$c.drawerActions, className) }, props), children));
 };
 DrawerActions.displayName = 'DrawerActions';
 
@@ -6447,7 +6767,7 @@ const DrawerCloseButton = (_a) => {
     var { 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', onClose = () => undefined, 'aria-label': ariaLabel = 'Close drawer panel' } = _a, props = __rest$2(_a, ["className", "onClose", 'aria-label']);
-    return (React.createElement("div", Object.assign({ className: css(_default$b.drawerClose, className) }, props),
+    return (React.createElement("div", Object.assign({ className: css(_default$c.drawerClose, className) }, props),
         React.createElement(Button$1, { variant: "plain", onClick: onClose, "aria-label": ariaLabel },
             React.createElement(TimesIcon, null))));
 };
@@ -6457,7 +6777,7 @@ const DrawerMain = (_a) => {
     var { 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', children } = _a, props = __rest$2(_a, ["className", "children"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$b.drawerMain, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(_default$c.drawerMain, className) }, props), children));
 };
 DrawerMain.displayName = 'DrawerMain';
 
@@ -6466,7 +6786,7 @@ const DrawerContent = (_a) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', children, panelContent, colorVariant = DrawerColorVariant.default } = _a, props = __rest$2(_a, ["className", "children", "panelContent", "colorVariant"]);
     return (React.createElement(DrawerMain, null,
-        React.createElement("div", Object.assign({ className: css(_default$b.drawerContent, colorVariant === DrawerColorVariant.light200 && _default$b.modifiers.light_200, className) }, props), children),
+        React.createElement("div", Object.assign({ className: css(_default$c.drawerContent, colorVariant === DrawerColorVariant.light200 && _default$c.modifiers.light_200, className) }, props), children),
         panelContent));
 };
 DrawerContent.displayName = 'DrawerContent';
@@ -6475,7 +6795,7 @@ const DrawerContentBody = (_a) => {
     var { 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', children, hasPadding = false } = _a, props = __rest$2(_a, ["className", "children", "hasPadding"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$b.drawerBody, hasPadding && _default$b.modifiers.padding, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(_default$c.drawerBody, hasPadding && _default$c.modifiers.padding, className) }, props), children));
 };
 DrawerContentBody.displayName = 'DrawerContentBody';
 
@@ -6483,7 +6803,7 @@ const DrawerPanelBody = (_a) => {
     var { 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', children, hasNoPadding = false } = _a, props = __rest$2(_a, ["className", "children", "hasNoPadding"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$b.drawerBody, hasNoPadding && _default$b.modifiers.noPadding, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(_default$c.drawerBody, hasNoPadding && _default$c.modifiers.noPadding, className) }, props), children));
 };
 DrawerPanelBody.displayName = 'DrawerPanelBody';
 
@@ -6492,7 +6812,7 @@ const DrawerHead = (_a) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', children, hasNoPadding = false } = _a, props = __rest$2(_a, ["className", "children", "hasNoPadding"]);
     return (React.createElement(DrawerPanelBody, { hasNoPadding: hasNoPadding },
-        React.createElement("div", Object.assign({ className: css(_default$b.drawerHead, className) }, props), children)));
+        React.createElement("div", Object.assign({ className: css(_default$c.drawerHead, className) }, props), children)));
 };
 DrawerHead.displayName = 'DrawerHead';
 
@@ -6526,7 +6846,7 @@ const DrawerPanelContent = (_a) => {
         e.preventDefault();
         document.addEventListener('mousemove', callbackMouseMove);
         document.addEventListener('mouseup', callbackMouseUp);
-        drawerRef.current.classList.add(css(_default$b.modifiers.resizing));
+        drawerRef.current.classList.add(css(_default$c.modifiers.resizing));
         isResizing = true;
         setInitialVals = true;
     };
@@ -6573,7 +6893,7 @@ const DrawerPanelContent = (_a) => {
         if (!isResizing) {
             return;
         }
-        drawerRef.current.classList.remove(css(_default$b.modifiers.resizing));
+        drawerRef.current.classList.remove(css(_default$c.modifiers.resizing));
         isResizing = false;
         onResize && onResize(currWidth, id);
         setInitialVals = true;
@@ -6652,7 +6972,7 @@ const DrawerPanelContent = (_a) => {
     if (maxSize) {
         boundaryCssVars['--pf-c-drawer__panel--md--FlexBasis--max'] = maxSize;
     }
-    return (React.createElement("div", Object.assign({ id: id, className: css(_default$b.drawerPanel, isResizable && _default$b.modifiers.resizable, hasNoBorder && _default$b.modifiers.noBorder, formatBreakpointMods(widths, _default$b), colorVariant === DrawerColorVariant.light200 && _default$b.modifiers.light_200, className), ref: panel, onTransitionEnd: ev => {
+    return (React.createElement("div", Object.assign({ id: id, className: css(_default$c.drawerPanel, isResizable && _default$c.modifiers.resizable, hasNoBorder && _default$c.modifiers.noBorder, formatBreakpointMods(widths, _default$c), colorVariant === DrawerColorVariant.light200 && _default$c.modifiers.light_200, className), ref: panel, onTransitionEnd: ev => {
             if (!hidden && ev.nativeEvent.propertyName === 'transform') {
                 onExpand();
             }
@@ -6661,14 +6981,14 @@ const DrawerPanelContent = (_a) => {
         style: boundaryCssVars
     }), props), isExpandedInternal && (React.createElement(React.Fragment, null,
         isResizable && (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: css(_default$b.drawerSplitter, position !== 'bottom' && _default$b.modifiers.vertical), role: "separator", tabIndex: 0, "aria-orientation": position === 'bottom' ? 'horizontal' : 'vertical', "aria-label": resizeAriaLabel, "aria-describedby": resizeAriaDescribedBy, onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart },
-                React.createElement("div", { className: css(_default$b.drawerSplitterHandle), "aria-hidden": true })),
-            React.createElement("div", { className: css(_default$b.drawerPanelMain) }, children))),
+            React.createElement("div", { className: css(_default$c.drawerSplitter, position !== 'bottom' && _default$c.modifiers.vertical), role: "separator", tabIndex: 0, "aria-orientation": position === 'bottom' ? 'horizontal' : 'vertical', "aria-label": resizeAriaLabel, "aria-describedby": resizeAriaDescribedBy, onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart },
+                React.createElement("div", { className: css(_default$c.drawerSplitterHandle), "aria-hidden": true })),
+            React.createElement("div", { className: css(_default$c.drawerPanelMain) }, children))),
         !isResizable && children))));
 };
 DrawerPanelContent.displayName = 'DrawerPanelContent';
 
-var _default$a = {
+var _default$b = {
   "button": "pf-c-button",
   "emptyState": "pf-c-empty-state",
   "emptyStateBody": "pf-c-empty-state__body",
@@ -6698,20 +7018,20 @@ var EmptyStateVariant;
 })(EmptyStateVariant || (EmptyStateVariant = {}));
 const EmptyState = (_a) => {
     var { children, className = '', variant = EmptyStateVariant.full, isFullHeight } = _a, props = __rest$2(_a, ["children", "className", "variant", "isFullHeight"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$a.emptyState, variant === 'xs' && _default$a.modifiers.xs, variant === 'small' && _default$a.modifiers.sm, variant === 'large' && _default$a.modifiers.lg, variant === 'xl' && _default$a.modifiers.xl, isFullHeight && _default$a.modifiers.fullHeight, className) }, props),
-        React.createElement("div", { className: css(_default$a.emptyStateContent) }, children)));
+    return (React.createElement("div", Object.assign({ className: css(_default$b.emptyState, variant === 'xs' && _default$b.modifiers.xs, variant === 'small' && _default$b.modifiers.sm, variant === 'large' && _default$b.modifiers.lg, variant === 'xl' && _default$b.modifiers.xl, isFullHeight && _default$b.modifiers.fullHeight, className) }, props),
+        React.createElement("div", { className: css(_default$b.emptyStateContent) }, children)));
 };
 EmptyState.displayName = 'EmptyState';
 
 const EmptyStateBody = (_a) => {
     var { children, className = '' } = _a, props = __rest$2(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$a.emptyStateBody, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(_default$b.emptyStateBody, className) }, props), children));
 };
 EmptyStateBody.displayName = 'EmptyStateBody';
 
 const EmptyStateIcon = (_a) => {
     var { className = '', icon: IconComponent, component: AnyComponent, variant = 'icon' } = _a, props = __rest$2(_a, ["className", "icon", "component", "variant"]);
-    const classNames = css(_default$a.emptyStateIcon, className);
+    const classNames = css(_default$b.emptyStateIcon, className);
     return variant === 'icon' ? (React.createElement(IconComponent, Object.assign({ className: classNames }, props, { "aria-hidden": "true" }))) : (React.createElement("div", { className: classNames },
         React.createElement(AnyComponent, null)));
 };
@@ -6719,11 +7039,11 @@ EmptyStateIcon.displayName = 'EmptyStateIcon';
 
 const EmptyStatePrimary = (_a) => {
     var { children, className = '' } = _a, props = __rest$2(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$a.emptyStatePrimary, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(_default$b.emptyStatePrimary, className) }, props), children));
 };
 EmptyStatePrimary.displayName = 'EmptyStatePrimary';
 
-var _default$9 = {
+var _default$a = {
   "expandableSection": "pf-c-expandable-section",
   "expandableSectionContent": "pf-c-expandable-section__content",
   "expandableSectionToggle": "pf-c-expandable-section__toggle",
@@ -6770,12 +7090,12 @@ class ExpandableSection extends React.Component {
             };
         }
         const computedToggleText = this.calculateToggleText(toggleText, toggleTextExpanded, toggleTextCollapsed, propOrStateIsExpanded);
-        return (React.createElement("div", Object.assign({}, props, { className: css(_default$9.expandableSection, propOrStateIsExpanded && _default$9.modifiers.expanded, isActive && _default$9.modifiers.active, isDetached && _default$9.modifiers.detached, className) }),
-            !isDetached && (React.createElement("button", { className: css(_default$9.expandableSectionToggle), type: "button", "aria-expanded": propOrStateIsExpanded, onClick: () => onToggle(!propOrStateIsExpanded) },
-                React.createElement("span", { className: css(_default$9.expandableSectionToggleIcon) },
+        return (React.createElement("div", Object.assign({}, props, { className: css(_default$a.expandableSection, propOrStateIsExpanded && _default$a.modifiers.expanded, isActive && _default$a.modifiers.active, isDetached && _default$a.modifiers.detached, className) }),
+            !isDetached && (React.createElement("button", { className: css(_default$a.expandableSectionToggle), type: "button", "aria-expanded": propOrStateIsExpanded, onClick: () => onToggle(!propOrStateIsExpanded) },
+                React.createElement("span", { className: css(_default$a.expandableSectionToggleIcon) },
                     React.createElement(AngleRightIcon, { "aria-hidden": true })),
-                React.createElement("span", { className: css(_default$9.expandableSectionToggleText) }, computedToggleText))),
-            React.createElement("div", { className: css(_default$9.expandableSectionContent), hidden: !propOrStateIsExpanded, id: contentId }, children)));
+                React.createElement("span", { className: css(_default$a.expandableSectionToggleText) }, computedToggleText))),
+            React.createElement("div", { className: css(_default$a.expandableSectionContent), hidden: !propOrStateIsExpanded, id: contentId }, children)));
     }
 }
 ExpandableSection.displayName = 'ExpandableSection';
@@ -6994,46 +7314,46 @@ var checkPropTypes_1 = checkPropTypes;
 
 const ActionGroup = (_a) => {
     var { children = null, className = '' } = _a, props = __rest$2(_a, ["children", "className"]);
-    const customClassName = css(_default$i.formGroup, _default$i.modifiers.action, className);
-    const formActionsComponent = React.createElement("div", { className: css(_default$i.formActions) }, children);
+    const customClassName = css(_default$j.formGroup, _default$j.modifiers.action, className);
+    const formActionsComponent = React.createElement("div", { className: css(_default$j.formActions) }, children);
     return (React.createElement("div", Object.assign({}, props, { className: customClassName }),
-        React.createElement("div", { className: css(_default$i.formGroupControl) }, formActionsComponent)));
+        React.createElement("div", { className: css(_default$j.formGroupControl) }, formActionsComponent)));
 };
 ActionGroup.displayName = 'ActionGroup';
 
 const Form = (_a) => {
     var { children = null, className = '', isHorizontal = false, isWidthLimited = false } = _a, props = __rest$2(_a, ["children", "className", "isHorizontal", "isWidthLimited"]);
-    return (React.createElement("form", Object.assign({ noValidate: true }, props, { className: css(_default$i.form, isHorizontal && _default$i.modifiers.horizontal, isWidthLimited && _default$i.modifiers.limitWidth, className) }), children));
+    return (React.createElement("form", Object.assign({ noValidate: true }, props, { className: css(_default$j.form, isHorizontal && _default$j.modifiers.horizontal, isWidthLimited && _default$j.modifiers.limitWidth, className) }), children));
 };
 Form.displayName = 'Form';
 
 const FormGroup = (_a) => {
     var { children = null, className = '', label, labelIcon, isRequired = false, validated = 'default', isInline = false, hasNoPaddingTop = false, isStack = false, helperText, isHelperTextBeforeField = false, helperTextInvalid, helperTextIcon, helperTextInvalidIcon, fieldId } = _a, props = __rest$2(_a, ["children", "className", "label", "labelIcon", "isRequired", "validated", "isInline", "hasNoPaddingTop", "isStack", "helperText", "isHelperTextBeforeField", "helperTextInvalid", "helperTextIcon", "helperTextInvalidIcon", "fieldId"]);
-    const validHelperText = typeof helperText !== 'string' ? (helperText) : (React.createElement("div", { className: css(_default$i.formHelperText, validated === ValidatedOptions.success && _default$i.modifiers.success, validated === ValidatedOptions.warning && _default$i.modifiers.warning), id: `${fieldId}-helper`, "aria-live": "polite" },
-        helperTextIcon && React.createElement("span", { className: css(_default$i.formHelperTextIcon) }, helperTextIcon),
+    const validHelperText = typeof helperText !== 'string' ? (helperText) : (React.createElement("div", { className: css(_default$j.formHelperText, validated === ValidatedOptions.success && _default$j.modifiers.success, validated === ValidatedOptions.warning && _default$j.modifiers.warning), id: `${fieldId}-helper`, "aria-live": "polite" },
+        helperTextIcon && React.createElement("span", { className: css(_default$j.formHelperTextIcon) }, helperTextIcon),
         helperText));
-    const inValidHelperText = typeof helperTextInvalid !== 'string' ? (helperTextInvalid) : (React.createElement("div", { className: css(_default$i.formHelperText, _default$i.modifiers.error), id: `${fieldId}-helper`, "aria-live": "polite" },
-        helperTextInvalidIcon && React.createElement("span", { className: css(_default$i.formHelperTextIcon) }, helperTextInvalidIcon),
+    const inValidHelperText = typeof helperTextInvalid !== 'string' ? (helperTextInvalid) : (React.createElement("div", { className: css(_default$j.formHelperText, _default$j.modifiers.error), id: `${fieldId}-helper`, "aria-live": "polite" },
+        helperTextInvalidIcon && React.createElement("span", { className: css(_default$j.formHelperTextIcon) }, helperTextInvalidIcon),
         helperTextInvalid));
     const showValidHelperTxt = (validationType) => validationType !== ValidatedOptions.error && helperText ? validHelperText : '';
     const helperTextToDisplay = validated === ValidatedOptions.error && helperTextInvalid ? inValidHelperText : showValidHelperTxt(validated);
-    return (React.createElement("div", Object.assign({}, props, { className: css(_default$i.formGroup, className) }),
-        label && (React.createElement("div", { className: css(_default$i.formGroupLabel, hasNoPaddingTop && _default$i.modifiers.noPaddingTop) },
-            React.createElement("label", { className: css(_default$i.formLabel), htmlFor: fieldId },
-                React.createElement("span", { className: css(_default$i.formLabelText) }, label),
-                isRequired && (React.createElement("span", { className: css(_default$i.formLabelRequired), "aria-hidden": "true" },
+    return (React.createElement("div", Object.assign({}, props, { className: css(_default$j.formGroup, className) }),
+        label && (React.createElement("div", { className: css(_default$j.formGroupLabel, hasNoPaddingTop && _default$j.modifiers.noPaddingTop) },
+            React.createElement("label", { className: css(_default$j.formLabel), htmlFor: fieldId },
+                React.createElement("span", { className: css(_default$j.formLabelText) }, label),
+                isRequired && (React.createElement("span", { className: css(_default$j.formLabelRequired), "aria-hidden": "true" },
                     ' ',
                     ASTERISK))),
             ' ',
             React.isValidElement(labelIcon) && labelIcon)),
-        React.createElement("div", { className: css(_default$i.formGroupControl, isInline && _default$i.modifiers.inline, isStack && _default$i.modifiers.stack) },
+        React.createElement("div", { className: css(_default$j.formGroupControl, isInline && _default$j.modifiers.inline, isStack && _default$j.modifiers.stack) },
             isHelperTextBeforeField && helperTextToDisplay,
             children,
             !isHelperTextBeforeField && helperTextToDisplay)));
 };
 FormGroup.displayName = 'FormGroup';
 
-var _default$8 = {
+var _default$9 = {
   "button": "pf-c-button",
   "label": "pf-c-label",
   "labelContent": "pf-c-label__content",
@@ -7053,12 +7373,12 @@ var _default$8 = {
 };
 
 const colorStyles = {
-    blue: _default$8.modifiers.blue,
-    cyan: _default$8.modifiers.cyan,
-    green: _default$8.modifiers.green,
-    orange: _default$8.modifiers.orange,
-    purple: _default$8.modifiers.purple,
-    red: _default$8.modifiers.red,
+    blue: _default$9.modifiers.blue,
+    cyan: _default$9.modifiers.cyan,
+    green: _default$9.modifiers.green,
+    orange: _default$9.modifiers.orange,
+    purple: _default$9.modifiers.purple,
+    red: _default$9.modifiers.red,
     grey: ''
 };
 const Label = (_a) => {
@@ -7075,30 +7395,30 @@ const Label = (_a) => {
         setIsTooltipVisible(textRef.current && textRef.current.offsetWidth < textRef.current.scrollWidth);
     }, []);
     const content = (React.createElement(React.Fragment, null,
-        icon && React.createElement("span", { className: css(_default$8.labelIcon) }, icon),
-        isTruncated && (React.createElement("span", { ref: textRef, className: css(_default$8.labelText) }, children)),
+        icon && React.createElement("span", { className: css(_default$9.labelIcon) }, icon),
+        isTruncated && (React.createElement("span", { ref: textRef, className: css(_default$9.labelText) }, children)),
         !isTruncated && children));
-    let labelComponentChild = (React.createElement(Component, Object.assign({ className: css(_default$8.labelContent) }, (href && { href })), content));
+    let labelComponentChild = (React.createElement(Component, Object.assign({ className: css(_default$9.labelContent) }, (href && { href })), content));
     if (render) {
         labelComponentChild = (React.createElement(React.Fragment, null,
             isTooltipVisible && React.createElement(Tooltip, { reference: componentRef, content: children, position: tooltipPosition }),
             render({
-                className: _default$8.labelContent,
+                className: _default$9.labelContent,
                 content,
                 componentRef
             })));
     }
     else if (isTooltipVisible) {
         labelComponentChild = (React.createElement(Tooltip, { content: children, position: tooltipPosition },
-            React.createElement(Component, Object.assign({ className: css(_default$8.labelContent) }, (href && { href })), content)));
+            React.createElement(Component, Object.assign({ className: css(_default$9.labelContent) }, (href && { href })), content)));
     }
-    return (React.createElement(LabelComponent, Object.assign({}, props, { className: css(_default$8.label, colorStyles[color], variant === 'outline' && _default$8.modifiers.outline, isOverflowLabel && _default$8.modifiers.overflow, className) }),
+    return (React.createElement(LabelComponent, Object.assign({}, props, { className: css(_default$9.label, colorStyles[color], variant === 'outline' && _default$9.modifiers.outline, isOverflowLabel && _default$9.modifiers.overflow, className) }),
         labelComponentChild,
         onClose && button));
 };
 Label.displayName = 'Label';
 
-var _default$7 = {
+var _default$8 = {
   "list": "pf-c-list",
   "listItem": "pf-c-list__item",
   "listItemIcon": "pf-c-list__item-icon",
@@ -7129,19 +7449,19 @@ var ListComponent;
 })(ListComponent || (ListComponent = {}));
 const List = (_a) => {
     var { className = '', children = null, variant = null, isBordered = false, isPlain = false, iconSize = 'default', type = OrderType.number, ref = null, component = ListComponent.ul } = _a, props = __rest$2(_a, ["className", "children", "variant", "isBordered", "isPlain", "iconSize", "type", "ref", "component"]);
-    return component === ListComponent.ol ? (React.createElement("ol", Object.assign({ ref: ref, type: type }, props, { className: css(_default$7.list, variant && _default$7.modifiers[variant], isBordered && _default$7.modifiers.bordered, isPlain && _default$7.modifiers.plain, iconSize && iconSize === 'large' && _default$7.modifiers.iconLg, className) }), children)) : (React.createElement("ul", Object.assign({ ref: ref }, props, { className: css(_default$7.list, variant && _default$7.modifiers[variant], isBordered && _default$7.modifiers.bordered, isPlain && _default$7.modifiers.plain, iconSize && iconSize === 'large' && _default$7.modifiers.iconLg, className) }), children));
+    return component === ListComponent.ol ? (React.createElement("ol", Object.assign({ ref: ref, type: type }, props, { className: css(_default$8.list, variant && _default$8.modifiers[variant], isBordered && _default$8.modifiers.bordered, isPlain && _default$8.modifiers.plain, iconSize && iconSize === 'large' && _default$8.modifiers.iconLg, className) }), children)) : (React.createElement("ul", Object.assign({ ref: ref }, props, { className: css(_default$8.list, variant && _default$8.modifiers[variant], isBordered && _default$8.modifiers.bordered, isPlain && _default$8.modifiers.plain, iconSize && iconSize === 'large' && _default$8.modifiers.iconLg, className) }), children));
 };
 List.displayName = 'List';
 
 const ListItem = (_a) => {
     var { icon = null, children = null } = _a, props = __rest$2(_a, ["icon", "children"]);
-    return (React.createElement("li", Object.assign({ className: css(icon && _default$7.listItem) }, props),
-        icon && React.createElement("span", { className: css(_default$7.listItemIcon) }, icon),
+    return (React.createElement("li", Object.assign({ className: css(icon && _default$8.listItem) }, props),
+        icon && React.createElement("span", { className: css(_default$8.listItemIcon) }, icon),
         children));
 };
 ListItem.displayName = 'ListItem';
 
-var _default$6 = {
+var _default$7 = {
   "button": "pf-c-button",
   "modalBox": "pf-c-modal-box",
   "modalBoxBody": "pf-c-modal-box__body",
@@ -7169,7 +7489,7 @@ var _default$6 = {
 
 const ModalBoxBody = (_a) => {
     var { children = null, className = '' } = _a, props = __rest$2(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({}, props, { className: css(_default$6.modalBoxBody, className) }), children));
+    return (React.createElement("div", Object.assign({}, props, { className: css(_default$7.modalBoxBody, className) }), children));
 };
 ModalBoxBody.displayName = 'ModalBoxBody';
 
@@ -7192,27 +7512,27 @@ const ModalBox = (_a) => {
         style = style || {};
         style[c_modal_box_m_align_top_spacer.name] = positionOffset;
     }
-    return (React.createElement("div", Object.assign({}, props, { role: "dialog", "aria-label": ariaLabel || null, "aria-labelledby": ariaLabelledby || null, "aria-describedby": ariaDescribedby, "aria-modal": "true", className: css(_default$6.modalBox, className, position === 'top' && _default$6.modifiers.alignTop, variant === 'large' && _default$6.modifiers.lg, variant === 'small' && _default$6.modifiers.sm, variant === 'medium' && _default$6.modifiers.md), style: style }), children));
+    return (React.createElement("div", Object.assign({}, props, { role: "dialog", "aria-label": ariaLabel || null, "aria-labelledby": ariaLabelledby || null, "aria-describedby": ariaDescribedby, "aria-modal": "true", className: css(_default$7.modalBox, className, position === 'top' && _default$7.modifiers.alignTop, variant === 'large' && _default$7.modifiers.lg, variant === 'small' && _default$7.modifiers.sm, variant === 'medium' && _default$7.modifiers.md), style: style }), children));
 };
 ModalBox.displayName = 'ModalBox';
 
 const ModalBoxFooter = (_a) => {
     var { children = null, className = '' } = _a, props = __rest$2(_a, ["children", "className"]);
-    return (React.createElement("footer", Object.assign({}, props, { className: css(_default$6.modalBoxFooter, className) }), children));
+    return (React.createElement("footer", Object.assign({}, props, { className: css(_default$7.modalBoxFooter, className) }), children));
 };
 ModalBoxFooter.displayName = 'ModalBoxFooter';
 
 const ModalBoxDescription = (_a) => {
     var { children = null, className = '', id = '' } = _a, props = __rest$2(_a, ["children", "className", "id"]);
-    return (React.createElement("div", Object.assign({}, props, { id: id, className: css(_default$6.modalBoxDescription, className) }), children));
+    return (React.createElement("div", Object.assign({}, props, { id: id, className: css(_default$7.modalBoxDescription, className) }), children));
 };
 ModalBoxDescription.displayName = 'ModalBoxDescription';
 
 const ModalBoxHeader = (_a) => {
     var { children = null, className = '', help = null } = _a, props = __rest$2(_a, ["children", "className", "help"]);
-    return (React.createElement("header", Object.assign({ className: css(_default$6.modalBoxHeader, help && _default$6.modifiers.help, className) }, props),
+    return (React.createElement("header", Object.assign({ className: css(_default$7.modalBoxHeader, help && _default$7.modifiers.help, className) }, props),
         help && (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: css(_default$6.modalBoxHeaderMain) }, children),
+            React.createElement("div", { className: css(_default$7.modalBoxHeaderMain) }, children),
             React.createElement("div", { className: "pf-c-modal-box__header-help" }, help))),
         !help && children));
 };
@@ -7235,10 +7555,10 @@ const ModalBoxTitle = (_a) => {
     useIsomorphicLayoutEffect(() => {
         setIsTooltipVisible(h1.current && h1.current.offsetWidth < h1.current.scrollWidth);
     }, []);
-    const content = (React.createElement("h1", Object.assign({ id: id, ref: h1, className: css(_default$6.modalBoxTitle, titleIconVariant && _default$6.modifiers.icon, className) }, props),
-        titleIconVariant && (React.createElement("span", { className: css(_default$6.modalBoxTitleIcon) }, isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : React.createElement(CustomIcon, null))),
-        label && React.createElement("span", { className: css(_default$p.screenReader) }, label),
-        React.createElement("span", { className: css(_default$6.modalBoxTitleText) }, title)));
+    const content = (React.createElement("h1", Object.assign({ id: id, ref: h1, className: css(_default$7.modalBoxTitle, titleIconVariant && _default$7.modifiers.icon, className) }, props),
+        titleIconVariant && (React.createElement("span", { className: css(_default$7.modalBoxTitleIcon) }, isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : React.createElement(CustomIcon, null))),
+        label && React.createElement("span", { className: css(_default$q.screenReader) }, label),
+        React.createElement("span", { className: css(_default$7.modalBoxTitleText) }, title)));
     return isTooltipVisible ? (React.createElement(Tooltip, { content: title, isVisible: true }, content)) : (content);
 };
 ModalBoxTitle.displayName = 'ModalBoxTitle';
@@ -7271,13 +7591,13 @@ const ModalContent = (_a) => {
         return idRefList.join(' ');
     };
     const modalBox = (React.createElement(ModalBox, Object.assign({ id: boxId, style: boxStyle, className: css(className, isVariantIcon(titleIconVariant) &&
-            _default$6.modifiers[titleIconVariant]), variant: variant, position: position, positionOffset: positionOffset, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyFormatted(), "aria-describedby": ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId) }, getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe)),
+            _default$7.modifiers[titleIconVariant]), variant: variant, position: position, positionOffset: positionOffset, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyFormatted(), "aria-describedby": ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId) }, getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe)),
         showClose && React.createElement(ModalBoxCloseButton, { onClose: onClose }),
         modalBoxHeader,
         modalBody,
         modalBoxFooter));
     return (React.createElement(Backdrop, null,
-        React.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true }, className: css(_default$v.bullseye) }, modalBox)));
+        React.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true }, className: css(_default$w.bullseye) }, modalBox)));
 };
 ModalContent.displayName = 'ModalContent';
 
@@ -7336,10 +7656,10 @@ class Modal$1 extends React.Component {
         target.appendChild(container);
         target.addEventListener('keydown', this.handleEscKeyClick, false);
         if (this.props.isOpen) {
-            target.classList.add(css(_default$w.backdropOpen));
+            target.classList.add(css(_default$x.backdropOpen));
         }
         else {
-            target.classList.remove(css(_default$w.backdropOpen));
+            target.classList.remove(css(_default$x.backdropOpen));
         }
         if (this.isEmpty(title) && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
             // eslint-disable-next-line no-console
@@ -7354,11 +7674,11 @@ class Modal$1 extends React.Component {
         const { appendTo } = this.props;
         const target = this.getElement(appendTo);
         if (this.props.isOpen) {
-            target.classList.add(css(_default$w.backdropOpen));
+            target.classList.add(css(_default$x.backdropOpen));
             this.toggleSiblingsFromScreenReaders(true);
         }
         else {
-            target.classList.remove(css(_default$w.backdropOpen));
+            target.classList.remove(css(_default$x.backdropOpen));
             this.toggleSiblingsFromScreenReaders(false);
         }
     }
@@ -7369,7 +7689,7 @@ class Modal$1 extends React.Component {
             target.removeChild(this.state.container);
         }
         target.removeEventListener('keydown', this.handleEscKeyClick, false);
-        target.classList.remove(css(_default$w.backdropOpen));
+        target.classList.remove(css(_default$x.backdropOpen));
     }
     render() {
         const _a = this.props, { 
@@ -7429,7 +7749,7 @@ const Text = (_a) => {
     var { children = null, className = '', component = TextVariants.p, isVisitedLink = false, ouiaId, ouiaSafe = true } = _a, props = __rest$2(_a, ["children", "className", "component", "isVisitedLink", "ouiaId", "ouiaSafe"]);
     const Component = component;
     const ouiaProps = useOUIAProps$1(Text.displayName, ouiaId, ouiaSafe);
-    return (React.createElement(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css(isVisitedLink && component === TextVariants.a && _default$u.modifiers.visited, className) }), children));
+    return (React.createElement(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css(isVisitedLink && component === TextVariants.a && _default$v.modifiers.visited, className) }), children));
 };
 Text.displayName = 'Text';
 
@@ -7459,6 +7779,85 @@ const TextListItem = (_a) => {
 };
 TextListItem.displayName = 'TextListItem';
 
+var _default$6 = {
+  "divider": "pf-c-divider",
+  "modifiers": {
+    "plain": "pf-m-plain",
+    "text": "pf-m-text",
+    "active": "pf-m-active",
+    "expanded": "pf-m-expanded",
+    "disabled": "pf-m-disabled",
+    "top": "pf-m-top",
+    "alignRight": "pf-m-align-right"
+  },
+  "optionsMenu": "pf-c-options-menu",
+  "optionsMenuGroup": "pf-c-options-menu__group",
+  "optionsMenuGroupTitle": "pf-c-options-menu__group-title",
+  "optionsMenuMenu": "pf-c-options-menu__menu",
+  "optionsMenuMenuItem": "pf-c-options-menu__menu-item",
+  "optionsMenuMenuItemIcon": "pf-c-options-menu__menu-item-icon",
+  "optionsMenuToggle": "pf-c-options-menu__toggle",
+  "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"
+};
+
+var OptionsMenuPosition;
+(function (OptionsMenuPosition) {
+    OptionsMenuPosition["right"] = "right";
+    OptionsMenuPosition["left"] = "left";
+})(OptionsMenuPosition || (OptionsMenuPosition = {}));
+var OptionsMenuDirection;
+(function (OptionsMenuDirection) {
+    OptionsMenuDirection["up"] = "up";
+    OptionsMenuDirection["down"] = "down";
+})(OptionsMenuDirection || (OptionsMenuDirection = {}));
+const OptionsMenu = (_a) => {
+    var { className = '', menuItems, toggle, isText = false, isGrouped = false, id, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ref, menuAppendTo = 'inline', ouiaId, ouiaSafe = true } = _a, props = __rest$2(_a, ["className", "menuItems", "toggle", "isText", "isGrouped", "id", "ref", "menuAppendTo", "ouiaId", "ouiaSafe"]);
+    return (React.createElement(DropdownContext.Provider, { value: {
+            id,
+            onSelect: () => undefined,
+            toggleIndicatorClass: _default$6.optionsMenuToggleIcon,
+            toggleTextClass: _default$6.optionsMenuToggleText,
+            menuClass: _default$6.optionsMenuMenu,
+            itemClass: _default$6.optionsMenuMenuItem,
+            toggleClass: isText ? _default$6.optionsMenuToggleButton : _default$6.optionsMenuToggle,
+            baseClass: _default$6.optionsMenu,
+            disabledClass: _default$6.modifiers.disabled,
+            menuComponent: isGrouped ? 'div' : 'ul',
+            baseComponent: 'div',
+            ouiaId: useOUIAId$1(OptionsMenu.displayName, ouiaId),
+            ouiaSafe,
+            ouiaComponentType: OptionsMenu.displayName
+        } },
+        React.createElement(DropdownWithContext, Object.assign({}, props, { id: id, dropdownItems: menuItems, className: className, isGrouped: isGrouped, toggle: toggle, menuAppendTo: menuAppendTo }))));
+};
+OptionsMenu.displayName = 'OptionsMenu';
+
+const OptionsMenuToggle = (_a) => {
+    var { isPlain = false, isDisabled = false, isOpen = false, parentId = '', toggleTemplate = React.createElement(React.Fragment, null), hideCaret = false, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    isActive = false, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    isSplitButton = false, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    type, 'aria-label': ariaLabel = 'Options menu' } = _a, props = __rest$2(_a, ["isPlain", "isDisabled", "isOpen", "parentId", "toggleTemplate", "hideCaret", "isActive", "isSplitButton", "type", 'aria-label']);
+    return (React.createElement(DropdownContext.Consumer, null, ({ id: contextId }) => (React.createElement(DropdownToggle, Object.assign({}, ((isPlain || hideCaret) && { toggleIndicator: null }), props, { isPlain: isPlain, isOpen: isOpen, isDisabled: isDisabled, isActive: isActive, id: parentId ? `${parentId}-toggle` : `${contextId}-toggle`, "aria-haspopup": "listbox", "aria-label": ariaLabel, "aria-expanded": isOpen }, (toggleTemplate ? { children: toggleTemplate } : {}))))));
+};
+OptionsMenuToggle.displayName = 'OptionsMenuToggle';
+
+const OptionsMenuItem = (_a) => {
+    var { children = null, isSelected = false, onSelect = () => null, id = '', isDisabled } = _a, props = __rest$2(_a, ["children", "isSelected", "onSelect", "id", "isDisabled"]);
+    return (React.createElement(DropdownItem, Object.assign({ id: id, component: "button", isDisabled: isDisabled, onClick: (event) => onSelect(event) }, (isDisabled && { 'aria-disabled': true }), props),
+        children,
+        isSelected && (React.createElement("span", { className: css(_default$6.optionsMenuMenuItemIcon) },
+            React.createElement(CheckIcon, { "aria-hidden": isSelected })))));
+};
+OptionsMenuItem.displayName = 'OptionsMenuItem';
+
 const global_breakpoint_md = {
   "name": "--pf-global--breakpoint--md",
   "value": "768px",
@@ -8737,7 +9136,8 @@ const QUICKSTART_ID_FILTER_KEY = 'quickstart';
 const QUICKSTART_TASKS_INITIAL_STATES = [
     QuickStartTaskStatus.INIT,
     QuickStartTaskStatus.VISITED,
-];
+];
+const HELP_TOPIC_NAME_KEY = 'topic';
 
 let createHistory;
 try {
@@ -8792,6 +9192,7 @@ var Yes = "Yes";
 var No = "No";
 var Cancel = "Cancel";
 var Leave = "Leave";
+var Type = "Quick start";
 var en = {
 	"No results found": "No results found",
 	"No results match the filter criteria. Remove filters or clear all filters to show results.": "No results match the filter criteria. Remove filters or clear all filters to show results.",
@@ -8835,7 +9236,8 @@ var en = {
 	"Not available": "Not available",
 	"Copy to clipboard": "Copy to clipboard",
 	"Successfully copied to clipboard!": "Successfully copied to clipboard!",
-	"Quick start • {{duration, number}} minutes": "Quick start • {{duration, number}} minutes"
+	Type: Type,
+	"{{type}} • {{duration, number}} minutes": "{{type}} • {{duration, number}} minutes"
 };
 
 /* eslint-disable */
@@ -9248,7 +9650,7 @@ const QuickStartContextDefaults = {
     useLegacyHeaderColors: false,
     markdown: null,
     loading: false,
-    alwaysShowTaskReview: false,
+    alwaysShowTaskReview: true,
 };
 const QuickStartContext = createContext(QuickStartContextDefaults);
 const getResource = (resource, options, resourceBundle, lng) => {
@@ -9345,7 +9747,7 @@ const useValuesForQuickStartContext = (value = {}) => {
             useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, id);
             return id;
         });
-        setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, QuickStartStatus.IN_PROGRESS) })));
+        setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, QuickStartStatus.NOT_STARTED) })));
     }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
     // When alwaysShowTaskReview preference is enabled, skip visited step and go directly to review
     const stepAfterInitial = alwaysShowTaskReview
@@ -9603,10 +10005,10 @@ const Spinner = (_a) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', isSVG = false, diameter } = _a, props = __rest(_a, ["className", "size", 'aria-valuetext', "isSVG", "diameter"]);
     const Component = isSVG ? 'svg' : 'span';
-    return (React.createElement(Component, Object.assign({ className: css(_default$r.spinner, _default$r.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), props), isSVG ? (React.createElement("circle", { className: _default$r.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: css(_default$r.spinnerClipper) }),
-        React.createElement("span", { className: css(_default$r.spinnerLeadBall) }),
-        React.createElement("span", { className: css(_default$r.spinnerTailBall) })))));
+    return (React.createElement(Component, Object.assign({ className: css(_default$s.spinner, _default$s.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), props), isSVG ? (React.createElement("circle", { className: _default$s.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: css(_default$s.spinnerClipper) }),
+        React.createElement("span", { className: css(_default$s.spinnerLeadBall) }),
+        React.createElement("span", { className: css(_default$s.spinnerTailBall) })))));
 };
 Spinner.displayName = 'Spinner';
 
@@ -9647,12 +10049,12 @@ const ButtonBase = (_a) => {
             return 0;
         }
     };
-    return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isDisabled || isAriaDisabled, "aria-label": ariaLabel, className: css(_default$s.button, _default$s.modifiers[variant], isBlock && _default$s.modifiers.block, isDisabled && _default$s.modifiers.disabled, isAriaDisabled && _default$s.modifiers.ariaDisabled, isActive && _default$s.modifiers.active, isInline && variant === ButtonVariant.link && _default$s.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && _default$s.modifiers.danger, isLoading !== null && _default$s.modifiers.progress, isLoading && _default$s.modifiers.inProgress, isSmall && _default$s.modifiers.small, isLarge && _default$s.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : null, ref: innerRef }, ouiaProps),
-        isLoading && (React.createElement("span", { className: css(_default$s.buttonProgress) },
+    return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isDisabled || isAriaDisabled, "aria-label": ariaLabel, className: css(_default$t.button, _default$t.modifiers[variant], isBlock && _default$t.modifiers.block, isDisabled && _default$t.modifiers.disabled, isAriaDisabled && _default$t.modifiers.ariaDisabled, isActive && _default$t.modifiers.active, isInline && variant === ButtonVariant.link && _default$t.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && _default$t.modifiers.danger, isLoading !== null && _default$t.modifiers.progress, isLoading && _default$t.modifiers.inProgress, isSmall && _default$t.modifiers.small, isLarge && _default$t.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : null, ref: innerRef }, ouiaProps),
+        isLoading && (React.createElement("span", { className: css(_default$t.buttonProgress) },
             React.createElement(Spinner, { size: spinnerSize.md, "aria-valuetext": spinnerAriaValueText }))),
-        variant !== ButtonVariant.plain && icon && iconPosition === 'left' && (React.createElement("span", { className: css(_default$s.buttonIcon, _default$s.modifiers.start) }, icon)),
+        variant !== ButtonVariant.plain && icon && iconPosition === 'left' && (React.createElement("span", { className: css(_default$t.buttonIcon, _default$t.modifiers.start) }, icon)),
         children,
-        variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (React.createElement("span", { className: css(_default$s.buttonIcon, _default$s.modifiers.end) }, icon))));
+        variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (React.createElement("span", { className: css(_default$t.buttonIcon, _default$t.modifiers.end) }, icon))));
 };
 const Button = React.forwardRef((props, ref) => (React.createElement(ButtonBase, Object.assign({ innerRef: ref }, props))));
 Button.displayName = 'Button';
@@ -9674,47 +10076,47 @@ const Card = (_a) => {
             cardId: id,
             isExpanded
         } },
-        React.createElement(Component, Object.assign({ id: id, className: css(_default$e.card, isHoverable && _default$e.modifiers.hoverable, isCompact && _default$e.modifiers.compact, isSelectable && _default$e.modifiers.selectable, isSelected && isSelectable && _default$e.modifiers.selected, isExpanded && _default$e.modifiers.expanded, isFlat && _default$e.modifiers.flat, isRounded && _default$e.modifiers.rounded, isLarge && _default$e.modifiers.displayLg, isFullHeight && _default$e.modifiers.fullHeight, isPlain && _default$e.modifiers.plain, className), tabIndex: isSelectable ? '0' : undefined }, props, ouiaProps), children)));
+        React.createElement(Component, Object.assign({ id: id, className: css(_default$f.card, isHoverable && _default$f.modifiers.hoverable, isCompact && _default$f.modifiers.compact, isSelectable && _default$f.modifiers.selectable, isSelected && isSelectable && _default$f.modifiers.selected, isExpanded && _default$f.modifiers.expanded, isFlat && _default$f.modifiers.flat, isRounded && _default$f.modifiers.rounded, isLarge && _default$f.modifiers.displayLg, isFullHeight && _default$f.modifiers.fullHeight, isPlain && _default$f.modifiers.plain, className), tabIndex: isSelectable ? '0' : undefined }, props, ouiaProps), children)));
 };
 Card.displayName = 'Card';
 
 const CardActions = (_a) => {
     var { children = null, className = '', hasNoOffset = false } = _a, props = __rest(_a, ["children", "className", "hasNoOffset"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$e.cardActions, hasNoOffset && _default$e.modifiers.noOffset, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(_default$f.cardActions, hasNoOffset && _default$f.modifiers.noOffset, className) }, props), children));
 };
 CardActions.displayName = 'CardActions';
 
 const CardBody = (_a) => {
     var { children = null, className = '', component = 'div', isFilled = true } = _a, props = __rest(_a, ["children", "className", "component", "isFilled"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(_default$e.cardBody, !isFilled && _default$e.modifiers.noFill, className) }, props), children));
+    return (React.createElement(Component, Object.assign({ className: css(_default$f.cardBody, !isFilled && _default$f.modifiers.noFill, className) }, props), children));
 };
 CardBody.displayName = 'CardBody';
 
 const CardFooter = (_a) => {
     var { children = null, className = '', component = 'div' } = _a, props = __rest(_a, ["children", "className", "component"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(_default$e.cardFooter, className) }, props), children));
+    return (React.createElement(Component, Object.assign({ className: css(_default$f.cardFooter, className) }, props), children));
 };
 CardFooter.displayName = 'CardFooter';
 
 const CardTitle = (_a) => {
     var { children = null, className = '', component = 'div' } = _a, props = __rest(_a, ["children", "className", "component"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(_default$e.cardTitle, className) }, props), children));
+    return (React.createElement(Component, Object.assign({ className: css(_default$f.cardTitle, className) }, props), children));
 };
 CardTitle.displayName = 'CardTitle';
 
 const CardHeader = (_a) => {
     var { children = null, className = '', id, onExpand, toggleButtonProps, isToggleRightAligned } = _a, props = __rest(_a, ["children", "className", "id", "onExpand", "toggleButtonProps", "isToggleRightAligned"]);
     return (React.createElement(CardContext.Consumer, null, ({ cardId }) => {
-        const cardHeaderToggle = (React.createElement("div", { className: css(_default$e.cardHeaderToggle) },
+        const cardHeaderToggle = (React.createElement("div", { className: css(_default$f.cardHeaderToggle) },
             React.createElement(Button, Object.assign({ variant: "plain", type: "button", onClick: evt => {
                     onExpand(evt, cardId);
                 } }, toggleButtonProps),
-                React.createElement("span", { className: css(_default$e.cardHeaderToggleIcon) },
+                React.createElement("span", { className: css(_default$f.cardHeaderToggleIcon) },
                     React.createElement(AngleRightIcon, { "aria-hidden": "true" })))));
-        return (React.createElement("div", Object.assign({ className: css(_default$e.cardHeader, isToggleRightAligned && _default$e.modifiers.toggleRight, className), id: id }, props),
+        return (React.createElement("div", Object.assign({ className: css(_default$f.cardHeader, isToggleRightAligned && _default$f.modifiers.toggleRight, className), id: id }, props),
             onExpand && !isToggleRightAligned && cardHeaderToggle,
             children,
             onExpand && isToggleRightAligned && cardHeaderToggle));
@@ -14325,6 +14727,71 @@ const useMultilineCopyClipboardShowdownExtension = () => {
     }), [getResource]);
 };
 
+var lightbulbIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.LightbulbIconConfig = {
+  name: 'LightbulbIcon',
+  height: 512,
+  width: 352,
+  svgPath: 'M96.06 454.35c.01 6.29 1.87 12.45 5.36 17.69l17.09 25.69a31.99 31.99 0 0 0 26.64 14.28h61.71a31.99 31.99 0 0 0 26.64-14.28l17.09-25.69a31.989 31.989 0 0 0 5.36-17.69l.04-38.35H96.01l.05 38.35zM0 176c0 44.37 16.45 84.85 43.56 115.78 16.52 18.85 42.36 58.23 52.21 91.45.04.26.07.52.11.78h160.24c.04-.26.07-.51.11-.78 9.85-33.22 35.69-72.6 52.21-91.45C335.55 260.85 352 220.37 352 176 352 78.61 272.91-.3 175.45 0 73.44.31 0 82.97 0 176zm176-80c-44.11 0-80 35.89-80 80 0 8.84-7.16 16-16 16s-16-7.16-16-16c0-61.76 50.24-112 112-112 8.84 0 16 7.16 16 16s-7.16 16-16 16z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.LightbulbIcon = createIcon_1.createIcon(exports.LightbulbIconConfig);
+exports["default"] = exports.LightbulbIcon;
+});
+
+var LightbulbIcon = /*@__PURE__*/getDefaultExportFromCjs(lightbulbIcon);
+
+var fireIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.FireIconConfig = {
+  name: 'FireIcon',
+  height: 512,
+  width: 384,
+  svgPath: 'M216 23.86c0-23.8-30.65-32.77-44.15-13.04C48 191.85 224 200 224 288c0 35.63-29.11 64.46-64.85 63.99-35.17-.45-63.15-29.77-63.15-64.94v-85.51c0-21.7-26.47-32.23-41.43-16.5C27.8 213.16 0 261.33 0 320c0 105.87 86.13 192 192 192s192-86.13 192-192c0-170.29-168-193-168-296.14z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.FireIcon = createIcon_1.createIcon(exports.FireIconConfig);
+exports["default"] = exports.FireIcon;
+});
+
+var FireIcon = /*@__PURE__*/getDefaultExportFromCjs(fireIcon);
+
+var AdmonitionType;
+(function (AdmonitionType) {
+    AdmonitionType["TIP"] = "TIP";
+    AdmonitionType["NOTE"] = "NOTE";
+    AdmonitionType["IMPORTANT"] = "IMPORTANT";
+    AdmonitionType["WARNING"] = "WARNING";
+    AdmonitionType["CAUTION"] = "CAUTION";
+})(AdmonitionType || (AdmonitionType = {}));
+const admonitionToAlertVariantMap = {
+    [AdmonitionType.NOTE]: { variant: 'info' },
+    [AdmonitionType.TIP]: { variant: 'default', customIcon: React.createElement(LightbulbIcon, null) },
+    [AdmonitionType.IMPORTANT]: { variant: 'danger' },
+    [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: React.createElement(FireIcon, null) },
+    [AdmonitionType.WARNING]: { variant: 'warning' },
+};
+const useAdmonitionShowdownExtension = () => {
+    // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+    return React.useMemo(() => ({
+        type: 'lang',
+        regex: /\[([\d\w\s-()$!]+)]{{(admonition) ([\w-]+)}}/g,
+        replace: (text, content, admonitionLabel, admonitionType, groupId) => {
+            if (!content || !admonitionLabel || !admonitionType || !groupId) {
+                return text;
+            }
+            admonitionType = admonitionType.toUpperCase();
+            const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
+            const style = admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
+            const pfAlert = (React.createElement(Alert, { variant: variant, customIcon: customIcon && customIcon, isInline: true, title: admonitionType, className: "pfext-markdown-admonition", style: style }, content));
+            return removeTemplateWhitespace(server.renderToStaticMarkup(pfAlert));
+        },
+    }), []);
+};
+
 const FallbackImg = ({ src, alt, className, fallback }) => {
     const [isSrcValid, setIsSrcValid] = React.useState(true);
     if (src && isSrcValid) {
@@ -18898,13 +19365,31 @@ const markdownConvert = (markdown, extensions) => {
     if (extensions) {
         converter.addExtension(extensions);
     }
-    // add hook to transform anchor tags
     DOMPurify.addHook('beforeSanitizeElements', function (node) {
         // nodeType 1 = element type
+        // transform anchor tags
         if (node.nodeType === 1 && node.nodeName.toLowerCase() === 'a') {
             node.setAttribute('rel', 'noopener noreferrer');
             return node;
         }
+        // add PF class to ul and ol lists
+        if (node.nodeType === 1 &&
+            (node.nodeName.toLowerCase() === 'ul' || node.nodeName.toLowerCase() === 'ol')) {
+            node.setAttribute('class', 'pf-c-list');
+            return node;
+        }
+    });
+    // Add a hook to make all links open a new window
+    DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+        // set all elements owning target to target=_blank
+        if ('target' in node) {
+            node.setAttribute('target', '_blank');
+        }
+        // set non-HTML/MathML links to xlink:show=new
+        if (!node.hasAttribute('target') &&
+            (node.hasAttribute('xlink:href') || node.hasAttribute('href'))) {
+            node.setAttribute('xlink:show', 'new');
+        }
     });
     return DOMPurify.sanitize(converter.makeHtml(markdown), {
         USE_PROFILES: {
@@ -19042,6 +19527,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const { markdown } = React.useContext(QuickStartContext);
     const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
     const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
+    const admonitionShowdownExtension = useAdmonitionShowdownExtension();
     return (React.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
             {
                 type: 'lang',
@@ -19063,11 +19549,14 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
             },
             inlineCopyClipboardShowdownExtension,
             multilineCopyClipboardShowdownExtension,
+            admonitionShowdownExtension,
             ...(markdown ? markdown.extensions : []),
         ], renderExtension: (docContext, rootSelector) => (React.createElement(React.Fragment, null,
             React.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
             React.createElement(MarkdownCopyClipboard, { docContext: docContext, rootSelector: rootSelector }),
-            markdown && markdown.renderExtension(docContext, rootSelector))), className: className }));
+            markdown &&
+                markdown.renderExtension &&
+                markdown.renderExtension(docContext, rootSelector))), className: className }));
 };
 
 const QuickStartTileDescription = ({ description, prerequisites, }) => {
@@ -19205,7 +19694,9 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
             // @ts-ignore
             component: "div", style: {
                 cursor: 'pointer',
-            }, icon: quickStartIcon, className: "pfext-quick-start-tile", "data-testid": `qs-card-${camelize(displayName)}`, featured: isActive, title: React.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type, quickStartId: id }), onClick: handleClick, "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent })));
+            }, icon: quickStartIcon, className: "pfext-quick-start-tile", "data-testid": `qs-card-${camelize(displayName)}`, featured: isActive, title: React.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type, quickStartId: id }), onClick: handleClick, 
+            // https://github.com/patternfly/patternfly-react/issues/7039
+            href: "#", "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent })));
 };
 
 const QuickStartCatalog = ({ quickStarts }) => {
@@ -19356,7 +19847,9 @@ const QuickStartCatalogPage = ({ quickStarts, showFilter, sortFnc = (q1, q2) =>
         const filteredQs = showFilter
             ? filterQuickStarts(allQuickStarts, filter.keyword, filter.status.statusFilters, allQuickStartStates).sort(sortFncCallback)
             : allQuickStarts;
-        if (filteredQs.length !== filteredQuickStarts.length) {
+        // also needs a check whether the content of the QS changed
+        if (filteredQs.length !== filteredQuickStarts.length ||
+            JSON.stringify(filteredQs) !== JSON.stringify(filteredQuickStarts)) {
             setFilteredQuickStarts(filteredQs);
         }
     }, [
@@ -19461,14 +19954,17 @@ const TaskIcon = ({ taskIndex, taskStatus }) => {
     }
     return React.createElement("span", { className: classNames }, content);
 };
-const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, }) => {
+const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
     const classNames = css('pfext-quick-start-task-header__title', {
         'pfext-quick-start-task-header__title-success': taskStatus === QuickStartTaskStatus.SUCCESS,
         'pfext-quick-start-task-header__title-failed': taskStatus === (QuickStartTaskStatus.FAILED || QuickStartTaskStatus.VISITED),
     });
-    const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
-    const skippedReviewOrFailed = taskStatus === QuickStartTaskStatus.REVIEW || taskStatus === QuickStartTaskStatus.FAILED;
-    const tryAgain = !isActiveTask && (skippedReviewOrFailed || notCompleted) && (React.createElement(React.Fragment, null,
+    // const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
+    // const skippedReview = taskStatus === QuickStartTaskStatus.REVIEW;
+    const failedReview = taskStatus === QuickStartTaskStatus.FAILED;
+    // TODO: toned down when this is shown, investigate further when we should display it
+    // related: https://github.com/patternfly/patternfly-quickstarts/issues/104
+    const tryAgain = failedReview && (React.createElement(React.Fragment, null,
         React.createElement("div", null),
         React.createElement("div", { className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
     const content = (React.createElement("div", { className: "pfext-quick-start-task-header" },
@@ -19479,7 +19975,7 @@ const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, is
                 ' ',
                 subtitle))),
         tryAgain));
-    return (React.createElement(WizardNavItem, { content: content, step: taskIndex, onNavItemClick: () => onTaskSelect(taskIndex - 1), navItemComponent: "button", isCurrent: isActiveTask }));
+    return (React.createElement(WizardNavItem, { content: content, step: taskIndex, onNavItemClick: () => onTaskSelect(taskIndex - 1), navItemComponent: "button", isCurrent: isActiveTask }, children));
 };
 
 const QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => {
@@ -19513,7 +20009,8 @@ const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequi
     const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React.createElement(ExpandableSection, { toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded), className: "pfext-quick-start-intro__prereq" },
         React.createElement(List, { className: "pfext-quick-start-intro__prereq-list" }, prereqs.map((pr) => {
             return (React.createElement(ListItem, { key: pr, className: "pfext-quick-start-intro__prereq-list__item" },
-                React.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" }, pr)));
+                React.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" },
+                    React.createElement(QuickStartMarkdownView, { content: pr }))));
         }))));
     return (React.createElement(React.Fragment, null,
         React.createElement(QuickStartMarkdownView, { content: introduction }),
@@ -19542,7 +20039,7 @@ const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
         'pfext-quick-start-task-review--failed': taskStatus === QuickStartTaskStatus.FAILED,
     });
     const title = React.createElement("span", { className: alertClassNames }, getResource('Check your work'));
-    return (React.createElement(Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true },
+    return (React.createElement(Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true, role: "alert" },
         React.createElement(QuickStartMarkdownView, { content: instructions }),
         React.createElement("span", { className: "pfext-quick-start-task-review__actions" },
             React.createElement(Radio, { id: "review-success", name: "review-success", "data-testid": "qs-drawer-check-yes", label: getResource('Yes'), className: "pfext-quick-start-task-review__radio", isChecked: taskStatus === QuickStartTaskStatus.SUCCESS, onChange: () => onTaskReview(QuickStartTaskStatus.SUCCESS) }),
@@ -19552,22 +20049,22 @@ const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
 
 const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onTaskSelect, }) => {
     const { getResource, alwaysShowTaskReview } = React.useContext(QuickStartContext);
-    return (React.createElement("div", { className: "pfext-quick-start-tasks__list" }, tasks
-        .filter((_, index) => allTaskStatuses[index] !== QuickStartTaskStatus.INIT)
-        .map((task, index) => {
-        const { title, description, review } = task;
-        const isActiveTask = index === taskNumber;
-        const taskStatus = allTaskStatuses[index];
-        const shouldShowTaskReview = (!QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) || alwaysShowTaskReview) &&
-            review;
-        return (React.createElement(React.Fragment, { key: title },
-            React.createElement(QuickStartTaskHeader, { taskIndex: index + 1, title: title, size: "md", subtitle: getResource('{{index, number}} of {{tasks, number}}')
-                    .replace('{{index, number}}', index + 1)
-                    .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }),
-            isActiveTask && (React.createElement("div", { className: "pfext-quick-start-task__content" },
-                React.createElement(QuickStartMarkdownView, { content: description }),
-                shouldShowTaskReview && (React.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview }))))));
-    })));
+    return (React.createElement("div", { className: "pfext-quick-start-tasks__list" },
+        React.createElement("ul", null, tasks
+            .filter((_, index) => allTaskStatuses[index] !== QuickStartTaskStatus.INIT)
+            .map((task, index) => {
+            const { title, description, review } = task;
+            const isActiveTask = index === taskNumber;
+            const taskStatus = allTaskStatuses[index];
+            const shouldShowTaskReview = (!QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) || alwaysShowTaskReview) &&
+                review;
+            return (React.createElement(React.Fragment, { key: title },
+                React.createElement(QuickStartTaskHeader, { taskIndex: index + 1, title: title, size: "md", subtitle: getResource('{{index, number}} of {{tasks, number}}')
+                        .replace('{{index, number}}', index + 1)
+                        .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }, isActiveTask && (React.createElement("div", { className: "pfext-quick-start-task__content" },
+                    React.createElement(QuickStartMarkdownView, { content: description }),
+                    shouldShowTaskReview && (React.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview })))))));
+        }))));
 };
 
 const QuickStartContent = React.forwardRef(({ quickStart, nextQuickStarts = [], taskNumber, allTaskStatuses, onTaskSelect, onTaskReview, onQuickStartChange, }, ref) => {
@@ -19677,11 +20174,10 @@ const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
 };
 const QuickStartPanelContent = (_a) => {
     var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, headerVariant = '' } = _a, props = __rest$1(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
-    const { getResource } = React.useContext(QuickStartContext);
+    const { getResource, activeQuickStartState } = React.useContext(QuickStartContext);
     const [contentRef, setContentRef] = React.useState();
     const shadows = useScrollShadows(contentRef);
     const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
-    const { activeQuickStartState } = React.useContext(QuickStartContext);
     const taskNumber = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.taskNumber;
     useScrollTopOnTaskNumberChange(contentRef, taskNumber);
     const nextQuickStarts = quickStarts.filter((qs) => { var _a; return (_a = quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.nextQuickStart) === null || _a === void 0 ? void 0 : _a.includes(qs.metadata.name); });
@@ -19709,7 +20205,10 @@ const QuickStartPanelContent = (_a) => {
                     React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, quickStart === null || quickStart === void 0 ? void 0 :
                         quickStart.spec.displayName,
                         ' ',
-                        React.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, getResource('Quick start • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes).replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)))),
+                        React.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, (quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes) ? getResource('{{type}} • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                            .replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                            .replace('{{type}}', getResource('Type'))
+                            : getResource('Type')))),
                 showClose && (React.createElement(DrawerActions, null,
                     React.createElement(DrawerCloseButton, { onClick: handleClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))))),
         React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
@@ -19721,7 +20220,7 @@ const QuickStartPanelContent = (_a) => {
 };
 
 const QuickStartContainer = (_a) => {
-    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, useLegacyHeaderColors, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = false } = _a, props = __rest$1(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "useLegacyHeaderColors", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
+    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, useLegacyHeaderColors, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = true } = _a, props = __rest$1(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "useLegacyHeaderColors", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
     const valuesForQuickstartContext = useValuesForQuickStartContext(Object.assign({ allQuickStarts: quickStarts, activeQuickStartID,
         setActiveQuickStartID,
         allQuickStartStates,
@@ -19759,7 +20258,7 @@ const QuickStartDrawer = (_a) => {
         // if there is a quick start param, but the quick start is not active, set it
         // this can happen if a new browser session is opened or an incognito window for example
         const quickStartIdFromParam = params.get(QUICKSTART_ID_FILTER_KEY) || '';
-        if (quickStartIdFromParam && !activeQuickStartID) {
+        if (quickStartIdFromParam && activeQuickStartID !== quickStartIdFromParam) {
             const activeQuickStart = getQuickStartByName(quickStartIdFromParam, combinedQuickStarts);
             // don't try to load a quick start that is actually just an external resource (spec.link)
             if (combinedQuickStarts.length > 0 && activeQuickStart && !activeQuickStart.spec.link) {
@@ -19818,6 +20317,141 @@ const QuickStartDrawer = (_a) => {
         React.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
 };
 
+var barsIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.BarsIconConfig = {
+  name: 'BarsIcon',
+  height: 512,
+  width: 448,
+  svgPath: 'M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.BarsIcon = createIcon_1.createIcon(exports.BarsIconConfig);
+exports["default"] = exports.BarsIcon;
+});
+
+var BarsIcon = /*@__PURE__*/getDefaultExportFromCjs(barsIcon);
+
+const HelpTopicContextDefaults = {
+    helpTopics: [],
+    setHelpTopics: () => { },
+    activeHelpTopic: null,
+    setActiveHelpTopicByName: () => { },
+    filteredHelpTopics: [],
+    setFilteredHelpTopics: () => { },
+    loading: false,
+};
+const HelpTopicContext = React__default.createContext(HelpTopicContextDefaults);
+const useValuesForHelpTopicContext = (value = {}) => {
+    const combinedValue = Object.assign(Object.assign({}, HelpTopicContextDefaults), value);
+    const [loading, setLoading] = React__default.useState(combinedValue.loading);
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    const [helpTopics, setHelpTopics] = React__default.useState(combinedValue.helpTopics || []);
+    const [activeHelpTopic, setActiveHelpTopic] = React__default.useState(combinedValue.activeHelpTopic || null);
+    const setActiveHelpTopicByName = React__default.useCallback((helpTopicName) => {
+        const topic = helpTopics.find((t) => {
+            return t.name === helpTopicName;
+        });
+        if (!helpTopicName) {
+            setActiveHelpTopic(null);
+            return;
+        }
+        setActiveHelpTopic(topic);
+    }, [helpTopics]);
+    const [filteredHelpTopics, setFilteredHelpTopics] = React__default.useState(combinedValue.filteredHelpTopics || []);
+    return {
+        helpTopics,
+        setHelpTopics,
+        activeHelpTopic,
+        setActiveHelpTopicByName,
+        filteredHelpTopics,
+        setFilteredHelpTopics,
+        loading,
+        setLoading,
+    };
+};
+
+const HelpTopicPanelContent = (_a) => {
+    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true, onClose } = _a, props = __rest$1(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
+    const { setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
+    const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React.useState(false);
+    const toggleHelpTopicMenu = () => {
+        setIsHelpTopicMenuOpen(!isHelpTopicMenuOpen);
+    };
+    const onSelectHelpTopic = (event) => {
+        const topicName = event.currentTarget.id;
+        setActiveHelpTopicByName(topicName);
+        toggleHelpTopicMenu();
+    };
+    const menuItems = filteredHelpTopics.length > 0 &&
+        filteredHelpTopics.map((topic) => {
+            return (React.createElement(OptionsMenuItem, { key: topic.name, onSelect: onSelectHelpTopic, id: topic.name }, topic.title));
+        });
+    const paddingContainer = (children) => React.createElement("div", { style: { padding: '24px' } }, children);
+    const panelBodyItems = (React.createElement(React.Fragment, null,
+        paddingContainer(React.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
+        React.createElement(Divider, null),
+        paddingContainer(activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links.map((link) => {
+            return React.createElement(QuickStartMarkdownView, { key: link, content: link });
+        }))));
+    const content = (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base" }, props),
+        React.createElement("div", null,
+            React.createElement(DrawerHead, null,
+                React.createElement("div", { className: "pfext-quick-start-panel-content__title" },
+                    menuItems && (React.createElement(OptionsMenu, { id: 'helptopics', isPlain: true, isOpen: isHelpTopicMenuOpen, toggle: React.createElement(OptionsMenuToggle, { style: { paddingLeft: '0px' }, onToggle: toggleHelpTopicMenu, toggleTemplate: React.createElement(BarsIcon, null) }), menuItems: menuItems })),
+                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)),
+                React.createElement(DrawerActions, null,
+                    React.createElement(DrawerCloseButton, { onClick: onClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))),
+            React.createElement(Divider, null),
+            React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" }, panelBodyItems))));
+    return content;
+};
+
+const HelpTopicContainer = (_a) => {
+    var { helpTopics, children, resourceBundle, language, loading = false, markdown, contextProps } = _a, props = __rest$1(_a, ["helpTopics", "children", "resourceBundle", "language", "loading", "markdown", "contextProps"]);
+    const valuesForHelpTopicContext = useValuesForHelpTopicContext(Object.assign({ helpTopics,
+        language, resourceBundle: Object.assign({}, resourceBundle), loading,
+        markdown }, contextProps));
+    React.useEffect(() => {
+        if (loading !== valuesForHelpTopicContext.loading) {
+            valuesForHelpTopicContext.setLoading(loading);
+        }
+    }, [loading, valuesForHelpTopicContext]);
+    React.useEffect(() => {
+        if (helpTopics &&
+            JSON.stringify(helpTopics) !== JSON.stringify(valuesForHelpTopicContext.helpTopics)) {
+            valuesForHelpTopicContext.setHelpTopics(helpTopics);
+        }
+    }, [helpTopics, valuesForHelpTopicContext]);
+    const drawerProps = Object.assign({}, props);
+    return (React.createElement(HelpTopicContext.Provider, { value: valuesForHelpTopicContext },
+        React.createElement(HelpTopicDrawer, Object.assign({}, drawerProps), children)));
+};
+const HelpTopicDrawer = (_a) => {
+    var { 
+    // helpTopics,
+    children } = _a, props = __rest$1(_a, ["children"]);
+    const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
+    // Leave here if query param is desired for help topics later
+    // React.useEffect(() => {
+    //   const params = new URLSearchParams(window.location.search);
+    //   // if there is a quick start param, but the quick start is not active, set it
+    //   // this can happen if a new browser session is opened or an incognito window for example
+    //   const helpTopicNameFromParam = params.get(HELP_TOPIC_NAME_KEY) || '';
+    //   if (helpTopicNameFromParam) {
+    //     setActiveHelpTopicByName(helpTopicNameFromParam);
+    //   }
+    // }, [inContextHelpTopics, setActiveHelpTopicByName]);
+    const onClose = () => {
+        setActiveHelpTopicByName('');
+    };
+    const panelContent = (React.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics, onClose: onClose }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Drawer, Object.assign({ isExpanded: !!activeHelpTopic, isInline: true }, props), children ? (React.createElement(DrawerContent, { panelContent: panelContent },
+            React.createElement(DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-c-drawer__main" }, panelContent)))));
+};
+
 const useLocalStorage = (key, initialValue) => {
     // State to store our value
     // Pass initial state function to useState so logic is only executed once
@@ -19855,5 +20489,5 @@ const useLocalStorage = (key, initialValue) => {
     return [storedValue, setValue];
 };
 
-export { Box, CamelCaseWrap, EmptyBox, Loading, LoadingBox, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForQuickStartContext };
+export { Box, CamelCaseWrap, EmptyBox, HELP_TOPIC_NAME_KEY, HelpTopicContainer, HelpTopicContext, HelpTopicContextDefaults, HelpTopicDrawer, Loading, LoadingBox, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForHelpTopicContext, useValuesForQuickStartContext };
 //# sourceMappingURL=quickstarts-full.es.js.map