@patternfly/quickstarts 5.0.0-prerelease.0 → 5.0.0-prerelease.2

package/dist/quickstarts-full.es.js

@@ -5316,7 +5316,7 @@ const statusIcons = {
 const FormControlIcon = (_a) => {
     var { status, customIcon, className } = _a, props = __rest$1(_a, ["status", "customIcon", "className"]);
     const StatusIcon = status && statusIcons[status];
-    return (React.createElement("div", Object.assign({ className: css(formStyles$1.formControlIcon, status && formStyles$1.modifiers.status, className) }, props), customIcon || React.createElement(StatusIcon, null)));
+    return (React.createElement("span", Object.assign({ className: css(formStyles$1.formControlIcon, status && formStyles$1.modifiers.status, className) }, props), customIcon || React.createElement(StatusIcon, null)));
 };
 
 var TextInputTypes;
@@ -5401,9 +5401,9 @@ class TextInputBase extends React.Component {
         /* eslint-disable @typescript-eslint/no-unused-vars */
         onChange, onFocus, onBlur, isLeftTruncated, isExpanded, readOnly, readOnlyVariant, isRequired, isDisabled, customIcon, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["innerRef", "className", "type", "value", "placeholder", "validated", "onChange", "onFocus", "onBlur", "isLeftTruncated", "isExpanded", "readOnly", "readOnlyVariant", "isRequired", "isDisabled", "customIcon", "ouiaId", "ouiaSafe"]);
         const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
-        return (React.createElement("div", { className: css(formStyles$1.formControl, readOnlyVariant && formStyles$1.modifiers.readonly, readOnlyVariant === 'plain' && formStyles$1.modifiers.plain, isDisabled && formStyles$1.modifiers.disabled, isExpanded && formStyles$1.modifiers.expanded, customIcon && formStyles$1.modifiers.icon, hasStatusIcon && formStyles$1.modifiers[validated], className) },
+        return (React.createElement("span", { className: css(formStyles$1.formControl, readOnlyVariant && formStyles$1.modifiers.readonly, readOnlyVariant === 'plain' && formStyles$1.modifiers.plain, isDisabled && formStyles$1.modifiers.disabled, isExpanded && formStyles$1.modifiers.expanded, customIcon && formStyles$1.modifiers.icon, hasStatusIcon && formStyles$1.modifiers[validated], className) },
             React.createElement("input", Object.assign({}, props, { onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange, type: type, value: this.sanitizeInputValue(value), "aria-invalid": props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error, required: isRequired, disabled: isDisabled, readOnly: !!readOnlyVariant || readOnly, ref: innerRef || this.inputRef, placeholder: placeholder }, getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))),
-            (customIcon || hasStatusIcon) && (React.createElement("div", { className: css(formStyles$1.formControlUtilities) },
+            (customIcon || hasStatusIcon) && (React.createElement("span", { className: css(formStyles$1.formControlUtilities) },
                 customIcon && React.createElement(FormControlIcon, { customIcon: customIcon }),
                 hasStatusIcon && React.createElement(FormControlIcon, { status: validated })))));
     }
@@ -5471,6 +5471,7 @@ var menuStyles = {
     "nav": "pf-m-nav",
     "focus": "pf-m-focus",
     "disabled": "pf-m-disabled",
+    "ariaDisabled": "pf-m-aria-disabled",
     "load": "pf-m-load",
     "loading": "pf-m-loading",
     "danger": "pf-m-danger",
@@ -5651,10 +5652,12 @@ class MenuBase extends React.Component {
                     document.activeElement.parentElement === element ||
                     document.activeElement.closest(`.${menuStyles.menuSearch}`) === element || // if element is a MenuSearch
                     (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element), getFocusableElement: (navigableElement) => {
-                    var _a;
+                    var _a, _b;
                     return ((navigableElement === null || navigableElement === void 0 ? void 0 : navigableElement.tagName) === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
                         (((_a = navigableElement.firstChild) === null || _a === void 0 ? void 0 : _a.tagName) === 'LABEL' &&
                             navigableElement.querySelector('input')) || // for MenuItem checkboxes
+                        (((_b = navigableElement.firstChild) === null || _b === void 0 ? void 0 : _b.tagName) === 'DIV' &&
+                            navigableElement.querySelector('a, button, input')) || // For aria-disabled element that is rendered inside a div with "display: contents" styling
                         navigableElement.firstChild;
                 }, noHorizontalArrowHandling: document.activeElement &&
                     (document.activeElement.classList.contains('pf-v5-c-breadcrumb__link') ||
@@ -5850,7 +5853,7 @@ const FlyoutContext = React.createContext({
     direction: 'right'
 });
 const MenuItemBase = (_a) => {
-    var { children, className, itemId = null, to, hasCheckbox = false, isActive = null, isFavorited = null, isLoadButton = false, isLoading = false, flyoutMenu, direction, description = null, onClick = () => { }, component = 'button', isDisabled = false, isExternalLink = false, isSelected = null, isFocused, isDanger = false, icon, actions, onShowFlyout, drilldownMenu, isOnPath, innerRef, id, 'aria-label': ariaLabel } = _a, props = __rest$1(_a, ["children", "className", "itemId", "to", "hasCheckbox", "isActive", "isFavorited", "isLoadButton", "isLoading", "flyoutMenu", "direction", "description", "onClick", "component", "isDisabled", "isExternalLink", "isSelected", "isFocused", "isDanger", "icon", "actions", "onShowFlyout", "drilldownMenu", "isOnPath", "innerRef", "id", 'aria-label']);
+    var { children, className, itemId = null, to, hasCheckbox = false, isActive = null, isFavorited = null, isLoadButton = false, isLoading = false, flyoutMenu, direction, description = null, onClick = () => { }, component = 'button', isDisabled = false, isAriaDisabled = false, isExternalLink = false, isSelected = null, isFocused, isDanger = false, icon, actions, onShowFlyout, drilldownMenu, isOnPath, innerRef, id, 'aria-label': ariaLabel, tooltipProps } = _a, props = __rest$1(_a, ["children", "className", "itemId", "to", "hasCheckbox", "isActive", "isFavorited", "isLoadButton", "isLoading", "flyoutMenu", "direction", "description", "onClick", "component", "isDisabled", "isAriaDisabled", "isExternalLink", "isSelected", "isFocused", "isDanger", "icon", "actions", "onShowFlyout", "drilldownMenu", "isOnPath", "innerRef", "id", 'aria-label', "tooltipProps"]);
     const { menuId, parentMenu, onSelect, onActionClick, activeItemId, selected, drilldownItemPath, onDrillIn, onDrillOut, flyoutRef, setFlyoutRef, disableHover, role: menuRole } = React.useContext(MenuContext);
     let Component = (to ? 'a' : component);
     if (hasCheckbox && !to) {
@@ -5945,10 +5948,12 @@ const MenuItemBase = (_a) => {
         }
     };
     const onItemSelect = (event, onSelect) => {
-        // Trigger callback for Menu onSelect
-        onSelect && onSelect(event, itemId);
-        // Trigger callback for item onClick
-        onClick && onClick(event);
+        if (!isAriaDisabled) {
+            // Trigger callback for Menu onSelect
+            onSelect && onSelect(event, itemId);
+            // Trigger callback for item onClick
+            onClick && onClick(event);
+        }
     };
     const _isOnPath = (isOnPath && isOnPath) || (drilldownItemPath && drilldownItemPath.includes(itemId)) || false;
     let drill;
@@ -5967,7 +5972,7 @@ const MenuItemBase = (_a) => {
     if (Component === 'a') {
         additionalProps = {
             href: to,
-            'aria-disabled': isDisabled ? true : null,
+            'aria-disabled': isDisabled || isAriaDisabled ? true : null,
             // prevent invalid 'disabled' attribute on <a> tags
             disabled: null,
             target: isExternalLink ? '_blank' : null
@@ -5975,7 +5980,8 @@ const MenuItemBase = (_a) => {
     }
     else if (Component === 'button') {
         additionalProps = {
-            type: 'button'
+            type: 'button',
+            'aria-disabled': isAriaDisabled ? true : null
         };
     }
     if (isOnPath) {
@@ -6020,12 +6026,17 @@ const MenuItemBase = (_a) => {
         }
     };
     const isSelectMenu = menuRole === 'listbox';
-    return (React.createElement("li", Object.assign({ className: css(menuStyles.menuListItem, isDisabled && menuStyles.modifiers.disabled, _isOnPath && menuStyles.modifiers.currentPath, isLoadButton && menuStyles.modifiers.load, isLoading && menuStyles.modifiers.loading, isFocused && menuStyles.modifiers.focus, isDanger && menuStyles.modifiers.danger, className), onMouseOver: onMouseOver }, (flyoutMenu && { onKeyDown: handleFlyout }), { ref: ref, role: !hasCheckbox ? 'none' : 'menuitem' }, (hasCheckbox && { 'aria-label': ariaLabel }), props),
+    const renderItem = (React.createElement(React.Fragment, null,
         React.createElement(GenerateId, null, (randomId) => (React.createElement(Component, Object.assign({ id: id, tabIndex: -1, className: css(menuStyles.menuItem, getIsSelected() && !hasCheckbox && menuStyles.modifiers.selected, className), "aria-current": getAriaCurrent() }, (!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel }), (!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' }), (!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() }), { ref: innerRef }, (!hasCheckbox && {
             onClick: (event) => {
-                onItemSelect(event, onSelect);
-                drill && drill(event);
-                flyoutMenu && handleFlyout(event);
+                if (!isAriaDisabled) {
+                    onItemSelect(event, onSelect);
+                    drill && drill(event);
+                    flyoutMenu && handleFlyout(event);
+                }
+                else {
+                    event.preventDefault();
+                }
             }
         }), (hasCheckbox && { htmlFor: randomId }), additionalProps),
             React.createElement("span", { className: css(menuStyles.menuItemMain) },
@@ -6033,7 +6044,7 @@ const MenuItemBase = (_a) => {
                     React.createElement(AngleLeftIcon, { "aria-hidden": true }))),
                 icon && React.createElement("span", { className: css(menuStyles.menuItemIcon) }, icon),
                 hasCheckbox && (React.createElement("span", { className: css(menuStyles.menuItemCheck) },
-                    React.createElement(Checkbox, { id: randomId, component: "span", isChecked: isSelected || false, onChange: (event) => onItemSelect(event, onSelect), isDisabled: isDisabled }))),
+                    React.createElement(Checkbox, { id: randomId, component: "span", isChecked: isSelected || false, onChange: (event) => onItemSelect(event, onSelect), isDisabled: isDisabled, "aria-disabled": isAriaDisabled }))),
                 React.createElement("span", { className: css(menuStyles.menuItemText) }, children),
                 isExternalLink && (React.createElement("span", { className: css(menuStyles.menuItemExternalIcon) },
                     React.createElement(ExternalLinkAltIcon$1, { "aria-hidden": true }))),
@@ -6049,6 +6060,11 @@ const MenuItemBase = (_a) => {
         React.createElement(MenuItemContext.Provider, { value: { itemId, isDisabled } },
             actions,
             isFavorited !== null && (React.createElement(MenuItemAction, { icon: "favorites", isFavorited: isFavorited, "aria-label": isFavorited ? 'starred' : 'not starred', onClick: (event) => onActionClick(event, itemId), tabIndex: -1, actionId: "fav" })))));
+    return (React.createElement("li", Object.assign({ className: css(menuStyles.menuListItem, isDisabled && menuStyles.modifiers.disabled, isAriaDisabled && menuStyles.modifiers.ariaDisabled, _isOnPath && menuStyles.modifiers.currentPath, isLoadButton && menuStyles.modifiers.load, isLoading && menuStyles.modifiers.loading, isFocused && menuStyles.modifiers.focus, isDanger && menuStyles.modifiers.danger, className), onMouseOver: () => {
+            if (!isAriaDisabled) {
+                onMouseOver();
+            }
+        } }, (flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout }), { ref: ref, role: !hasCheckbox ? 'none' : 'menuitem' }, (hasCheckbox && { 'aria-label': ariaLabel }), props), tooltipProps ? (React.createElement(Tooltip, Object.assign({}, tooltipProps), renderItem)) : (renderItem)));
 };
 const MenuItem = React.forwardRef((props, ref) => (React.createElement(MenuItemBase, Object.assign({}, props, { innerRef: ref }))));
 MenuItem.displayName = 'MenuItem';
@@ -6131,6 +6147,7 @@ SelectOption.displayName = 'SelectOption';
 
 var styles$j = {
   "check": "pf-v5-c-check",
+  "checkInput": "pf-v5-c-check__input",
   "menuToggle": "pf-v5-c-menu-toggle",
   "menuToggleButton": "pf-v5-c-menu-toggle__button",
   "menuToggleControls": "pf-v5-c-menu-toggle__controls",
@@ -6241,11 +6258,11 @@ class FormSelect extends React.Component {
         const selectedOption = React.Children.toArray(children).find((option) => option.props.value === value);
         const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder;
         const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
-        return (React.createElement("div", { className: css(formStyles$1.formControl, isDisabled && formStyles$1.modifiers.disabled, isSelectedPlaceholder && formStyles$1.modifiers.placeholder, hasStatusIcon && formStyles$1.modifiers[validated], className) },
+        return (React.createElement("span", { className: css(formStyles$1.formControl, isDisabled && formStyles$1.modifiers.disabled, isSelectedPlaceholder && formStyles$1.modifiers.placeholder, hasStatusIcon && formStyles$1.modifiers[validated], className) },
             React.createElement("select", Object.assign({}, props, { "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),
-            React.createElement("div", { className: css(formStyles$1.formControlUtilities) },
+            React.createElement("span", { className: css(formStyles$1.formControlUtilities) },
                 hasStatusIcon && React.createElement(FormControlIcon, { status: validated }),
-                React.createElement("div", { className: css(formStyles$1.formControlToggleIcon) },
+                React.createElement("span", { className: css(formStyles$1.formControlToggleIcon) },
                     React.createElement(CaretDownIcon, null)))));
     }
 }
@@ -6319,9 +6336,9 @@ class TextAreaBase extends React.Component {
         props = __rest$1(_a, ["className", "value", "validated", "isRequired", "isDisabled", "readOnlyVariant", "resizeOrientation", "innerRef", "disabled", "autoResize", "onChange"]);
         const orientation = `resize${capitalize(resizeOrientation)}`;
         const hasStatusIcon = ['success', 'error', 'warning'].includes(validated);
-        return (React.createElement("div", { className: css(formStyles$1.formControl, readOnlyVariant && formStyles$1.modifiers.readonly, readOnlyVariant === 'plain' && formStyles$1.modifiers.plain, resizeOrientation && formStyles$1.modifiers[orientation], isDisabled && formStyles$1.modifiers.disabled, hasStatusIcon && formStyles$1.modifiers[validated], className) },
+        return (React.createElement("span", { className: css(formStyles$1.formControl, readOnlyVariant && formStyles$1.modifiers.readonly, readOnlyVariant === 'plain' && formStyles$1.modifiers.plain, resizeOrientation && formStyles$1.modifiers[orientation], isDisabled && formStyles$1.modifiers.disabled, hasStatusIcon && formStyles$1.modifiers[validated], className) },
             React.createElement("textarea", Object.assign({ onChange: this.handleChange }, (typeof this.props.defaultValue !== 'string' && { value }), { "aria-invalid": validated === ValidatedOptions.error, required: isRequired, disabled: isDisabled || disabled, readOnly: !!readOnlyVariant, ref: innerRef || this.inputRef }, props)),
-            hasStatusIcon && (React.createElement("div", { className: css(formStyles$1.formControlUtilities) },
+            hasStatusIcon && (React.createElement("span", { className: css(formStyles$1.formControlUtilities) },
                 React.createElement(FormControlIcon, { status: validated })))));
     }
 }
@@ -7001,7 +7018,7 @@ const Popover = (_a) => {
             React.createElement(PopoverBody, { id: `popover-${uniqueId}-body` }, typeof bodyContent === 'function' ? bodyContent(hide) : bodyContent),
             footerContent && (React.createElement(PopoverFooter, { id: `popover-${uniqueId}-footer` }, typeof footerContent === 'function' ? footerContent(hide) : footerContent)))));
     return (React.createElement(PopoverContext.Provider, { value: { headerComponent } },
-        React.createElement(Popper, { trigger: children, triggerRef: triggerRef, popper: content, popperRef: popoverRef, minWidth: "revert", appendTo: appendTo, isVisible: visible, positionModifiers: positionModifiers, distance: distance, placement: position, onTriggerClick: onTriggerClick, onDocumentClick: onDocumentClick, onDocumentKeyDown: onDocumentKeyDown, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior })));
+        React.createElement(Popper, { trigger: children, triggerRef: triggerRef, popper: content, popperRef: popoverRef, minWidth: minWidth, appendTo: appendTo, isVisible: visible, positionModifiers: positionModifiers, distance: distance, placement: position, onTriggerClick: onTriggerClick, onDocumentClick: onDocumentClick, onDocumentKeyDown: onDocumentKeyDown, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior })));
 };
 Popover.displayName = 'Popover';
 
@@ -8686,7 +8703,7 @@ var ToolbarItemVariant;
     ToolbarItemVariant["expand-all"] = "expand-all";
 })(ToolbarItemVariant || (ToolbarItemVariant = {}));
 const ToolbarItem = (_a) => {
-    var { className, variant, visibility, spacer, widths, align, alignSelf, id, children, isAllExpanded, isOverflowContainer } = _a, props = __rest$1(_a, ["className", "variant", "visibility", "spacer", "widths", "align", "alignSelf", "id", "children", "isAllExpanded", "isOverflowContainer"]);
+    var { className, variant, visibility, spacer, widths, align, alignSelf, alignItems, id, children, isAllExpanded, isOverflowContainer } = _a, props = __rest$1(_a, ["className", "variant", "visibility", "spacer", "widths", "align", "alignSelf", "alignItems", "id", "children", "isAllExpanded", "isOverflowContainer"]);
     if (variant === ToolbarItemVariant.separator) {
         return React.createElement(Divider, Object.assign({ className: css(styles$4.modifiers.vertical, className) }, props));
     }
@@ -8695,7 +8712,7 @@ const ToolbarItem = (_a) => {
         Object.entries(widths || {}).map(([breakpoint, value]) => (widthStyles[`--pf-v5-c-toolbar__item--Width${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}`] = value));
     }
     return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbarItem, variant &&
-            styles$4.modifiers[toCamel(variant)], isAllExpanded && styles$4.modifiers.expanded, isOverflowContainer && styles$4.modifiers.overflowContainer, formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), formatBreakpointMods(align, styles$4, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles$4, '', getBreakpoint(width)), alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline, className) }, (variant === 'label' && { 'aria-hidden': true }), { id: id }, props, (widths && { style: Object.assign(Object.assign({}, widthStyles), props.style) })), children))));
+            styles$4.modifiers[toCamel(variant)], isAllExpanded && styles$4.modifiers.expanded, isOverflowContainer && styles$4.modifiers.overflowContainer, formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), formatBreakpointMods(align, styles$4, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles$4, '', getBreakpoint(width)), alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline, alignSelf === 'start' && styles$4.modifiers.alignSelfStart, alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline, className) }, (variant === 'label' && { 'aria-hidden': true }), { id: id }, props, (widths && { style: Object.assign(Object.assign({}, widthStyles), props.style) })), children))));
 };
 ToolbarItem.displayName = 'ToolbarItem';
 
@@ -8708,7 +8725,7 @@ var ToolbarGroupVariant;
 class ToolbarGroupWithRef extends React.Component {
     render() {
         const _a = this.props, { visibility, align, alignItems, alignSelf, spacer, spaceItems, className, variant, children, isOverflowContainer, innerRef } = _a, props = __rest$1(_a, ["visibility", "align", "alignItems", "alignSelf", "spacer", "spaceItems", "className", "variant", "children", "isOverflowContainer", "innerRef"]);
-        return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbarGroup, variant && styles$4.modifiers[toCamel(variant)], formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), formatBreakpointMods(align, styles$4, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles$4, '', getBreakpoint(width)), formatBreakpointMods(spaceItems, styles$4, '', getBreakpoint(width)), alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline, alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline, isOverflowContainer && styles$4.modifiers.overflowContainer, className) }, props, { ref: innerRef }), children))));
+        return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbarGroup, variant && styles$4.modifiers[toCamel(variant)], formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), formatBreakpointMods(align, styles$4, '', getBreakpoint(width)), formatBreakpointMods(spacer, styles$4, '', getBreakpoint(width)), formatBreakpointMods(spaceItems, styles$4, '', getBreakpoint(width)), alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline, alignSelf === 'start' && styles$4.modifiers.alignSelfStart, alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline, isOverflowContainer && styles$4.modifiers.overflowContainer, className) }, props, { ref: innerRef }), children))));
     }
 }
 const ToolbarGroup = React.forwardRef((props, ref) => (React.createElement(ToolbarGroupWithRef, Object.assign({}, props, { innerRef: ref }))));
@@ -8727,7 +8744,8 @@ class ToolbarChipGroupContent extends React.Component {
             collapseListedFilters =
                 (canUseDOM ? window.innerWidth : 1200) < globalBreakpoints[collapseListedFiltersBreakpoint];
         }
-        return (React.createElement("div", Object.assign({ className: css(styles$4.toolbarContent, (numberOfFilters === 0 || isExpanded) && styles$4.modifiers.hidden, className) }, ((numberOfFilters === 0 || isExpanded) && { hidden: true }), { ref: chipGroupContentRef }, props),
+        const isHidden = numberOfFilters === 0 || isExpanded;
+        return (React.createElement("div", Object.assign({ className: css(styles$4.toolbarContent, !isHidden && !collapseListedFilters && styles$4.modifiers.chipContainer, isHidden && styles$4.modifiers.hidden, className) }, ((numberOfFilters === 0 || isExpanded) && { hidden: true }), { ref: chipGroupContentRef }, props),
             React.createElement(ToolbarGroup, Object.assign({ className: css(collapseListedFilters && styles$4.modifiers.hidden) }, (collapseListedFilters && { hidden: true }), (collapseListedFilters && { 'aria-hidden': true }))),
             collapseListedFilters && numberOfFilters > 0 && !isExpanded && (React.createElement(ToolbarGroup, null,
                 React.createElement(ToolbarItem, null, numberOfFiltersText(numberOfFilters)))),
@@ -8849,17 +8867,16 @@ class ToolbarContent extends React.Component {
         this.chipContainerRef = React.createRef();
     }
     render() {
-        const _a = this.props, { className, children, isExpanded, toolbarId, visibility, alignItems, clearAllFilters, showClearFiltersButton, clearFiltersButtonText } = _a, props = __rest$1(_a, ["className", "children", "isExpanded", "toolbarId", "visibility", "alignItems", "clearAllFilters", "showClearFiltersButton", "clearFiltersButtonText"]);
+        const _a = this.props, { className, children, isExpanded, toolbarId, visibility, alignItems, clearAllFilters, showClearFiltersButton, clearFiltersButtonText, alignSelf } = _a, props = __rest$1(_a, ["className", "children", "isExpanded", "toolbarId", "visibility", "alignItems", "clearAllFilters", "showClearFiltersButton", "clearFiltersButtonText", "alignSelf"]);
         return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbarContent, formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), className) }, props),
             React.createElement(ToolbarContext.Consumer, null, ({ clearAllFilters: clearAllFiltersContext, clearFiltersButtonText: clearFiltersButtonContext, showClearFiltersButton: showClearFiltersButtonContext, toolbarId: toolbarIdContext }) => {
-                const expandableContentId = `${toolbarId ||
-                    toolbarIdContext}-expandable-content-${ToolbarContent.currentId++}`;
+                const expandableContentId = `${toolbarId || toolbarIdContext}-expandable-content-${ToolbarContent.currentId++}`;
                 return (React.createElement(ToolbarContentContext.Provider, { value: {
                         expandableContentRef: this.expandableContentRef,
                         expandableContentId,
                         chipContainerRef: this.chipContainerRef
                     } },
-                    React.createElement("div", { className: css(styles$4.toolbarContentSection, alignItems === 'center' && styles$4.modifiers.alignItemsCenter) }, children),
+                    React.createElement("div", { className: css(styles$4.toolbarContentSection, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline, alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'start' && styles$4.modifiers.alignSelfStart, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline) }, children),
                     React.createElement(ToolbarExpandableContent, { id: expandableContentId, isExpanded: isExpanded, expandableContentRef: this.expandableContentRef, chipContainerRef: this.chipContainerRef, clearAllFilters: clearAllFilters || clearAllFiltersContext, showClearFiltersButton: showClearFiltersButton || showClearFiltersButtonContext, clearFiltersButtonText: clearFiltersButtonText || clearFiltersButtonContext })));
             })))));
     }
@@ -9663,66 +9680,66 @@ m.Pop;a=b();var q=a[0],l=a[1],c=B$1(),e=B$1();null==q&&(q=0,f.replaceState(_exte
 y$1(_extends({pathname:"/",search:"",hash:"",state:null,key:D$1()},"string"===typeof a?F$2(a):a));"production"!==process.env.NODE_ENV?z$2("/"===b.pathname.charAt(0),"Relative pathnames are not supported in createMemoryHistory({ initialEntries }) (invalid entry: "+JSON.stringify(a)+")"):void 0;return b}),f=Math.min(Math.max(null==r?h.length-1:r,0),h.length-1),p=m.Pop,n=h[f],q=B$1(),l=B$1();return {get index(){return f},get action(){return p},get location(){return n},createHref:function(a){return "string"===typeof a?
 a:E$1(a)},push:v,replace:w,go:u,back:function(){u(-1);},forward:function(){u(1);},listen:function(a){return q.push(a)},block:function(a){return l.push(a)}}}
 
