@patternfly/quickstarts 6.3.0-prerelease.5 → 6.3.0-prerelease.7

package/dist/quickstarts-base.css

@@ -163,6 +163,10 @@
   border: var(--pf-v6-c-card--BorderColor) var(--pf-v6-c-card--BorderStyle) var(--pf-v6-c-card--BorderWidth);
 }
 
+.pfext-quick-start-footer {
+  padding-top: var(--pf-t--global--spacer--md);
+}
+
 .pfext-quick-start-task {
   flex: 1 1 0;
   overflow: auto;
@@ -174,10 +178,6 @@
   height: initial;
 }
 
-.pfext-quick-start-footer {
-  padding-top: var(--pf-t--global--spacer--md);
-}
-
 .pfext-quick-start-task-header button.pf-v6-c-wizard__nav-link {
   margin-bottom: var(--pf-t--global--spacer--md);
 }

package/dist/quickstarts-full.es.js

@@ -30007,6 +30007,203 @@ marked.parseInline;
 _Parser.parse;
 _Lexer.lex;
 
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const DOMPurify$2 = require('dompurify');
+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: 'custom', customIcon: jsxRuntime.jsx(LightbulbIcon, {}) },
+    [AdmonitionType.IMPORTANT]: { variant: 'danger' },
+    [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: jsxRuntime.jsx(FireIcon, {}) },
+    [AdmonitionType.WARNING]: { variant: 'warning' },
+};
+const useAdmonitionShowdownExtension = () => 
+// const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+useMemo(() => ({
+    type: 'lang',
+    regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,
+    replace: (text, content, admonitionLabel, admonitionType) => {
+        if (!content || !admonitionLabel || !admonitionType) {
+            return text;
+        }
+        if (admonitionLabel !== 'admonition') {
+            return text;
+        }
+        admonitionType = admonitionType.toUpperCase();
+        // Process markdown content directly using marked
+        const processedContent = marked.parseInline(content);
+        const sanitizedContent = DOMPurify$2.sanitize(processedContent);
+        // Handle unknown admonition types by defaulting to NOTE
+        const admonitionConfig = admonitionToAlertVariantMap[admonitionType] || admonitionToAlertVariantMap.NOTE;
+        const { variant, customIcon } = admonitionConfig;
+        const pfAlert = (jsxRuntime.jsx(Alert, Object.assign({ variant: variant }, (customIcon && { customIcon }), { isInline: true, title: admonitionType, className: "pfext-markdown-admonition" }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: sanitizedContent } }) })));
+        return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));
+    },
+}), []);
+
+const useCodeShowdownExtension = () => useMemo(() => ({
+    type: 'output',
+    regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
+    replace: (text, content) => {
+        if (!content) {
+            return text;
+        }
+        const pfCodeBlock = jsxRuntime.jsx(CodeBlock, { children: content });
+        return removeTemplateWhitespace(renderToStaticMarkup(pfCodeBlock));
+    },
+}), []);
+
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const DOMPurify$1 = require('dompurify');
+const useAccordionShowdownExtension = () => useMemo(() => ({
+    type: 'lang',
+    regex: /\[(.+)]{{(accordion) (&quot;(.*?)&quot;)}}/g,
+    replace: (_text, accordionContent, _command, _quotedHeading, accordionHeading) => {
+        const accordionId = String(accordionHeading).replace(/\s/g, '-');
+        // Process accordion content with markdown
+        const processedContent = marked.parseInline(accordionContent);
+        const sanitizedContent = DOMPurify$1.sanitize(processedContent);
+        return removeTemplateWhitespace(renderToStaticMarkup(jsxRuntime.jsx(Accordion, { children: jsxRuntime.jsxs(AccordionItem, { children: [jsxRuntime.jsx(AccordionToggle, Object.assign({ id: `${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}` }, { children: accordionHeading })), jsxRuntime.jsx(AccordionContent, Object.assign({ id: `${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`, hidden: true }, { children: jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: sanitizedContent } }) }))] }) })));
+    },
+}), []);
+
+const AccordionShowdownHandler = ({ buttonElement, contentElement, }) => {
+    const [expanded, setExpanded] = useState(false);
+    const handleClick = () => {
+        const newExpanded = !expanded;
+        const expandedModifier = 'pf-m-expanded';
+        // Find the accordion item element (parent of the button)
+        const accordionItem = buttonElement.closest('.pf-v6-c-accordion__item');
+        // Update button - both visual state and aria-expanded
+        buttonElement.className = `pf-v6-c-accordion__toggle ${newExpanded ? expandedModifier : ''}`;
+        buttonElement.setAttribute('aria-expanded', newExpanded.toString());
+        // Update content - both visual state and hidden attribute
+        contentElement.hidden = !newExpanded;
+        contentElement.className = `pf-v6-c-accordion__expandable-content ${newExpanded ? expandedModifier : ''}`;
+        // Update accordion item
+        if (accordionItem) {
+            accordionItem.className = `pf-v6-c-accordion__item ${newExpanded ? expandedModifier : ''}`;
+        }
+        setExpanded(newExpanded);
+    };
+    useEventListener(buttonElement, 'click', handleClick);
+    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+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 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: 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 (jsxRuntime.jsx(AccordionShowdownHandler, { buttonElement: elm, contentElement: content }, elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1]));
+        }) })) : null;
+};
+
+const FallbackImg = ({ src, alt, className, fallback }) => {
+    const [isSrcValid, setIsSrcValid] = useState(true);
+    if (src && isSrcValid) {
+        return jsxRuntime.jsx("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
+    }
+    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
+};
+
+var syncAltIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.SyncAltIconConfig = {
+  name: 'SyncAltIcon',
+  height: 512,
+  width: 512,
+  svgPath: 'M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.SyncAltIcon = require$$0.createIcon(exports.SyncAltIconConfig);
+exports["default"] = exports.SyncAltIcon;
+});
+
+var SyncAltIcon = /*@__PURE__*/getDefaultExportFromCjs(syncAltIcon);
+
+const DASH = '-';
+
+const PopoverStatus = ({ hideHeader, children, isVisible = null, statusBody, title, onHide, onShow, }) => (jsxRuntime.jsx(Popover, Object.assign({ position: PopoverPosition.right, headerContent: hideHeader ? null : title, bodyContent: children, "aria-label": title, onHide: onHide, onShow: onShow, isVisible: isVisible }, { children: jsxRuntime.jsx(Button, Object.assign({ variant: "link", isInline: true }, { children: statusBody })) })));
+
+const StatusIconAndText = ({ icon, title, spin, iconOnly, noTooltip, className, }) => {
+    if (!title) {
+        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: DASH });
+    }
+    return (jsxRuntime.jsxs("span", Object.assign({ className: css('pfext-icon-and-text', className), title: iconOnly && !noTooltip ? title : undefined }, { children: [icon &&
+                cloneElement(icon, {
+                    className: css(spin && 'fa-spin', icon.props.className, !iconOnly && 'pfext-icon-and-text__icon pfext-icon-flex-child'),
+                }), !iconOnly && jsxRuntime.jsx(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 ? jsxRuntime.jsx(Icon, { title: title }) : jsxRuntime.jsx(Icon, {});
+    const statusBody = (jsxRuntime.jsx(StatusIconAndText, Object.assign({}, restProps, { noTooltip: noTooltip, title: title, iconOnly: iconOnly, icon: renderIcon })));
+    return Children.toArray(children).length ? (jsxRuntime.jsx(PopoverStatus, Object.assign({ title: popoverTitle || title }, restProps, { statusBody: statusBody }, { children: children }))) : (statusBody);
+};
+
+var checkCircleIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.CheckCircleIconConfig = {
+  name: 'CheckCircleIcon',
+  height: 512,
+  width: 512,
+  svgPath: 'M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.CheckCircleIcon = require$$0.createIcon(exports.CheckCircleIconConfig);
+exports["default"] = exports.CheckCircleIcon;
+});
+
+var CheckCircleIcon = /*@__PURE__*/getDefaultExportFromCjs(checkCircleIcon);
+
+var infoCircleIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.InfoCircleIconConfig = {
+  name: 'InfoCircleIcon',
+  height: 512,
+  width: 512,
+  svgPath: 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.InfoCircleIcon = require$$0.createIcon(exports.InfoCircleIconConfig);
+exports["default"] = exports.InfoCircleIcon;
+});
+
+var InfoCircleIcon = /*@__PURE__*/getDefaultExportFromCjs(infoCircleIcon);
+
+const GreenCheckCircleIcon = ({ className, title, size }) => (jsxRuntime.jsx(Icon, Object.assign({ size: size, status: "success" }, { children: jsxRuntime.jsx(CheckCircleIcon, { "data-test": "success-icon", className: className, title: title }) })));
+
+const SuccessStatus = (props) => (jsxRuntime.jsx(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 jsxRuntime.jsx(StatusIconAndText, Object.assign({}, statusProps, { icon: jsxRuntime.jsx(SyncAltIcon, {}) }));
+        case 'Complete':
+            return jsxRuntime.jsx(SuccessStatus, Object.assign({}, statusProps));
+        default:
+            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: status || DASH });
+    }
+};
+const StatusIcon = ({ status }) => jsxRuntime.jsx(Status, { status: status, iconOnly: true });
+
 // eslint-disable-next-line @typescript-eslint/no-require-imports
 const DOMPurify = require('dompurify');
 const markdownConvert = (markdown, extensions) => __awaiter(void 0, void 0, void 0, function* () {
@@ -30018,7 +30215,7 @@ const markdownConvert = (markdown, extensions) => __awaiter(void 0, void 0, void
             node.setAttribute('rel', 'noopener noreferrer');
             return node;
         }
-        // add PF content classes
+        // add PF content classes to standard elements (details blocks get handled separately)
         if (node.nodeType === 1) {
             const contentElements = [
                 'ul',
@@ -30069,13 +30266,82 @@ const markdownConvert = (markdown, extensions) => __awaiter(void 0, void 0, void
     const reversedMarkdown = reverseString(markdown);
     const reverseMarkdownWithSubstitutedCodeFences = reversedMarkdown.replace(/{{```((.|\n)*?)```/g, '{{@@@$1@@@');
     const markdownWithSubstitutedCodeFences = reverseString(reverseMarkdownWithSubstitutedCodeFences);
-    const parsedMarkdown = yield marked.parse(markdownWithSubstitutedCodeFences);
+    // Fix malformed HTML entities early in the process
+    let preprocessedMarkdown = markdownWithSubstitutedCodeFences;
+    preprocessedMarkdown = preprocessedMarkdown
+        .replace(/&nbsp([^;])/g, '&nbsp;$1')
+        .replace(/&amp;nbsp;/g, '&nbsp;');
+    preprocessedMarkdown = preprocessedMarkdown.replace(/&nbsp(?![;])/g, '&nbsp;');
+    // Process content in segments to ensure markdown parsing continues after HTML blocks
+    const htmlBlockRegex = /(<(?:details|div|section|article)[^>]*>[\s\S]*?<\/(?:details|div|section|article)>)/g;
+    let parsedMarkdown = '';
+    // Check if there are any HTML blocks
+    if (htmlBlockRegex.test(preprocessedMarkdown)) {
+        // Reset regex for actual processing
+        htmlBlockRegex.lastIndex = 0;
+        let lastIndex = 0;
+        let match;
+        while ((match = htmlBlockRegex.exec(preprocessedMarkdown)) !== null) {
+            // Process markdown before the HTML block
+            const markdownBefore = preprocessedMarkdown.slice(lastIndex, match.index).trim();
+            if (markdownBefore) {
+                const parsed = yield marked.parse(markdownBefore);
+                parsedMarkdown += parsed;
+            }
+            // Process the HTML block: parse markdown content inside while preserving HTML structure
+            let htmlBlock = match[1];
+            // Find and process markdown content inside HTML tags
+            const contentRegex = />(\s*[\s\S]*?)\s*</g;
+            const contentMatches = [];
+            let contentMatch;
+            while ((contentMatch = contentRegex.exec(htmlBlock)) !== null) {
+                const content = contentMatch[1];
+                // Only process content that has markdown formatting but no extension syntax
+                if (content.trim() &&
+                    !content.includes('{{') &&
+                    (content.includes('**') || content.includes('- ') || content.includes('\n'))) {
+                    // This looks like markdown content without extensions - parse it as block content
+                    const parsedContent = yield marked.parse(content.trim());
+                    // Remove wrapping <p> tags if they exist since we're inside HTML already
+                    const cleanedContent = parsedContent.replace(/^<p[^>]*>([\s\S]*)<\/p>[\s]*$/g, '$1');
+                    contentMatches.push({
+                        original: contentMatch[0],
+                        replacement: `>${cleanedContent}<`,
+                    });
+                }
+            }
+            // Apply the content replacements
+            contentMatches.forEach(({ original, replacement }) => {
+                htmlBlock = htmlBlock.replace(original, replacement);
+            });
+            // Apply extensions (like admonitions) to the processed HTML block
+            if (extensions) {
+                extensions.forEach(({ regex, replace }) => {
+                    if (regex) {
+                        htmlBlock = htmlBlock.replace(regex, replace);
+                    }
+                });
+            }
+            parsedMarkdown += htmlBlock;
+            lastIndex = htmlBlockRegex.lastIndex;
+        }
+        // Process any remaining markdown after the last HTML block
+        const markdownAfter = preprocessedMarkdown.slice(lastIndex).trim();
+        if (markdownAfter) {
+            const parsed = yield marked.parse(markdownAfter);
+            parsedMarkdown += parsed;
+        }
+    }
+    else {
+        // No HTML blocks found, process normally
+        parsedMarkdown = yield marked.parse(preprocessedMarkdown);
+    }
     // Swap the temporary tokens back to code fences before we run the extensions
     let md = parsedMarkdown.replace(/@@@/g, '```');
     if (extensions) {
         // Convert code spans back to md format before we run the custom extension regexes
         md = md.replace(/<code>(.*)<\/code>/g, '`$1`');
-        extensions.forEach(({ regex, replace }) => {
+        extensions.forEach(({ regex, replace }, _index) => {
             if (regex) {
                 md = md.replace(regex, replace);
             }
@@ -30140,7 +30406,7 @@ const RenderExtension = ({ renderExtension, selector, markup, docContext, }) =>
 };
 const InlineMarkdownView = ({ markup, isEmpty, renderExtension, className, }) => {
     const id = useMemo(() => uniqueId('markdown'), []);
-    return (jsxRuntime.jsxs("div", Object.assign({ className: css({ 'is-empty': isEmpty }, className), id: id }, { children: [jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: markup } }), renderExtension && (jsxRuntime.jsx(RenderExtension, { renderExtension: renderExtension, selector: `#${id}`, markup: markup }))] })));
+    return (jsxRuntime.jsxs("div", Object.assign({ className: css({ 'is-empty': isEmpty }, className), id: id }, { children: [jsxRuntime.jsx("div", { style: { marginBlockEnd: 'var(--pf-t-global--spacer--md)' }, dangerouslySetInnerHTML: { __html: markup } }), renderExtension && (jsxRuntime.jsx(RenderExtension, { renderExtension: renderExtension, selector: `#${id}`, markup: markup }))] })));
 };
 const IFrameMarkdownView = ({ exactHeight, markup, isEmpty, renderExtension, className, }) => {
     const [frame, setFrame] = useState();
@@ -30199,7 +30465,7 @@ const IFrameMarkdownView = ({ exactHeight, markup, isEmpty, renderExtension, cla
   }
   </style>
   <body class="pf-m-redhat-font"><div style="overflow-y: auto;">${markup}</div></body>`;
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("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) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("iframe", { title: "Markdown content preview", 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 && (jsxRuntime.jsx(RenderExtension, { markup: markup, selector: '', renderExtension: renderExtension, docContext: frame.contentDocument }))] }));
 };
@@ -30247,179 +30513,6 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
                     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: 'custom', customIcon: jsxRuntime.jsx(LightbulbIcon, {}) },
-    [AdmonitionType.IMPORTANT]: { variant: 'danger' },
-    [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: jsxRuntime.jsx(FireIcon, {}) },
-    [AdmonitionType.WARNING]: { variant: 'warning' },
-};
-const useAdmonitionShowdownExtension = () => 
-// const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-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 mdContent = jsxRuntime.jsx(QuickStartMarkdownView, { content: content });
-        const pfAlert = (jsxRuntime.jsx(Alert, Object.assign({ variant: variant }, (customIcon && { customIcon }), { isInline: true, title: admonitionType, className: "pfext-markdown-admonition" }, { children: mdContent })));
-        return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));
-    },
-}), []);
-
-const useCodeShowdownExtension = () => useMemo(() => ({
-    type: 'output',
-    regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
-    replace: (text, content) => {
-        if (!content) {
-            return text;
-        }
-        const pfCodeBlock = jsxRuntime.jsx(CodeBlock, { children: content });
-        return removeTemplateWhitespace(renderToStaticMarkup(pfCodeBlock));
-    },
-}), []);
-
-const useAccordionShowdownExtension = () => useMemo(() => ({
-    type: 'lang',
-    regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
-    replace: (_text, accordionContent, _command, accordionHeading) => {
-        const accordionId = String(accordionHeading).replace(/\s/g, '-');
-        return removeTemplateWhitespace(renderToStaticMarkup(jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsx(Accordion, Object.assign({ asDefinitionList: true }, { children: jsxRuntime.jsxs(AccordionItem, Object.assign({ isExpanded: false }, { children: [jsxRuntime.jsx(AccordionToggle, Object.assign({ id: `${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}` }, { children: accordionHeading })), jsxRuntime.jsx(AccordionContent, Object.assign({ id: `${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}` }, { children: accordionContent }))] })) })) })));
-    },
-}), []);
-
-const AccordionShowdownHandler = ({ buttonElement, contentElement, }) => {
-    const [expanded, setExpanded] = useState(false);
-    const handleClick = () => {
-        const expandedModifier = 'pf-m-expanded';
-        buttonElement.className = `pf-v6-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
-        contentElement.hidden = expanded;
-        contentElement.className = `pf-v6-c-accordion__expanded-content ${!expanded ? expandedModifier : ''}`;
-        setExpanded(!expanded);
-    };
-    useEventListener(buttonElement, 'click', handleClick);
-    return jsxRuntime.jsx(jsxRuntime.Fragment, {});
-};
-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 ? (jsxRuntime.jsx(jsxRuntime.Fragment, { children: 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 (jsxRuntime.jsx(AccordionShowdownHandler, { buttonElement: elm, contentElement: content }, elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1]));
-        }) })) : null;
-};
-
-const FallbackImg = ({ src, alt, className, fallback }) => {
-    const [isSrcValid, setIsSrcValid] = useState(true);
-    if (src && isSrcValid) {
-        return jsxRuntime.jsx("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
-    }
-    return jsxRuntime.jsx(jsxRuntime.Fragment, { children: fallback });
-};
-
-var syncAltIcon = createCommonjsModule(function (module, exports) {
-exports.__esModule = true;
-exports.SyncAltIconConfig = {
-  name: 'SyncAltIcon',
-  height: 512,
-  width: 512,
-  svgPath: 'M370.72 133.28C339.458 104.008 298.888 87.962 255.848 88c-77.458.068-144.328 53.178-162.791 126.85-1.344 5.363-6.122 9.15-11.651 9.15H24.103c-7.498 0-13.194-6.807-11.807-14.176C33.933 94.924 134.813 8 256 8c66.448 0 126.791 26.136 171.315 68.685L463.03 40.97C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.749zM32 296h134.059c21.382 0 32.09 25.851 16.971 40.971l-41.75 41.75c31.262 29.273 71.835 45.319 114.876 45.28 77.418-.07 144.315-53.144 162.787-126.849 1.344-5.363 6.122-9.15 11.651-9.15h57.304c7.498 0 13.194 6.807 11.807 14.176C478.067 417.076 377.187 504 256 504c-66.448 0-126.791-26.136-171.315-68.685L48.97 471.03C33.851 486.149 8 475.441 8 454.059V320c0-13.255 10.745-24 24-24z',
-  yOffset: 0,
-  xOffset: 0,
-};
-exports.SyncAltIcon = require$$0.createIcon(exports.SyncAltIconConfig);
-exports["default"] = exports.SyncAltIcon;
-});
-
-var SyncAltIcon = /*@__PURE__*/getDefaultExportFromCjs(syncAltIcon);
-
-const DASH = '-';
-
-const PopoverStatus = ({ hideHeader, children, isVisible = null, statusBody, title, onHide, onShow, }) => (jsxRuntime.jsx(Popover, Object.assign({ position: PopoverPosition.right, headerContent: hideHeader ? null : title, bodyContent: children, "aria-label": title, onHide: onHide, onShow: onShow, isVisible: isVisible }, { children: jsxRuntime.jsx(Button, Object.assign({ variant: "link", isInline: true }, { children: statusBody })) })));
-
-const StatusIconAndText = ({ icon, title, spin, iconOnly, noTooltip, className, }) => {
-    if (!title) {
-        return jsxRuntime.jsx(jsxRuntime.Fragment, { children: DASH });
-    }
-    return (jsxRuntime.jsxs("span", Object.assign({ className: css('pfext-icon-and-text', className), title: iconOnly && !noTooltip ? title : undefined }, { children: [icon &&
-                cloneElement(icon, {
-                    className: css(spin && 'fa-spin', icon.props.className, !iconOnly && 'pfext-icon-and-text__icon pfext-icon-flex-child'),
-                }), !iconOnly && jsxRuntime.jsx(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 ? jsxRuntime.jsx(Icon, { title: title }) : jsxRuntime.jsx(Icon, {});
-    const statusBody = (jsxRuntime.jsx(StatusIconAndText, Object.assign({}, restProps, { noTooltip: noTooltip, title: title, iconOnly: iconOnly, icon: renderIcon })));
-    return Children.toArray(children).length ? (jsxRuntime.jsx(PopoverStatus, Object.assign({ title: popoverTitle || title }, restProps, { statusBody: statusBody }, { children: children }))) : (statusBody);
-};
-
-var checkCircleIcon = createCommonjsModule(function (module, exports) {
-exports.__esModule = true;
-exports.CheckCircleIconConfig = {
-  name: 'CheckCircleIcon',
-  height: 512,
-  width: 512,
-  svgPath: 'M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z',
-  yOffset: 0,
-  xOffset: 0,
-};
-exports.CheckCircleIcon = require$$0.createIcon(exports.CheckCircleIconConfig);
-exports["default"] = exports.CheckCircleIcon;
-});
-
-var CheckCircleIcon = /*@__PURE__*/getDefaultExportFromCjs(checkCircleIcon);
-
-var infoCircleIcon = createCommonjsModule(function (module, exports) {
-exports.__esModule = true;
-exports.InfoCircleIconConfig = {
-  name: 'InfoCircleIcon',
-  height: 512,
-  width: 512,
-  svgPath: 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z',
-  yOffset: 0,
-  xOffset: 0,
-};
-exports.InfoCircleIcon = require$$0.createIcon(exports.InfoCircleIconConfig);
-exports["default"] = exports.InfoCircleIcon;
-});
-
-var InfoCircleIcon = /*@__PURE__*/getDefaultExportFromCjs(infoCircleIcon);
-
-const GreenCheckCircleIcon = ({ className, title, size }) => (jsxRuntime.jsx(Icon, Object.assign({ size: size, status: "success" }, { children: jsxRuntime.jsx(CheckCircleIcon, { "data-test": "success-icon", className: className, title: title }) })));
-
-const SuccessStatus = (props) => (jsxRuntime.jsx(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 jsxRuntime.jsx(StatusIconAndText, Object.assign({}, statusProps, { icon: jsxRuntime.jsx(SyncAltIcon, {}) }));
-        case 'Complete':
-            return jsxRuntime.jsx(SuccessStatus, Object.assign({}, statusProps));
-        default:
-            return jsxRuntime.jsx(jsxRuntime.Fragment, { children: status || DASH });
-    }
-};
-const StatusIcon = ({ status }) => jsxRuntime.jsx(Status, { status: status, iconOnly: true });
-
 const QuickStartTileDescription = ({ description, prerequisites, }) => {
     const { getResource } = useContext(QuickStartContext);
     const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
@@ -30570,7 +30663,7 @@ const QuickStartCatalogFilterSelect = (_a) => {
 };
 const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
     const { getResource } = useContext(QuickStartContext);
-    return (jsxRuntime.jsx(ToolbarItem, Object.assign({ align: { default: 'alignEnd' } }, { children: getResource('{{count, number}} item', quickStartsCount).replace('{{count, number}}', quickStartsCount) })));
+    return (jsxRuntime.jsx(ToolbarItem, Object.assign({ align: { default: 'alignEnd' } }, { children: getResource('{{count, number}} item', quickStartsCount) })));
 };
 const QuickStartCatalogFilterSearchWrapper = ({ onSearchInputChange = () => { } }) => {
     const { useQueryParams, filter, setFilter } = useContext(QuickStartContext);
@@ -30800,7 +30893,7 @@ const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequi
     const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
     const [isPrereqsExpanded, setIsPrereqsExpanded] = useState(false);
     const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (jsxRuntime.jsx(ExpandableSection, Object.assign({ toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded) }, { children: jsxRuntime.jsx(List, { children: prereqs.map((pr) => (jsxRuntime.jsx(ListItem, { children: jsxRuntime.jsx(QuickStartMarkdownView, { content: pr }) }, pr))) }) })));
-    return (jsxRuntime.jsxs(Stack, Object.assign({ hasGutter: true }, { children: [jsxRuntime.jsx(QuickStartMarkdownView, { content: introduction }), prereqList, jsxRuntime.jsxs("p", { children: [getResource('In this quick start, you will complete {{count, number}} task', tasks === null || tasks === void 0 ? void 0 : tasks.length).replace('{{count, number}}', (tasks === null || tasks === void 0 ? void 0 : tasks.length) || 0), ":"] }), jsxRuntime.jsx(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect })] })));
+    return (jsxRuntime.jsxs(Stack, Object.assign({ hasGutter: true }, { children: [jsxRuntime.jsx(QuickStartMarkdownView, { content: introduction }), prereqList, jsxRuntime.jsxs("p", { children: [getResource('In this quick start, you will complete {{count, number}} task', (tasks === null || tasks === void 0 ? void 0 : tasks.length) || 0).replace('{{count, number}}', (tasks === null || tasks === void 0 ? void 0 : tasks.length) || 0), ":"] }), jsxRuntime.jsx(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect })] })));
 };
 
 const getAlertVariant = (status) => {
@@ -30973,7 +31066,7 @@ const QuickStartPanelContent = (_a) => {
 const QuickStartDrawerContent = (_a) => {
     var { quickStarts = [], appendTo, fullWidth, handleDrawerClose } = _a, props = __rest(_a, ["quickStarts", "appendTo", "fullWidth", "handleDrawerClose"]);
     const { activeQuickStartID, allQuickStarts = [], activeQuickStartState, } = useContext(QuickStartContext);
-    const combinedQuickStarts = allQuickStarts.concat(quickStarts);
+    const combinedQuickStarts = [...allQuickStarts, ...quickStarts].filter((qs, idx, arr) => arr.findIndex((q) => q.metadata.name === qs.metadata.name) === idx);
     const handleClose = () => {
         handleDrawerClose && handleDrawerClose(activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.status);
     };