-var QuickStartStatus;
-(function (QuickStartStatus) {
-    QuickStartStatus["COMPLETE"] = "Complete";
-    QuickStartStatus["IN_PROGRESS"] = "In Progress";
-    QuickStartStatus["NOT_STARTED"] = "Not started";
-})(QuickStartStatus || (QuickStartStatus = {}));
-var QuickStartTaskStatus;
-(function (QuickStartTaskStatus) {
-    QuickStartTaskStatus["INIT"] = "Initial";
-    QuickStartTaskStatus["VISITED"] = "Visited";
-    QuickStartTaskStatus["REVIEW"] = "Review";
-    QuickStartTaskStatus["SUCCESS"] = "Success";
-    QuickStartTaskStatus["FAILED"] = "Failed";
+var QuickStartStatus;
+(function (QuickStartStatus) {
+    QuickStartStatus["COMPLETE"] = "Complete";
+    QuickStartStatus["IN_PROGRESS"] = "In Progress";
+    QuickStartStatus["NOT_STARTED"] = "Not started";
+})(QuickStartStatus || (QuickStartStatus = {}));
+var QuickStartTaskStatus;
+(function (QuickStartTaskStatus) {
+    QuickStartTaskStatus["INIT"] = "Initial";
+    QuickStartTaskStatus["VISITED"] = "Visited";
+    QuickStartTaskStatus["REVIEW"] = "Review";
+    QuickStartTaskStatus["SUCCESS"] = "Success";
+    QuickStartTaskStatus["FAILED"] = "Failed";
 })(QuickStartTaskStatus || (QuickStartTaskStatus = {}));
 
-const QUICKSTART_SEARCH_FILTER_KEY = 'keyword';
-const QUICKSTART_STATUS_FILTER_KEY = 'status';
-const QUICKSTART_ID_FILTER_KEY = 'quickstart';
-const QUICKSTART_TASKS_INITIAL_STATES = [
-    QuickStartTaskStatus.INIT,
-    QuickStartTaskStatus.VISITED,
-];
+const QUICKSTART_SEARCH_FILTER_KEY = 'keyword';
+const QUICKSTART_STATUS_FILTER_KEY = 'status';
+const QUICKSTART_ID_FILTER_KEY = 'quickstart';
+const QUICKSTART_TASKS_INITIAL_STATES = [
+    QuickStartTaskStatus.INIT,
+    QuickStartTaskStatus.VISITED,
+];
 const HELP_TOPIC_NAME_KEY = 'topic';
 
-let createHistory;
-try {
-    if (process.env.NODE_ENV === 'test') {
-        // Running in node. Can't use browser history
-        createHistory = createMemoryHistory;
-    }
-    else {
-        createHistory = createBrowserHistory;
-    }
-}
-catch (unused) {
-    createHistory = createBrowserHistory;
-}
-const history = createHistory();
-const removeQueryArgument = (k) => {
-    const params = new URLSearchParams(window.location.search);
-    if (params.has(k)) {
-        params.delete(k);
-        const url = new URL(window.location.href);
-        history.replace(`${url.pathname}?${params.toString()}${url.hash}`);
-    }
-};
-const setQueryArgument = (k, v) => {
-    if (!v) {
-        return removeQueryArgument(k);
-    }
-    const params = new URLSearchParams(window.location.search);
-    if (params.get(k) !== v) {
-        params.set(k, v);
-        const url = new URL(window.location.href);
-        history.replace(`${url.pathname}?${params.toString()}${url.hash}`);
-    }
-};
-const clearFilterParams = () => {
-    removeQueryArgument(QUICKSTART_SEARCH_FILTER_KEY);
-    removeQueryArgument(QUICKSTART_STATUS_FILTER_KEY);
+let createHistory;
+try {
+    if (process.env.NODE_ENV === 'test') {
+        // Running in node. Can't use browser history
+        createHistory = createMemoryHistory;
+    }
+    else {
+        createHistory = createBrowserHistory;
+    }
+}
+catch (unused) {
+    createHistory = createBrowserHistory;
+}
+const history = createHistory();
+const removeQueryArgument = (k) => {
+    const params = new URLSearchParams(window.location.search);
+    if (params.has(k)) {
+        params.delete(k);
+        const url = new URL(window.location.href);
+        history.replace(`${url.pathname}?${params.toString()}${url.hash}`);
+    }
+};
+const setQueryArgument = (k, v) => {
+    if (!v) {
+        return removeQueryArgument(k);
+    }
+    const params = new URLSearchParams(window.location.search);
+    if (params.get(k) !== v) {
+        params.set(k, v);
+        const url = new URL(window.location.href);
+        history.replace(`${url.pathname}?${params.toString()}${url.hash}`);
+    }
+};
+const clearFilterParams = () => {
+    removeQueryArgument(QUICKSTART_SEARCH_FILTER_KEY);
+    removeQueryArgument(QUICKSTART_STATUS_FILTER_KEY);
 };
 
 var Status$1 = "Status";
@@ -9786,667 +9803,667 @@ var en = {
 	"{{type}} • {{duration, number}} minutes": "{{type}} • {{duration, number}} minutes"
 };
 
-/* eslint-disable */
-// https://github.com/i18next/i18next/blob/master/src/PluralResolver.js
-const sets = [
-    {
-        lngs: [
-            'ach',
-            'ak',
-            'am',
-            'arn',
-            'br',
-            'fil',
-            'gun',
-            'ln',
-            'mfe',
-            'mg',
-            'mi',
-            'oc',
-            'pt',
-            'pt-BR',
-            'tg',
-            'tl',
-            'ti',
-            'tr',
-            'uz',
-            'wa',
-        ],
-        nr: [1, 2],
-        fc: 1,
-    },
-    {
-        lngs: [
-            'af',
-            'an',
-            'ast',
-            'az',
-            'bg',
-            'bn',
-            'ca',
-            'da',
-            'de',
-            'dev',
-            'el',
-            'en',
-            'eo',
-            'es',
-            'et',
-            'eu',
-            'fi',
-            'fo',
-            'fur',
-            'fy',
-            'gl',
-            'gu',
-            'ha',
-            'hi',
-            'hu',
-            'hy',
-            'ia',
-            'it',
-            'kk',
-            'kn',
-            'ku',
-            'lb',
-            'mai',
-            'ml',
-            'mn',
-            'mr',
-            'nah',
-            'nap',
-            'nb',
-            'ne',
-            'nl',
-            'nn',
-            'no',
-            'nso',
-            'pa',
-            'pap',
-            'pms',
-            'ps',
-            'pt-PT',
-            'rm',
-            'sco',
-            'se',
-            'si',
-            'so',
-            'son',
-            'sq',
-            'sv',
-            'sw',
-            'ta',
-            'te',
-            'tk',
-            'ur',
-            'yo',
-        ],
-        nr: [1, 2],
-        fc: 2,
-    },
-    {
-        lngs: [
-            'ay',
-            'bo',
-            'cgg',
-            'fa',
-            'ht',
-            'id',
-            'ja',
-            'jbo',
-            'ka',
-            'km',
-            'ko',
-            'ky',
-            'lo',
-            'ms',
-            'sah',
-            'su',
-            'th',
-            'tt',
-            'ug',
-            'vi',
-            'wo',
-            'zh',
-        ],
-        nr: [1],
-        fc: 3,
-    },
-    { lngs: ['be', 'bs', 'cnr', 'dz', 'hr', 'ru', 'sr', 'uk'], nr: [1, 2, 5], fc: 4 },
-    { lngs: ['ar'], nr: [0, 1, 2, 3, 11, 100], fc: 5 },
-    { lngs: ['cs', 'sk'], nr: [1, 2, 5], fc: 6 },
-    { lngs: ['csb', 'pl'], nr: [1, 2, 5], fc: 7 },
-    { lngs: ['cy'], nr: [1, 2, 3, 8], fc: 8 },
-    { lngs: ['fr'], nr: [1, 2], fc: 9 },
-    { lngs: ['ga'], nr: [1, 2, 3, 7, 11], fc: 10 },
-    { lngs: ['gd'], nr: [1, 2, 3, 20], fc: 11 },
-    { lngs: ['is'], nr: [1, 2], fc: 12 },
-    { lngs: ['jv'], nr: [0, 1], fc: 13 },
-    { lngs: ['kw'], nr: [1, 2, 3, 4], fc: 14 },
-    { lngs: ['lt'], nr: [1, 2, 10], fc: 15 },
-    { lngs: ['lv'], nr: [1, 2, 0], fc: 16 },
-    { lngs: ['mk'], nr: [1, 2], fc: 17 },
-    { lngs: ['mnk'], nr: [0, 1, 2], fc: 18 },
-    { lngs: ['mt'], nr: [1, 2, 11, 20], fc: 19 },
-    { lngs: ['or'], nr: [2, 1], fc: 2 },
-    { lngs: ['ro'], nr: [1, 2, 20], fc: 20 },
-    { lngs: ['sl'], nr: [5, 1, 2, 3], fc: 21 },
-    { lngs: ['he', 'iw'], nr: [1, 2, 20, 21], fc: 22 },
-];
-const _rulesPluralsTypes = {
-    1: function (n) {
-        return Number(n > 1);
-    },
-    2: function (n) {
-        return Number(n != 1);
-    },
-    3: function (n) {
-        return 0;
-    },
-    4: function (n) {
-        return Number(n % 10 == 1 && n % 100 != 11
-            ? 0
-            : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)
-                ? 1
-                : 2);
-    },
-    5: function (n) {
-        return Number(n == 0
-            ? 0
-            : n == 1
-                ? 1
-                : n == 2
-                    ? 2
-                    : n % 100 >= 3 && n % 100 <= 10
-                        ? 3
-                        : n % 100 >= 11
-                            ? 4
-                            : 5);
-    },
-    6: function (n) {
-        return Number(n == 1 ? 0 : n >= 2 && n <= 4 ? 1 : 2);
-    },
-    7: function (n) {
-        return Number(n == 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
-    },
-    8: function (n) {
-        return Number(n == 1 ? 0 : n == 2 ? 1 : n != 8 && n != 11 ? 2 : 3);
-    },
-    9: function (n) {
-        return Number(n >= 2);
-    },
-    10: function (n) {
-        return Number(n == 1 ? 0 : n == 2 ? 1 : n < 7 ? 2 : n < 11 ? 3 : 4);
-    },
-    11: function (n) {
-        return Number(n == 1 || n == 11 ? 0 : n == 2 || n == 12 ? 1 : n > 2 && n < 20 ? 2 : 3);
-    },
-    12: function (n) {
-        return Number(n % 10 != 1 || n % 100 == 11);
-    },
-    13: function (n) {
-        return Number(n !== 0);
-    },
-    14: function (n) {
-        return Number(n == 1 ? 0 : n == 2 ? 1 : n == 3 ? 2 : 3);
-    },
-    15: function (n) {
-        return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
-    },
-    16: function (n) {
-        return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n !== 0 ? 1 : 2);
-    },
-    17: function (n) {
-        return Number(n == 1 || (n % 10 == 1 && n % 100 != 11) ? 0 : 1);
-    },
-    18: function (n) {
-        return Number(n == 0 ? 0 : n == 1 ? 1 : 2);
-    },
-    19: function (n) {
-        return Number(n == 1
-            ? 0
-            : n == 0 || (n % 100 > 1 && n % 100 < 11)
-                ? 1
-                : n % 100 > 10 && n % 100 < 20
-                    ? 2
-                    : 3);
-    },
-    20: function (n) {
-        return Number(n == 1 ? 0 : n == 0 || (n % 100 > 0 && n % 100 < 20) ? 1 : 2);
-    },
-    21: function (n) {
-        return Number(n % 100 == 1 ? 1 : n % 100 == 2 ? 2 : n % 100 == 3 || n % 100 == 4 ? 3 : 0);
-    },
-    22: function (n) {
-        return Number(n == 1 ? 0 : n == 2 ? 1 : (n < 0 || n > 10) && n % 10 == 0 ? 2 : 3);
-    },
-};
-function createRules() {
-    const rules = {};
-    sets.forEach((set) => {
-        set.lngs.forEach((l) => {
-            rules[l] = {
-                numbers: set.nr,
-                plurals: _rulesPluralsTypes[set.fc],
-            };
-        });
-    });
-    return rules;
-}
-class PluralResolver {
-    constructor(options = {}) {
-        this.options = options;
-        this.rules = createRules();
-    }
-    addRule(lng, obj) {
-        this.rules[lng] = obj;
-    }
-    getRule(code) {
-        return this.rules[code];
-    }
-    needsPlural(code) {
-        const rule = this.getRule(code);
-        return rule && rule.numbers.length > 1;
-    }
-    getPluralFormsOfKey(code, key) {
-        return this.getSuffixes(code).map((suffix) => key + suffix);
-    }
-    getSuffixes(code) {
-        const rule = this.getRule(code);
-        if (!rule) {
-            return [];
-        }
-        return rule.numbers.map((number) => this.getSuffix(code, number));
-    }
-    getSuffix(code, count) {
-        const rule = this.getRule(code);
-        if (rule) {
-            // if (rule.numbers.length === 1) return ''; // only singular
-            const idx = rule.noAbs ? rule.plurals(count) : rule.plurals(Math.abs(count));
-            let suffix = rule.numbers[idx];
-            // special treatment for lngs only having singular and plural
-            if (this.options.simplifyPluralSuffix && rule.numbers.length === 2 && rule.numbers[0] === 1) {
-                if (suffix === 2) {
-                    suffix = 'plural';
-                }
-                else if (suffix === 1) {
-                    suffix = '';
-                }
-            }
-            const returnSuffix = () => this.options.prepend && suffix.toString()
-                ? this.options.prepend + suffix.toString()
-                : suffix.toString();
-            // COMPATIBILITY JSON
-            // v1
-            if (this.options.compatibilityJSON === 'v1') {
-                if (suffix === 1) {
-                    return '';
-                }
-                if (typeof suffix === 'number') {
-                    return `_plural_${suffix.toString()}`;
-                }
-                return returnSuffix();
-            }
-            if ( /* v2 */this.options.compatibilityJSON === 'v2') {
-                return returnSuffix();
-            }
-            if (
-            /* v3 - gettext index */ this.options.simplifyPluralSuffix &&
-                rule.numbers.length === 2 &&
-                rule.numbers[0] === 1) {
-                return returnSuffix();
-            }
-            return this.options.prepend && idx.toString()
-                ? this.options.prepend + idx.toString()
-                : idx.toString();
-        }
-        //   this.logger.warn(`no plural rule found for: ${code}`);
-        return '';
-    }
+/* eslint-disable */
+// https://github.com/i18next/i18next/blob/master/src/PluralResolver.js
+const sets = [
+    {
+        lngs: [
+            'ach',
+            'ak',
+            'am',
+            'arn',
+            'br',
+            'fil',
+            'gun',
+            'ln',
+            'mfe',
+            'mg',
+            'mi',
+            'oc',
+            'pt',
+            'pt-BR',
+            'tg',
+            'tl',
+            'ti',
+            'tr',
+            'uz',
+            'wa',
+        ],
+        nr: [1, 2],
+        fc: 1,
+    },
+    {
+        lngs: [
+            'af',
+            'an',
+            'ast',
+            'az',
+            'bg',
+            'bn',
+            'ca',
+            'da',
+            'de',
+            'dev',
+            'el',
+            'en',
+            'eo',
+            'es',
+            'et',
+            'eu',
+            'fi',
+            'fo',
+            'fur',
+            'fy',
+            'gl',
+            'gu',
+            'ha',
+            'hi',
+            'hu',
+            'hy',
+            'ia',
+            'it',
+            'kk',
+            'kn',
+            'ku',
+            'lb',
+            'mai',
+            'ml',
+            'mn',
+            'mr',
+            'nah',
+            'nap',
+            'nb',
+            'ne',
+            'nl',
+            'nn',
+            'no',
+            'nso',
+            'pa',
+            'pap',
+            'pms',
+            'ps',
+            'pt-PT',
+            'rm',
+            'sco',
+            'se',
+            'si',
+            'so',
+            'son',
+            'sq',
+            'sv',
+            'sw',
+            'ta',
+            'te',
+            'tk',
+            'ur',
+            'yo',
+        ],
+        nr: [1, 2],
+        fc: 2,
+    },
+    {
+        lngs: [
+            'ay',
+            'bo',
+            'cgg',
+            'fa',
+            'ht',
+            'id',
+            'ja',
+            'jbo',
+            'ka',
+            'km',
+            'ko',
+            'ky',
+            'lo',
+            'ms',
+            'sah',
+            'su',
+            'th',
+            'tt',
+            'ug',
+            'vi',
+            'wo',
+            'zh',
+        ],
+        nr: [1],
+        fc: 3,
+    },
+    { lngs: ['be', 'bs', 'cnr', 'dz', 'hr', 'ru', 'sr', 'uk'], nr: [1, 2, 5], fc: 4 },
+    { lngs: ['ar'], nr: [0, 1, 2, 3, 11, 100], fc: 5 },
+    { lngs: ['cs', 'sk'], nr: [1, 2, 5], fc: 6 },
+    { lngs: ['csb', 'pl'], nr: [1, 2, 5], fc: 7 },
+    { lngs: ['cy'], nr: [1, 2, 3, 8], fc: 8 },
+    { lngs: ['fr'], nr: [1, 2], fc: 9 },
+    { lngs: ['ga'], nr: [1, 2, 3, 7, 11], fc: 10 },
+    { lngs: ['gd'], nr: [1, 2, 3, 20], fc: 11 },
+    { lngs: ['is'], nr: [1, 2], fc: 12 },
+    { lngs: ['jv'], nr: [0, 1], fc: 13 },
+    { lngs: ['kw'], nr: [1, 2, 3, 4], fc: 14 },
+    { lngs: ['lt'], nr: [1, 2, 10], fc: 15 },
+    { lngs: ['lv'], nr: [1, 2, 0], fc: 16 },
+    { lngs: ['mk'], nr: [1, 2], fc: 17 },
+    { lngs: ['mnk'], nr: [0, 1, 2], fc: 18 },
+    { lngs: ['mt'], nr: [1, 2, 11, 20], fc: 19 },
+    { lngs: ['or'], nr: [2, 1], fc: 2 },
+    { lngs: ['ro'], nr: [1, 2, 20], fc: 20 },
+    { lngs: ['sl'], nr: [5, 1, 2, 3], fc: 21 },
+    { lngs: ['he', 'iw'], nr: [1, 2, 20, 21], fc: 22 },
+];
+const _rulesPluralsTypes = {
+    1: function (n) {
+        return Number(n > 1);
+    },
+    2: function (n) {
+        return Number(n != 1);
+    },
+    3: function (n) {
+        return 0;
+    },
+    4: function (n) {
+        return Number(n % 10 == 1 && n % 100 != 11
+            ? 0
+            : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20)
+                ? 1
+                : 2);
+    },
+    5: function (n) {
+        return Number(n == 0
+            ? 0
+            : n == 1
+                ? 1
+                : n == 2
+                    ? 2
+                    : n % 100 >= 3 && n % 100 <= 10
+                        ? 3
+                        : n % 100 >= 11
+                            ? 4
+                            : 5);
+    },
+    6: function (n) {
+        return Number(n == 1 ? 0 : n >= 2 && n <= 4 ? 1 : 2);
+    },
+    7: function (n) {
+        return Number(n == 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
+    },
+    8: function (n) {
+        return Number(n == 1 ? 0 : n == 2 ? 1 : n != 8 && n != 11 ? 2 : 3);
+    },
+    9: function (n) {
+        return Number(n >= 2);
+    },
+    10: function (n) {
+        return Number(n == 1 ? 0 : n == 2 ? 1 : n < 7 ? 2 : n < 11 ? 3 : 4);
+    },
+    11: function (n) {
+        return Number(n == 1 || n == 11 ? 0 : n == 2 || n == 12 ? 1 : n > 2 && n < 20 ? 2 : 3);
+    },
+    12: function (n) {
+        return Number(n % 10 != 1 || n % 100 == 11);
+    },
+    13: function (n) {
+        return Number(n !== 0);
+    },
+    14: function (n) {
+        return Number(n == 1 ? 0 : n == 2 ? 1 : n == 3 ? 2 : 3);
+    },
+    15: function (n) {
+        return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
+    },
+    16: function (n) {
+        return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n !== 0 ? 1 : 2);
+    },
+    17: function (n) {
+        return Number(n == 1 || (n % 10 == 1 && n % 100 != 11) ? 0 : 1);
+    },
+    18: function (n) {
+        return Number(n == 0 ? 0 : n == 1 ? 1 : 2);
+    },
+    19: function (n) {
+        return Number(n == 1
+            ? 0
+            : n == 0 || (n % 100 > 1 && n % 100 < 11)
+                ? 1
+                : n % 100 > 10 && n % 100 < 20
+                    ? 2
+                    : 3);
+    },
+    20: function (n) {
+        return Number(n == 1 ? 0 : n == 0 || (n % 100 > 0 && n % 100 < 20) ? 1 : 2);
+    },
+    21: function (n) {
+        return Number(n % 100 == 1 ? 1 : n % 100 == 2 ? 2 : n % 100 == 3 || n % 100 == 4 ? 3 : 0);
+    },
+    22: function (n) {
+        return Number(n == 1 ? 0 : n == 2 ? 1 : (n < 0 || n > 10) && n % 10 == 0 ? 2 : 3);
+    },
+};
+function createRules() {
+    const rules = {};
+    sets.forEach((set) => {
+        set.lngs.forEach((l) => {
+            rules[l] = {
+                numbers: set.nr,
+                plurals: _rulesPluralsTypes[set.fc],
+            };
+        });
+    });
+    return rules;
+}
+class PluralResolver {
+    constructor(options = {}) {
+        this.options = options;
+        this.rules = createRules();
+    }
+    addRule(lng, obj) {
+        this.rules[lng] = obj;
+    }
+    getRule(code) {
+        return this.rules[code];
+    }
+    needsPlural(code) {
+        const rule = this.getRule(code);
+        return rule && rule.numbers.length > 1;
+    }
+    getPluralFormsOfKey(code, key) {
+        return this.getSuffixes(code).map((suffix) => key + suffix);
+    }
+    getSuffixes(code) {
+        const rule = this.getRule(code);
+        if (!rule) {
+            return [];
+        }
+        return rule.numbers.map((number) => this.getSuffix(code, number));
+    }
+    getSuffix(code, count) {
+        const rule = this.getRule(code);
+        if (rule) {
+            // if (rule.numbers.length === 1) return ''; // only singular
+            const idx = rule.noAbs ? rule.plurals(count) : rule.plurals(Math.abs(count));
+            let suffix = rule.numbers[idx];
+            // special treatment for lngs only having singular and plural
+            if (this.options.simplifyPluralSuffix && rule.numbers.length === 2 && rule.numbers[0] === 1) {
+                if (suffix === 2) {
+                    suffix = 'plural';
+                }
+                else if (suffix === 1) {
+                    suffix = '';
+                }
+            }
+            const returnSuffix = () => this.options.prepend && suffix.toString()
+                ? this.options.prepend + suffix.toString()
+                : suffix.toString();
+            // COMPATIBILITY JSON
+            // v1
+            if (this.options.compatibilityJSON === 'v1') {
+                if (suffix === 1) {
+                    return '';
+                }
+                if (typeof suffix === 'number') {
+                    return `_plural_${suffix.toString()}`;
+                }
+                return returnSuffix();
+            }
+            if ( /* v2 */this.options.compatibilityJSON === 'v2') {
+                return returnSuffix();
+            }
+            if (
+            /* v3 - gettext index */ this.options.simplifyPluralSuffix &&
+                rule.numbers.length === 2 &&
+                rule.numbers[0] === 1) {
+                return returnSuffix();
+            }
+            return this.options.prepend && idx.toString()
+                ? this.options.prepend + idx.toString()
+                : idx.toString();
+        }
+        //   this.logger.warn(`no plural rule found for: ${code}`);
+        return '';
+    }
 }
 
-const QUICK_START_NAME = 'console.openshift.io/name';
-const getQuickStartByName = (name, quickStarts) => quickStarts.find((quickStart) => quickStart.metadata.name === name);
-const getQuickStartStatus = (allQuickStartStates, quickStartID) => { var _a, _b; return (_b = (_a = allQuickStartStates === null || allQuickStartStates === void 0 ? void 0 : allQuickStartStates[quickStartID]) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : QuickStartStatus.NOT_STARTED; };
-const getTaskStatusKey = (taskNumber) => `taskStatus${taskNumber}`;
-const getQuickStartStatusCount = (allQuickStartStates, quickStarts) => quickStarts.reduce((totals, item) => {
-    totals[getQuickStartStatus(allQuickStartStates, item.metadata.name)]++;
-    return totals;
-}, {
-    [QuickStartStatus.IN_PROGRESS]: 0,
-    [QuickStartStatus.COMPLETE]: 0,
-    [QuickStartStatus.NOT_STARTED]: 0,
-});
-const getDisabledQuickStarts = () => {
-    var _a, _b;
-    let disabledQuickStarts = [];
-    const quickStartServerData = (_a = window.SERVER_FLAGS) === null || _a === void 0 ? void 0 : _a.quickStarts;
-    try {
-        if (quickStartServerData) {
-            disabledQuickStarts = (_b = JSON.parse(quickStartServerData).disabled) !== null && _b !== void 0 ? _b : [];
-        }
-    }
-    catch (e) {
-        // eslint-disable-next-line no-console
-        console.error('error while parsing SERVER_FLAG.quickStarts', e);
-    }
-    return disabledQuickStarts;
-};
-const isDisabledQuickStart = (quickstart, disabledQuickStarts) => {
-    var _a, _b;
-    const quickStartName = (_b = (_a = quickstart.metadata.annotations) === null || _a === void 0 ? void 0 : _a[QUICK_START_NAME]) !== null && _b !== void 0 ? _b : quickstart.metadata.name;
-    return disabledQuickStarts.includes(quickStartName);
-};
-const filterQuickStarts = (quickStarts, filterText, statusFilters, allQuickStartStates) => {
-    const searchText = filterText.toLowerCase();
-    return quickStarts.filter(({ metadata: { name }, spec: { displayName, prerequisites = [], description } }) => {
-        const matchesFilter = statusFilters.length > 0
-            ? statusFilters.includes(getQuickStartStatus(allQuickStartStates, name))
-            : true;
-        const matchesText = displayName.toLowerCase().includes(searchText) ||
-            description.toLowerCase().includes(searchText) ||
-            prerequisites.some((text) => text.toLowerCase().includes(searchText));
-        return matchesFilter && matchesText;
-    });
-};
-const camelize = (str) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
-    if (+match === 0) {
-        return '';
-    } // or if (/\s+/.test(match)) for white spaces
-    return index === 0 ? match.toLowerCase() : match.toUpperCase();
+const QUICK_START_NAME = 'console.openshift.io/name';
+const getQuickStartByName = (name, quickStarts) => quickStarts.find((quickStart) => quickStart.metadata.name === name);
+const getQuickStartStatus = (allQuickStartStates, quickStartID) => { var _a, _b; return (_b = (_a = allQuickStartStates === null || allQuickStartStates === void 0 ? void 0 : allQuickStartStates[quickStartID]) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : QuickStartStatus.NOT_STARTED; };
+const getTaskStatusKey = (taskNumber) => `taskStatus${taskNumber}`;
+const getQuickStartStatusCount = (allQuickStartStates, quickStarts) => quickStarts.reduce((totals, item) => {
+    totals[getQuickStartStatus(allQuickStartStates, item.metadata.name)]++;
+    return totals;
+}, {
+    [QuickStartStatus.IN_PROGRESS]: 0,
+    [QuickStartStatus.COMPLETE]: 0,
+    [QuickStartStatus.NOT_STARTED]: 0,
+});
+const getDisabledQuickStarts = () => {
+    var _a, _b;
+    let disabledQuickStarts = [];
+    const quickStartServerData = (_a = window.SERVER_FLAGS) === null || _a === void 0 ? void 0 : _a.quickStarts;
+    try {
+        if (quickStartServerData) {
+            disabledQuickStarts = (_b = JSON.parse(quickStartServerData).disabled) !== null && _b !== void 0 ? _b : [];
+        }
+    }
+    catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('error while parsing SERVER_FLAG.quickStarts', e);
+    }
+    return disabledQuickStarts;
+};
+const isDisabledQuickStart = (quickstart, disabledQuickStarts) => {
+    var _a, _b;
+    const quickStartName = (_b = (_a = quickstart.metadata.annotations) === null || _a === void 0 ? void 0 : _a[QUICK_START_NAME]) !== null && _b !== void 0 ? _b : quickstart.metadata.name;
+    return disabledQuickStarts.includes(quickStartName);
+};
+const filterQuickStarts = (quickStarts, filterText, statusFilters, allQuickStartStates) => {
+    const searchText = filterText.toLowerCase();
+    return quickStarts.filter(({ metadata: { name }, spec: { displayName, prerequisites = [], description } }) => {
+        const matchesFilter = statusFilters.length > 0
+            ? statusFilters.includes(getQuickStartStatus(allQuickStartStates, name))
+            : true;
+        const matchesText = displayName.toLowerCase().includes(searchText) ||
+            description.toLowerCase().includes(searchText) ||
+            prerequisites.some((text) => text.toLowerCase().includes(searchText));
+        return matchesFilter && matchesText;
+    });
+};
+const camelize = (str) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
+    if (+match === 0) {
+        return '';
+    } // or if (/\s+/.test(match)) for white spaces
+    return index === 0 ? match.toLowerCase() : match.toUpperCase();
 });
 
-const pluralResolver = new PluralResolver({ simplifyPluralSuffix: true });
-const getDefaultQuickStartState = (totalTasks, initialStatus) => {
-    const defaultQuickStartState = {
-        status: initialStatus || QuickStartStatus.NOT_STARTED,
-        taskNumber: -1,
-    };
-    if (totalTasks) {
-        for (let i = 0; i < totalTasks; i++) {
-            defaultQuickStartState[getTaskStatusKey(i)] = QuickStartTaskStatus.INIT;
-        }
-    }
-    return defaultQuickStartState;
-};
-const QuickStartContextDefaults = {
-    allQuickStarts: [],
-    activeQuickStartID: '',
-    allQuickStartStates: {},
-    activeQuickStartState: {},
-    setAllQuickStarts: () => { },
-    resourceBundle: en,
-    getResource: (resource) => resource,
-    language: 'en',
-    useQueryParams: true,
-    filter: {
-        keyword: '',
-        status: {
-            statusTypes: {},
-            statusFilters: [],
-        },
-    },
-    setFilter: () => { },
-    footer: null,
-    useLegacyHeaderColors: false,
-    markdown: null,
-    loading: false,
-    alwaysShowTaskReview: true,
-};
-const QuickStartContext = createContext(QuickStartContextDefaults);
-const getResource = (resource, options, resourceBundle, lng) => {
-    if (options && !isNaN(options.count)) {
-        const suffix = pluralResolver.getSuffix(lng, options.count);
-        if (suffix && resourceBundle[`${resource}_${suffix}`]) {
-            // needs plural
-            return resourceBundle[`${resource}_${suffix}`];
-        }
-    }
-    return (resourceBundle && resourceBundle[resource]) || resource;
-};
-const useValuesForQuickStartContext = (value = {}) => {
-    var _a, _b;
-    const combinedValue = Object.assign(Object.assign({}, QuickStartContextDefaults), value);
-    const { activeQuickStartID, setActiveQuickStartID, setAllQuickStartStates, useQueryParams, allQuickStartStates, allQuickStarts = [], footer, useLegacyHeaderColors, markdown, } = combinedValue;
-    const [quickStarts, setQuickStarts] = React__default.useState(combinedValue.allQuickStarts || []);
-    const [resourceBundle, setResourceBundle] = React__default.useState(Object.assign(Object.assign({}, en), combinedValue.resourceBundle));
-    const [language, setLanguage] = React__default.useState(combinedValue.language);
-    const changeResourceBundle = (bundle, lng) => {
-        lng && setLanguage(lng);
-        setResourceBundle(Object.assign(Object.assign({}, en), bundle));
-    };
-    const findResource = useCallback((resource, count) => getResource(resource, count !== undefined ? { count } : null, resourceBundle, language), [resourceBundle, language]);
-    const [loading, setLoading] = React__default.useState(combinedValue.loading);
-    const [alwaysShowTaskReview, setAlwaysShowTaskReview] = React__default.useState(combinedValue.alwaysShowTaskReview);
-    const initialSearchParams = new URLSearchParams(window.location.search);
-    const initialSearchQuery = initialSearchParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
-    const initialStatusFilters = ((_a = initialSearchParams.get(QUICKSTART_STATUS_FILTER_KEY)) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
-    const quickStartStatusCount = getQuickStartStatusCount(allQuickStartStates, allQuickStarts);
-    const [statusTypes, setStatusTypes] = React__default.useState({
-        [QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.COMPLETE]),
-        [QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.IN_PROGRESS]),
-        [QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.NOT_STARTED]),
-    });
-    const [statusFilters, setStatusFilters] = React__default.useState(initialStatusFilters);
-    const [filterKeyword, setFilterKeyword] = React__default.useState(initialSearchQuery);
-    const setFilter = (type, val) => {
-        if (type === 'keyword') {
-            setFilterKeyword(val);
-        }
-        else if (type === 'status') {
-            setStatusFilters(val);
-        }
-    };
-    React__default.useEffect(() => {
-        const updatedQuickStartStatusCount = getQuickStartStatusCount(allQuickStartStates, quickStarts);
-        setStatusTypes({
-            [QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.COMPLETE]),
-            [QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.IN_PROGRESS]),
-            [QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.NOT_STARTED]),
-        });
-    }, [allQuickStartStates, findResource, quickStarts]);
-    const updateAllQuickStarts = (qs) => {
-        setQuickStarts(qs);
-    };
-    const setActiveQuickStart = useCallback((quickStartId, totalTasks) => {
-        setActiveQuickStartID((id) => {
-            if (!quickStartId || id === quickStartId) {
-                useQueryParams && removeQueryArgument(QUICKSTART_ID_FILTER_KEY);
-                return '';
-            }
-            useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, quickStartId);
-            return quickStartId;
-        });
-        setAllQuickStartStates((qs) => !quickStartId || qs[quickStartId]
-            ? qs
-            : Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks) }));
-    }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
-    const startQuickStart = useCallback((quickStartId, totalTasks) => {
-        setActiveQuickStartID((id) => {
-            if (!id || id !== quickStartId) {
-                useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, quickStartId);
-                return quickStartId;
-            }
-            useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, id);
-            return id;
-        });
-        setAllQuickStartStates((qs) => {
-            if (qs.hasOwnProperty(quickStartId)) {
-                return Object.assign(Object.assign({}, qs), { [quickStartId]: Object.assign(Object.assign({}, qs[quickStartId]), { status: QuickStartStatus.IN_PROGRESS }) });
-            }
-            return Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, QuickStartStatus.IN_PROGRESS) });
-        });
-    }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
-    const restartQuickStart = useCallback((quickStartId, totalTasks) => {
-        setActiveQuickStartID((id) => {
-            if (!id || id !== quickStartId) {
-                useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, quickStartId);
-                return quickStartId;
-            }
-            useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, id);
-            return id;
-        });
-        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
-        ? QuickStartTaskStatus.REVIEW
-        : QuickStartTaskStatus.VISITED;
-    const nextStep = useCallback((totalTasks) => {
-        if (!activeQuickStartID) {
-            return;
-        }
-        setAllQuickStartStates((qs) => {
-            const quickStart = qs[activeQuickStartID];
-            const status = quickStart === null || quickStart === void 0 ? void 0 : quickStart.status;
-            const taskNumber = quickStart === null || quickStart === void 0 ? void 0 : quickStart.taskNumber;
-            const taskStatus = quickStart[getTaskStatusKey(taskNumber)];
-            let updatedStatus;
-            let updatedTaskNumber;
-            let updatedTaskStatus;
-            if (status === QuickStartStatus.NOT_STARTED) {
-                updatedStatus = QuickStartStatus.IN_PROGRESS;
-            }
-            else if (status === QuickStartStatus.IN_PROGRESS &&
-                !QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) &&
-                taskNumber === totalTasks - 1) {
-                updatedStatus = QuickStartStatus.COMPLETE;
-            }
-            if (taskStatus === QuickStartTaskStatus.VISITED) {
-                updatedTaskStatus = QuickStartTaskStatus.REVIEW;
-            }
-            if (taskNumber < totalTasks && !updatedTaskStatus) {
-                updatedTaskNumber = taskNumber + 1;
-            }
-            const markInitialStepVisitedOrReview = updatedTaskNumber > -1 &&
-                quickStart[getTaskStatusKey(updatedTaskNumber)] === QuickStartTaskStatus.INIT
-                ? stepAfterInitial
-                : quickStart[getTaskStatusKey(updatedTaskNumber)];
-            const newState = Object.assign(Object.assign({}, qs), { [activeQuickStartID]: Object.assign(Object.assign(Object.assign(Object.assign({}, quickStart), (updatedStatus ? { status: updatedStatus } : {})), (updatedTaskNumber > -1
-                    ? {
-                        taskNumber: updatedTaskNumber,
-                        [getTaskStatusKey(updatedTaskNumber)]: markInitialStepVisitedOrReview,
-                    }
-                    : {})), (updatedTaskStatus ? { [getTaskStatusKey(taskNumber)]: updatedTaskStatus } : {})) });
-            return newState;
-        });
-    }, [activeQuickStartID, setAllQuickStartStates, stepAfterInitial]);
-    const previousStep = useCallback(() => {
-        setAllQuickStartStates((qs) => {
-            const quickStart = qs[activeQuickStartID];
-            const taskNumber = quickStart === null || quickStart === void 0 ? void 0 : quickStart.taskNumber;
-            if (taskNumber < 0) {
-                return qs;
-            }
-            return Object.assign(Object.assign({}, qs), { [activeQuickStartID]: Object.assign(Object.assign({}, quickStart), { taskNumber: taskNumber - 1 }) });
-        });
-    }, [activeQuickStartID, setAllQuickStartStates]);
-    const setQuickStartTaskNumber = useCallback((quickStartId, taskNumber) => {
-        setAllQuickStartStates((qs) => {
-            const quickStart = qs[quickStartId];
-            const status = quickStart === null || quickStart === void 0 ? void 0 : quickStart.status;
-            let updatedStatus;
-            if (taskNumber > -1 && status === QuickStartStatus.NOT_STARTED) {
-                updatedStatus = QuickStartStatus.IN_PROGRESS;
-            }
-            let updatedTaskStatus = {};
-            for (let taskIndex = 0; taskIndex <= taskNumber; taskIndex++) {
-                const taskStatus = quickStart[getTaskStatusKey(taskIndex)];
-                const newTaskStatus = taskStatus === QuickStartTaskStatus.INIT ? stepAfterInitial : undefined;
-                if (newTaskStatus) {
-                    updatedTaskStatus = Object.assign(Object.assign({}, updatedTaskStatus), { [getTaskStatusKey(taskIndex)]: newTaskStatus });
-                }
-            }
-            const updatedQuickStart = Object.assign(Object.assign(Object.assign(Object.assign({}, quickStart), (updatedStatus ? { status: updatedStatus } : {})), { taskNumber }), updatedTaskStatus);
-            return Object.assign(Object.assign({}, qs), { [quickStartId]: updatedQuickStart });
-        });
-    }, [setAllQuickStartStates, stepAfterInitial]);
-    const setQuickStartTaskStatus = useCallback((taskStatus) => {
-        const quickStart = allQuickStartStates[activeQuickStartID];
-        const { taskNumber } = quickStart;
-        const updatedQuickStart = Object.assign(Object.assign({}, quickStart), { [getTaskStatusKey(taskNumber)]: taskStatus });
-        setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [activeQuickStartID]: updatedQuickStart })));
-    }, [allQuickStartStates, activeQuickStartID, setAllQuickStartStates]);
-    const activeQuickStartState = (_b = allQuickStartStates === null || allQuickStartStates === void 0 ? void 0 : allQuickStartStates[activeQuickStartID]) !== null && _b !== void 0 ? _b : {};
-    const getQuickStartForId = useCallback((id) => allQuickStartStates[id], [
-        allQuickStartStates,
-    ]);
-    return {
-        allQuickStarts: quickStarts,
-        setAllQuickStarts: updateAllQuickStarts,
-        activeQuickStartID,
-        setActiveQuickStartID,
-        allQuickStartStates,
-        setAllQuickStartStates,
-        activeQuickStartState,
-        setActiveQuickStart: value.setActiveQuickStart || setActiveQuickStart,
-        startQuickStart: value.startQuickStart || startQuickStart,
-        restartQuickStart: value.restartQuickStart || restartQuickStart,
-        nextStep: value.nextStep || nextStep,
-        previousStep: value.previousStep || previousStep,
-        setQuickStartTaskNumber,
-        setQuickStartTaskStatus,
-        getQuickStartForId,
-        footer,
-        useLegacyHeaderColors,
-        useQueryParams,
-        markdown,
-        resourceBundle,
-        getResource: findResource,
-        setResourceBundle: changeResourceBundle,
-        language,
-        setLanguage,
-        // revisit if this should be in public context API
-        filter: {
-            keyword: filterKeyword,
-            status: {
-                statusTypes,
-                statusFilters,
-            },
-        },
-        setFilter,
-        loading,
-        setLoading,
-        alwaysShowTaskReview,
-        setAlwaysShowTaskReview,
-    };
-};
+const pluralResolver = new PluralResolver({ simplifyPluralSuffix: true });
+const getDefaultQuickStartState = (totalTasks, initialStatus) => {
+    const defaultQuickStartState = {
+        status: initialStatus || QuickStartStatus.NOT_STARTED,
+        taskNumber: -1,
+    };
+    if (totalTasks) {
+        for (let i = 0; i < totalTasks; i++) {
+            defaultQuickStartState[getTaskStatusKey(i)] = QuickStartTaskStatus.INIT;
+        }
+    }
+    return defaultQuickStartState;
+};
+const QuickStartContextDefaults = {
+    allQuickStarts: [],
+    activeQuickStartID: '',
+    allQuickStartStates: {},
+    activeQuickStartState: {},
+    setAllQuickStarts: () => { },
+    resourceBundle: en,
+    getResource: (resource) => resource,
+    language: 'en',
+    useQueryParams: true,
+    filter: {
+        keyword: '',
+        status: {
+            statusTypes: {},
+            statusFilters: [],
+        },
+    },
+    setFilter: () => { },
+    footer: null,
+    useLegacyHeaderColors: false,
+    markdown: null,
+    loading: false,
+    alwaysShowTaskReview: true,
+};
+const QuickStartContext = createContext(QuickStartContextDefaults);
+const getResource = (resource, options, resourceBundle, lng) => {
+    if (options && !isNaN(options.count)) {
+        const suffix = pluralResolver.getSuffix(lng, options.count);
+        if (suffix && resourceBundle[`${resource}_${suffix}`]) {
+            // needs plural
+            return resourceBundle[`${resource}_${suffix}`];
+        }
+    }
+    return (resourceBundle && resourceBundle[resource]) || resource;
+};
+const useValuesForQuickStartContext = (value = {}) => {
+    var _a, _b;
+    const combinedValue = Object.assign(Object.assign({}, QuickStartContextDefaults), value);
+    const { activeQuickStartID, setActiveQuickStartID, setAllQuickStartStates, useQueryParams, allQuickStartStates, allQuickStarts = [], footer, useLegacyHeaderColors, markdown, } = combinedValue;
+    const [quickStarts, setQuickStarts] = React__default.useState(combinedValue.allQuickStarts || []);
+    const [resourceBundle, setResourceBundle] = React__default.useState(Object.assign(Object.assign({}, en), combinedValue.resourceBundle));
+    const [language, setLanguage] = React__default.useState(combinedValue.language);
+    const changeResourceBundle = (bundle, lng) => {
+        lng && setLanguage(lng);
+        setResourceBundle(Object.assign(Object.assign({}, en), bundle));
+    };
+    const findResource = useCallback((resource, count) => getResource(resource, count !== undefined ? { count } : null, resourceBundle, language), [resourceBundle, language]);
+    const [loading, setLoading] = React__default.useState(combinedValue.loading);
+    const [alwaysShowTaskReview, setAlwaysShowTaskReview] = React__default.useState(combinedValue.alwaysShowTaskReview);
+    const initialSearchParams = new URLSearchParams(window.location.search);
+    const initialSearchQuery = initialSearchParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
+    const initialStatusFilters = ((_a = initialSearchParams.get(QUICKSTART_STATUS_FILTER_KEY)) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
+    const quickStartStatusCount = getQuickStartStatusCount(allQuickStartStates, allQuickStarts);
+    const [statusTypes, setStatusTypes] = React__default.useState({
+        [QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.COMPLETE]),
+        [QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.IN_PROGRESS]),
+        [QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.NOT_STARTED]),
+    });
+    const [statusFilters, setStatusFilters] = React__default.useState(initialStatusFilters);
+    const [filterKeyword, setFilterKeyword] = React__default.useState(initialSearchQuery);
+    const setFilter = (type, val) => {
+        if (type === 'keyword') {
+            setFilterKeyword(val);
+        }
+        else if (type === 'status') {
+            setStatusFilters(val);
+        }
+    };
+    React__default.useEffect(() => {
+        const updatedQuickStartStatusCount = getQuickStartStatusCount(allQuickStartStates, quickStarts);
+        setStatusTypes({
+            [QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.COMPLETE]),
+            [QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.IN_PROGRESS]),
+            [QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.NOT_STARTED]),
+        });
+    }, [allQuickStartStates, findResource, quickStarts]);
+    const updateAllQuickStarts = (qs) => {
+        setQuickStarts(qs);
+    };
+    const setActiveQuickStart = useCallback((quickStartId, totalTasks) => {
+        setActiveQuickStartID((id) => {
+            if (!quickStartId || id === quickStartId) {
+                useQueryParams && removeQueryArgument(QUICKSTART_ID_FILTER_KEY);
+                return '';
+            }
+            useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, quickStartId);
+            return quickStartId;
+        });
+        setAllQuickStartStates((qs) => !quickStartId || qs[quickStartId]
+            ? qs
+            : Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks) }));
+    }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
+    const startQuickStart = useCallback((quickStartId, totalTasks) => {
+        setActiveQuickStartID((id) => {
+            if (!id || id !== quickStartId) {
+                useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, quickStartId);
+                return quickStartId;
+            }
+            useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, id);
+            return id;
+        });
+        setAllQuickStartStates((qs) => {
+            if (qs.hasOwnProperty(quickStartId)) {
+                return Object.assign(Object.assign({}, qs), { [quickStartId]: Object.assign(Object.assign({}, qs[quickStartId]), { status: QuickStartStatus.IN_PROGRESS }) });
+            }
+            return Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, QuickStartStatus.IN_PROGRESS) });
+        });
+    }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
+    const restartQuickStart = useCallback((quickStartId, totalTasks) => {
+        setActiveQuickStartID((id) => {
+            if (!id || id !== quickStartId) {
+                useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, quickStartId);
+                return quickStartId;
+            }
+            useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, id);
+            return id;
+        });
+        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
+        ? QuickStartTaskStatus.REVIEW
+        : QuickStartTaskStatus.VISITED;
+    const nextStep = useCallback((totalTasks) => {
+        if (!activeQuickStartID) {
+            return;
+        }
+        setAllQuickStartStates((qs) => {
+            const quickStart = qs[activeQuickStartID];
+            const status = quickStart === null || quickStart === void 0 ? void 0 : quickStart.status;
+            const taskNumber = quickStart === null || quickStart === void 0 ? void 0 : quickStart.taskNumber;
+            const taskStatus = quickStart[getTaskStatusKey(taskNumber)];
+            let updatedStatus;
+            let updatedTaskNumber;
+            let updatedTaskStatus;
+            if (status === QuickStartStatus.NOT_STARTED) {
+                updatedStatus = QuickStartStatus.IN_PROGRESS;
+            }
+            else if (status === QuickStartStatus.IN_PROGRESS &&
+                !QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) &&
+                taskNumber === totalTasks - 1) {
+                updatedStatus = QuickStartStatus.COMPLETE;
+            }
+            if (taskStatus === QuickStartTaskStatus.VISITED) {
+                updatedTaskStatus = QuickStartTaskStatus.REVIEW;
+            }
+            if (taskNumber < totalTasks && !updatedTaskStatus) {
+                updatedTaskNumber = taskNumber + 1;
+            }
+            const markInitialStepVisitedOrReview = updatedTaskNumber > -1 &&
+                quickStart[getTaskStatusKey(updatedTaskNumber)] === QuickStartTaskStatus.INIT
+                ? stepAfterInitial
+                : quickStart[getTaskStatusKey(updatedTaskNumber)];
+            const newState = Object.assign(Object.assign({}, qs), { [activeQuickStartID]: Object.assign(Object.assign(Object.assign(Object.assign({}, quickStart), (updatedStatus ? { status: updatedStatus } : {})), (updatedTaskNumber > -1
+                    ? {
+                        taskNumber: updatedTaskNumber,
+                        [getTaskStatusKey(updatedTaskNumber)]: markInitialStepVisitedOrReview,
+                    }
+                    : {})), (updatedTaskStatus ? { [getTaskStatusKey(taskNumber)]: updatedTaskStatus } : {})) });
+            return newState;
+        });
+    }, [activeQuickStartID, setAllQuickStartStates, stepAfterInitial]);
+    const previousStep = useCallback(() => {
+        setAllQuickStartStates((qs) => {
+            const quickStart = qs[activeQuickStartID];
+            const taskNumber = quickStart === null || quickStart === void 0 ? void 0 : quickStart.taskNumber;
+            if (taskNumber < 0) {
+                return qs;
+            }
+            return Object.assign(Object.assign({}, qs), { [activeQuickStartID]: Object.assign(Object.assign({}, quickStart), { taskNumber: taskNumber - 1 }) });
+        });
+    }, [activeQuickStartID, setAllQuickStartStates]);
+    const setQuickStartTaskNumber = useCallback((quickStartId, taskNumber) => {
+        setAllQuickStartStates((qs) => {
+            const quickStart = qs[quickStartId];
+            const status = quickStart === null || quickStart === void 0 ? void 0 : quickStart.status;
+            let updatedStatus;
+            if (taskNumber > -1 && status === QuickStartStatus.NOT_STARTED) {
+                updatedStatus = QuickStartStatus.IN_PROGRESS;
+            }
+            let updatedTaskStatus = {};
+            for (let taskIndex = 0; taskIndex <= taskNumber; taskIndex++) {
+                const taskStatus = quickStart[getTaskStatusKey(taskIndex)];
+                const newTaskStatus = taskStatus === QuickStartTaskStatus.INIT ? stepAfterInitial : undefined;
+                if (newTaskStatus) {
+                    updatedTaskStatus = Object.assign(Object.assign({}, updatedTaskStatus), { [getTaskStatusKey(taskIndex)]: newTaskStatus });
+                }
+            }
+            const updatedQuickStart = Object.assign(Object.assign(Object.assign(Object.assign({}, quickStart), (updatedStatus ? { status: updatedStatus } : {})), { taskNumber }), updatedTaskStatus);
+            return Object.assign(Object.assign({}, qs), { [quickStartId]: updatedQuickStart });
+        });
+    }, [setAllQuickStartStates, stepAfterInitial]);
+    const setQuickStartTaskStatus = useCallback((taskStatus) => {
+        const quickStart = allQuickStartStates[activeQuickStartID];
+        const { taskNumber } = quickStart;
+        const updatedQuickStart = Object.assign(Object.assign({}, quickStart), { [getTaskStatusKey(taskNumber)]: taskStatus });
+        setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [activeQuickStartID]: updatedQuickStart })));
+    }, [allQuickStartStates, activeQuickStartID, setAllQuickStartStates]);
+    const activeQuickStartState = (_b = allQuickStartStates === null || allQuickStartStates === void 0 ? void 0 : allQuickStartStates[activeQuickStartID]) !== null && _b !== void 0 ? _b : {};
+    const getQuickStartForId = useCallback((id) => allQuickStartStates[id], [
+        allQuickStartStates,
+    ]);
+    return {
+        allQuickStarts: quickStarts,
+        setAllQuickStarts: updateAllQuickStarts,
+        activeQuickStartID,
+        setActiveQuickStartID,
+        allQuickStartStates,
+        setAllQuickStartStates,
+        activeQuickStartState,
+        setActiveQuickStart: value.setActiveQuickStart || setActiveQuickStart,
+        startQuickStart: value.startQuickStart || startQuickStart,
+        restartQuickStart: value.restartQuickStart || restartQuickStart,
+        nextStep: value.nextStep || nextStep,
+        previousStep: value.previousStep || previousStep,
+        setQuickStartTaskNumber,
+        setQuickStartTaskStatus,
+        getQuickStartForId,
+        footer,
+        useLegacyHeaderColors,
+        useQueryParams,
+        markdown,
+        resourceBundle,
+        getResource: findResource,
+        setResourceBundle: changeResourceBundle,
+        language,
+        setLanguage,
+        // revisit if this should be in public context API
+        filter: {
+            keyword: filterKeyword,
+            status: {
+                statusTypes,
+                statusFilters,
+            },
+        },
+        setFilter,
+        loading,
+        setLoading,
+        alwaysShowTaskReview,
+        setAlwaysShowTaskReview,
+    };
+};
 const QuickStartContextProvider = ({ children, value }) => (React__default.createElement(QuickStartContext.Provider, { value: useValuesForQuickStartContext(value) }, children));
 
-const Box = ({ children, className }) => (React.createElement("div", { className: css('pfext-status-box', className) }, children));
-const Loading = ({ className }) => (React.createElement("div", { className: css('pfext-m-loader', className) },
-    React.createElement("div", { className: "pfext-m-loader-dot__one" }),
-    React.createElement("div", { className: "pfext-m-loader-dot__two" }),
-    React.createElement("div", { className: "pfext-m-loader-dot__three" })));
-Loading.displayName = 'Loading';
-const LoadingBox = ({ className, message }) => (React.createElement(Box, { className: css('pfext-status-box--loading', className) },
-    React.createElement(Loading, null),
-    message && React.createElement("div", { className: "pfext-status-box__loading-message" }, message)));
-LoadingBox.displayName = 'LoadingBox';
-const EmptyBox = ({ label }) => {
-    const { getResource } = React.useContext(QuickStartContext);
-    return (React.createElement(Box, null,
-        React.createElement("div", { "data-test": "empty-message", className: "text-center" }, label
-            ? getResource('No {{label}} found').replace('{{label}}', label)
-            : getResource('Not found'))));
-};
+const Box = ({ children, className }) => (React.createElement("div", { className: css('pfext-status-box', className) }, children));
+const Loading = ({ className }) => (React.createElement("div", { className: css('pfext-m-loader', className) },
+    React.createElement("div", { className: "pfext-m-loader-dot__one" }),
+    React.createElement("div", { className: "pfext-m-loader-dot__two" }),
+    React.createElement("div", { className: "pfext-m-loader-dot__three" })));
+Loading.displayName = 'Loading';
+const LoadingBox = ({ className, message }) => (React.createElement(Box, { className: css('pfext-status-box--loading', className) },
+    React.createElement(Loading, null),
+    message && React.createElement("div", { className: "pfext-status-box__loading-message" }, message)));
+LoadingBox.displayName = 'LoadingBox';
+const EmptyBox = ({ label }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    return (React.createElement(Box, null,
+        React.createElement("div", { "data-test": "empty-message", className: "text-center" }, label
+            ? getResource('No {{label}} found').replace('{{label}}', label)
+            : getResource('Not found'))));
+};
 EmptyBox.displayName = 'EmptyBox';
 
-const MEMO = {};
-const CamelCaseWrap = ({ value, dataTest }) => {
-    if (!value) {
-        return '-';
-    }
-    if (MEMO[value]) {
-        return MEMO[value];
-    }
-    // Add word break points before capital letters (but keep consecutive capital letters together).
-    const words = value.match(/[A-Z]+[^A-Z]*|[^A-Z]+/g);
-    const rendered = (React.createElement("span", { "data-test": dataTest }, words.map((word, i) => (React.createElement(React.Fragment, { key: i },
-        word,
-        i !== words.length - 1 && React.createElement("wbr", null))))));
-    MEMO[value] = rendered;
-    return rendered;
+const MEMO = {};
+const CamelCaseWrap = ({ value, dataTest }) => {
+    if (!value) {
+        return '-';
+    }
+    if (MEMO[value]) {
+        return MEMO[value];
+    }
+    // Add word break points before capital letters (but keep consecutive capital letters together).
+    const words = value.match(/[A-Z]+[^A-Z]*|[^A-Z]+/g);
+    const rendered = (React.createElement("span", { "data-test": dataTest }, words.map((word, i) => (React.createElement(React.Fragment, { key: i },
+        word,
+        i !== words.length - 1 && React.createElement("wbr", null))))));
+    MEMO[value] = rendered;
+    return rendered;
 };
 
 class CatalogTile extends React.Component {
@@ -10525,322 +10542,322 @@ exports["default"] = exports.RocketIcon;
 
 var RocketIcon = /*@__PURE__*/getDefaultExportFromCjs(rocketIcon);
 
-const Modal = (_a) => {
-    var { isFullScreen = false, className } = _a, props = __rest(_a, ["isFullScreen", "className"]);
-    return (React.createElement(Modal$1, Object.assign({}, props, { className: css('pfext-modal', className), appendTo: () => (isFullScreen ? document.body : document.querySelector('#modal-container')) })));
-};
-
-const getContainer = (container) => typeof container === 'function' ? container() : container;
-const Portal = ({ children, container }) => {
-    const [containerNode, setContainerNode] = React.useState();
-    useIsomorphicLayoutEffect(() => {
-        setContainerNode(getContainer(container) || document.body);
-    }, [container]);
-    return containerNode ? ReactDOM.createPortal(children, containerNode) : null;
-};
-
-const SimplePopper = ({ children }) => {
-    const openProp = true;
-    const nodeRef = React.useRef();
-    const popperRef = React.useRef(null);
-    const [isOpen, setOpenState] = React.useState(openProp);
-    const setOpen = React.useCallback((newOpen) => {
-        setOpenState(newOpen);
-    }, []);
-    React.useEffect(() => {
-        setOpen(openProp);
-    }, [openProp, setOpen]);
-    const onKeyDown = React.useCallback((e) => {
-        if (e.keyCode === 27) {
-            setOpen(false);
-        }
-    }, [setOpen]);
-    const onClickOutside = React.useCallback((e) => {
-        if (!nodeRef.current || (e.target instanceof Node && !nodeRef.current.contains(e.target))) {
-            setOpen(false);
-        }
-    }, [setOpen]);
-    const destroy = React.useCallback(() => {
-        if (popperRef.current) {
-            popperRef.current.destroy();
-            document.removeEventListener('keydown', onKeyDown, true);
-            document.removeEventListener('mousedown', onClickOutside, true);
-            document.removeEventListener('touchstart', onClickOutside, true);
-        }
-    }, [onClickOutside, onKeyDown]);
-    const initialize = React.useCallback(() => {
-        if (!nodeRef.current || !isOpen) {
-            return;
-        }
-        destroy();
-    }, [isOpen, destroy]);
-    const nodeRefCallback = React.useCallback((node) => {
-        nodeRef.current = node;
-        initialize();
-    }, [initialize]);
-    React.useEffect(() => {
-        initialize();
-    }, [initialize]);
-    React.useEffect(() => () => {
-        destroy();
-    }, [destroy]);
-    React.useEffect(() => {
-        if (!isOpen) {
-            destroy();
-        }
-    }, [destroy, isOpen]);
-    return isOpen ? (React.createElement(Portal, null,
-        React.createElement("div", { ref: nodeRefCallback, style: { zIndex: 9999, position: 'absolute', top: 0, left: 0 }, className: "pfext-quick-start__base" }, children))) : null;
+const Modal = (_a) => {
+    var { isFullScreen = false, className } = _a, props = __rest(_a, ["isFullScreen", "className"]);
+    return (React.createElement(Modal$1, Object.assign({}, props, { className: css('pfext-modal', className), appendTo: () => (isFullScreen ? document.body : document.querySelector('#modal-container')) })));
+};
+
+const getContainer = (container) => typeof container === 'function' ? container() : container;
+const Portal = ({ children, container }) => {
+    const [containerNode, setContainerNode] = React.useState();
+    useIsomorphicLayoutEffect(() => {
+        setContainerNode(getContainer(container) || document.body);
+    }, [container]);
+    return containerNode ? ReactDOM.createPortal(children, containerNode) : null;
+};
+
+const SimplePopper = ({ children }) => {
+    const openProp = true;
+    const nodeRef = React.useRef();
+    const popperRef = React.useRef(null);
+    const [isOpen, setOpenState] = React.useState(openProp);
+    const setOpen = React.useCallback((newOpen) => {
+        setOpenState(newOpen);
+    }, []);
+    React.useEffect(() => {
+        setOpen(openProp);
+    }, [openProp, setOpen]);
+    const onKeyDown = React.useCallback((e) => {
+        if (e.keyCode === 27) {
+            setOpen(false);
+        }
+    }, [setOpen]);
+    const onClickOutside = React.useCallback((e) => {
+        if (!nodeRef.current || (e.target instanceof Node && !nodeRef.current.contains(e.target))) {
+            setOpen(false);
+        }
+    }, [setOpen]);
+    const destroy = React.useCallback(() => {
+        if (popperRef.current) {
+            popperRef.current.destroy();
+            document.removeEventListener('keydown', onKeyDown, true);
+            document.removeEventListener('mousedown', onClickOutside, true);
+            document.removeEventListener('touchstart', onClickOutside, true);
+        }
+    }, [onClickOutside, onKeyDown]);
+    const initialize = React.useCallback(() => {
+        if (!nodeRef.current || !isOpen) {
+            return;
+        }
+        destroy();
+    }, [isOpen, destroy]);
+    const nodeRefCallback = React.useCallback((node) => {
+        nodeRef.current = node;
+        initialize();
+    }, [initialize]);
+    React.useEffect(() => {
+        initialize();
+    }, [initialize]);
+    React.useEffect(() => () => {
+        destroy();
+    }, [destroy]);
+    React.useEffect(() => {
+        if (!isOpen) {
+            destroy();
+        }
+    }, [destroy, isOpen]);
+    return isOpen ? (React.createElement(Portal, null,
+        React.createElement("div", { ref: nodeRefCallback, style: { zIndex: 9999, position: 'absolute', top: 0, left: 0 }, className: "pfext-quick-start__base" }, children))) : null;
 };
 
-const isInViewport = (elementToCheck) => {
-    const rect = elementToCheck.getBoundingClientRect();
-    return (rect.top >= 0 &&
-        rect.left >= 0 &&
-        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
-        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
-};
-const InteractiveSpotlight = ({ element }) => {
-    const { top, bottom, left, right, height, width } = element.getBoundingClientRect();
-    const style = {
-        height,
-        width,
-        top,
-        left,
-        bottom,
-        right,
-    };
-    const [clicked, setClicked] = React.useState(false);
-    React.useEffect(() => {
-        if (!clicked) {
-            if (!isInViewport(element)) {
-                element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
-            }
-            const handleClick = () => setClicked(true);
-            document.addEventListener('click', handleClick);
-            return () => {
-                document.removeEventListener('click', handleClick);
-            };
-        }
-        return () => { };
-    }, [element, clicked]);
-    if (clicked) {
-        return null;
-    }
-    return (React.createElement(Portal, null,
-        React.createElement(SimplePopper, null,
-            React.createElement("div", { className: "pfext-spotlight pfext-spotlight__element-highlight-animate", style: style }))));
+const isInViewport = (elementToCheck) => {
+    const rect = elementToCheck.getBoundingClientRect();
+    return (rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
+};
+const InteractiveSpotlight = ({ element }) => {
+    const { top, bottom, left, right, height, width } = element.getBoundingClientRect();
+    const style = {
+        height,
+        width,
+        top,
+        left,
+        bottom,
+        right,
+    };
+    const [clicked, setClicked] = React.useState(false);
+    React.useEffect(() => {
+        if (!clicked) {
+            if (!isInViewport(element)) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+            }
+            const handleClick = () => setClicked(true);
+            document.addEventListener('click', handleClick);
+            return () => {
+                document.removeEventListener('click', handleClick);
+            };
+        }
+        return () => { };
+    }, [element, clicked]);
+    if (clicked) {
+        return null;
+    }
+    return (React.createElement(Portal, null,
+        React.createElement(SimplePopper, null,
+            React.createElement("div", { className: "pfext-spotlight pfext-spotlight__element-highlight-animate", style: style }))));
 };
 
-var ScrollDirection;
-(function (ScrollDirection) {
-    ScrollDirection["scrollingUp"] = "scrolling-up";
-    ScrollDirection["scrollingDown"] = "scrolling-down";
-    ScrollDirection["scrolledToBottom"] = "scrolled-to-bottom";
-    ScrollDirection["scrolledToTop"] = "scrolled-to-top";
+var ScrollDirection;
+(function (ScrollDirection) {
+    ScrollDirection["scrollingUp"] = "scrolling-up";
+    ScrollDirection["scrollingDown"] = "scrolling-down";
+    ScrollDirection["scrolledToBottom"] = "scrolled-to-bottom";
+    ScrollDirection["scrolledToTop"] = "scrolled-to-top";
 })(ScrollDirection || (ScrollDirection = {}));
 
-const useResizeObserver = (callback, targetElement, observerOptions = undefined) => {
-    const element = React.useMemo(() => targetElement !== null && targetElement !== void 0 ? targetElement : document.querySelector('body'), [targetElement]);
-    React.useEffect(() => {
-        const observer = new ResizeObserver(callback);
-        observer.observe(element, observerOptions);
-        return () => {
-            observer.disconnect();
-        };
-    }, [callback, observerOptions, element]);
-};
-
-var Shadows;
-(function (Shadows) {
-    Shadows["none"] = "none";
-    Shadows["both"] = "both";
-    Shadows["top"] = "top";
-    Shadows["bottom"] = "bottom";
-})(Shadows || (Shadows = {}));
-const useScrollShadows = (node) => {
-    const [shadows, setShadows] = React.useState(Shadows.none);
-    const computeShadows = React.useCallback(() => {
-        if (node) {
-            const { scrollTop, clientHeight, scrollHeight } = node;
-            const top = scrollTop !== 0;
-            const bottom = scrollTop + clientHeight < scrollHeight;
-            if (top && bottom) {
-                setShadows(Shadows.both);
-            }
-            else if (top) {
-                setShadows(Shadows.top);
-            }
-            else if (bottom) {
-                setShadows(Shadows.bottom);
-            }
-            else {
-                setShadows(Shadows.none);
-            }
-        }
-    }, [node]);
-    // recompute when the scroll container changes in size
-    useResizeObserver(computeShadows, node);
-    React.useEffect(() => {
-        if (node) {
-            // compute initial shadows
-            computeShadows();
-            // listen for scroll events
-            node.addEventListener('scroll', computeShadows);
-        }
-        return () => {
-            if (node) {
-                node.removeEventListener('scroll', computeShadows);
-            }
-        };
-    }, [node, computeShadows]);
-    return shadows;
+const useResizeObserver = (callback, targetElement, observerOptions = undefined) => {
+    const element = React.useMemo(() => targetElement !== null && targetElement !== void 0 ? targetElement : document.querySelector('body'), [targetElement]);
+    React.useEffect(() => {
+        const observer = new ResizeObserver(callback);
+        observer.observe(element, observerOptions);
+        return () => {
+            observer.disconnect();
+        };
+    }, [callback, observerOptions, element]);
+};
+
+var Shadows;
+(function (Shadows) {
+    Shadows["none"] = "none";
+    Shadows["both"] = "both";
+    Shadows["top"] = "top";
+    Shadows["bottom"] = "bottom";
+})(Shadows || (Shadows = {}));
+const useScrollShadows = (node) => {
+    const [shadows, setShadows] = React.useState(Shadows.none);
+    const computeShadows = React.useCallback(() => {
+        if (node) {
+            const { scrollTop, clientHeight, scrollHeight } = node;
+            const top = scrollTop !== 0;
+            const bottom = scrollTop + clientHeight < scrollHeight;
+            if (top && bottom) {
+                setShadows(Shadows.both);
+            }
+            else if (top) {
+                setShadows(Shadows.top);
+            }
+            else if (bottom) {
+                setShadows(Shadows.bottom);
+            }
+            else {
+                setShadows(Shadows.none);
+            }
+        }
+    }, [node]);
+    // recompute when the scroll container changes in size
+    useResizeObserver(computeShadows, node);
+    React.useEffect(() => {
+        if (node) {
+            // compute initial shadows
+            computeShadows();
+            // listen for scroll events
+            node.addEventListener('scroll', computeShadows);
+        }
+        return () => {
+            if (node) {
+                node.removeEventListener('scroll', computeShadows);
+            }
+        };
+    }, [node, computeShadows]);
+    return shadows;
 };
 
-const useBoundingClientRect = (targetElement) => {
-    const [clientRect, setClientRect] = React.useState(() => targetElement ? targetElement.getBoundingClientRect() : null);
-    const observerCallback = React.useCallback(() => {
-        setClientRect(targetElement ? targetElement.getBoundingClientRect() : null);
-    }, [targetElement]);
-    useResizeObserver(observerCallback);
-    return clientRect;
+const useBoundingClientRect = (targetElement) => {
+    const [clientRect, setClientRect] = React.useState(() => targetElement ? targetElement.getBoundingClientRect() : null);
+    const observerCallback = React.useCallback(() => {
+        setClientRect(targetElement ? targetElement.getBoundingClientRect() : null);
+    }, [targetElement]);
+    useResizeObserver(observerCallback);
+    return clientRect;
 };
 
-/**
- * React hook that forces component render.
- */
+/**
+ * React hook that forces component render.
+ */
 const useForceRender = () => React.useReducer((s) => !s, false)[1];
 
-const useEventListener = (target, event, callback) => {
-    useEffect(() => {
-        target.addEventListener(event, callback);
-        return () => {
-            target.removeEventListener(event, callback);
-        };
-    }, [target, event, callback]);
-};
-
-const StaticSpotlight = ({ element }) => {
-    const clientRect = useBoundingClientRect(element);
-    const style = clientRect
-        ? {
-            top: clientRect.top,
-            left: clientRect.left,
-            height: clientRect.height,
-            width: clientRect.width,
-        }
-        : {};
-    return clientRect ? (React.createElement(Portal, null,
-        React.createElement("div", { className: "pf-v5-c-backdrop pfext-spotlight__with-backdrop" },
-            React.createElement("div", { className: "pfext-spotlight pfext-spotlight__element-highlight-noanimate", style: style })))) : null;
-};
-
-const Spotlight = ({ selector, interactive }) => {
-    // if target element is a hidden one return null
-    const element = React.useMemo(() => {
-        const highlightElement = document.querySelector(selector);
-        let hiddenElement = highlightElement;
-        while (hiddenElement) {
-            const ariaHidden = hiddenElement.getAttribute('aria-hidden');
-            if (ariaHidden === 'true') {
-                return null;
-            }
-            hiddenElement = hiddenElement.parentElement;
-        }
-        return highlightElement;
-    }, [selector]);
-    if (!element) {
-        return null;
-    }
-    return interactive ? (React.createElement(InteractiveSpotlight, { element: element })) : (React.createElement(StaticSpotlight, { element: element }));
+const useEventListener = (target, event, callback) => {
+    useEffect(() => {
+        target.addEventListener(event, callback);
+        return () => {
+            target.removeEventListener(event, callback);
+        };
+    }, [target, event, callback]);
+};
+
+const StaticSpotlight = ({ element }) => {
+    const clientRect = useBoundingClientRect(element);
+    const style = clientRect
+        ? {
+            top: clientRect.top,
+            left: clientRect.left,
+            height: clientRect.height,
+            width: clientRect.width,
+        }
+        : {};
+    return clientRect ? (React.createElement(Portal, null,
+        React.createElement("div", { className: "pf-v5-c-backdrop pfext-spotlight__with-backdrop" },
+            React.createElement("div", { className: "pfext-spotlight pfext-spotlight__element-highlight-noanimate", style: style })))) : null;
+};
+
+const Spotlight = ({ selector, interactive }) => {
+    // if target element is a hidden one return null
+    const element = React.useMemo(() => {
+        const highlightElement = document.querySelector(selector);
+        let hiddenElement = highlightElement;
+        while (hiddenElement) {
+            const ariaHidden = hiddenElement.getAttribute('aria-hidden');
+            if (ariaHidden === 'true') {
+                return null;
+            }
+            hiddenElement = hiddenElement.parentElement;
+        }
+        return highlightElement;
+    }, [selector]);
+    if (!element) {
+        return null;
+    }
+    return interactive ? (React.createElement(InteractiveSpotlight, { element: element })) : (React.createElement(StaticSpotlight, { element: element }));
+};
+
+const MarkdownHighlightExtension = ({ docContext, rootSelector, }) => {
+    const [selector, setSelector] = React.useState(null);
+    React.useEffect(() => {
+        const elements = docContext.querySelectorAll(`${rootSelector} [data-highlight]`);
+        let timeoutId;
+        function startHighlight(e) {
+            const highlightId = e.target.getAttribute('data-highlight');
+            if (!highlightId) {
+                return;
+            }
+            setSelector(null);
+            timeoutId = setTimeout(() => {
+                setSelector(`[data-quickstart-id="${highlightId}"]`);
+            }, 0);
+        }
+        elements && elements.forEach((elm) => elm.addEventListener('click', startHighlight));
+        return () => {
+            clearTimeout(timeoutId);
+            elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
+        };
+    }, [docContext, rootSelector]);
+    React.useEffect(() => {
+        const elements = docContext.querySelectorAll(`${rootSelector} [class^=data-highlight__]`);
+        let timeoutId;
+        function startHighlight(e) {
+            e.preventDefault();
+            const classes = e.target.getAttribute('class').split(' ');
+            let highlightId;
+            for (const className of classes) {
+                if (className.startsWith('data-highlight__')) {
+                    highlightId = className.split('__')[1];
+                    break;
+                }
+            }
+            if (!highlightId) {
+                return;
+            }
+            setSelector(null);
+            timeoutId = setTimeout(() => {
+                setSelector(`[data-quickstart-id="${highlightId}"]`);
+            }, 0);
+        }
+        elements && elements.forEach((elm) => elm.addEventListener('click', startHighlight));
+        return () => {
+            clearTimeout(timeoutId);
+            elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
+        };
+    }, [docContext, rootSelector]);
+    if (!selector) {
+        return null;
+    }
+    return React.createElement(Spotlight, { selector: selector, interactive: true });
 };
 
-const MarkdownHighlightExtension = ({ docContext, rootSelector, }) => {
-    const [selector, setSelector] = React.useState(null);
-    React.useEffect(() => {
-        const elements = docContext.querySelectorAll(`${rootSelector} [data-highlight]`);
-        let timeoutId;
-        function startHighlight(e) {
-            const highlightId = e.target.getAttribute('data-highlight');
-            if (!highlightId) {
-                return;
-            }
-            setSelector(null);
-            timeoutId = setTimeout(() => {
-                setSelector(`[data-quickstart-id="${highlightId}"]`);
-            }, 0);
-        }
-        elements && elements.forEach((elm) => elm.addEventListener('click', startHighlight));
-        return () => {
-            clearTimeout(timeoutId);
-            elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
-        };
-    }, [docContext, rootSelector]);
-    React.useEffect(() => {
-        const elements = docContext.querySelectorAll(`${rootSelector} [class^=data-highlight__]`);
-        let timeoutId;
-        function startHighlight(e) {
-            e.preventDefault();
-            const classes = e.target.getAttribute('class').split(' ');
-            let highlightId;
-            for (const className of classes) {
-                if (className.startsWith('data-highlight__')) {
-                    highlightId = className.split('__')[1];
-                    break;
-                }
-            }
-            if (!highlightId) {
-                return;
-            }
-            setSelector(null);
-            timeoutId = setTimeout(() => {
-                setSelector(`[data-quickstart-id="${highlightId}"]`);
-            }, 0);
-        }
-        elements && elements.forEach((elm) => elm.addEventListener('click', startHighlight));
-        return () => {
-            clearTimeout(timeoutId);
-            elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
-        };
-    }, [docContext, rootSelector]);
-    if (!selector) {
-        return null;
-    }
-    return React.createElement(Spotlight, { selector: selector, interactive: true });
-};
-
-const MARKDOWN_COPY_BUTTON_ID = 'data-copy-for';
-const MARKDOWN_SNIPPET_ID = 'data-snippet-id';
-const ACCORDION_MARKDOWN_BUTTON_ID = `accordion-markdown-button-id`;
+const MARKDOWN_COPY_BUTTON_ID = 'data-copy-for';
+const MARKDOWN_SNIPPET_ID = 'data-snippet-id';
+const ACCORDION_MARKDOWN_BUTTON_ID = `accordion-markdown-button-id`;
 const ACCORDION_MARKDOWN_CONTENT_ID = `accordion-markdown-content-id`;
 
-const CopyClipboard = ({ element, rootSelector, docContext, }) => {
-    const { getResource } = React.useContext(QuickStartContext);
-    const [showSuccessContent, setShowSuccessContent] = React.useState(false);
-    const textToCopy = React.useMemo(() => {
-        var _a;
-        const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
-        return (_a = docContext.querySelector(`${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`)) === null || _a === void 0 ? void 0 : _a.innerText;
-    }, [element, docContext, rootSelector]);
-    useEventListener(element, 'click', React.useCallback(() => {
-        navigator.clipboard
-            .writeText(textToCopy.trim())
-            .then(() => {
-            setShowSuccessContent(true);
-        })
-            .catch(() => { });
-    }, [textToCopy]));
-    useEventListener(element, 'mouseleave', React.useCallback(() => {
-        setShowSuccessContent(false);
-    }, []));
-    return showSuccessContent ? (React.createElement(Tooltip, { key: "after-copy", isVisible: true, triggerRef: () => element, content: getResource('Successfully copied to clipboard!'), className: "pfext-quick-start__base" })) : (React.createElement(Tooltip, { key: "before-copy", triggerRef: () => element, content: getResource('Copy to clipboard'), className: "pfext-quick-start__base" }));
-};
-const MarkdownCopyClipboard = ({ docContext, rootSelector, }) => {
-    const elements = docContext.querySelectorAll(`${rootSelector} [${MARKDOWN_COPY_BUTTON_ID}]`);
-    return elements.length > 0 ? (React.createElement(React.Fragment, null, Array.from(elements).map((elm) => {
-        const attributeValue = elm.getAttribute(MARKDOWN_COPY_BUTTON_ID);
-        return (React.createElement(CopyClipboard, { key: attributeValue, element: elm, rootSelector: rootSelector, docContext: docContext }));
-    }))) : null;
+const CopyClipboard = ({ element, rootSelector, docContext, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const [showSuccessContent, setShowSuccessContent] = React.useState(false);
+    const textToCopy = React.useMemo(() => {
+        var _a;
+        const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
+        return (_a = docContext.querySelector(`${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`)) === null || _a === void 0 ? void 0 : _a.innerText;
+    }, [element, docContext, rootSelector]);
+    useEventListener(element, 'click', React.useCallback(() => {
+        navigator.clipboard
+            .writeText(textToCopy.trim())
+            .then(() => {
+            setShowSuccessContent(true);
+        })
+            .catch(() => { });
+    }, [textToCopy]));
+    useEventListener(element, 'mouseleave', React.useCallback(() => {
+        setShowSuccessContent(false);
+    }, []));
+    return showSuccessContent ? (React.createElement(Tooltip, { key: "after-copy", isVisible: true, triggerRef: () => element, content: getResource('Successfully copied to clipboard!'), className: "pfext-quick-start__base" })) : (React.createElement(Tooltip, { key: "before-copy", triggerRef: () => element, content: getResource('Copy to clipboard'), className: "pfext-quick-start__base" }));
+};
+const MarkdownCopyClipboard = ({ docContext, rootSelector, }) => {
+    const elements = docContext.querySelectorAll(`${rootSelector} [${MARKDOWN_COPY_BUTTON_ID}]`);
+    return elements.length > 0 ? (React.createElement(React.Fragment, null, Array.from(elements).map((elm) => {
+        const attributeValue = elm.getAttribute(MARKDOWN_COPY_BUTTON_ID);
+        return (React.createElement(CopyClipboard, { key: attributeValue, element: elm, rootSelector: rootSelector, docContext: docContext }));
+    }))) : null;
 };
 
 const removeTemplateWhitespace = (template) => template.replace(/>(?:\s|\n)+</g, '><');
@@ -25234,15 +25251,15 @@ exports["default"] = exports.CopyIcon;
 
 var CopyIcon = /*@__PURE__*/getDefaultExportFromCjs(copyIcon);
 
-const useInlineCopyClipboardShowdownExtension = () => {
-    const { getResource } = React.useContext(QuickStartContext);
-    return React.useMemo(() => ({
-        type: 'lang',
-        regex: /`([^`](.*?)[^`])`{{copy}}/g,
-        replace: (text, group, _, groupId) => {
-            if (!group || isNaN(groupId)) {
-                return text;
-            }
+const useInlineCopyClipboardShowdownExtension = () => {
+    const { getResource } = React.useContext(QuickStartContext);
+    return React.useMemo(() => ({
+        type: 'lang',
+        regex: /`([^`](.*?)[^`])`{{copy}}/g,
+        replace: (text, group, _, groupId) => {
+            if (!group || isNaN(groupId)) {
+                return text;
+            }
             return removeTemplateWhitespace(`<span class="pf-v5-c-clipboard-copy pf-m-inline">
               <span class="pf-v5-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupId}">${group}</span>
               <span class="pf-v5-c-clipboard-copy__actions">
@@ -25252,20 +25269,20 @@ const useInlineCopyClipboardShowdownExtension = () => {
                   </button>
                 </span>
               </span>
-            </span>`);
-        },
-    }), [getResource]);
-};
-
-const useMultilineCopyClipboardShowdownExtension = () => {
-    const { getResource } = React.useContext(QuickStartContext);
-    return React.useMemo(() => ({
-        type: 'lang',
-        regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
-        replace: (text, group, _1, _2, groupId) => {
-            if (!group || isNaN(groupId)) {
-                return text;
-            }
+            </span>`);
+        },
+    }), [getResource]);
+};
+
+const useMultilineCopyClipboardShowdownExtension = () => {
+    const { getResource } = React.useContext(QuickStartContext);
+    return React.useMemo(() => ({
+        type: 'lang',
+        regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
+        replace: (text, group, _1, _2, groupId) => {
+            if (!group || isNaN(groupId)) {
+                return text;
+            }
             return `<div class="pf-v5-c-code-block">
               <div class="pf-v5-c-code-block__header">
                 <div class="pf-v5-c-code-block__actions">
@@ -25282,9 +25299,9 @@ const useMultilineCopyClipboardShowdownExtension = () => {
                     ${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code>
                 </pre>
               </div>
-            </div>`;
-        },
-    }), [getResource]);
+            </div>`;
+        },
+    }), [getResource]);
 };
 
 var lightbulbIcon = createCommonjsModule(function (module, exports) {
@@ -29741,133 +29758,133 @@ if (module.exports) {
 
 });
 
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const DOMPurify = require('dompurify');
-const markdownConvert = (markdown, extensions) => {
-    const converter = new showdown.Converter({
-        tables: true,
-        openLinksInNewWindow: true,
-        strikethrough: true,
-        emoji: false,
-    });
-    if (extensions) {
-        converter.addExtension(extensions);
-    }
-    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-v5-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: {
-            html: true,
-            svg: true,
-        },
-    });
-};
-const SyncMarkdownView = ({ content, emptyMsg, extensions, renderExtension, exactHeight, inline, className, }) => {
-    const { getResource } = React.useContext(QuickStartContext);
-    const markup = React.useMemo(() => markdownConvert(content || emptyMsg || getResource('Not available'), extensions), [content, emptyMsg, extensions, getResource]);
-    const innerProps = {
-        renderExtension: (extensions === null || extensions === void 0 ? void 0 : extensions.length) > 0 ? renderExtension : undefined,
-        exactHeight,
-        markup,
-        isEmpty: !content,
-        className,
-    };
-    return inline ? React.createElement(InlineMarkdownView, Object.assign({}, innerProps)) : React.createElement(IFrameMarkdownView, Object.assign({}, innerProps));
-};
-const uniqueId = (function () {
-    let num = 0;
-    return function (prefix) {
-        const prefixStr = String(prefix) || '';
-        num += 1;
-        return prefixStr + num;
-    };
-})();
-const RenderExtension = ({ renderExtension, selector, markup, docContext, }) => {
-    const forceRender = useForceRender();
-    const markupRef = React.useRef(null);
-    const shouldRenderExtension = React.useCallback(() => {
-        if (markupRef.current === markup) {
-            return true;
-        }
-        markupRef.current = markup;
-        return false;
-    }, [markup]);
-    /**
-     * During a render cycle in which markup changes, renderExtension receives an old copy of document
-     * because react is still updating the dom using `dangerouslySetInnerHTML` with latest markdown markup
-     * which causes the component rendered by renderExtension to receive old copy of document
-     * use forceRender to delay the rendering of extension by one render cycle
-     */
-    React.useEffect(() => {
-        if (renderExtension) {
-            forceRender();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [markup]);
-    return (React.createElement(React.Fragment, null, shouldRenderExtension() ? renderExtension === null || renderExtension === void 0 ? void 0 : renderExtension(docContext !== null && docContext !== void 0 ? docContext : document, selector) : null));
-};
-const InlineMarkdownView = ({ markup, isEmpty, renderExtension, className, }) => {
-    const id = React.useMemo(() => uniqueId('markdown'), []);
-    return (React.createElement("div", { className: css('pfext-markdown-view', { 'is-empty': isEmpty }, className), id: id },
-        React.createElement("div", { dangerouslySetInnerHTML: { __html: markup } }),
-        renderExtension && (React.createElement(RenderExtension, { renderExtension: renderExtension, selector: `#${id}`, markup: markup }))));
-};
-const IFrameMarkdownView = ({ exactHeight, markup, isEmpty, renderExtension, className, }) => {
-    const [frame, setFrame] = React.useState();
-    const [loaded, setLoaded] = React.useState(false);
-    const updateTimeoutHandle = React.useRef();
-    const updateDimensions = React.useCallback(() => {
-        var _a;
-        if (!((_a = frame === null || frame === void 0 ? void 0 : frame.contentWindow) === null || _a === void 0 ? void 0 : _a.document.body.firstChild)) {
-            return;
-        }
-        frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight}px`;
-        // Let the new height take effect, then reset again once we recompute
-        updateTimeoutHandle.current = setTimeout(() => {
-            if (exactHeight) {
-                frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight}px`;
-            }
-            else {
-                // Increase by 15px for the case where a horizontal scrollbar might appear
-                frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight + 15}px`;
-            }
-        });
-    }, [frame, exactHeight]);
-    React.useEffect(() => () => {
-        clearTimeout(updateTimeoutHandle.current);
-    }, []);
-    const onLoad = React.useCallback(() => {
-        updateDimensions();
-        setLoaded(true);
-    }, [updateDimensions]);
-    // Find the app's stylesheets and inject them into the frame to ensure consistent styling.
-    const filteredLinks = Array.from(document.getElementsByTagName('link')).filter((l) => l.href.includes('app-bundle'));
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const DOMPurify = require('dompurify');
+const markdownConvert = (markdown, extensions) => {
+    const converter = new showdown.Converter({
+        tables: true,
+        openLinksInNewWindow: true,
+        strikethrough: true,
+        emoji: false,
+    });
+    if (extensions) {
+        converter.addExtension(extensions);
+    }
+    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-v5-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: {
+            html: true,
+            svg: true,
+        },
+    });
+};
+const SyncMarkdownView = ({ content, emptyMsg, extensions, renderExtension, exactHeight, inline, className, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const markup = React.useMemo(() => markdownConvert(content || emptyMsg || getResource('Not available'), extensions), [content, emptyMsg, extensions, getResource]);
+    const innerProps = {
+        renderExtension: (extensions === null || extensions === void 0 ? void 0 : extensions.length) > 0 ? renderExtension : undefined,
+        exactHeight,
+        markup,
+        isEmpty: !content,
+        className,
+    };
+    return inline ? React.createElement(InlineMarkdownView, Object.assign({}, innerProps)) : React.createElement(IFrameMarkdownView, Object.assign({}, innerProps));
+};
+const uniqueId = (function () {
+    let num = 0;
+    return function (prefix) {
+        const prefixStr = String(prefix) || '';
+        num += 1;
+        return prefixStr + num;
+    };
+})();
+const RenderExtension = ({ renderExtension, selector, markup, docContext, }) => {
+    const forceRender = useForceRender();
+    const markupRef = React.useRef(null);
+    const shouldRenderExtension = React.useCallback(() => {
+        if (markupRef.current === markup) {
+            return true;
+        }
+        markupRef.current = markup;
+        return false;
+    }, [markup]);
+    /**
+     * During a render cycle in which markup changes, renderExtension receives an old copy of document
+     * because react is still updating the dom using `dangerouslySetInnerHTML` with latest markdown markup
+     * which causes the component rendered by renderExtension to receive old copy of document
+     * use forceRender to delay the rendering of extension by one render cycle
+     */
+    React.useEffect(() => {
+        if (renderExtension) {
+            forceRender();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [markup]);
+    return (React.createElement(React.Fragment, null, shouldRenderExtension() ? renderExtension === null || renderExtension === void 0 ? void 0 : renderExtension(docContext !== null && docContext !== void 0 ? docContext : document, selector) : null));
+};
+const InlineMarkdownView = ({ markup, isEmpty, renderExtension, className, }) => {
+    const id = React.useMemo(() => uniqueId('markdown'), []);
+    return (React.createElement("div", { className: css('pfext-markdown-view', { 'is-empty': isEmpty }, className), id: id },
+        React.createElement("div", { dangerouslySetInnerHTML: { __html: markup } }),
+        renderExtension && (React.createElement(RenderExtension, { renderExtension: renderExtension, selector: `#${id}`, markup: markup }))));
+};
+const IFrameMarkdownView = ({ exactHeight, markup, isEmpty, renderExtension, className, }) => {
+    const [frame, setFrame] = React.useState();
+    const [loaded, setLoaded] = React.useState(false);
+    const updateTimeoutHandle = React.useRef();
+    const updateDimensions = React.useCallback(() => {
+        var _a;
+        if (!((_a = frame === null || frame === void 0 ? void 0 : frame.contentWindow) === null || _a === void 0 ? void 0 : _a.document.body.firstChild)) {
+            return;
+        }
+        frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight}px`;
+        // Let the new height take effect, then reset again once we recompute
+        updateTimeoutHandle.current = setTimeout(() => {
+            if (exactHeight) {
+                frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight}px`;
+            }
+            else {
+                // Increase by 15px for the case where a horizontal scrollbar might appear
+                frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight + 15}px`;
+            }
+        });
+    }, [frame, exactHeight]);
+    React.useEffect(() => () => {
+        clearTimeout(updateTimeoutHandle.current);
+    }, []);
+    const onLoad = React.useCallback(() => {
+        updateDimensions();
+        setLoaded(true);
+    }, [updateDimensions]);
+    // Find the app's stylesheets and inject them into the frame to ensure consistent styling.
+    const filteredLinks = Array.from(document.getElementsByTagName('link')).filter((l) => l.href.includes('app-bundle'));
     const linkRefs = filteredLinks.reduce((refs, link) => `${refs}
-    <link rel="stylesheet" href="${link.href}">`, '');
+    <link rel="stylesheet" href="${link.href}">`, '');
     const contents = `
   ${linkRefs}
   <style type="text/css">
@@ -29892,148 +29909,148 @@ const IFrameMarkdownView = ({ exactHeight, markup, isEmpty, renderExtension, cla
     padding-top: 0;
   }
   </style>
-  <body class="pf-m-redhat-font"><div style="overflow-y: auto;">${markup}</div></body>`;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("iframe", { sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin", srcDoc: contents, style: { border: '0px', display: 'block', width: '100%', height: '0' }, ref: (r) => setFrame(r), onLoad: () => onLoad(), className: className }),
-        loaded && frame && renderExtension && (React.createElement(RenderExtension, { markup: markup, selector: '', renderExtension: renderExtension, docContext: frame.contentDocument }))));
+  <body class="pf-m-redhat-font"><div style="overflow-y: auto;">${markup}</div></body>`;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("iframe", { sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin", srcDoc: contents, style: { border: '0px', display: 'block', width: '100%', height: '0' }, ref: (r) => setFrame(r), onLoad: () => onLoad(), className: className }),
+        loaded && frame && renderExtension && (React.createElement(RenderExtension, { markup: markup, selector: '', renderExtension: renderExtension, docContext: frame.contentDocument }))));
 };
 
-const LINK_LABEL = '[\\d\\w\\s-()$!]+';
-const HIGHLIGHT_ACTIONS = ['highlight'];
-const SELECTOR_ID = `[\\w-]+`;
-// [linkLabel]{{action id}}
+const LINK_LABEL = '[\\d\\w\\s-()$!]+';
+const HIGHLIGHT_ACTIONS = ['highlight'];
+const SELECTOR_ID = `[\\w-]+`;
+// [linkLabel]{{action id}}
 const HIGHLIGHT_REGEXP = new RegExp(`\\[(${LINK_LABEL})]{{(${HIGHLIGHT_ACTIONS.join('|')}) (${SELECTOR_ID})}}`, 'g');
 
-const removeParagraphWrap = (markdown) => markdown.replace(/^<p>|<\/p>$/g, '');
-const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
-    const { markdown } = React.useContext(QuickStartContext);
-    const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
-    const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
-    const admonitionShowdownExtension = useAdmonitionShowdownExtension();
-    const codeShowdownExtension = useCodeShowdownExtension();
-    const accordionShowdownExtension = useAccordionShowdownExtension();
-    return (React.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
-            {
-                type: 'lang',
-                regex: HIGHLIGHT_REGEXP,
-                replace: (text, linkLabel, linkType, linkId) => {
-                    if (!linkLabel || !linkType || !linkId) {
-                        return text;
-                    }
-                    return `<button class="pf-v5-c-button pf-m-inline pf-m-link" data-highlight="${linkId}">${linkLabel}</button>`;
-                },
-            },
-            {
-                type: 'output',
-                filter(text) {
-                    // check HTML for patterns like: <em>Status: unknown</em>{#extension-requirement-status}
-                    // and replace with <em id="extension-requirement-status">Status: unknown</em>
-                    return text.replace(/<em>(.*)<\/em>{#(.*)}/g, '<em id="$2">$1</em>');
-                },
-            },
-            inlineCopyClipboardShowdownExtension,
-            multilineCopyClipboardShowdownExtension,
-            admonitionShowdownExtension,
-            codeShowdownExtension,
-            accordionShowdownExtension,
-            ...(markdown ? markdown.extensions : []),
-        ], renderExtension: (docContext, rootSelector) => (React.createElement(React.Fragment, null,
-            React.createElement(AccordionRenderExtension, { docContext: docContext }),
-            React.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
-            React.createElement(MarkdownCopyClipboard, { docContext: docContext, rootSelector: rootSelector }),
-            markdown &&
-                markdown.renderExtension &&
-                markdown.renderExtension(docContext, rootSelector))), className: className }));
-};
-
-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);
-React.useMemo(() => ({
-    type: 'lang',
-    regex: /\[(.+)]{{(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 mdContent = React.createElement(QuickStartMarkdownView, { content: content });
-        const pfAlert = (React.createElement(Alert, { variant: variant, customIcon: customIcon && customIcon, isInline: true, title: admonitionType, className: "pfext-markdown-admonition", style: style }, mdContent));
-        return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));
-    },
+const removeParagraphWrap = (markdown) => markdown.replace(/^<p>|<\/p>$/g, '');
+const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
+    const { markdown } = React.useContext(QuickStartContext);
+    const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
+    const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
+    const admonitionShowdownExtension = useAdmonitionShowdownExtension();
+    const codeShowdownExtension = useCodeShowdownExtension();
+    const accordionShowdownExtension = useAccordionShowdownExtension();
+    return (React.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
+            {
+                type: 'lang',
+                regex: HIGHLIGHT_REGEXP,
+                replace: (text, linkLabel, linkType, linkId) => {
+                    if (!linkLabel || !linkType || !linkId) {
+                        return text;
+                    }
+                    return `<button class="pf-v5-c-button pf-m-inline pf-m-link" data-highlight="${linkId}">${linkLabel}</button>`;
+                },
+            },
+            {
+                type: 'output',
+                filter(text) {
+                    // check HTML for patterns like: <em>Status: unknown</em>{#extension-requirement-status}
+                    // and replace with <em id="extension-requirement-status">Status: unknown</em>
+                    return text.replace(/<em>(.*)<\/em>{#(.*)}/g, '<em id="$2">$1</em>');
+                },
+            },
+            inlineCopyClipboardShowdownExtension,
+            multilineCopyClipboardShowdownExtension,
+            admonitionShowdownExtension,
+            codeShowdownExtension,
+            accordionShowdownExtension,
+            ...(markdown ? markdown.extensions : []),
+        ], renderExtension: (docContext, rootSelector) => (React.createElement(React.Fragment, null,
+            React.createElement(AccordionRenderExtension, { docContext: docContext }),
+            React.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
+            React.createElement(MarkdownCopyClipboard, { docContext: docContext, rootSelector: rootSelector }),
+            markdown &&
+                markdown.renderExtension &&
+                markdown.renderExtension(docContext, rootSelector))), className: className }));
+};
+
+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);
+React.useMemo(() => ({
+    type: 'lang',
+    regex: /\[(.+)]{{(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 mdContent = React.createElement(QuickStartMarkdownView, { content: content });
+        const pfAlert = (React.createElement(Alert, { variant: variant, customIcon: customIcon && customIcon, isInline: true, title: admonitionType, className: "pfext-markdown-admonition", style: style }, mdContent));
+        return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));
+    },
 }), []);
 
-const useCodeShowdownExtension = () => React.useMemo(() => ({
-    type: 'output',
-    regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
-    replace: (text, content) => {
-        if (!content) {
-            return text;
-        }
-        const pfCodeBlock = React.createElement(CodeBlock, null, content);
-        return removeTemplateWhitespace(renderToStaticMarkup(pfCodeBlock));
-    },
+const useCodeShowdownExtension = () => React.useMemo(() => ({
+    type: 'output',
+    regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
+    replace: (text, content) => {
+        if (!content) {
+            return text;
+        }
+        const pfCodeBlock = React.createElement(CodeBlock, null, content);
+        return removeTemplateWhitespace(renderToStaticMarkup(pfCodeBlock));
+    },
 }), []);
 
-const useAccordionShowdownExtension = () => React.useMemo(() => ({
-    type: 'lang',
-    regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
-    replace: (_text, accordionContent, _command, accordionHeading) => {
-        const accordionId = String(accordionHeading).replace(/\s/g, '-');
-        return removeTemplateWhitespace(renderToStaticMarkup(React.createElement(Accordion, { asDefinitionList: true },
-            React.createElement(AccordionItem, null,
-                React.createElement(AccordionToggle, { isExpanded: false, id: `${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}` }, accordionHeading),
-                React.createElement(AccordionContent, { id: `${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`, isHidden: !false }, accordionContent)))));
-    },
+const useAccordionShowdownExtension = () => React.useMemo(() => ({
+    type: 'lang',
+    regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
+    replace: (_text, accordionContent, _command, accordionHeading) => {
+        const accordionId = String(accordionHeading).replace(/\s/g, '-');
+        return removeTemplateWhitespace(renderToStaticMarkup(React.createElement(Accordion, { asDefinitionList: true },
+            React.createElement(AccordionItem, null,
+                React.createElement(AccordionToggle, { isExpanded: false, id: `${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}` }, accordionHeading),
+                React.createElement(AccordionContent, { id: `${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`, isHidden: !false }, accordionContent)))));
+    },
 }), []);
 
-const AccordionShowdownHandler = ({ buttonElement, contentElement, }) => {
-    const [expanded, setExpanded] = React.useState(false);
-    const handleClick = () => {
-        const expandedModifier = 'pf-m-expanded';
-        buttonElement.className = `pf-v5-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
-        contentElement.hidden = expanded;
-        contentElement.className = `pf-v5-c-accordion__expanded-content ${!expanded ? expandedModifier : ''}`;
-        setExpanded(!expanded);
-    };
-    useEventListener(buttonElement, 'click', handleClick);
-    return React.createElement(React.Fragment, null);
-};
-const AccordionRenderExtension = ({ docContext }) => {
-    const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);
-    const contentElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_CONTENT_ID}]`);
-    return buttonElements.length > 0 ? (React.createElement(React.Fragment, null, Array.from(buttonElements).map((elm) => {
-        const content = Array.from(contentElements).find((elm2) => {
-            const elmId = elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1];
-            const elm2Id = elm2.id.split(ACCORDION_MARKDOWN_CONTENT_ID)[1];
-            return elmId === elm2Id;
-        });
-        return (React.createElement(AccordionShowdownHandler, { key: elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1], buttonElement: elm, contentElement: content }));
-    }))) : null;
-};
-
-const FallbackImg = ({ src, alt, className, fallback }) => {
-    const [isSrcValid, setIsSrcValid] = React.useState(true);
-    if (src && isSrcValid) {
-        return React.createElement("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
-    }
-    return React.createElement(React.Fragment, null, fallback);
+const AccordionShowdownHandler = ({ buttonElement, contentElement, }) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const handleClick = () => {
+        const expandedModifier = 'pf-m-expanded';
+        buttonElement.className = `pf-v5-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
+        contentElement.hidden = expanded;
+        contentElement.className = `pf-v5-c-accordion__expanded-content ${!expanded ? expandedModifier : ''}`;
+        setExpanded(!expanded);
+    };
+    useEventListener(buttonElement, 'click', handleClick);
+    return React.createElement(React.Fragment, null);
+};
+const AccordionRenderExtension = ({ docContext }) => {
+    const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);
+    const contentElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_CONTENT_ID}]`);
+    return buttonElements.length > 0 ? (React.createElement(React.Fragment, null, Array.from(buttonElements).map((elm) => {
+        const content = Array.from(contentElements).find((elm2) => {
+            const elmId = elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1];
+            const elm2Id = elm2.id.split(ACCORDION_MARKDOWN_CONTENT_ID)[1];
+            return elmId === elm2Id;
+        });
+        return (React.createElement(AccordionShowdownHandler, { key: elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1], buttonElement: elm, contentElement: content }));
+    }))) : null;
+};
+
+const FallbackImg = ({ src, alt, className, fallback }) => {
+    const [isSrcValid, setIsSrcValid] = React.useState(true);
+    if (src && isSrcValid) {
+        return React.createElement("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
+    }
+    return React.createElement(React.Fragment, null, fallback);
 };
 
 var syncAltIcon = createCommonjsModule(function (module, exports) {
@@ -30054,26 +30071,26 @@ var SyncAltIcon = /*@__PURE__*/getDefaultExportFromCjs(syncAltIcon);
 
 const DASH = '-';
 
-const PopoverStatus = ({ hideHeader, children, isVisible = null, statusBody, title, onHide, onShow, }) => (React.createElement(Popover, { position: PopoverPosition.right, headerContent: hideHeader ? null : title, bodyContent: children, "aria-label": title, onHide: onHide, onShow: onShow, isVisible: isVisible },
+const PopoverStatus = ({ hideHeader, children, isVisible = null, statusBody, title, onHide, onShow, }) => (React.createElement(Popover, { position: PopoverPosition.right, headerContent: hideHeader ? null : title, bodyContent: children, "aria-label": title, onHide: onHide, onShow: onShow, isVisible: isVisible },
     React.createElement(Button, { variant: "link", isInline: true }, statusBody)));
 
-const StatusIconAndText = ({ icon, title, spin, iconOnly, noTooltip, className, }) => {
-    if (!title) {
-        return React.createElement(React.Fragment, null, DASH);
-    }
-    return (React.createElement("span", { className: css('pfext-icon-and-text', className), title: iconOnly && !noTooltip ? title : undefined },
-        icon &&
-            React.cloneElement(icon, {
-                className: css(spin && 'fa-spin', icon.props.className, !iconOnly && 'pfext-icon-and-text__icon pfext-icon-flex-child'),
-            }),
-        !iconOnly && React.createElement(CamelCaseWrap, { value: title, dataTest: "status-text" })));
+const StatusIconAndText = ({ icon, title, spin, iconOnly, noTooltip, className, }) => {
+    if (!title) {
+        return React.createElement(React.Fragment, null, DASH);
+    }
+    return (React.createElement("span", { className: css('pfext-icon-and-text', className), title: iconOnly && !noTooltip ? title : undefined },
+        icon &&
+            React.cloneElement(icon, {
+                className: css(spin && 'fa-spin', icon.props.className, !iconOnly && 'pfext-icon-and-text__icon pfext-icon-flex-child'),
+            }),
+        !iconOnly && React.createElement(CamelCaseWrap, { value: title, dataTest: "status-text" })));
 };
 
-const GenericStatus = (props) => {
-    const { Icon, children, popoverTitle, title, noTooltip, iconOnly } = props, restProps = __rest(props, ["Icon", "children", "popoverTitle", "title", "noTooltip", "iconOnly"]);
-    const renderIcon = iconOnly && !noTooltip ? React.createElement(Icon, { title: title }) : React.createElement(Icon, null);
-    const statusBody = (React.createElement(StatusIconAndText, Object.assign({}, restProps, { noTooltip: noTooltip, title: title, iconOnly: iconOnly, icon: renderIcon })));
-    return React.Children.toArray(children).length ? (React.createElement(PopoverStatus, Object.assign({ title: popoverTitle || title }, restProps, { statusBody: statusBody }), children)) : (statusBody);
+const GenericStatus = (props) => {
+    const { Icon, children, popoverTitle, title, noTooltip, iconOnly } = props, restProps = __rest(props, ["Icon", "children", "popoverTitle", "title", "noTooltip", "iconOnly"]);
+    const renderIcon = iconOnly && !noTooltip ? React.createElement(Icon, { title: title }) : React.createElement(Icon, null);
+    const statusBody = (React.createElement(StatusIconAndText, Object.assign({}, restProps, { noTooltip: noTooltip, title: title, iconOnly: iconOnly, icon: renderIcon })));
+    return React.Children.toArray(children).length ? (React.createElement(PopoverStatus, Object.assign({ title: popoverTitle || title }, restProps, { statusBody: statusBody }), children)) : (statusBody);
 };
 
 var checkCircleIcon = createCommonjsModule(function (module, exports) {
@@ -30130,68 +30147,68 @@ const global_palette_green_500 = {
   "var": "var(--pf-v5-global--palette--green-500)"
 };
 
-const GreenCheckCircleIcon = ({ className, title, size }) => (React.createElement(Icon, { size: size },
+const GreenCheckCircleIcon = ({ className, title, size }) => (React.createElement(Icon, { size: size },
     React.createElement(CheckCircleIcon, { "data-test": "success-icon", color: global_palette_green_500.value, className: className, title: title })));
 
-const SuccessStatus = (props) => (React.createElement(GenericStatus, Object.assign({}, props, { Icon: GreenCheckCircleIcon, title: props.title || 'Healthy' })));
+const SuccessStatus = (props) => (React.createElement(GenericStatus, Object.assign({}, props, { Icon: GreenCheckCircleIcon, title: props.title || 'Healthy' })));
 SuccessStatus.displayName = 'SuccessStatus';
 
-const Status = ({ status, title, iconOnly, noTooltip, className, }) => {
-    const statusProps = { title: title || status, iconOnly, noTooltip, className };
-    switch (status) {
-        case 'In Progress':
-            return React.createElement(StatusIconAndText, Object.assign({}, statusProps, { icon: React.createElement(SyncAltIcon, null) }));
-        case 'Complete':
-            return React.createElement(SuccessStatus, Object.assign({}, statusProps));
-        default:
-            return React.createElement(React.Fragment, null, status || DASH);
-    }
-};
+const Status = ({ status, title, iconOnly, noTooltip, className, }) => {
+    const statusProps = { title: title || status, iconOnly, noTooltip, className };
+    switch (status) {
+        case 'In Progress':
+            return React.createElement(StatusIconAndText, Object.assign({}, statusProps, { icon: React.createElement(SyncAltIcon, null) }));
+        case 'Complete':
+            return React.createElement(SuccessStatus, Object.assign({}, statusProps));
+        default:
+            return React.createElement(React.Fragment, null, status || DASH);
+    }
+};
 const StatusIcon = ({ status }) => (React.createElement(Status, { status: status, iconOnly: true }));
 
-const QuickStartTileDescription = ({ description, prerequisites, }) => {
-    const { getResource } = React.useContext(QuickStartContext);
-    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(QuickStartMarkdownView, { content: description, className: "pfext-quick-start-tile-description" }),
-        (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React.createElement("div", { className: "pfext-quick-start-tile-prerequisites" },
-            React.createElement(Text, { component: TextVariants.h5, className: "pfext-quick-start-tile-prerequisites__text" },
-                getResource('Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length),
-                ' '),
-            React.createElement(Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), className: "pfext-quick-start__base", bodyContent: React.createElement("div", { className: "pfext-popover__base" },
-                    React.createElement(TextList, { "aria-label": getResource('Prerequisites'), className: "pfext-quick-start-tile-prerequisites-list" }, prereqs.map((prerequisite, index) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    React.createElement(TextListItem, { key: index },
-                        React.createElement(QuickStartMarkdownView, { content: prerequisite })))))) },
-                React.createElement(Button, { variant: "link", isInline: true, className: "pfext-quick-start-tile-prerequisites__icon", "data-testid": "qs-card-prereqs", onClick: (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                    }, "aria-label": getResource('Show prerequisites') },
-                    React.createElement(InfoCircleIcon, null)))))));
-};
-
-const QuickStartTileFooter = ({ quickStartId, status, totalTasks, }) => {
-    const { getResource } = React.useContext(QuickStartContext);
-    const { activeQuickStartID, startQuickStart, restartQuickStart } = React.useContext(QuickStartContext);
-    const start = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        startQuickStart(quickStartId, totalTasks);
-    }, [quickStartId, startQuickStart, totalTasks]);
-    const restart = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        restartQuickStart(quickStartId, totalTasks);
-    }, [quickStartId, restartQuickStart, totalTasks]);
-    return (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
-        status === QuickStartStatus.NOT_STARTED && (React.createElement(FlexItem, null,
-            React.createElement(Button, { onClick: start, variant: "link", isInline: true, "data-testid": "qs-card-notStarted-start", id: `${quickStartId}-start`, "aria-labelledby": `${quickStartId}-start ${quickStartId}` }, getResource('Start')))),
-        status === QuickStartStatus.IN_PROGRESS && activeQuickStartID !== quickStartId && (React.createElement(FlexItem, null,
-            React.createElement(Button, { variant: "link", isInline: true, "data-testid": "qs-card-inProgress-resume", id: `${quickStartId}-continue`, "aria-labelledby": `${quickStartId}-continue ${quickStartId}` }, getResource('Continue')))),
-        status === QuickStartStatus.COMPLETE && (React.createElement(FlexItem, null,
-            React.createElement(Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-complete-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart')))),
-        status === QuickStartStatus.IN_PROGRESS && (React.createElement(FlexItem, null,
-            React.createElement(Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-inProgress-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart'))))));
+const QuickStartTileDescription = ({ description, prerequisites, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(QuickStartMarkdownView, { content: description, className: "pfext-quick-start-tile-description" }),
+        (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React.createElement("div", { className: "pfext-quick-start-tile-prerequisites" },
+            React.createElement(Text, { component: TextVariants.h5, className: "pfext-quick-start-tile-prerequisites__text" },
+                getResource('Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length),
+                ' '),
+            React.createElement(Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), className: "pfext-quick-start__base", bodyContent: React.createElement("div", { className: "pfext-popover__base" },
+                    React.createElement(TextList, { "aria-label": getResource('Prerequisites'), className: "pfext-quick-start-tile-prerequisites-list" }, prereqs.map((prerequisite, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    React.createElement(TextListItem, { key: index },
+                        React.createElement(QuickStartMarkdownView, { content: prerequisite })))))) },
+                React.createElement(Button, { variant: "link", isInline: true, className: "pfext-quick-start-tile-prerequisites__icon", "data-testid": "qs-card-prereqs", onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }, "aria-label": getResource('Show prerequisites') },
+                    React.createElement(InfoCircleIcon, null)))))));
+};
+
+const QuickStartTileFooter = ({ quickStartId, status, totalTasks, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const { activeQuickStartID, startQuickStart, restartQuickStart } = React.useContext(QuickStartContext);
+    const start = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        startQuickStart(quickStartId, totalTasks);
+    }, [quickStartId, startQuickStart, totalTasks]);
+    const restart = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        restartQuickStart(quickStartId, totalTasks);
+    }, [quickStartId, restartQuickStart, totalTasks]);
+    return (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
+        status === QuickStartStatus.NOT_STARTED && (React.createElement(FlexItem, null,
+            React.createElement(Button, { onClick: start, variant: "link", isInline: true, "data-testid": "qs-card-notStarted-start", id: `${quickStartId}-start`, "aria-labelledby": `${quickStartId}-start ${quickStartId}` }, getResource('Start')))),
+        status === QuickStartStatus.IN_PROGRESS && activeQuickStartID !== quickStartId && (React.createElement(FlexItem, null,
+            React.createElement(Button, { variant: "link", isInline: true, "data-testid": "qs-card-inProgress-resume", id: `${quickStartId}-continue`, "aria-labelledby": `${quickStartId}-continue ${quickStartId}` }, getResource('Continue')))),
+        status === QuickStartStatus.COMPLETE && (React.createElement(FlexItem, null,
+            React.createElement(Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-complete-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart')))),
+        status === QuickStartStatus.IN_PROGRESS && (React.createElement(FlexItem, null,
+            React.createElement(Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-inProgress-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart'))))));
 };
 
 var externalLinkAltIcon = createCommonjsModule(function (module, exports) {
@@ -30210,11 +30227,11 @@ exports["default"] = exports.ExternalLinkAltIcon;
 
 var ExternalLinkAltIcon = /*@__PURE__*/getDefaultExportFromCjs(externalLinkAltIcon);
 
-const QuickStartTileFooterExternal = ({ link, quickStartId, }) => {
-    const { href, text } = link;
-    return (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
-        React.createElement(FlexItem, null,
-            React.createElement(Button, { component: "a", href: href, target: "_blank", rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: React.createElement(ExternalLinkAltIcon, null), iconPosition: "right", id: quickStartId, "aria-labelledby": `${quickStartId}-external ${quickStartId}` }, text || href))));
+const QuickStartTileFooterExternal = ({ link, quickStartId, }) => {
+    const { href, text } = link;
+    return (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
+        React.createElement(FlexItem, null,
+            React.createElement(Button, { component: "a", href: href, target: "_blank", rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: React.createElement(ExternalLinkAltIcon, null), iconPosition: "right", id: quickStartId, "aria-labelledby": `${quickStartId}-external ${quickStartId}` }, text || href))));
 };
 
 var outlinedClockIcon = createCommonjsModule(function (module, exports) {
@@ -30233,293 +30250,293 @@ exports["default"] = exports.OutlinedClockIcon;
 
 var OutlinedClockIcon = /*@__PURE__*/getDefaultExportFromCjs(outlinedClockIcon);
 
-const statusColorMap = {
-    [QuickStartStatus.COMPLETE]: 'green',
-    [QuickStartStatus.IN_PROGRESS]: 'purple',
-    [QuickStartStatus.NOT_STARTED]: 'grey',
-};
-const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, }) => {
-    const { getResource } = React.useContext(QuickStartContext);
-    const statusLocaleMap = {
-        [QuickStartStatus.COMPLETE]: getResource('Complete'),
-        [QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
-        [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
-    };
-    return (React.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
-            React.createElement(QuickStartMarkdownView, { content: name })),
-        React.createElement("div", { className: "pfext-quick-start-tile-header__status" },
-            type && (React.createElement(Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
-            duration && (React.createElement(Label, { variant: "outline", "data-test": "duration", icon: React.createElement(OutlinedClockIcon, null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
-            status !== QuickStartStatus.NOT_STARTED && (React.createElement(Label, { variant: "outline", color: statusColorMap[status], icon: React.createElement(StatusIcon, { status: status }), "data-test": "status" }, statusLocaleMap[status])))));
-};
-
-const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, }) => {
-    const { metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
-    const { setActiveQuickStart, footer } = React.useContext(QuickStartContext);
-    const ref = React.useRef(null);
-    let quickStartIcon;
-    if (typeof icon === 'object') {
-        quickStartIcon = icon;
-    }
-    else {
-        quickStartIcon = (React.createElement(FallbackImg, { className: "pfext-catalog-item-icon__img--large", src: icon, alt: "", fallback: React.createElement(RocketIcon, null) }));
-    }
-    const footerComponent = React.useMemo(() => {
-        if (footer && footer.show === false) {
-            return null;
-        }
-        if (link) {
-            return React.createElement(QuickStartTileFooterExternal, { link: link, quickStartId: id });
-        }
-        return React.createElement(QuickStartTileFooter, { quickStartId: id, status: status, totalTasks: tasks === null || tasks === void 0 ? void 0 : tasks.length });
-    }, [footer, id, link, status, tasks === null || tasks === void 0 ? void 0 : tasks.length]);
-    const handleClick = (e) => {
-        var _a;
-        if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
-            if (link) {
-                window.open(link.href);
-            }
-            else {
-                setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
-            }
-            onClick();
-        }
-    };
-    return (React.createElement("div", { ref: ref },
-        React.createElement(CatalogTile, { 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, onKeyDown: (event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                    setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
-                    onClick();
-                }
-            }, 
-            // https://github.com/patternfly/patternfly-react/issues/7039
-            href: link === null || link === void 0 ? void 0 : link.href, "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent, tabIndex: 0 })));
-};
-
-const QuickStartCatalog = ({ quickStarts }) => {
-    const { activeQuickStartID, allQuickStartStates } = React.useContext(QuickStartContext);
-    return (React.createElement("div", { className: "pfext-page-layout__content" },
-        React.createElement(Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
-            const { metadata: { name: id }, } = quickStart;
-            return (React.createElement(GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
-                React.createElement(QuickStartTile, { quickStart: quickStart, isActive: id === activeQuickStartID, status: getQuickStartStatus(allQuickStartStates, id) })));
-        }))));
-};
-
-const QuickStartCatalogFilterSearch = (_a) => {
-    var { searchInputText, handleTextChange } = _a, props = __rest(_a, ["searchInputText", "handleTextChange"]);
-    const { getResource } = React.useContext(QuickStartContext);
-    return (React.createElement(ToolbarItem, { className: "pfext-quick-start-catalog-filter__input" },
-        React.createElement(SearchInput, Object.assign({ placeholder: getResource('Filter by keyword...'), value: searchInputText, onChange: (_ev, value) => handleTextChange(value), onClear: () => handleTextChange('') }, props))));
-};
-const QuickStartCatalogFilterSelect = (_a) => {
-    var { isDropdownOpen, setIsDropdownOpen, onRowfilterSelect, selectedFilters, dropdownItems } = _a, props = __rest(_a, ["isDropdownOpen", "setIsDropdownOpen", "onRowfilterSelect", "selectedFilters", "dropdownItems"]);
-    const { getResource } = React.useContext(QuickStartContext);
-    const toggle = (toggleRef) => (React.createElement(MenuToggle, { isFullWidth: true, ref: toggleRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), isExpanded: isDropdownOpen },
-        getResource('Status'),
-        selectedFilters.length > 0 && React.createElement(Badge, { isRead: true }, selectedFilters.length)));
-    return (React.createElement(ToolbarItem, null,
-        React.createElement(Select, Object.assign({ "aria-label": getResource('Select filter'), isOpen: isDropdownOpen, selected: selectedFilters, onSelect: onRowfilterSelect, onOpenChange: (isOpen) => setIsDropdownOpen(isOpen), toggle: toggle }, props),
-            React.createElement(SelectList, null, dropdownItems))));
-};
-const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
-    const { getResource } = React.useContext(QuickStartContext);
-    return (React.createElement(ToolbarItem, { className: "pfext-quick-start-catalog-filter__count", align: { default: 'alignRight' } }, getResource('{{count, number}} item', quickStartsCount).replace('{{count, number}}', quickStartsCount)));
-};
-const QuickStartCatalogFilterSearchWrapper = ({ onSearchInputChange = () => { } }) => {
-    const { useQueryParams, filter, setFilter } = React.useContext(QuickStartContext);
-    React.useEffect(() => {
-        //   use this effect to clear the search when a `clear all` action is performed higher up
-        const unlisten = history.listen(({ location }) => {
-            const searchParams = new URLSearchParams(location.search);
-            const searchQuery = searchParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
-            if (searchQuery === '') {
-                setFilter('keyword', '');
-                onSearchInputChange('');
-            }
-        });
-        return () => {
-            unlisten();
-        };
-    }, [onSearchInputChange, setFilter]);
-    const handleTextChange = (val) => {
-        if (val.length > 0) {
-            useQueryParams && setQueryArgument(QUICKSTART_SEARCH_FILTER_KEY, val);
-        }
-        else {
-            useQueryParams && removeQueryArgument(QUICKSTART_SEARCH_FILTER_KEY);
-        }
-        if ((filter === null || filter === void 0 ? void 0 : filter.keyword) !== val) {
-            setFilter('keyword', val);
-        }
-        onSearchInputChange(val);
-    };
-    return (React.createElement(QuickStartCatalogFilterSearch, { searchInputText: filter === null || filter === void 0 ? void 0 : filter.keyword, handleTextChange: handleTextChange }));
-};
-// compare string/number arrays
-const equalsIgnoreOrder = (a, b) => {
-    if (a.length !== b.length) {
-        return false;
-    }
-    const uniqueValues = new Set([...a, ...b]);
-    for (const v of uniqueValues) {
-        const aCount = a.filter((e) => e === v).length;
-        const bCount = b.filter((e) => e === v).length;
-        if (aCount !== bCount) {
-            return false;
-        }
-    }
-    return true;
-};
-const QuickStartCatalogFilterStatusWrapper = ({ onStatusChange = () => { } }) => {
-    const { useQueryParams, filter, setFilter } = React.useContext(QuickStartContext);
-    React.useEffect(() => {
-        //   use this effect to clear the status when a `clear all` action is performed higher up
-        const unlisten = history.listen(({ location }) => {
-            var _a;
-            const searchParams = new URLSearchParams(location.search);
-            const updatedStatusFilters = ((_a = searchParams.get(QUICKSTART_STATUS_FILTER_KEY)) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
-            if (updatedStatusFilters.length === 0) {
-                setFilter('status', []);
-                onStatusChange([]);
-            }
-        });
-        return () => {
-            unlisten();
-        };
-    });
-    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
-    const onRowfilterSelect = React.useCallback((_e, selectedValue) => {
-        setIsDropdownOpen(false);
-        const selection = Object.entries(filter.status.statusTypes).find(([_key, value]) => value === selectedValue)[0];
-        const selectedFiltersList = filter.status.statusFilters.includes(selection)
-            ? filter.status.statusFilters.filter((status) => status !== selection)
-            : [...filter.status.statusFilters, selection];
-        if (!equalsIgnoreOrder(filter.status.statusFilters, selectedFiltersList)) {
-            setFilter('status', selectedFiltersList);
-        }
-        if (selectedFiltersList.length > 0) {
-            useQueryParams && setQueryArgument('status', selectedFiltersList.join(','));
-        }
-        else {
-            useQueryParams && removeQueryArgument(QUICKSTART_STATUS_FILTER_KEY);
-        }
-        onStatusChange(selectedFiltersList);
-    }, [filter.status.statusFilters, onStatusChange, setFilter, useQueryParams]);
-    const dropdownItems = Object.entries(filter.status.statusTypes).map(([key, value]) => (React.createElement(SelectOption, { key: key, "data-key": key, value: value, hasCheckbox: true, isSelected: filter.status.statusFilters.includes(key) },
-        React.createElement(React.Fragment, null, value))));
-    return (React.createElement(QuickStartCatalogFilterSelect, { isDropdownOpen: isDropdownOpen, setIsDropdownOpen: setIsDropdownOpen, onRowfilterSelect: onRowfilterSelect, selectedFilters: filter.status.statusFilters, dropdownItems: dropdownItems }));
-};
+const statusColorMap = {
+    [QuickStartStatus.COMPLETE]: 'green',
+    [QuickStartStatus.IN_PROGRESS]: 'purple',
+    [QuickStartStatus.NOT_STARTED]: 'grey',
+};
+const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const statusLocaleMap = {
+        [QuickStartStatus.COMPLETE]: getResource('Complete'),
+        [QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
+        [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
+    };
+    return (React.createElement("div", { className: "pfext-quick-start-tile-header" },
+        React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
+            React.createElement(QuickStartMarkdownView, { content: name })),
+        React.createElement("div", { className: "pfext-quick-start-tile-header__status" },
+            type && (React.createElement(Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
+            duration && (React.createElement(Label, { variant: "outline", "data-test": "duration", icon: React.createElement(OutlinedClockIcon, null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
+            status !== QuickStartStatus.NOT_STARTED && (React.createElement(Label, { variant: "outline", color: statusColorMap[status], icon: React.createElement(StatusIcon, { status: status }), "data-test": "status" }, statusLocaleMap[status])))));
+};
+
+const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, }) => {
+    const { metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
+    const { setActiveQuickStart, footer } = React.useContext(QuickStartContext);
+    const ref = React.useRef(null);
+    let quickStartIcon;
+    if (typeof icon === 'object') {
+        quickStartIcon = icon;
+    }
+    else {
+        quickStartIcon = (React.createElement(FallbackImg, { className: "pfext-catalog-item-icon__img--large", src: icon, alt: "", fallback: React.createElement(RocketIcon, null) }));
+    }
+    const footerComponent = React.useMemo(() => {
+        if (footer && footer.show === false) {
+            return null;
+        }
+        if (link) {
+            return React.createElement(QuickStartTileFooterExternal, { link: link, quickStartId: id });
+        }
+        return React.createElement(QuickStartTileFooter, { quickStartId: id, status: status, totalTasks: tasks === null || tasks === void 0 ? void 0 : tasks.length });
+    }, [footer, id, link, status, tasks === null || tasks === void 0 ? void 0 : tasks.length]);
+    const handleClick = (e) => {
+        var _a;
+        if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
+            if (link) {
+                window.open(link.href);
+            }
+            else {
+                setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
+            }
+            onClick();
+        }
+    };
+    return (React.createElement("div", { ref: ref },
+        React.createElement(CatalogTile, { id: id + '-catalog-tile', 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, onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
+                    onClick();
+                }
+            }, 
+            // https://github.com/patternfly/patternfly-react/issues/7039
+            href: link === null || link === void 0 ? void 0 : link.href, "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent, tabIndex: 0 })));
+};
+
+const QuickStartCatalog = ({ quickStarts }) => {
+    const { activeQuickStartID, allQuickStartStates } = React.useContext(QuickStartContext);
+    return (React.createElement("div", { className: "pfext-page-layout__content" },
+        React.createElement(Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
+            const { metadata: { name: id }, } = quickStart;
+            return (React.createElement(GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
+                React.createElement(QuickStartTile, { quickStart: quickStart, isActive: id === activeQuickStartID, status: getQuickStartStatus(allQuickStartStates, id) })));
+        }))));
+};
+
+const QuickStartCatalogFilterSearch = (_a) => {
+    var { searchInputText, handleTextChange } = _a, props = __rest(_a, ["searchInputText", "handleTextChange"]);
+    const { getResource } = React.useContext(QuickStartContext);
+    return (React.createElement(ToolbarItem, { className: "pfext-quick-start-catalog-filter__input" },
+        React.createElement(SearchInput, Object.assign({ placeholder: getResource('Filter by keyword...'), value: searchInputText, onChange: (_ev, value) => handleTextChange(value), onClear: () => handleTextChange('') }, props))));
+};
+const QuickStartCatalogFilterSelect = (_a) => {
+    var { isDropdownOpen, setIsDropdownOpen, onRowfilterSelect, selectedFilters, dropdownItems } = _a, props = __rest(_a, ["isDropdownOpen", "setIsDropdownOpen", "onRowfilterSelect", "selectedFilters", "dropdownItems"]);
+    const { getResource } = React.useContext(QuickStartContext);
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { isFullWidth: true, ref: toggleRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), isExpanded: isDropdownOpen },
+        getResource('Status'),
+        selectedFilters.length > 0 && React.createElement(Badge, { isRead: true }, selectedFilters.length)));
+    return (React.createElement(ToolbarItem, null,
+        React.createElement(Select, Object.assign({ "aria-label": getResource('Select filter'), isOpen: isDropdownOpen, selected: selectedFilters, onSelect: onRowfilterSelect, onOpenChange: (isOpen) => setIsDropdownOpen(isOpen), toggle: toggle }, props),
+            React.createElement(SelectList, null, dropdownItems))));
+};
+const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    return (React.createElement(ToolbarItem, { className: "pfext-quick-start-catalog-filter__count", align: { default: 'alignRight' } }, getResource('{{count, number}} item', quickStartsCount).replace('{{count, number}}', quickStartsCount)));
+};
+const QuickStartCatalogFilterSearchWrapper = ({ onSearchInputChange = () => { } }) => {
+    const { useQueryParams, filter, setFilter } = React.useContext(QuickStartContext);
+    React.useEffect(() => {
+        //   use this effect to clear the search when a `clear all` action is performed higher up
+        const unlisten = history.listen(({ location }) => {
+            const searchParams = new URLSearchParams(location.search);
+            const searchQuery = searchParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
+            if (searchQuery === '') {
+                setFilter('keyword', '');
+                onSearchInputChange('');
+            }
+        });
+        return () => {
+            unlisten();
+        };
+    }, [onSearchInputChange, setFilter]);
+    const handleTextChange = (val) => {
+        if (val.length > 0) {
+            useQueryParams && setQueryArgument(QUICKSTART_SEARCH_FILTER_KEY, val);
+        }
+        else {
+            useQueryParams && removeQueryArgument(QUICKSTART_SEARCH_FILTER_KEY);
+        }
+        if ((filter === null || filter === void 0 ? void 0 : filter.keyword) !== val) {
+            setFilter('keyword', val);
+        }
+        onSearchInputChange(val);
+    };
+    return (React.createElement(QuickStartCatalogFilterSearch, { searchInputText: filter === null || filter === void 0 ? void 0 : filter.keyword, handleTextChange: handleTextChange }));
+};
+// compare string/number arrays
+const equalsIgnoreOrder = (a, b) => {
+    if (a.length !== b.length) {
+        return false;
+    }
+    const uniqueValues = new Set([...a, ...b]);
+    for (const v of uniqueValues) {
+        const aCount = a.filter((e) => e === v).length;
+        const bCount = b.filter((e) => e === v).length;
+        if (aCount !== bCount) {
+            return false;
+        }
+    }
+    return true;
+};
+const QuickStartCatalogFilterStatusWrapper = ({ onStatusChange = () => { } }) => {
+    const { useQueryParams, filter, setFilter } = React.useContext(QuickStartContext);
+    React.useEffect(() => {
+        //   use this effect to clear the status when a `clear all` action is performed higher up
+        const unlisten = history.listen(({ location }) => {
+            var _a;
+            const searchParams = new URLSearchParams(location.search);
+            const updatedStatusFilters = ((_a = searchParams.get(QUICKSTART_STATUS_FILTER_KEY)) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
+            if (updatedStatusFilters.length === 0) {
+                setFilter('status', []);
+                onStatusChange([]);
+            }
+        });
+        return () => {
+            unlisten();
+        };
+    });
+    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+    const onRowfilterSelect = React.useCallback((_e, selectedValue) => {
+        setIsDropdownOpen(false);
+        const selection = Object.entries(filter.status.statusTypes).find(([_key, value]) => value === selectedValue)[0];
+        const selectedFiltersList = filter.status.statusFilters.includes(selection)
+            ? filter.status.statusFilters.filter((status) => status !== selection)
+            : [...filter.status.statusFilters, selection];
+        if (!equalsIgnoreOrder(filter.status.statusFilters, selectedFiltersList)) {
+            setFilter('status', selectedFiltersList);
+        }
+        if (selectedFiltersList.length > 0) {
+            useQueryParams && setQueryArgument('status', selectedFiltersList.join(','));
+        }
+        else {
+            useQueryParams && removeQueryArgument(QUICKSTART_STATUS_FILTER_KEY);
+        }
+        onStatusChange(selectedFiltersList);
+    }, [filter.status.statusFilters, onStatusChange, setFilter, useQueryParams]);
+    const dropdownItems = Object.entries(filter.status.statusTypes).map(([key, value]) => (React.createElement(SelectOption, { key: key, "data-key": key, value: value, hasCheckbox: true, isSelected: filter.status.statusFilters.includes(key) },
+        React.createElement(React.Fragment, null, value))));
+    return (React.createElement(QuickStartCatalogFilterSelect, { isDropdownOpen: isDropdownOpen, setIsDropdownOpen: setIsDropdownOpen, onRowfilterSelect: onRowfilterSelect, selectedFilters: filter.status.statusFilters, dropdownItems: dropdownItems }));
+};
 const QuickStartCatalogFilterCountWrapper = ({ quickStartsCount }) => React.createElement(QuickStartCatalogFilterCount, { quickStartsCount: quickStartsCount });
 
-const QuickStartCatalogFilter = (_a) => {
-    var { quickStartsCount, onSearchInputChange = () => { }, onStatusChange = () => { } } = _a, props = __rest(_a, ["quickStartsCount", "onSearchInputChange", "onStatusChange"]);
-    return (React.createElement(Toolbar, Object.assign({ usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, props),
-        React.createElement(ToolbarContent, null,
-            React.createElement(QuickStartCatalogFilterSearchWrapper, { onSearchInputChange: onSearchInputChange }),
-            React.createElement(QuickStartCatalogFilterStatusWrapper, { onStatusChange: onStatusChange }),
-            React.createElement(QuickStartCatalogFilterCountWrapper, { quickStartsCount: quickStartsCount }))));
-};
-
-const QuickStartCatalogEmptyState = ({ clearFilters }) => {
-    const { getResource } = React.useContext(QuickStartContext);
-    return (React.createElement(EmptyState, null,
-        React.createElement(EmptyStateHeader, { titleText: React.createElement(React.Fragment, null, getResource('No results found')), icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }), headingLevel: "h4" }),
-        React.createElement(EmptyStateBody, null, getResource('No results match the filter criteria. Remove filters or clear all filters to show results.')),
-        React.createElement(EmptyStateFooter, null,
-            React.createElement(EmptyStateActions, null,
-                React.createElement(Button, { variant: "link", onClick: clearFilters, "data-test": "clear-filter button" }, getResource('Clear all filters'))))));
-};
-const QuickStartCatalogPage = ({ quickStarts, showFilter, sortFnc = (q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName), title, hint, showTitle = true, }) => {
-    const sortFncCallback = React.useCallback(sortFnc, [sortFnc]);
-    const { allQuickStarts = [], setAllQuickStarts, allQuickStartStates, getResource, filter, setFilter, loading, } = React.useContext(QuickStartContext);
-    React.useEffect(() => {
-        // passed through prop, not context
-        if (quickStarts && JSON.stringify(quickStarts) !== JSON.stringify(allQuickStarts)) {
-            setAllQuickStarts(quickStarts);
-        }
-    }, [quickStarts, allQuickStarts, setAllQuickStarts]);
-    const initialFilteredQuickStarts = showFilter
-        ? filterQuickStarts(allQuickStarts, filter.keyword, filter.status.statusFilters, allQuickStartStates).sort(sortFncCallback)
-        : allQuickStarts;
-    const [filteredQuickStarts, setFilteredQuickStarts] = React.useState(initialFilteredQuickStarts);
-    React.useEffect(() => {
-        const filteredQs = showFilter
-            ? filterQuickStarts(allQuickStarts, filter.keyword, filter.status.statusFilters, allQuickStartStates).sort(sortFncCallback)
-            : allQuickStarts;
-        // also needs a check whether the content of the QS changed
-        if (filteredQs.length !== filteredQuickStarts.length ||
-            JSON.stringify(filteredQs) !== JSON.stringify(filteredQuickStarts)) {
-            setFilteredQuickStarts(filteredQs);
-        }
-    }, [
-        allQuickStarts,
-        allQuickStartStates,
-        showFilter,
-        filter.keyword,
-        filter.status.statusFilters,
-        sortFncCallback,
-        filteredQuickStarts,
-    ]);
-    const clearFilters = () => {
-        setFilter('keyword', '');
-        setFilter('status', []);
-        clearFilterParams();
-        setFilteredQuickStarts(allQuickStarts.sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName)));
-    };
-    const onSearchInputChange = (searchValue) => {
-        const result = filterQuickStarts(allQuickStarts, searchValue, filter.status.statusFilters, allQuickStartStates).sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName));
-        if (searchValue !== filter.keyword) {
-            setFilter('keyword', searchValue);
-        }
-        if (result.length !== filteredQuickStarts.length) {
-            setFilteredQuickStarts(result);
-        }
-    };
-    const onStatusChange = (statusList) => {
-        const result = filterQuickStarts(allQuickStarts, filter.keyword, statusList, allQuickStartStates).sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName));
-        if (JSON.stringify(statusList) !== JSON.stringify(filter.status)) {
-            setFilter('status', statusList);
-        }
-        if (result.length !== filteredQuickStarts.length) {
-            setFilteredQuickStarts(result);
-        }
-    };
-    if (loading) {
-        return React.createElement(LoadingBox, null);
-    }
-    if (!allQuickStarts || allQuickStarts.length === 0) {
-        return React.createElement(EmptyBox, { label: getResource('Quick Starts') });
-    }
-    return (React.createElement("div", { className: "pfext-quick-start__base" },
-        showTitle && (React.createElement("div", { className: "pfext-page-layout__header" },
-            React.createElement(Text, { component: "h1", className: "pfext-page-layout__title", "data-test": "page-title" }, title || getResource('Quick Starts')),
-            hint && React.createElement("div", { className: "pfext-page-layout__hint" }, hint))),
-        showTitle && React.createElement(Divider, { component: "div" }),
-        showFilter && (React.createElement(React.Fragment, null,
-            React.createElement(QuickStartCatalogFilter, { quickStartsCount: filteredQuickStarts.length, onSearchInputChange: onSearchInputChange, onStatusChange: onStatusChange }),
-            React.createElement(Divider, { component: "div" }))),
-        React.createElement(React.Fragment, null, filteredQuickStarts.length === 0 ? (React.createElement(QuickStartCatalogEmptyState, { clearFilters: clearFilters })) : (React.createElement(QuickStartCatalog, { quickStarts: filteredQuickStarts })))));
-};
-
-const QuickStartCatalogHeader = ({ title, hint, }) => (React.createElement("div", { className: "pfext-page-layout__header" },
-    React.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
+const QuickStartCatalogFilter = (_a) => {
+    var { quickStartsCount, onSearchInputChange = () => { }, onStatusChange = () => { } } = _a, props = __rest(_a, ["quickStartsCount", "onSearchInputChange", "onStatusChange"]);
+    return (React.createElement(Toolbar, Object.assign({ usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, props),
+        React.createElement(ToolbarContent, null,
+            React.createElement(QuickStartCatalogFilterSearchWrapper, { onSearchInputChange: onSearchInputChange }),
+            React.createElement(QuickStartCatalogFilterStatusWrapper, { onStatusChange: onStatusChange }),
+            React.createElement(QuickStartCatalogFilterCountWrapper, { quickStartsCount: quickStartsCount }))));
+};
+
+const QuickStartCatalogEmptyState = ({ clearFilters }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    return (React.createElement(EmptyState, null,
+        React.createElement(EmptyStateHeader, { titleText: React.createElement(React.Fragment, null, getResource('No results found')), icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }), headingLevel: "h4" }),
+        React.createElement(EmptyStateBody, null, getResource('No results match the filter criteria. Remove filters or clear all filters to show results.')),
+        React.createElement(EmptyStateFooter, null,
+            React.createElement(EmptyStateActions, null,
+                React.createElement(Button, { variant: "link", onClick: clearFilters, "data-test": "clear-filter button" }, getResource('Clear all filters'))))));
+};
+const QuickStartCatalogPage = ({ quickStarts, showFilter, sortFnc = (q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName), title, hint, showTitle = true, }) => {
+    const sortFncCallback = React.useCallback(sortFnc, [sortFnc]);
+    const { allQuickStarts = [], setAllQuickStarts, allQuickStartStates, getResource, filter, setFilter, loading, } = React.useContext(QuickStartContext);
+    React.useEffect(() => {
+        // passed through prop, not context
+        if (quickStarts && JSON.stringify(quickStarts) !== JSON.stringify(allQuickStarts)) {
+            setAllQuickStarts(quickStarts);
+        }
+    }, [quickStarts, allQuickStarts, setAllQuickStarts]);
+    const initialFilteredQuickStarts = showFilter
+        ? filterQuickStarts(allQuickStarts, filter.keyword, filter.status.statusFilters, allQuickStartStates).sort(sortFncCallback)
+        : allQuickStarts;
+    const [filteredQuickStarts, setFilteredQuickStarts] = React.useState(initialFilteredQuickStarts);
+    React.useEffect(() => {
+        const filteredQs = showFilter
+            ? filterQuickStarts(allQuickStarts, filter.keyword, filter.status.statusFilters, allQuickStartStates).sort(sortFncCallback)
+            : allQuickStarts;
+        // also needs a check whether the content of the QS changed
+        if (filteredQs.length !== filteredQuickStarts.length ||
+            JSON.stringify(filteredQs) !== JSON.stringify(filteredQuickStarts)) {
+            setFilteredQuickStarts(filteredQs);
+        }
+    }, [
+        allQuickStarts,
+        allQuickStartStates,
+        showFilter,
+        filter.keyword,
+        filter.status.statusFilters,
+        sortFncCallback,
+        filteredQuickStarts,
+    ]);
+    const clearFilters = () => {
+        setFilter('keyword', '');
+        setFilter('status', []);
+        clearFilterParams();
+        setFilteredQuickStarts(allQuickStarts.sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName)));
+    };
+    const onSearchInputChange = (searchValue) => {
+        const result = filterQuickStarts(allQuickStarts, searchValue, filter.status.statusFilters, allQuickStartStates).sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName));
+        if (searchValue !== filter.keyword) {
+            setFilter('keyword', searchValue);
+        }
+        if (result.length !== filteredQuickStarts.length) {
+            setFilteredQuickStarts(result);
+        }
+    };
+    const onStatusChange = (statusList) => {
+        const result = filterQuickStarts(allQuickStarts, filter.keyword, statusList, allQuickStartStates).sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName));
+        if (JSON.stringify(statusList) !== JSON.stringify(filter.status)) {
+            setFilter('status', statusList);
+        }
+        if (result.length !== filteredQuickStarts.length) {
+            setFilteredQuickStarts(result);
+        }
+    };
+    if (loading) {
+        return React.createElement(LoadingBox, null);
+    }
+    if (!allQuickStarts || allQuickStarts.length === 0) {
+        return React.createElement(EmptyBox, { label: getResource('Quick Starts') });
+    }
+    return (React.createElement("div", { className: "pfext-quick-start__base" },
+        showTitle && (React.createElement("div", { className: "pfext-page-layout__header" },
+            React.createElement(Text, { component: "h1", className: "pfext-page-layout__title", "data-test": "page-title" }, title || getResource('Quick Starts')),
+            hint && React.createElement("div", { className: "pfext-page-layout__hint" }, hint))),
+        showTitle && React.createElement(Divider, { component: "div" }),
+        showFilter && (React.createElement(React.Fragment, null,
+            React.createElement(QuickStartCatalogFilter, { quickStartsCount: filteredQuickStarts.length, onSearchInputChange: onSearchInputChange, onStatusChange: onStatusChange }),
+            React.createElement(Divider, { component: "div" }))),
+        React.createElement(React.Fragment, null, filteredQuickStarts.length === 0 ? (React.createElement(QuickStartCatalogEmptyState, { clearFilters: clearFilters })) : (React.createElement(QuickStartCatalog, { quickStarts: filteredQuickStarts })))));
+};
+
+const QuickStartCatalogHeader = ({ title, hint, }) => (React.createElement("div", { className: "pfext-page-layout__header" },
+    React.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
     hint && React.createElement("div", { className: "pfext-page-layout__hint" }, hint)));
 
 const QuickStartCatalogSection = ({ children }) => (React.createElement("div", { className: "pfext-page-layout__content" }, children));
 
 const QuickStartCatalogToolbar = ({ children }) => (React.createElement(Toolbar, { usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, children));
 
-const QuickStartCloseModal = ({ isOpen, onConfirm, onCancel, }) => {
-    const { getResource } = React.useContext(QuickStartContext);
-    return (React.createElement(Modal, { className: "pfext-quick-start-drawer__modal pfext-quick-start__base", isOpen: isOpen, variant: ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React.createElement(Flex, null,
-            React.createElement(FlexItem, { align: { default: 'alignRight' } },
-                React.createElement(Button, { variant: "secondary", "data-test": "cancel button", onClick: onCancel }, getResource('Cancel'))),
-            React.createElement(FlexItem, null,
-                React.createElement(Button, { variant: "primary", "data-test": "leave button", onClick: onConfirm }, getResource('Leave')))), isFullScreen: true }, getResource('Your progress will be saved.')));
+const QuickStartCloseModal = ({ isOpen, onConfirm, onCancel, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    return (React.createElement(Modal, { className: "pfext-quick-start-drawer__modal pfext-quick-start__base", isOpen: isOpen, variant: ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React.createElement(Flex, null,
+            React.createElement(FlexItem, { align: { default: 'alignRight' } },
+                React.createElement(Button, { variant: "secondary", "data-test": "cancel button", onClick: onCancel }, getResource('Cancel'))),
+            React.createElement(FlexItem, null,
+                React.createElement(Button, { variant: "primary", "data-test": "leave button", onClick: onConfirm }, getResource('Leave')))), isFullScreen: true }, getResource('Your progress will be saved.')));
 };
 
 var arrowRightIcon = createCommonjsModule(function (module, exports) {
@@ -30538,395 +30555,395 @@ exports["default"] = exports.ArrowRightIcon;
 
 var ArrowRightIcon = /*@__PURE__*/getDefaultExportFromCjs(arrowRightIcon);
 
-const TaskIcon = ({ taskIndex, taskStatus }) => {
-    const { getResource } = React.useContext(QuickStartContext);
-    const success = taskStatus === QuickStartTaskStatus.SUCCESS;
-    const failed = taskStatus === QuickStartTaskStatus.FAILED;
-    const classNames = css('pfext-icon-and-text__icon', {
-        'pfext-quick-start-task-header__task-icon-init': !failed && !success,
-    });
-    let content;
-    if (success) {
-        content = (React.createElement(Icon, { size: "md" },
-            React.createElement(CheckCircleIcon, { className: "pfext-quick-start-task-header__task-icon-success" }),
-            ' '));
-    }
-    else if (failed) {
-        content = (React.createElement(Icon, { size: "md" },
-            React.createElement(ExclamationCircleIcon, { className: "pfext-quick-start-task-header__task-icon-failed" })));
-    }
-    else {
-        content = getResource('{{taskIndex, number}}', taskIndex).replace('{{taskIndex, number}}', taskIndex);
-    }
-    return React.createElement("span", { className: classNames }, content);
-};
-const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
-    const titleRef = React.useRef(null);
-    React.useEffect(() => {
-        if (isActiveTask) {
-            // Focus the WizardNavItem button element that contains the title
-            titleRef.current.parentNode.focus();
-        }
-    }, [isActiveTask]);
-    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 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", ref: titleRef },
-        React.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
-        React.createElement(Title, { headingLevel: "h3", size: size, className: classNames },
-            React.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
-            isActiveTask && subtitle && (React.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" },
-                ' ',
-                subtitle))),
-        tryAgain));
-    return (React.createElement(WizardNavItem, { content: content, stepIndex: taskIndex, onClick: () => onTaskSelect(taskIndex - 1), component: "button", isCurrent: isActiveTask }, children));
+const TaskIcon = ({ taskIndex, taskStatus }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const success = taskStatus === QuickStartTaskStatus.SUCCESS;
+    const failed = taskStatus === QuickStartTaskStatus.FAILED;
+    const classNames = css('pfext-icon-and-text__icon', {
+        'pfext-quick-start-task-header__task-icon-init': !failed && !success,
+    });
+    let content;
+    if (success) {
+        content = (React.createElement(Icon, { size: "md" },
+            React.createElement(CheckCircleIcon, { className: "pfext-quick-start-task-header__task-icon-success" }),
+            ' '));
+    }
+    else if (failed) {
+        content = (React.createElement(Icon, { size: "md" },
+            React.createElement(ExclamationCircleIcon, { className: "pfext-quick-start-task-header__task-icon-failed" })));
+    }
+    else {
+        content = getResource('{{taskIndex, number}}', taskIndex).replace('{{taskIndex, number}}', taskIndex);
+    }
+    return React.createElement("span", { className: classNames }, content);
+};
+const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
+    const titleRef = React.useRef(null);
+    React.useEffect(() => {
+        if (isActiveTask) {
+            // Focus the WizardNavItem button element that contains the title
+            titleRef.current.parentNode.focus();
+        }
+    }, [isActiveTask]);
+    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 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", ref: titleRef },
+        React.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
+        React.createElement(Title, { headingLevel: "h3", size: size, className: classNames },
+            React.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
+            isActiveTask && subtitle && (React.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" },
+                ' ',
+                subtitle))),
+        tryAgain));
+    return (React.createElement(WizardNavItem, { content: content, stepIndex: taskIndex, onClick: () => onTaskSelect(taskIndex - 1), component: "button", isCurrent: isActiveTask }, children));
 };
 
 const QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => tasks.length > 0 ? (React.createElement(List, { className: "pfext-quick-start-task-header__list" }, tasks.map((task, index) => (React.createElement(QuickStartTaskHeader, { key: task.title, title: task.title, taskIndex: index + 1, size: "md", taskStatus: allTaskStatuses[index], onTaskSelect: onTaskSelect }))))) : null;
 
-const QuickStartConclusion = ({ tasks, conclusion, allTaskStatuses, nextQuickStarts, onQuickStartChange, onTaskSelect, }) => {
-    const hasFailedTask = allTaskStatuses.includes(QuickStartTaskStatus.FAILED);
-    const { getResource } = React.useContext(QuickStartContext);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect }),
-        React.createElement(QuickStartMarkdownView, { content: hasFailedTask
-                ? getResource('One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.')
-                : conclusion }),
-        !hasFailedTask &&
-            nextQuickStarts &&
-            nextQuickStarts.length > 0 &&
-            nextQuickStarts.map((nextQuickStart, index) => {
-                var _a;
-                return (React.createElement(Button, { variant: "link", onClick: () => onQuickStartChange(nextQuickStart.metadata.name), isInline: true, isBlock: true, key: index },
-                    getResource('Start {{nextQSDisplayName}} quick start').replace('{{nextQSDisplayName}}', (_a = nextQuickStart === null || nextQuickStart === void 0 ? void 0 : nextQuickStart.spec) === null || _a === void 0 ? void 0 : _a.displayName),
-                    ' ',
-                    React.createElement(ArrowRightIcon, { style: { marginLeft: 'var(--pf-v5-global--spacer--xs)', verticalAlign: 'middle' } })));
-            })));
-};
-
-const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequisites, onTaskSelect, }) => {
-    const { getResource } = React.useContext(QuickStartContext);
-    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
-    const [isPrereqsExpanded, setIsPrereqsExpanded] = React.useState(false);
-    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) => (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" },
-                React.createElement(QuickStartMarkdownView, { content: pr }))))))));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(QuickStartMarkdownView, { content: introduction }),
-        prereqList,
-        React.createElement("p", { style: { marginBottom: 'var(--pf-v5-global--spacer--md)' } },
-            getResource('In this quick start, you will complete {{count, number}} task', tasks.length).replace('{{count, number}}', tasks.length),
-            ":"),
-        React.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect })));
-};
-
-const getAlertVariant = (status) => {
-    switch (status) {
-        case QuickStartTaskStatus.SUCCESS:
-            return 'success';
-        case QuickStartTaskStatus.FAILED:
-            return 'danger';
-        default:
-            return 'info';
-    }
-};
-const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
-    const { instructions, failedTaskHelp: taskHelp } = review;
-    const { getResource } = React.useContext(QuickStartContext);
-    const alertClassNames = css('pfext-quick-start-task-review', {
-        'pfext-quick-start-task-review--success': taskStatus === QuickStartTaskStatus.SUCCESS,
-        '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, 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) }),
-            React.createElement(Radio, { id: "review-failed", name: "review-failed", "data-testid": "qs-drawer-check-no", label: getResource('No'), className: "pfext-quick-start-task-review__radio", isChecked: taskStatus === QuickStartTaskStatus.FAILED, onChange: () => onTaskReview(QuickStartTaskStatus.FAILED) })),
-        taskStatus === QuickStartTaskStatus.FAILED && taskHelp && (React.createElement(QuickStartMarkdownView, { content: taskHelp, exactHeight: true }))));
-};
-
-const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onTaskSelect, }) => {
-    const { getResource, alwaysShowTaskReview } = React.useContext(QuickStartContext);
-    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) => {
-    const { spec: { introduction, tasks, conclusion, prerequisites }, } = quickStart;
-    const totalTasks = tasks.length;
-    return (React.createElement("div", { className: "pfext-quick-start-content", ref: ref },
-        taskNumber === -1 && (React.createElement(QuickStartIntroduction, { tasks: tasks, allTaskStatuses: allTaskStatuses, introduction: introduction, prerequisites: prerequisites, onTaskSelect: onTaskSelect })),
-        taskNumber > -1 && taskNumber < totalTasks && (React.createElement(QuickStartTasks, { tasks: tasks, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskReview: onTaskReview, onTaskSelect: onTaskSelect })),
-        taskNumber === totalTasks && (React.createElement(QuickStartConclusion, { tasks: tasks, conclusion: conclusion, allTaskStatuses: allTaskStatuses, nextQuickStarts: nextQuickStarts, onQuickStartChange: onQuickStartChange, onTaskSelect: onTaskSelect }))));
+const QuickStartConclusion = ({ tasks, conclusion, allTaskStatuses, nextQuickStarts, onQuickStartChange, onTaskSelect, }) => {
+    const hasFailedTask = allTaskStatuses.includes(QuickStartTaskStatus.FAILED);
+    const { getResource } = React.useContext(QuickStartContext);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect }),
+        React.createElement(QuickStartMarkdownView, { content: hasFailedTask
+                ? getResource('One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.')
+                : conclusion }),
+        !hasFailedTask &&
+            nextQuickStarts &&
+            nextQuickStarts.length > 0 &&
+            nextQuickStarts.map((nextQuickStart, index) => {
+                var _a;
+                return (React.createElement(Button, { variant: "link", onClick: () => onQuickStartChange(nextQuickStart.metadata.name), isInline: true, isBlock: true, key: index },
+                    getResource('Start {{nextQSDisplayName}} quick start').replace('{{nextQSDisplayName}}', (_a = nextQuickStart === null || nextQuickStart === void 0 ? void 0 : nextQuickStart.spec) === null || _a === void 0 ? void 0 : _a.displayName),
+                    ' ',
+                    React.createElement(ArrowRightIcon, { style: { marginLeft: 'var(--pf-v5-global--spacer--xs)', verticalAlign: 'middle' } })));
+            })));
+};
+
+const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequisites, onTaskSelect, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
+    const [isPrereqsExpanded, setIsPrereqsExpanded] = React.useState(false);
+    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) => (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" },
+                React.createElement(QuickStartMarkdownView, { content: pr }))))))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(QuickStartMarkdownView, { content: introduction }),
+        prereqList,
+        React.createElement("p", { style: { marginBottom: 'var(--pf-v5-global--spacer--md)' } },
+            getResource('In this quick start, you will complete {{count, number}} task', tasks.length).replace('{{count, number}}', tasks.length),
+            ":"),
+        React.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect })));
+};
+
+const getAlertVariant = (status) => {
+    switch (status) {
+        case QuickStartTaskStatus.SUCCESS:
+            return 'success';
+        case QuickStartTaskStatus.FAILED:
+            return 'danger';
+        default:
+            return 'info';
+    }
+};
+const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
+    const { instructions, failedTaskHelp: taskHelp } = review;
+    const { getResource } = React.useContext(QuickStartContext);
+    const alertClassNames = css('pfext-quick-start-task-review', {
+        'pfext-quick-start-task-review--success': taskStatus === QuickStartTaskStatus.SUCCESS,
+        '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, 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) }),
+            React.createElement(Radio, { id: "review-failed", name: "review-failed", "data-testid": "qs-drawer-check-no", label: getResource('No'), className: "pfext-quick-start-task-review__radio", isChecked: taskStatus === QuickStartTaskStatus.FAILED, onChange: () => onTaskReview(QuickStartTaskStatus.FAILED) })),
+        taskStatus === QuickStartTaskStatus.FAILED && taskHelp && (React.createElement(QuickStartMarkdownView, { content: taskHelp, exactHeight: true }))));
+};
+
+const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onTaskSelect, }) => {
+    const { getResource, alwaysShowTaskReview } = React.useContext(QuickStartContext);
+    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) => {
+    const { spec: { introduction, tasks, conclusion, prerequisites }, } = quickStart;
+    const totalTasks = tasks.length;
+    return (React.createElement("div", { className: "pfext-quick-start-content", ref: ref },
+        taskNumber === -1 && (React.createElement(QuickStartIntroduction, { tasks: tasks, allTaskStatuses: allTaskStatuses, introduction: introduction, prerequisites: prerequisites, onTaskSelect: onTaskSelect })),
+        taskNumber > -1 && taskNumber < totalTasks && (React.createElement(QuickStartTasks, { tasks: tasks, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskReview: onTaskReview, onTaskSelect: onTaskSelect })),
+        taskNumber === totalTasks && (React.createElement(QuickStartConclusion, { tasks: tasks, conclusion: conclusion, allTaskStatuses: allTaskStatuses, nextQuickStarts: nextQuickStarts, onQuickStartChange: onQuickStartChange, onTaskSelect: onTaskSelect }))));
 });
 
-const QuickStartFooter = ({ status, taskNumber, totalTasks, onNext, onBack, footerClass, quickStartId, }) => {
-    const { restartQuickStart, getResource } = React.useContext(QuickStartContext);
-    const PrimaryButtonText = React.useMemo(() => ({
-        START: getResource('Start'),
-        CONTINUE: getResource('Continue'),
-        NEXT: getResource('Next'),
-        CLOSE: getResource('Close'),
-    }), [getResource]);
-    const SecondaryButtonText = React.useMemo(() => ({
-        BACK: getResource('Back'),
-        RESTART: getResource('Restart'),
-    }), [getResource]);
-    const onRestart = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        restartQuickStart(quickStartId, totalTasks);
-    }, [quickStartId, restartQuickStart, totalTasks]);
-    const getPrimaryButtonText = React.useMemo(() => {
-        if (status === QuickStartStatus.NOT_STARTED) {
-            return PrimaryButtonText.START;
-        }
-        if (taskNumber === totalTasks) {
-            return PrimaryButtonText.CLOSE;
-        }
-        if (taskNumber > -1 && taskNumber < totalTasks) {
-            return PrimaryButtonText.NEXT;
-        }
-        return PrimaryButtonText.CONTINUE;
-    }, [taskNumber, totalTasks, PrimaryButtonText, status]);
-    const getPrimaryButton = React.useMemo(() => (React.createElement(Button, { variant: "primary", className: "pfext-quick-start-footer__actionbtn", onClick: onNext, "data-testid": `qs-drawer-${camelize(getPrimaryButtonText)}`, "data-test": `${getPrimaryButtonText} button` }, getPrimaryButtonText)), [getPrimaryButtonText, onNext]);
-    const getSecondaryButton = React.useMemo(() => taskNumber === -1 && status !== QuickStartStatus.NOT_STARTED ? (React.createElement(Button, { variant: "secondary", onClick: onRestart, "data-testid": "qs-drawer-restart" }, SecondaryButtonText.RESTART)) : (taskNumber > -1 && (React.createElement(Button, { variant: "secondary", onClick: onBack, "data-testid": "qs-drawer-back" }, SecondaryButtonText.BACK))), [onRestart, onBack, SecondaryButtonText, status, taskNumber]);
-    const getSideNoteAction = React.useMemo(() => taskNumber !== -1 && (React.createElement(Button, { variant: "link", className: "pfext-quick-start-footer__restartbtn", onClick: onRestart, "data-testid": "qs-drawer-side-note-action" }, SecondaryButtonText.RESTART)), [taskNumber, onRestart, SecondaryButtonText.RESTART]);
-    return (React.createElement("div", { className: `pfext-quick-start-footer ${footerClass}` },
-        getPrimaryButton,
-        getSecondaryButton,
-        getSideNoteAction));
-};
-
-const QuickStartController = ({ quickStart, nextQuickStarts, contentRef, footerClass, }) => {
-    const { metadata: { name }, spec: { tasks = [] }, } = quickStart;
-    const totalTasks = tasks === null || tasks === void 0 ? void 0 : tasks.length;
-    const { activeQuickStartState, setActiveQuickStart, setQuickStartTaskNumber, setQuickStartTaskStatus, nextStep, previousStep, } = React.useContext(QuickStartContext);
-    const status = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.status;
-    const taskNumber = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.taskNumber;
-    const allTaskStatuses = tasks.map((task, index) => activeQuickStartState[`taskStatus${index}`]);
-    const handleQuickStartChange = React.useCallback((quickStartId) => setActiveQuickStart(quickStartId), [setActiveQuickStart]);
-    const handleTaskStatusChange = React.useCallback((newTaskStatus) => setQuickStartTaskStatus(newTaskStatus), [setQuickStartTaskStatus]);
-    const getQuickStartActiveTask = React.useCallback(() => {
-        let activeTaskNumber = 0;
-        while (activeTaskNumber !== totalTasks &&
-            activeQuickStartState[`taskStatus${activeTaskNumber}`] !== QuickStartTaskStatus.INIT) {
-            activeTaskNumber++;
-        }
-        return activeTaskNumber;
-    }, [totalTasks, activeQuickStartState]);
-    const handleQuickStartContinue = React.useCallback(() => {
-        const activeTaskNumber = getQuickStartActiveTask();
-        setQuickStartTaskNumber(name, activeTaskNumber);
-    }, [getQuickStartActiveTask, setQuickStartTaskNumber, name]);
-    const handleNext = React.useCallback(() => {
-        if (status === QuickStartStatus.COMPLETE && taskNumber === totalTasks) {
-            return handleQuickStartChange('');
-        }
-        if (status !== QuickStartStatus.NOT_STARTED && taskNumber === -1) {
-            return handleQuickStartContinue();
-        }
-        return nextStep(totalTasks);
-    }, [handleQuickStartChange, nextStep, status, taskNumber, totalTasks, handleQuickStartContinue]);
-    const handleBack = React.useCallback(() => previousStep(), [previousStep]);
-    const handleTaskSelect = React.useCallback((selectedTaskNumber) => {
-        setQuickStartTaskNumber(name, selectedTaskNumber);
-    }, [name, setQuickStartTaskNumber]);
-    return (React.createElement(React.Fragment, null,
-        React.createElement(QuickStartContent, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskSelect: handleTaskSelect, onTaskReview: handleTaskStatusChange, onQuickStartChange: handleQuickStartChange, ref: contentRef }),
-        React.createElement(QuickStartFooter, { status: status, taskNumber: taskNumber, totalTasks: totalTasks, onNext: handleNext, onBack: handleBack, footerClass: footerClass, quickStartId: quickStart.metadata.name })));
-};
-
-const getElement = (appendTo) => {
-    if (typeof appendTo === 'function') {
-        return appendTo();
-    }
-    return appendTo;
-};
-const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
-    React.useEffect(() => {
-        if (node) {
-            node.scrollTo({ top: 0, behavior: 'smooth' });
-        }
-    }, [taskNumber, node]);
-};
-const QuickStartPanelContent = (_a) => {
-    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, headerVariant = '' } = _a, props = __rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
-    const titleRef = React.useRef(null);
-    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 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); });
-    const headerClasses = css('pfext-quick-start-panel-content__header', {
-        'pfext-quick-start-panel-content__header__shadow': shadows === Shadows.top || shadows === Shadows.both,
-        'pfext-quick-start-panel-content__header--blue-white': headerVariant === 'blue-white',
-    });
-    const footerClass = css({
-        'pfext-quick-start-panel-content__footer__shadow': shadows === Shadows.bottom || shadows === Shadows.both,
-    });
-    const getStep = () => {
-        const tasks = quickStart.spec.tasks.length;
-        if (Number.parseInt(taskNumber) === -1) {
-            return 'intro';
-        }
-        if (Number.parseInt(taskNumber) === tasks) {
-            return 'conclusion';
-        }
-        return Number.parseInt(taskNumber) + 1;
-    };
-    React.useEffect(() => {
-        if (quickStart) {
-            titleRef.current.focus();
-        }
-    }, [quickStart]);
-    const content = quickStart ? (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base", "data-testid": `qs-drawer-${camelize(quickStart.spec.displayName)}`, "data-qs": `qs-step-${getStep()}`, "data-test": "quickstart drawer" }, props),
-        React.createElement("div", { className: headerClasses },
-            React.createElement(DrawerHead, null,
-                React.createElement("div", { className: "pfext-quick-start-panel-content__title", tabIndex: -1, ref: titleRef },
-                    React.createElement(Title, { headingLevel: "h2", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-v5-global--spacer--md)' } },
-                        React.createElement("span", { dangerouslySetInnerHTML: {
-                                __html: removeParagraphWrap(markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName)),
-                            } }),
-                        ' ',
-                        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" },
-            React.createElement(QuickStartController, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, footerClass: footerClass, contentRef: setContentRef })))) : null;
-    if (appendTo) {
-        return ReactDOM.createPortal(content, getElement(appendTo));
-    }
-    return content;
-};
-
-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 = true } = _a, props = __rest(_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,
-        setAllQuickStartStates, footer: {
-            show: showCardFooters,
-        }, useLegacyHeaderColors,
-        language, resourceBundle: Object.assign({}, resourceBundle), loading,
-        useQueryParams,
-        markdown,
-        alwaysShowTaskReview }, contextProps));
-    React.useEffect(() => {
-        if (quickStarts &&
-            JSON.stringify(quickStarts) !== JSON.stringify(valuesForQuickstartContext.allQuickStarts)) {
-            valuesForQuickstartContext.setAllQuickStarts(quickStarts);
-        }
-    }, [quickStarts, valuesForQuickstartContext]);
-    React.useEffect(() => {
-        if (loading !== valuesForQuickstartContext.loading) {
-            valuesForQuickstartContext.setLoading(loading);
-        }
-    }, [loading, valuesForQuickstartContext]);
-    const drawerProps = Object.assign({ appendTo,
-        fullWidth,
-        onCloseInProgress,
-        onCloseNotInProgress }, props);
-    return (React.createElement(QuickStartContext.Provider, { value: valuesForQuickstartContext },
-        React.createElement(QuickStartDrawer, Object.assign({}, drawerProps), children)));
-};
-const QuickStartDrawer = (_a) => {
-    var { quickStarts = [], children, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress } = _a, props = __rest(_a, ["quickStarts", "children", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress"]);
-    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, useLegacyHeaderColors, } = React.useContext(QuickStartContext);
-    const combinedQuickStarts = allQuickStarts.concat(quickStarts);
-    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 quickStartIdFromParam = params.get(QUICKSTART_ID_FILTER_KEY) || '';
-        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) {
-                setActiveQuickStart(quickStartIdFromParam);
-            }
-        }
-    }, [activeQuickStartID, combinedQuickStarts, setActiveQuickStart]);
-    React.useEffect(() => {
-        // If activeQuickStartID was changed through prop from QuickStartContainer, need to init the state if it does not exist yet
-        if (activeQuickStartID && !allQuickStartStates[activeQuickStartID]) {
-            setAllQuickStartStates(Object.assign(Object.assign({}, allQuickStartStates), { [activeQuickStartID]: getDefaultQuickStartState() }));
-        }
-    }, [activeQuickStartID, allQuickStartStates, setAllQuickStartStates]);
-    const [modalOpen, setModalOpen] = React.useState(false);
-    const activeQuickStartStatus = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.status;
-    const onClose = () => setActiveQuickStart('');
-    const handleClose = () => {
-        if (activeQuickStartStatus === QuickStartStatus.IN_PROGRESS) {
-            if (onCloseInProgress) {
-                onCloseInProgress();
-            }
-            else {
-                setModalOpen(true);
-            }
-        }
-        else if (onCloseNotInProgress) {
-            onCloseNotInProgress();
-        }
-        else {
-            onClose();
-        }
-    };
-    const onModalConfirm = () => {
-        setModalOpen(false);
-        onClose();
-    };
-    const onModalCancel = () => setModalOpen(false);
-    const fullWidthPanelStyle = fullWidth
-        ? {
-            style: {
-                flex: 1,
-            },
-        }
-        : {};
-    const fullWidthBodyStyle = fullWidth
-        ? {
-            style: {
-                display: activeQuickStartID ? 'none' : 'flex',
-            },
-        }
-        : {};
-    const panelContent = (React.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth, headerVariant: useLegacyHeaderColors ? '' : 'blue-white' }, fullWidthPanelStyle)));
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Drawer, Object.assign({ isExpanded: !!activeQuickStartID, isInline: true }, props), children ? (React.createElement(DrawerContent, Object.assign({ panelContent: panelContent }, fullWidthBodyStyle),
-            React.createElement(DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-v5-c-drawer__main" }, panelContent))),
-        React.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
+const QuickStartFooter = ({ status, taskNumber, totalTasks, onNext, onBack, footerClass, quickStartId, }) => {
+    const { restartQuickStart, getResource } = React.useContext(QuickStartContext);
+    const PrimaryButtonText = React.useMemo(() => ({
+        START: getResource('Start'),
+        CONTINUE: getResource('Continue'),
+        NEXT: getResource('Next'),
+        CLOSE: getResource('Close'),
+    }), [getResource]);
+    const SecondaryButtonText = React.useMemo(() => ({
+        BACK: getResource('Back'),
+        RESTART: getResource('Restart'),
+    }), [getResource]);
+    const onRestart = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        restartQuickStart(quickStartId, totalTasks);
+    }, [quickStartId, restartQuickStart, totalTasks]);
+    const getPrimaryButtonText = React.useMemo(() => {
+        if (status === QuickStartStatus.NOT_STARTED) {
+            return PrimaryButtonText.START;
+        }
+        if (taskNumber === totalTasks) {
+            return PrimaryButtonText.CLOSE;
+        }
+        if (taskNumber > -1 && taskNumber < totalTasks) {
+            return PrimaryButtonText.NEXT;
+        }
+        return PrimaryButtonText.CONTINUE;
+    }, [taskNumber, totalTasks, PrimaryButtonText, status]);
+    const getPrimaryButton = React.useMemo(() => (React.createElement(Button, { variant: "primary", className: "pfext-quick-start-footer__actionbtn", onClick: onNext, "data-testid": `qs-drawer-${camelize(getPrimaryButtonText)}`, "data-test": `${getPrimaryButtonText} button` }, getPrimaryButtonText)), [getPrimaryButtonText, onNext]);
+    const getSecondaryButton = React.useMemo(() => taskNumber === -1 && status !== QuickStartStatus.NOT_STARTED ? (React.createElement(Button, { variant: "secondary", onClick: onRestart, "data-testid": "qs-drawer-restart" }, SecondaryButtonText.RESTART)) : (taskNumber > -1 && (React.createElement(Button, { variant: "secondary", onClick: onBack, "data-testid": "qs-drawer-back" }, SecondaryButtonText.BACK))), [onRestart, onBack, SecondaryButtonText, status, taskNumber]);
+    const getSideNoteAction = React.useMemo(() => taskNumber !== -1 && (React.createElement(Button, { variant: "link", className: "pfext-quick-start-footer__restartbtn", onClick: onRestart, "data-testid": "qs-drawer-side-note-action" }, SecondaryButtonText.RESTART)), [taskNumber, onRestart, SecondaryButtonText.RESTART]);
+    return (React.createElement("div", { className: `pfext-quick-start-footer ${footerClass}` },
+        getPrimaryButton,
+        getSecondaryButton,
+        getSideNoteAction));
+};
+
+const QuickStartController = ({ quickStart, nextQuickStarts, contentRef, footerClass, }) => {
+    const { metadata: { name }, spec: { tasks = [] }, } = quickStart;
+    const totalTasks = tasks === null || tasks === void 0 ? void 0 : tasks.length;
+    const { activeQuickStartState, setActiveQuickStart, setQuickStartTaskNumber, setQuickStartTaskStatus, nextStep, previousStep, } = React.useContext(QuickStartContext);
+    const status = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.status;
+    const taskNumber = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.taskNumber;
+    const allTaskStatuses = tasks.map((task, index) => activeQuickStartState[`taskStatus${index}`]);
+    const handleQuickStartChange = React.useCallback((quickStartId) => setActiveQuickStart(quickStartId), [setActiveQuickStart]);
+    const handleTaskStatusChange = React.useCallback((newTaskStatus) => setQuickStartTaskStatus(newTaskStatus), [setQuickStartTaskStatus]);
+    const getQuickStartActiveTask = React.useCallback(() => {
+        let activeTaskNumber = 0;
+        while (activeTaskNumber !== totalTasks &&
+            activeQuickStartState[`taskStatus${activeTaskNumber}`] !== QuickStartTaskStatus.INIT) {
+            activeTaskNumber++;
+        }
+        return activeTaskNumber;
+    }, [totalTasks, activeQuickStartState]);
+    const handleQuickStartContinue = React.useCallback(() => {
+        const activeTaskNumber = getQuickStartActiveTask();
+        setQuickStartTaskNumber(name, activeTaskNumber);
+    }, [getQuickStartActiveTask, setQuickStartTaskNumber, name]);
+    const handleNext = React.useCallback(() => {
+        if (status === QuickStartStatus.COMPLETE && taskNumber === totalTasks) {
+            return handleQuickStartChange('');
+        }
+        if (status !== QuickStartStatus.NOT_STARTED && taskNumber === -1) {
+            return handleQuickStartContinue();
+        }
+        return nextStep(totalTasks);
+    }, [handleQuickStartChange, nextStep, status, taskNumber, totalTasks, handleQuickStartContinue]);
+    const handleBack = React.useCallback(() => previousStep(), [previousStep]);
+    const handleTaskSelect = React.useCallback((selectedTaskNumber) => {
+        setQuickStartTaskNumber(name, selectedTaskNumber);
+    }, [name, setQuickStartTaskNumber]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(QuickStartContent, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskSelect: handleTaskSelect, onTaskReview: handleTaskStatusChange, onQuickStartChange: handleQuickStartChange, ref: contentRef }),
+        React.createElement(QuickStartFooter, { status: status, taskNumber: taskNumber, totalTasks: totalTasks, onNext: handleNext, onBack: handleBack, footerClass: footerClass, quickStartId: quickStart.metadata.name })));
+};
+
+const getElement = (appendTo) => {
+    if (typeof appendTo === 'function') {
+        return appendTo();
+    }
+    return appendTo;
+};
+const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
+    React.useEffect(() => {
+        if (node) {
+            node.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    }, [taskNumber, node]);
+};
+const QuickStartPanelContent = (_a) => {
+    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, headerVariant = '' } = _a, props = __rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
+    const titleRef = React.useRef(null);
+    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 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); });
+    const headerClasses = css('pfext-quick-start-panel-content__header', {
+        'pfext-quick-start-panel-content__header__shadow': shadows === Shadows.top || shadows === Shadows.both,
+        'pfext-quick-start-panel-content__header--blue-white': headerVariant === 'blue-white',
+    });
+    const footerClass = css({
+        'pfext-quick-start-panel-content__footer__shadow': shadows === Shadows.bottom || shadows === Shadows.both,
+    });
+    const getStep = () => {
+        const tasks = quickStart.spec.tasks.length;
+        if (Number.parseInt(taskNumber) === -1) {
+            return 'intro';
+        }
+        if (Number.parseInt(taskNumber) === tasks) {
+            return 'conclusion';
+        }
+        return Number.parseInt(taskNumber) + 1;
+    };
+    React.useEffect(() => {
+        if (quickStart) {
+            titleRef.current.focus();
+        }
+    }, [quickStart]);
+    const content = quickStart ? (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base", "data-testid": `qs-drawer-${camelize(quickStart.spec.displayName)}`, "data-qs": `qs-step-${getStep()}`, "data-test": "quickstart drawer" }, props),
+        React.createElement("div", { className: headerClasses },
+            React.createElement(DrawerHead, null,
+                React.createElement("div", { className: "pfext-quick-start-panel-content__title", tabIndex: -1, ref: titleRef },
+                    React.createElement(Title, { headingLevel: "h2", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-v5-global--spacer--md)' } },
+                        React.createElement("span", { dangerouslySetInnerHTML: {
+                                __html: removeParagraphWrap(markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName)),
+                            } }),
+                        ' ',
+                        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" },
+            React.createElement(QuickStartController, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, footerClass: footerClass, contentRef: setContentRef })))) : null;
+    if (appendTo) {
+        return ReactDOM.createPortal(content, getElement(appendTo));
+    }
+    return content;
+};
+
+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 = true } = _a, props = __rest(_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,
+        setAllQuickStartStates, footer: {
+            show: showCardFooters,
+        }, useLegacyHeaderColors,
+        language, resourceBundle: Object.assign({}, resourceBundle), loading,
+        useQueryParams,
+        markdown,
+        alwaysShowTaskReview }, contextProps));
+    React.useEffect(() => {
+        if (quickStarts &&
+            JSON.stringify(quickStarts) !== JSON.stringify(valuesForQuickstartContext.allQuickStarts)) {
+            valuesForQuickstartContext.setAllQuickStarts(quickStarts);
+        }
+    }, [quickStarts, valuesForQuickstartContext]);
+    React.useEffect(() => {
+        if (loading !== valuesForQuickstartContext.loading) {
+            valuesForQuickstartContext.setLoading(loading);
+        }
+    }, [loading, valuesForQuickstartContext]);
+    const drawerProps = Object.assign({ appendTo,
+        fullWidth,
+        onCloseInProgress,
+        onCloseNotInProgress }, props);
+    return (React.createElement(QuickStartContext.Provider, { value: valuesForQuickstartContext },
+        React.createElement(QuickStartDrawer, Object.assign({}, drawerProps), children)));
+};
+const QuickStartDrawer = (_a) => {
+    var { quickStarts = [], children, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress } = _a, props = __rest(_a, ["quickStarts", "children", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress"]);
+    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, useLegacyHeaderColors, } = React.useContext(QuickStartContext);
+    const combinedQuickStarts = allQuickStarts.concat(quickStarts);
+    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 quickStartIdFromParam = params.get(QUICKSTART_ID_FILTER_KEY) || '';
+        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) {
+                setActiveQuickStart(quickStartIdFromParam);
+            }
+        }
+    }, [activeQuickStartID, combinedQuickStarts, setActiveQuickStart]);
+    React.useEffect(() => {
+        // If activeQuickStartID was changed through prop from QuickStartContainer, need to init the state if it does not exist yet
+        if (activeQuickStartID && !allQuickStartStates[activeQuickStartID]) {
+            setAllQuickStartStates(Object.assign(Object.assign({}, allQuickStartStates), { [activeQuickStartID]: getDefaultQuickStartState() }));
+        }
+    }, [activeQuickStartID, allQuickStartStates, setAllQuickStartStates]);
+    const [modalOpen, setModalOpen] = React.useState(false);
+    const activeQuickStartStatus = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.status;
+    const onClose = () => setActiveQuickStart('');
+    const handleClose = () => {
+        if (activeQuickStartStatus === QuickStartStatus.IN_PROGRESS) {
+            if (onCloseInProgress) {
+                onCloseInProgress();
+            }
+            else {
+                setModalOpen(true);
+            }
+        }
+        else if (onCloseNotInProgress) {
+            onCloseNotInProgress();
+        }
+        else {
+            onClose();
+        }
+    };
+    const onModalConfirm = () => {
+        setModalOpen(false);
+        onClose();
+    };
+    const onModalCancel = () => setModalOpen(false);
+    const fullWidthPanelStyle = fullWidth
+        ? {
+            style: {
+                flex: 1,
+            },
+        }
+        : {};
+    const fullWidthBodyStyle = fullWidth
+        ? {
+            style: {
+                display: activeQuickStartID ? 'none' : 'flex',
+            },
+        }
+        : {};
+    const panelContent = (React.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth, headerVariant: useLegacyHeaderColors ? '' : 'blue-white' }, fullWidthPanelStyle)));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Drawer, Object.assign({ isExpanded: !!activeQuickStartID, isInline: true }, props), children ? (React.createElement(DrawerContent, Object.assign({ panelContent: panelContent }, fullWidthBodyStyle),
+            React.createElement(DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-v5-c-drawer__main" }, panelContent))),
+        React.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
 };
 
 var barsIcon = createCommonjsModule(function (module, exports) {
@@ -30945,242 +30962,242 @@ 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) => 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 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) => 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 _b, _c;
-    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true, onClose } = _a, props = __rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
-    const { setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
-    const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React.useState(false);
-    const toggleHelpTopicMenu = () => {
-        setIsHelpTopicMenuOpen(!isHelpTopicMenuOpen);
-    };
-    const onSelectHelpTopic = (_event, value) => {
-        const topicName = value;
-        setActiveHelpTopicByName(topicName.toString());
-        toggleHelpTopicMenu();
-    };
-    const helpTopicOptions = filteredHelpTopics.length > 1 &&
-        filteredHelpTopics.map((topic) => (React.createElement(SelectOption, { key: topic.name, value: 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 })),
-        !!((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React.createElement(Divider, null),
-        paddingContainer(React.createElement(Stack, { hasGutter: true }, (_c = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _c === void 0 ? void 0 : _c.map(({ href, text, newTab, isExternal }, index) => (React.createElement(StackItem, { key: index },
-            React.createElement(Button, { component: "a", href: href, target: newTab ? '_blank' : '', rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: isExternal ? React.createElement(ExternalLinkAltIcon, null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href))))))));
-    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" },
-                    helpTopicOptions && (React.createElement(Select, { isPlain: true, id: "help-topics-select", selected: activeHelpTopic, isOpen: isHelpTopicMenuOpen, onSelect: onSelectHelpTopic, onOpenChange: (isOpen) => setIsHelpTopicMenuOpen(isOpen), toggle: (toggleRef) => (React.createElement(MenuToggle, { isFullWidth: true, ref: toggleRef, icon: React.createElement(BarsIcon, null), onClick: toggleHelpTopicMenu, isExpanded: isHelpTopicMenuOpen }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)) },
-                        React.createElement(SelectList, null, helpTopicOptions))),
-                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-v5-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(_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]);
-    return (React.createElement(HelpTopicContext.Provider, { value: valuesForHelpTopicContext },
-        React.createElement(HelpTopicDrawer, Object.assign({}, props), children)));
-};
-const HelpTopicDrawer = (_a) => {
-    var { children } = _a, props = __rest(_a, ["children"]);
-    const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
-    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-v5-c-drawer__main" }, panelContent)))));
+const HelpTopicPanelContent = (_a) => {
+    var _b, _c;
+    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true, onClose } = _a, props = __rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
+    const { setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
+    const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React.useState(false);
+    const toggleHelpTopicMenu = () => {
+        setIsHelpTopicMenuOpen(!isHelpTopicMenuOpen);
+    };
+    const onSelectHelpTopic = (_event, value) => {
+        const topicName = value;
+        setActiveHelpTopicByName(topicName.toString());
+        toggleHelpTopicMenu();
+    };
+    const helpTopicOptions = filteredHelpTopics.length > 1 &&
+        filteredHelpTopics.map((topic) => (React.createElement(SelectOption, { key: topic.name, value: 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 })),
+        !!((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React.createElement(Divider, null),
+        paddingContainer(React.createElement(Stack, { hasGutter: true }, (_c = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _c === void 0 ? void 0 : _c.map(({ href, text, newTab, isExternal }, index) => (React.createElement(StackItem, { key: index },
+            React.createElement(Button, { component: "a", href: href, target: newTab ? '_blank' : '', rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: isExternal ? React.createElement(ExternalLinkAltIcon, null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href))))))));
+    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" },
+                    helpTopicOptions && (React.createElement(Select, { isPlain: true, id: "help-topics-select", selected: activeHelpTopic, isOpen: isHelpTopicMenuOpen, onSelect: onSelectHelpTopic, onOpenChange: (isOpen) => setIsHelpTopicMenuOpen(isOpen), toggle: (toggleRef) => (React.createElement(MenuToggle, { isFullWidth: true, ref: toggleRef, icon: React.createElement(BarsIcon, null), onClick: toggleHelpTopicMenu, isExpanded: isHelpTopicMenuOpen }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)) },
+                        React.createElement(SelectList, null, helpTopicOptions))),
+                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-v5-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(_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]);
+    return (React.createElement(HelpTopicContext.Provider, { value: valuesForHelpTopicContext },
+        React.createElement(HelpTopicDrawer, Object.assign({}, props), children)));
+};
+const HelpTopicDrawer = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
+    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-v5-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
-    const [storedValue, setStoredValue] = useState(() => {
-        try {
-            // Get from local storage by key
-            const item = window.localStorage.getItem(key);
-            // Parse stored json or if none return initialValue
-            return item ? JSON.parse(item) : initialValue;
-        }
-        catch (error) {
-            // If error also return initialValue
-            // eslint-disable-next-line no-console
-            console.log(error);
-            return initialValue;
-        }
-    });
-    // Return a wrapped version of useState's setter function that ...
-    // ... persists the new value to localStorage.
-    const setValue = (value) => {
-        try {
-            // Allow value to be a function so we have same API as useState
-            const valueToStore = value instanceof Function ? value(storedValue) : value;
-            // Save state
-            setStoredValue(valueToStore);
-            // Save to local storage
-            window.localStorage.setItem(key, JSON.stringify(valueToStore));
-        }
-        catch (error) {
-            // A more advanced implementation would handle the error case
-            // eslint-disable-next-line no-console
-            console.log(error);
-        }
-    };
-    return [storedValue, setValue];
+const useLocalStorage = (key, initialValue) => {
+    // State to store our value
+    // Pass initial state function to useState so logic is only executed once
+    const [storedValue, setStoredValue] = useState(() => {
+        try {
+            // Get from local storage by key
+            const item = window.localStorage.getItem(key);
+            // Parse stored json or if none return initialValue
+            return item ? JSON.parse(item) : initialValue;
+        }
+        catch (error) {
+            // If error also return initialValue
+            // eslint-disable-next-line no-console
+            console.log(error);
+            return initialValue;
+        }
+    });
+    // Return a wrapped version of useState's setter function that ...
+    // ... persists the new value to localStorage.
+    const setValue = (value) => {
+        try {
+            // Allow value to be a function so we have same API as useState
+            const valueToStore = value instanceof Function ? value(storedValue) : value;
+            // Save state
+            setStoredValue(valueToStore);
+            // Save to local storage
+            window.localStorage.setItem(key, JSON.stringify(valueToStore));
+        }
+        catch (error) {
+            // A more advanced implementation would handle the error case
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    return [storedValue, setValue];
 };
 
-/* eslint-disable */
-// Brought in from dev to publish this with QS module
-// Dev now imports from here
-const ProcQuickStartParser = (quickStart, environmentVariables) => {
-    var _a;
-    const replaceEnvironmentVariables = (s) => s === null || s === void 0 ? void 0 : s.replace(/\${(\w+)}/, (substring, name) => {
-        return environmentVariables ? ([name] ? environmentVariables[name] : substring) : substring;
-    });
-    quickStart.spec.tasks = (_a = quickStart.spec.tasks) === null || _a === void 0 ? void 0 : _a.map((task, index) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        let proc;
-        let answer;
-        if (typeof task === 'string') {
-            proc = task;
-            answer = {};
-        }
-        else {
-            proc = task.proc;
-            answer = task;
-            delete task.proc;
-        }
-        let description = '', procedure, verification, title, summaryFailed, success, reviewFailed, prerequisites;
-        if (proc) {
-            const taskDOM = document.createElement('div');
-            taskDOM.innerHTML = proc;
-            // remove the screencapture images
-            taskDOM.querySelectorAll('.imageblock.screencapture').forEach((node) => {
-                var _a;
-                (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(node);
-            });
-            title = (_a = taskDOM
-                .querySelector('h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child')) === null || _a === void 0 ? void 0 : _a.innerHTML.trim();
-            let sectionBody = taskDOM.querySelector('.sectionbody');
-            if (!(sectionBody === null || sectionBody === void 0 ? void 0 : sectionBody.hasChildNodes())) {
-                // possibly in other templates, where we want to look for article
-                sectionBody = taskDOM.querySelector('article');
-            }
-            if (sectionBody) {
-                for (let i = 0; i < sectionBody.children.length || 0; i++) {
-                    /**
-                    child typically looks like:
+/* eslint-disable */
+// Brought in from dev to publish this with QS module
+// Dev now imports from here
+const ProcQuickStartParser = (quickStart, environmentVariables) => {
+    var _a;
+    const replaceEnvironmentVariables = (s) => s === null || s === void 0 ? void 0 : s.replace(/\${(\w+)}/, (substring, name) => {
+        return environmentVariables ? ([name] ? environmentVariables[name] : substring) : substring;
+    });
+    quickStart.spec.tasks = (_a = quickStart.spec.tasks) === null || _a === void 0 ? void 0 : _a.map((task, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        let proc;
+        let answer;
+        if (typeof task === 'string') {
+            proc = task;
+            answer = {};
+        }
+        else {
+            proc = task.proc;
+            answer = task;
+            delete task.proc;
+        }
+        let description = '', procedure, verification, title, summaryFailed, success, reviewFailed, prerequisites;
+        if (proc) {
+            const taskDOM = document.createElement('div');
+            taskDOM.innerHTML = proc;
+            // remove the screencapture images
+            taskDOM.querySelectorAll('.imageblock.screencapture').forEach((node) => {
+                var _a;
+                (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+            });
+            title = (_a = taskDOM
+                .querySelector('h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child')) === null || _a === void 0 ? void 0 : _a.innerHTML.trim();
+            let sectionBody = taskDOM.querySelector('.sectionbody');
+            if (!(sectionBody === null || sectionBody === void 0 ? void 0 : sectionBody.hasChildNodes())) {
+                // possibly in other templates, where we want to look for article
+                sectionBody = taskDOM.querySelector('article');
+            }
+            if (sectionBody) {
+                for (let i = 0; i < sectionBody.children.length || 0; i++) {
+                    /**
+                    child typically looks like:
           
-                    <div class="paragraph|olist|ulist|admonitionblock">
-                       <div class="title">Procedure|Prerequisites|Verification|Note|Warning</div>
-                       <ol|ul class="arabic">
-                         <li>
-                         <li>...
-                       </ol|ul>
-                    </div>
+                    <div class="paragraph|olist|ulist|admonitionblock">
+                       <div class="title">Procedure|Prerequisites|Verification|Note|Warning</div>
+                       <ol|ul class="arabic">
+                         <li>
+                         <li>...
+                       </ol|ul>
+                    </div>
           
-                    And the below code extracts the <ol> or <ul>
-                    Except for when there is no <div class="title|heading"/>, then the description is extracted
-                    in the else if below
-                    */
-                    const child = sectionBody.children.item(i);
-                    // find the title
-                    const sectionTitle = child === null || child === void 0 ? void 0 : child.querySelector('.heading,.title');
-                    // should this section be assigned to a specific section
-                    const sectionTitleText = (_b = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _b === void 0 ? void 0 : _b.trim();
-                    const isKnownSection = ['Procedure', 'Verification', 'Prerequisites'].includes((_c = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _c === void 0 ? void 0 : _c.trim());
-                    if (isKnownSection) {
-                        switch (sectionTitleText) {
-                            case 'Procedure':
-                                procedure = (_d = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _d === void 0 ? void 0 : _d.outerHTML.trim();
-                                break;
-                            case 'Verification':
-                                verification = (_e = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _e === void 0 ? void 0 : _e.outerHTML.trim();
-                                break;
-                            case 'Prerequisites':
-                                prerequisites = (_f = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _f === void 0 ? void 0 : _f.outerHTML.trim();
-                                break;
-                        }
-                    }
-                    else if (!procedure) {
-                        // Otherwise if it comes before a procedure it's part of the description
-                        description = description + (child === null || child === void 0 ? void 0 : child.outerHTML.trim());
-                    }
-                }
-            }
-            success = (_g = taskDOM.querySelector('.qs-summary.success')) === null || _g === void 0 ? void 0 : _g.innerHTML.trim();
-            reviewFailed = (_h = taskDOM.querySelector('.qs-review.failed')) === null || _h === void 0 ? void 0 : _h.innerHTML.trim();
-            summaryFailed = (_j = taskDOM.querySelector('.qs-summary.failed')) === null || _j === void 0 ? void 0 : _j.innerHTML.trim();
-        }
-        answer.title = replaceEnvironmentVariables(answer.title || title);
-        answer.description = replaceEnvironmentVariables(answer.description || `${description} ${prerequisites || ''} ${procedure}`);
-        answer.review = answer.review || {};
-        answer.review.instructions = replaceEnvironmentVariables(((_k = answer.review) === null || _k === void 0 ? void 0 : _k.instructions) || verification || 'Have you completed these steps?');
-        answer.review.failedTaskHelp = replaceEnvironmentVariables(answer.review.failedTaskHelp ||
-            reviewFailed ||
-            'This task isn’t verified yet. Try the task again.');
-        answer.summary = answer.summary || {};
-        answer.summary.success = replaceEnvironmentVariables(answer.summary.success || success || 'You have completed this task!');
-        answer.summary.failed = replaceEnvironmentVariables(answer.summary.failed || summaryFailed || 'Try the steps again.');
-        return answer;
-    });
-    return quickStart;
+                    And the below code extracts the <ol> or <ul>
+                    Except for when there is no <div class="title|heading"/>, then the description is extracted
+                    in the else if below
+                    */
+                    const child = sectionBody.children.item(i);
+                    // find the title
+                    const sectionTitle = child === null || child === void 0 ? void 0 : child.querySelector('.heading,.title');
+                    // should this section be assigned to a specific section
+                    const sectionTitleText = (_b = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _b === void 0 ? void 0 : _b.trim();
+                    const isKnownSection = ['Procedure', 'Verification', 'Prerequisites'].includes((_c = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _c === void 0 ? void 0 : _c.trim());
+                    if (isKnownSection) {
+                        switch (sectionTitleText) {
+                            case 'Procedure':
+                                procedure = (_d = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _d === void 0 ? void 0 : _d.outerHTML.trim();
+                                break;
+                            case 'Verification':
+                                verification = (_e = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _e === void 0 ? void 0 : _e.outerHTML.trim();
+                                break;
+                            case 'Prerequisites':
+                                prerequisites = (_f = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _f === void 0 ? void 0 : _f.outerHTML.trim();
+                                break;
+                        }
+                    }
+                    else if (!procedure) {
+                        // Otherwise if it comes before a procedure it's part of the description
+                        description = description + (child === null || child === void 0 ? void 0 : child.outerHTML.trim());
+                    }
+                }
+            }
+            success = (_g = taskDOM.querySelector('.qs-summary.success')) === null || _g === void 0 ? void 0 : _g.innerHTML.trim();
+            reviewFailed = (_h = taskDOM.querySelector('.qs-review.failed')) === null || _h === void 0 ? void 0 : _h.innerHTML.trim();
+            summaryFailed = (_j = taskDOM.querySelector('.qs-summary.failed')) === null || _j === void 0 ? void 0 : _j.innerHTML.trim();
+        }
+        answer.title = replaceEnvironmentVariables(answer.title || title);
+        answer.description = replaceEnvironmentVariables(answer.description || `${description} ${prerequisites || ''} ${procedure}`);
+        answer.review = answer.review || {};
+        answer.review.instructions = replaceEnvironmentVariables(((_k = answer.review) === null || _k === void 0 ? void 0 : _k.instructions) || verification || 'Have you completed these steps?');
+        answer.review.failedTaskHelp = replaceEnvironmentVariables(answer.review.failedTaskHelp ||
+            reviewFailed ||
+            'This task isn’t verified yet. Try the task again.');
+        answer.summary = answer.summary || {};
+        answer.summary.success = replaceEnvironmentVariables(answer.summary.success || success || 'You have completed this task!');
+        answer.summary.failed = replaceEnvironmentVariables(answer.summary.failed || summaryFailed || 'Try the steps again.');
+        return answer;
+    });
+    return quickStart;
 };
 
 export { Box, CamelCaseWrap, EmptyBox, HELP_TOPIC_NAME_KEY, HelpTopicContainer, HelpTopicContext, HelpTopicContextDefaults, HelpTopicDrawer, Loading, LoadingBox, ProcQuickStartParser, 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 };