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

package/dist/index.js

@@ -96,66 +96,66 @@ m.Pop;a=b();var q=a[0],l=a[1],c=B(),e=B();null==q&&(q=0,f.replaceState(_extends(
 y(_extends({pathname:"/",search:"",hash:"",state:null,key:D()},"string"===typeof a?F(a):a));"production"!==process.env.NODE_ENV?z("/"===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(),l=B();return {get index(){return f},get action(){return p},get location(){return n},createHref:function(a){return "string"===typeof a?
 a:E(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)}}}
 
-exports.QuickStartStatus = void 0;
-(function (QuickStartStatus) {
-    QuickStartStatus["COMPLETE"] = "Complete";
-    QuickStartStatus["IN_PROGRESS"] = "In Progress";
-    QuickStartStatus["NOT_STARTED"] = "Not started";
-})(exports.QuickStartStatus || (exports.QuickStartStatus = {}));
-exports.QuickStartTaskStatus = void 0;
-(function (QuickStartTaskStatus) {
-    QuickStartTaskStatus["INIT"] = "Initial";
-    QuickStartTaskStatus["VISITED"] = "Visited";
-    QuickStartTaskStatus["REVIEW"] = "Review";
-    QuickStartTaskStatus["SUCCESS"] = "Success";
-    QuickStartTaskStatus["FAILED"] = "Failed";
+exports.QuickStartStatus = void 0;
+(function (QuickStartStatus) {
+    QuickStartStatus["COMPLETE"] = "Complete";
+    QuickStartStatus["IN_PROGRESS"] = "In Progress";
+    QuickStartStatus["NOT_STARTED"] = "Not started";
+})(exports.QuickStartStatus || (exports.QuickStartStatus = {}));
+exports.QuickStartTaskStatus = void 0;
+(function (QuickStartTaskStatus) {
+    QuickStartTaskStatus["INIT"] = "Initial";
+    QuickStartTaskStatus["VISITED"] = "Visited";
+    QuickStartTaskStatus["REVIEW"] = "Review";
+    QuickStartTaskStatus["SUCCESS"] = "Success";
+    QuickStartTaskStatus["FAILED"] = "Failed";
 })(exports.QuickStartTaskStatus || (exports.QuickStartTaskStatus = {}));
 
-const QUICKSTART_SEARCH_FILTER_KEY = 'keyword';
-const QUICKSTART_STATUS_FILTER_KEY = 'status';
-const QUICKSTART_ID_FILTER_KEY = 'quickstart';
-const QUICKSTART_TASKS_INITIAL_STATES = [
-    exports.QuickStartTaskStatus.INIT,
-    exports.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 = [
+    exports.QuickStartTaskStatus.INIT,
+    exports.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";
@@ -219,672 +219,672 @@ 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 : exports.QuickStartStatus.NOT_STARTED; };
-const getTaskStatusKey = (taskNumber) => `taskStatus${taskNumber}`;
-const getQuickStartStatusCount = (allQuickStartStates, quickStarts) => quickStarts.reduce((totals, item) => {
-    totals[getQuickStartStatus(allQuickStartStates, item.metadata.name)]++;
-    return totals;
-}, {
-    [exports.QuickStartStatus.IN_PROGRESS]: 0,
-    [exports.QuickStartStatus.COMPLETE]: 0,
-    [exports.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 : exports.QuickStartStatus.NOT_STARTED; };
+const getTaskStatusKey = (taskNumber) => `taskStatus${taskNumber}`;
+const getQuickStartStatusCount = (allQuickStartStates, quickStarts) => quickStarts.reduce((totals, item) => {
+    totals[getQuickStartStatus(allQuickStartStates, item.metadata.name)]++;
+    return totals;
+}, {
+    [exports.QuickStartStatus.IN_PROGRESS]: 0,
+    [exports.QuickStartStatus.COMPLETE]: 0,
+    [exports.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 || exports.QuickStartStatus.NOT_STARTED,
-        taskNumber: -1,
-    };
-    if (totalTasks) {
-        for (let i = 0; i < totalTasks; i++) {
-            defaultQuickStartState[getTaskStatusKey(i)] = exports.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 = React.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['default'].useState(combinedValue.allQuickStarts || []);
-    const [resourceBundle, setResourceBundle] = React__default['default'].useState(Object.assign(Object.assign({}, en), combinedValue.resourceBundle));
-    const [language, setLanguage] = React__default['default'].useState(combinedValue.language);
-    const changeResourceBundle = (bundle, lng) => {
-        lng && setLanguage(lng);
-        setResourceBundle(Object.assign(Object.assign({}, en), bundle));
-    };
-    const findResource = React.useCallback((resource, count) => getResource(resource, count !== undefined ? { count } : null, resourceBundle, language), [resourceBundle, language]);
-    const [loading, setLoading] = React__default['default'].useState(combinedValue.loading);
-    const [alwaysShowTaskReview, setAlwaysShowTaskReview] = React__default['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['default'].useState({
-        [exports.QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[exports.QuickStartStatus.COMPLETE]),
-        [exports.QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[exports.QuickStartStatus.IN_PROGRESS]),
-        [exports.QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[exports.QuickStartStatus.NOT_STARTED]),
-    });
-    const [statusFilters, setStatusFilters] = React__default['default'].useState(initialStatusFilters);
-    const [filterKeyword, setFilterKeyword] = React__default['default'].useState(initialSearchQuery);
-    const setFilter = (type, val) => {
-        if (type === 'keyword') {
-            setFilterKeyword(val);
-        }
-        else if (type === 'status') {
-            setStatusFilters(val);
-        }
-    };
-    React__default['default'].useEffect(() => {
-        const updatedQuickStartStatusCount = getQuickStartStatusCount(allQuickStartStates, quickStarts);
-        setStatusTypes({
-            [exports.QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[exports.QuickStartStatus.COMPLETE]),
-            [exports.QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[exports.QuickStartStatus.IN_PROGRESS]),
-            [exports.QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[exports.QuickStartStatus.NOT_STARTED]),
-        });
-    }, [allQuickStartStates, findResource, quickStarts]);
-    const updateAllQuickStarts = (qs) => {
-        setQuickStarts(qs);
-    };
-    const setActiveQuickStart = React.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 = React.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: exports.QuickStartStatus.IN_PROGRESS }) });
-            }
-            return Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, exports.QuickStartStatus.IN_PROGRESS) });
-        });
-    }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
-    const restartQuickStart = React.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, exports.QuickStartStatus.NOT_STARTED) })));
-    }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
-    // When alwaysShowTaskReview preference is enabled, skip visited step and go directly to review
-    const stepAfterInitial = alwaysShowTaskReview
-        ? exports.QuickStartTaskStatus.REVIEW
-        : exports.QuickStartTaskStatus.VISITED;
-    const nextStep = React.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 === exports.QuickStartStatus.NOT_STARTED) {
-                updatedStatus = exports.QuickStartStatus.IN_PROGRESS;
-            }
-            else if (status === exports.QuickStartStatus.IN_PROGRESS &&
-                !QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) &&
-                taskNumber === totalTasks - 1) {
-                updatedStatus = exports.QuickStartStatus.COMPLETE;
-            }
-            if (taskStatus === exports.QuickStartTaskStatus.VISITED) {
-                updatedTaskStatus = exports.QuickStartTaskStatus.REVIEW;
-            }
-            if (taskNumber < totalTasks && !updatedTaskStatus) {
-                updatedTaskNumber = taskNumber + 1;
-            }
-            const markInitialStepVisitedOrReview = updatedTaskNumber > -1 &&
-                quickStart[getTaskStatusKey(updatedTaskNumber)] === exports.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 = React.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 = React.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 === exports.QuickStartStatus.NOT_STARTED) {
-                updatedStatus = exports.QuickStartStatus.IN_PROGRESS;
-            }
-            let updatedTaskStatus = {};
-            for (let taskIndex = 0; taskIndex <= taskNumber; taskIndex++) {
-                const taskStatus = quickStart[getTaskStatusKey(taskIndex)];
-                const newTaskStatus = taskStatus === exports.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 = React.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 = React.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 || exports.QuickStartStatus.NOT_STARTED,
+        taskNumber: -1,
+    };
+    if (totalTasks) {
+        for (let i = 0; i < totalTasks; i++) {
+            defaultQuickStartState[getTaskStatusKey(i)] = exports.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 = React.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['default'].useState(combinedValue.allQuickStarts || []);
+    const [resourceBundle, setResourceBundle] = React__default['default'].useState(Object.assign(Object.assign({}, en), combinedValue.resourceBundle));
+    const [language, setLanguage] = React__default['default'].useState(combinedValue.language);
+    const changeResourceBundle = (bundle, lng) => {
+        lng && setLanguage(lng);
+        setResourceBundle(Object.assign(Object.assign({}, en), bundle));
+    };
+    const findResource = React.useCallback((resource, count) => getResource(resource, count !== undefined ? { count } : null, resourceBundle, language), [resourceBundle, language]);
+    const [loading, setLoading] = React__default['default'].useState(combinedValue.loading);
+    const [alwaysShowTaskReview, setAlwaysShowTaskReview] = React__default['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['default'].useState({
+        [exports.QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[exports.QuickStartStatus.COMPLETE]),
+        [exports.QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[exports.QuickStartStatus.IN_PROGRESS]),
+        [exports.QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[exports.QuickStartStatus.NOT_STARTED]),
+    });
+    const [statusFilters, setStatusFilters] = React__default['default'].useState(initialStatusFilters);
+    const [filterKeyword, setFilterKeyword] = React__default['default'].useState(initialSearchQuery);
+    const setFilter = (type, val) => {
+        if (type === 'keyword') {
+            setFilterKeyword(val);
+        }
+        else if (type === 'status') {
+            setStatusFilters(val);
+        }
+    };
+    React__default['default'].useEffect(() => {
+        const updatedQuickStartStatusCount = getQuickStartStatusCount(allQuickStartStates, quickStarts);
+        setStatusTypes({
+            [exports.QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[exports.QuickStartStatus.COMPLETE]),
+            [exports.QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[exports.QuickStartStatus.IN_PROGRESS]),
+            [exports.QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[exports.QuickStartStatus.NOT_STARTED]),
+        });
+    }, [allQuickStartStates, findResource, quickStarts]);
+    const updateAllQuickStarts = (qs) => {
+        setQuickStarts(qs);
+    };
+    const setActiveQuickStart = React.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 = React.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: exports.QuickStartStatus.IN_PROGRESS }) });
+            }
+            return Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, exports.QuickStartStatus.IN_PROGRESS) });
+        });
+    }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
+    const restartQuickStart = React.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, exports.QuickStartStatus.NOT_STARTED) })));
+    }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
+    // When alwaysShowTaskReview preference is enabled, skip visited step and go directly to review
+    const stepAfterInitial = alwaysShowTaskReview
+        ? exports.QuickStartTaskStatus.REVIEW
+        : exports.QuickStartTaskStatus.VISITED;
+    const nextStep = React.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 === exports.QuickStartStatus.NOT_STARTED) {
+                updatedStatus = exports.QuickStartStatus.IN_PROGRESS;
+            }
+            else if (status === exports.QuickStartStatus.IN_PROGRESS &&
+                !QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) &&
+                taskNumber === totalTasks - 1) {
+                updatedStatus = exports.QuickStartStatus.COMPLETE;
+            }
+            if (taskStatus === exports.QuickStartTaskStatus.VISITED) {
+                updatedTaskStatus = exports.QuickStartTaskStatus.REVIEW;
+            }
+            if (taskNumber < totalTasks && !updatedTaskStatus) {
+                updatedTaskNumber = taskNumber + 1;
+            }
+            const markInitialStepVisitedOrReview = updatedTaskNumber > -1 &&
+                quickStart[getTaskStatusKey(updatedTaskNumber)] === exports.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 = React.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 = React.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 === exports.QuickStartStatus.NOT_STARTED) {
+                updatedStatus = exports.QuickStartStatus.IN_PROGRESS;
+            }
+            let updatedTaskStatus = {};
+            for (let taskIndex = 0; taskIndex <= taskNumber; taskIndex++) {
+                const taskStatus = quickStart[getTaskStatusKey(taskIndex)];
+                const newTaskStatus = taskStatus === exports.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 = React.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 = React.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['default'].createElement(QuickStartContext.Provider, { value: useValuesForQuickStartContext(value) }, children));
 
-const Box = ({ children, className }) => (React__namespace.createElement("div", { className: reactStyles.css('pfext-status-box', className) }, children));
-const Loading = ({ className }) => (React__namespace.createElement("div", { className: reactStyles.css('pfext-m-loader', className) },
-    React__namespace.createElement("div", { className: "pfext-m-loader-dot__one" }),
-    React__namespace.createElement("div", { className: "pfext-m-loader-dot__two" }),
-    React__namespace.createElement("div", { className: "pfext-m-loader-dot__three" })));
-Loading.displayName = 'Loading';
-const LoadingBox = ({ className, message }) => (React__namespace.createElement(Box, { className: reactStyles.css('pfext-status-box--loading', className) },
-    React__namespace.createElement(Loading, null),
-    message && React__namespace.createElement("div", { className: "pfext-status-box__loading-message" }, message)));
-LoadingBox.displayName = 'LoadingBox';
-const EmptyBox = ({ label }) => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement(Box, null,
-        React__namespace.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__namespace.createElement("div", { className: reactStyles.css('pfext-status-box', className) }, children));
+const Loading = ({ className }) => (React__namespace.createElement("div", { className: reactStyles.css('pfext-m-loader', className) },
+    React__namespace.createElement("div", { className: "pfext-m-loader-dot__one" }),
+    React__namespace.createElement("div", { className: "pfext-m-loader-dot__two" }),
+    React__namespace.createElement("div", { className: "pfext-m-loader-dot__three" })));
+Loading.displayName = 'Loading';
+const LoadingBox = ({ className, message }) => (React__namespace.createElement(Box, { className: reactStyles.css('pfext-status-box--loading', className) },
+    React__namespace.createElement(Loading, null),
+    message && React__namespace.createElement("div", { className: "pfext-status-box__loading-message" }, message)));
+LoadingBox.displayName = 'LoadingBox';
+const EmptyBox = ({ label }) => {
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    return (React__namespace.createElement(Box, null,
+        React__namespace.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__namespace.createElement("span", { "data-test": dataTest }, words.map((word, i) => (React__namespace.createElement(React__namespace.Fragment, { key: i },
-        word,
-        i !== words.length - 1 && React__namespace.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__namespace.createElement("span", { "data-test": dataTest }, words.map((word, i) => (React__namespace.createElement(React__namespace.Fragment, { key: i },
+        word,
+        i !== words.length - 1 && React__namespace.createElement("wbr", null))))));
+    MEMO[value] = rendered;
+    return rendered;
 };
 
 class CatalogTile extends React__namespace.Component {
-    constructor() {
-        super(...arguments);
+    constructor(props) {
+        super(props);
         this.handleClick = (e) => {
             const { onClick, href } = this.props;
             if (!href) {
@@ -900,13 +900,18 @@ class CatalogTile extends React__namespace.Component {
             }
             return (React__namespace.createElement("div", { className: "catalog-tile-pf-badge-container" }, badges.map((badge, index) => (React__namespace.createElement("span", { key: `badge-${index}` }, badge)))));
         };
+        this.generatedId = reactCore.getUniqueId('pf-catalog-tile');
     }
     render() {
         const _a = this.props, { id, className, featured, onClick, href, icon, iconImg, iconAlt, iconClass, badges, title, vendor, description, footer, 
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         ref, children } = _a, props = tslib.__rest(_a, ["id", "className", "featured", "onClick", "href", "icon", "iconImg", "iconAlt", "iconClass", "badges", "title", "vendor", "description", "footer", "ref", "children"]);
-        return (React__namespace.createElement(reactCore.Card, Object.assign({ component: href ? 'a' : 'div', id: id, href: href || '#', className: reactStyles.css('catalog-tile-pf', { featured }, className), isClickable: !!onClick }, props),
-            (badges.length > 0 || iconImg || iconClass || icon || onClick) && (React__namespace.createElement(reactCore.CardHeader, { actions: { actions: badges.length > 0 && this.renderBadges(badges) }, selectableActions: onClick && { selectableActionId: id + '-input', onClickAction: (e) => this.handleClick(e), selectableActionAriaLabelledby: id } },
+        return (React__namespace.createElement(reactCore.Card, Object.assign({ component: href ? 'a' : 'div', id: id || this.generatedId, href: href || '#', className: reactStyles.css('catalog-tile-pf', { featured }, className), isClickable: !!onClick }, props),
+            (badges.length > 0 || iconImg || iconClass || icon || onClick) && (React__namespace.createElement(reactCore.CardHeader, { actions: { actions: badges.length > 0 && this.renderBadges(badges) }, selectableActions: onClick && {
+                    selectableActionId: id + '-input',
+                    onClickAction: (e) => this.handleClick(e),
+                    selectableActionAriaLabelledby: id
+                } },
                 iconImg && React__namespace.createElement("img", { className: "catalog-tile-pf-icon", src: iconImg, alt: iconAlt }),
                 !iconImg && (iconClass || icon) && React__namespace.createElement("span", { className: `catalog-tile-pf-icon ${iconClass}` }, icon))),
             React__namespace.createElement(reactCore.CardTitle, { className: "catalog-tile-pf-header" },
@@ -921,7 +926,7 @@ class CatalogTile extends React__namespace.Component {
 }
 CatalogTile.displayName = 'CatalogTile';
 CatalogTile.defaultProps = {
-    id: reactCore.getUniqueId('pf-catalog-tile'),
+    id: null,
     className: '',
     featured: false,
     onClick: null,
@@ -937,335 +942,335 @@ CatalogTile.defaultProps = {
     children: null
 };
 
-const Modal = (_a) => {
-    var { isFullScreen = false, className } = _a, props = tslib.__rest(_a, ["isFullScreen", "className"]);
-    return (React__namespace.createElement(reactCore.Modal, Object.assign({}, props, { className: reactStyles.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__namespace.useState();
-    reactCore.useIsomorphicLayoutEffect(() => {
-        setContainerNode(getContainer(container) || document.body);
-    }, [container]);
-    return containerNode ? ReactDOM__namespace.createPortal(children, containerNode) : null;
-};
-
-const SimplePopper = ({ children }) => {
-    const openProp = true;
-    const nodeRef = React__namespace.useRef();
-    const popperRef = React__namespace.useRef(null);
-    const [isOpen, setOpenState] = React__namespace.useState(openProp);
-    const setOpen = React__namespace.useCallback((newOpen) => {
-        setOpenState(newOpen);
-    }, []);
-    React__namespace.useEffect(() => {
-        setOpen(openProp);
-    }, [openProp, setOpen]);
-    const onKeyDown = React__namespace.useCallback((e) => {
-        if (e.keyCode === 27) {
-            setOpen(false);
-        }
-    }, [setOpen]);
-    const onClickOutside = React__namespace.useCallback((e) => {
-        if (!nodeRef.current || (e.target instanceof Node && !nodeRef.current.contains(e.target))) {
-            setOpen(false);
-        }
-    }, [setOpen]);
-    const destroy = React__namespace.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__namespace.useCallback(() => {
-        if (!nodeRef.current || !isOpen) {
-            return;
-        }
-        destroy();
-    }, [isOpen, destroy]);
-    const nodeRefCallback = React__namespace.useCallback((node) => {
-        nodeRef.current = node;
-        initialize();
-    }, [initialize]);
-    React__namespace.useEffect(() => {
-        initialize();
-    }, [initialize]);
-    React__namespace.useEffect(() => () => {
-        destroy();
-    }, [destroy]);
-    React__namespace.useEffect(() => {
-        if (!isOpen) {
-            destroy();
-        }
-    }, [destroy, isOpen]);
-    return isOpen ? (React__namespace.createElement(Portal, null,
-        React__namespace.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__namespace.useState(false);
-    React__namespace.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__namespace.createElement(Portal, null,
-        React__namespace.createElement(SimplePopper, null,
-            React__namespace.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";
+const Modal = (_a) => {
+    var { isFullScreen = false, className } = _a, props = tslib.__rest(_a, ["isFullScreen", "className"]);
+    return (React__namespace.createElement(reactCore.Modal, Object.assign({}, props, { className: reactStyles.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__namespace.useState();
+    reactCore.useIsomorphicLayoutEffect(() => {
+        setContainerNode(getContainer(container) || document.body);
+    }, [container]);
+    return containerNode ? ReactDOM__namespace.createPortal(children, containerNode) : null;
+};
+
+const SimplePopper = ({ children }) => {
+    const openProp = true;
+    const nodeRef = React__namespace.useRef();
+    const popperRef = React__namespace.useRef(null);
+    const [isOpen, setOpenState] = React__namespace.useState(openProp);
+    const setOpen = React__namespace.useCallback((newOpen) => {
+        setOpenState(newOpen);
+    }, []);
+    React__namespace.useEffect(() => {
+        setOpen(openProp);
+    }, [openProp, setOpen]);
+    const onKeyDown = React__namespace.useCallback((e) => {
+        if (e.keyCode === 27) {
+            setOpen(false);
+        }
+    }, [setOpen]);
+    const onClickOutside = React__namespace.useCallback((e) => {
+        if (!nodeRef.current || (e.target instanceof Node && !nodeRef.current.contains(e.target))) {
+            setOpen(false);
+        }
+    }, [setOpen]);
+    const destroy = React__namespace.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__namespace.useCallback(() => {
+        if (!nodeRef.current || !isOpen) {
+            return;
+        }
+        destroy();
+    }, [isOpen, destroy]);
+    const nodeRefCallback = React__namespace.useCallback((node) => {
+        nodeRef.current = node;
+        initialize();
+    }, [initialize]);
+    React__namespace.useEffect(() => {
+        initialize();
+    }, [initialize]);
+    React__namespace.useEffect(() => () => {
+        destroy();
+    }, [destroy]);
+    React__namespace.useEffect(() => {
+        if (!isOpen) {
+            destroy();
+        }
+    }, [destroy, isOpen]);
+    return isOpen ? (React__namespace.createElement(Portal, null,
+        React__namespace.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__namespace.useState(false);
+    React__namespace.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__namespace.createElement(Portal, null,
+        React__namespace.createElement(SimplePopper, null,
+            React__namespace.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";
 })(ScrollDirection || (ScrollDirection = {}));
 
-const useResizeObserver = (callback, targetElement, observerOptions = undefined) => {
-    const element = React__namespace.useMemo(() => targetElement !== null && targetElement !== void 0 ? targetElement : document.querySelector('body'), [targetElement]);
-    React__namespace.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__namespace.useState(Shadows.none);
-    const computeShadows = React__namespace.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__namespace.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__namespace.useState(() => targetElement ? targetElement.getBoundingClientRect() : null);
-    const observerCallback = React__namespace.useCallback(() => {
-        setClientRect(targetElement ? targetElement.getBoundingClientRect() : null);
-    }, [targetElement]);
-    useResizeObserver(observerCallback);
-    return clientRect;
-};
-
-/**
- * React hook that forces component render.
- */
+const useResizeObserver = (callback, targetElement, observerOptions = undefined) => {
+    const element = React__namespace.useMemo(() => targetElement !== null && targetElement !== void 0 ? targetElement : document.querySelector('body'), [targetElement]);
+    React__namespace.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__namespace.useState(Shadows.none);
+    const computeShadows = React__namespace.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__namespace.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__namespace.useState(() => targetElement ? targetElement.getBoundingClientRect() : null);
+    const observerCallback = React__namespace.useCallback(() => {
+        setClientRect(targetElement ? targetElement.getBoundingClientRect() : null);
+    }, [targetElement]);
+    useResizeObserver(observerCallback);
+    return clientRect;
+};
+
+/**
+ * React hook that forces component render.
+ */
 const useForceRender = () => React__namespace.useReducer((s) => !s, false)[1];
 
-const useEventListener = (target, event, callback) => {
-    React.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__namespace.createElement(Portal, null,
-        React__namespace.createElement("div", { className: "pf-v5-c-backdrop pfext-spotlight__with-backdrop" },
-            React__namespace.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__namespace.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__namespace.createElement(InteractiveSpotlight, { element: element })) : (React__namespace.createElement(StaticSpotlight, { element: element }));
-};
-
-const MarkdownHighlightExtension = ({ docContext, rootSelector, }) => {
-    const [selector, setSelector] = React__namespace.useState(null);
-    React__namespace.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__namespace.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__namespace.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 useEventListener = (target, event, callback) => {
+    React.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__namespace.createElement(Portal, null,
+        React__namespace.createElement("div", { className: "pf-v5-c-backdrop pfext-spotlight__with-backdrop" },
+            React__namespace.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__namespace.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__namespace.createElement(InteractiveSpotlight, { element: element })) : (React__namespace.createElement(StaticSpotlight, { element: element }));
+};
+
+const MarkdownHighlightExtension = ({ docContext, rootSelector, }) => {
+    const [selector, setSelector] = React__namespace.useState(null);
+    React__namespace.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__namespace.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__namespace.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 ACCORDION_MARKDOWN_CONTENT_ID = `accordion-markdown-content-id`;
 
-const CopyClipboard = ({ element, rootSelector, docContext, }) => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    const [showSuccessContent, setShowSuccessContent] = React__namespace.useState(false);
-    const textToCopy = React__namespace.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__namespace.useCallback(() => {
-        navigator.clipboard
-            .writeText(textToCopy.trim())
-            .then(() => {
-            setShowSuccessContent(true);
-        })
-            .catch(() => { });
-    }, [textToCopy]));
-    useEventListener(element, 'mouseleave', React__namespace.useCallback(() => {
-        setShowSuccessContent(false);
-    }, []));
-    return showSuccessContent ? (React__namespace.createElement(reactCore.Tooltip, { key: "after-copy", isVisible: true, triggerRef: () => element, content: getResource('Successfully copied to clipboard!'), className: "pfext-quick-start__base" })) : (React__namespace.createElement(reactCore.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__namespace.createElement(React__namespace.Fragment, null, Array.from(elements).map((elm) => {
-        const attributeValue = elm.getAttribute(MARKDOWN_COPY_BUTTON_ID);
-        return (React__namespace.createElement(CopyClipboard, { key: attributeValue, element: elm, rootSelector: rootSelector, docContext: docContext }));
-    }))) : null;
+const CopyClipboard = ({ element, rootSelector, docContext, }) => {
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    const [showSuccessContent, setShowSuccessContent] = React__namespace.useState(false);
+    const textToCopy = React__namespace.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__namespace.useCallback(() => {
+        navigator.clipboard
+            .writeText(textToCopy.trim())
+            .then(() => {
+            setShowSuccessContent(true);
+        })
+            .catch(() => { });
+    }, [textToCopy]));
+    useEventListener(element, 'mouseleave', React__namespace.useCallback(() => {
+        setShowSuccessContent(false);
+    }, []));
+    return showSuccessContent ? (React__namespace.createElement(reactCore.Tooltip, { key: "after-copy", isVisible: true, triggerRef: () => element, content: getResource('Successfully copied to clipboard!'), className: "pfext-quick-start__base" })) : (React__namespace.createElement(reactCore.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__namespace.createElement(React__namespace.Fragment, null, Array.from(elements).map((elm) => {
+        const attributeValue = elm.getAttribute(MARKDOWN_COPY_BUTTON_ID);
+        return (React__namespace.createElement(CopyClipboard, { key: attributeValue, element: elm, rootSelector: rootSelector, docContext: docContext }));
+    }))) : null;
 };
 
 const removeTemplateWhitespace = (template) => template.replace(/>(?:\s|\n)+</g, '><');
 
-const useInlineCopyClipboardShowdownExtension = () => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    return React__namespace.useMemo(() => ({
-        type: 'lang',
-        regex: /`([^`](.*?)[^`])`{{copy}}/g,
-        replace: (text, group, _, groupId) => {
-            if (!group || isNaN(groupId)) {
-                return text;
-            }
+const useInlineCopyClipboardShowdownExtension = () => {
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    return React__namespace.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">
@@ -1275,20 +1280,20 @@ const useInlineCopyClipboardShowdownExtension = () => {
                   </button>
                 </span>
               </span>
-            </span>`);
-        },
-    }), [getResource]);
-};
-
-const useMultilineCopyClipboardShowdownExtension = () => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    return React__namespace.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__namespace.useContext(QuickStartContext);
+    return React__namespace.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">
@@ -1305,138 +1310,138 @@ const useMultilineCopyClipboardShowdownExtension = () => {
                     ${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code>
                 </pre>
               </div>
-            </div>`;
-        },
-    }), [getResource]);
-};
-
-// 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__namespace.useContext(QuickStartContext);
-    const markup = React__namespace.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__namespace.createElement(InlineMarkdownView, Object.assign({}, innerProps)) : React__namespace.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__namespace.useRef(null);
-    const shouldRenderExtension = React__namespace.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__namespace.useEffect(() => {
-        if (renderExtension) {
-            forceRender();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [markup]);
-    return (React__namespace.createElement(React__namespace.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__namespace.useMemo(() => uniqueId('markdown'), []);
-    return (React__namespace.createElement("div", { className: reactStyles.css('pfext-markdown-view', { 'is-empty': isEmpty }, className), id: id },
-        React__namespace.createElement("div", { dangerouslySetInnerHTML: { __html: markup } }),
-        renderExtension && (React__namespace.createElement(RenderExtension, { renderExtension: renderExtension, selector: `#${id}`, markup: markup }))));
-};
-const IFrameMarkdownView = ({ exactHeight, markup, isEmpty, renderExtension, className, }) => {
-    const [frame, setFrame] = React__namespace.useState();
-    const [loaded, setLoaded] = React__namespace.useState(false);
-    const updateTimeoutHandle = React__namespace.useRef();
-    const updateDimensions = React__namespace.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__namespace.useEffect(() => () => {
-        clearTimeout(updateTimeoutHandle.current);
-    }, []);
-    const onLoad = React__namespace.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'));
+            </div>`;
+        },
+    }), [getResource]);
+};
+
+// 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__namespace.useContext(QuickStartContext);
+    const markup = React__namespace.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__namespace.createElement(InlineMarkdownView, Object.assign({}, innerProps)) : React__namespace.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__namespace.useRef(null);
+    const shouldRenderExtension = React__namespace.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__namespace.useEffect(() => {
+        if (renderExtension) {
+            forceRender();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [markup]);
+    return (React__namespace.createElement(React__namespace.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__namespace.useMemo(() => uniqueId('markdown'), []);
+    return (React__namespace.createElement("div", { className: reactStyles.css('pfext-markdown-view', { 'is-empty': isEmpty }, className), id: id },
+        React__namespace.createElement("div", { dangerouslySetInnerHTML: { __html: markup } }),
+        renderExtension && (React__namespace.createElement(RenderExtension, { renderExtension: renderExtension, selector: `#${id}`, markup: markup }))));
+};
+const IFrameMarkdownView = ({ exactHeight, markup, isEmpty, renderExtension, className, }) => {
+    const [frame, setFrame] = React__namespace.useState();
+    const [loaded, setLoaded] = React__namespace.useState(false);
+    const updateTimeoutHandle = React__namespace.useRef();
+    const updateDimensions = React__namespace.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__namespace.useEffect(() => () => {
+        clearTimeout(updateTimeoutHandle.current);
+    }, []);
+    const onLoad = React__namespace.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">
@@ -1461,1161 +1466,1161 @@ 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__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.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__namespace.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__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.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__namespace.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__namespace.useContext(QuickStartContext);
-    const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
-    const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
-    const admonitionShowdownExtension = useAdmonitionShowdownExtension();
-    const codeShowdownExtension = useCodeShowdownExtension();
-    const accordionShowdownExtension = useAccordionShowdownExtension();
-    return (React__namespace.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__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement(AccordionRenderExtension, { docContext: docContext }),
-            React__namespace.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
-            React__namespace.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__namespace.createElement(LightbulbIcon__default['default'], null) },
-    [AdmonitionType.IMPORTANT]: { variant: 'danger' },
-    [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: React__namespace.createElement(FireIcon__default['default'], null) },
-    [AdmonitionType.WARNING]: { variant: 'warning' },
-};
-const useAdmonitionShowdownExtension = () => 
-// const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-React__namespace.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__namespace.createElement(QuickStartMarkdownView, { content: content });
-        const pfAlert = (React__namespace.createElement(reactCore.Alert, { variant: variant, customIcon: customIcon && customIcon, isInline: true, title: admonitionType, className: "pfext-markdown-admonition", style: style }, mdContent));
-        return removeTemplateWhitespace(server.renderToStaticMarkup(pfAlert));
-    },
+const removeParagraphWrap = (markdown) => markdown.replace(/^<p>|<\/p>$/g, '');
+const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
+    const { markdown } = React__namespace.useContext(QuickStartContext);
+    const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
+    const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
+    const admonitionShowdownExtension = useAdmonitionShowdownExtension();
+    const codeShowdownExtension = useCodeShowdownExtension();
+    const accordionShowdownExtension = useAccordionShowdownExtension();
+    return (React__namespace.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__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(AccordionRenderExtension, { docContext: docContext }),
+            React__namespace.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
+            React__namespace.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__namespace.createElement(LightbulbIcon__default['default'], null) },
+    [AdmonitionType.IMPORTANT]: { variant: 'danger' },
+    [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: React__namespace.createElement(FireIcon__default['default'], null) },
+    [AdmonitionType.WARNING]: { variant: 'warning' },
+};
+const useAdmonitionShowdownExtension = () => 
+// const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+React__namespace.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__namespace.createElement(QuickStartMarkdownView, { content: content });
+        const pfAlert = (React__namespace.createElement(reactCore.Alert, { variant: variant, customIcon: customIcon && customIcon, isInline: true, title: admonitionType, className: "pfext-markdown-admonition", style: style }, mdContent));
+        return removeTemplateWhitespace(server.renderToStaticMarkup(pfAlert));
+    },
 }), []);
 
-const useCodeShowdownExtension = () => React__namespace.useMemo(() => ({
-    type: 'output',
-    regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
-    replace: (text, content) => {
-        if (!content) {
-            return text;
-        }
-        const pfCodeBlock = React__namespace.createElement(reactCore.CodeBlock, null, content);
-        return removeTemplateWhitespace(server.renderToStaticMarkup(pfCodeBlock));
-    },
+const useCodeShowdownExtension = () => React__namespace.useMemo(() => ({
+    type: 'output',
+    regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
+    replace: (text, content) => {
+        if (!content) {
+            return text;
+        }
+        const pfCodeBlock = React__namespace.createElement(reactCore.CodeBlock, null, content);
+        return removeTemplateWhitespace(server.renderToStaticMarkup(pfCodeBlock));
+    },
 }), []);
 
-const useAccordionShowdownExtension = () => React__namespace.useMemo(() => ({
-    type: 'lang',
-    regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
-    replace: (_text, accordionContent, _command, accordionHeading) => {
-        const accordionId = String(accordionHeading).replace(/\s/g, '-');
-        return removeTemplateWhitespace(server.renderToStaticMarkup(React__namespace.createElement(reactCore.Accordion, { asDefinitionList: true },
-            React__namespace.createElement(reactCore.AccordionItem, null,
-                React__namespace.createElement(reactCore.AccordionToggle, { isExpanded: false, id: `${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}` }, accordionHeading),
-                React__namespace.createElement(reactCore.AccordionContent, { id: `${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`, isHidden: !false }, accordionContent)))));
-    },
+const useAccordionShowdownExtension = () => React__namespace.useMemo(() => ({
+    type: 'lang',
+    regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
+    replace: (_text, accordionContent, _command, accordionHeading) => {
+        const accordionId = String(accordionHeading).replace(/\s/g, '-');
+        return removeTemplateWhitespace(server.renderToStaticMarkup(React__namespace.createElement(reactCore.Accordion, { asDefinitionList: true },
+            React__namespace.createElement(reactCore.AccordionItem, null,
+                React__namespace.createElement(reactCore.AccordionToggle, { isExpanded: false, id: `${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}` }, accordionHeading),
+                React__namespace.createElement(reactCore.AccordionContent, { id: `${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`, isHidden: !false }, accordionContent)))));
+    },
 }), []);
 
-const AccordionShowdownHandler = ({ buttonElement, contentElement, }) => {
-    const [expanded, setExpanded] = React__namespace.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__namespace.createElement(React__namespace.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__namespace.createElement(React__namespace.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__namespace.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__namespace.useState(true);
-    if (src && isSrcValid) {
-        return React__namespace.createElement("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
-    }
-    return React__namespace.createElement(React__namespace.Fragment, null, fallback);
+const AccordionShowdownHandler = ({ buttonElement, contentElement, }) => {
+    const [expanded, setExpanded] = React__namespace.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__namespace.createElement(React__namespace.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__namespace.createElement(React__namespace.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__namespace.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__namespace.useState(true);
+    if (src && isSrcValid) {
+        return React__namespace.createElement("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
+    }
+    return React__namespace.createElement(React__namespace.Fragment, null, fallback);
 };
 
 const DASH = '-';
 
-const PopoverStatus = ({ hideHeader, children, isVisible = null, statusBody, title, onHide, onShow, }) => (React__namespace.createElement(reactCore.Popover, { position: reactCore.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__namespace.createElement(reactCore.Popover, { position: reactCore.PopoverPosition.right, headerContent: hideHeader ? null : title, bodyContent: children, "aria-label": title, onHide: onHide, onShow: onShow, isVisible: isVisible },
     React__namespace.createElement(reactCore.Button, { variant: "link", isInline: true }, statusBody)));
 
-const StatusIconAndText = ({ icon, title, spin, iconOnly, noTooltip, className, }) => {
-    if (!title) {
-        return React__namespace.createElement(React__namespace.Fragment, null, DASH);
-    }
-    return (React__namespace.createElement("span", { className: reactStyles.css('pfext-icon-and-text', className), title: iconOnly && !noTooltip ? title : undefined },
-        icon &&
-            React__namespace.cloneElement(icon, {
-                className: reactStyles.css(spin && 'fa-spin', icon.props.className, !iconOnly && 'pfext-icon-and-text__icon pfext-icon-flex-child'),
-            }),
-        !iconOnly && React__namespace.createElement(CamelCaseWrap, { value: title, dataTest: "status-text" })));
+const StatusIconAndText = ({ icon, title, spin, iconOnly, noTooltip, className, }) => {
+    if (!title) {
+        return React__namespace.createElement(React__namespace.Fragment, null, DASH);
+    }
+    return (React__namespace.createElement("span", { className: reactStyles.css('pfext-icon-and-text', className), title: iconOnly && !noTooltip ? title : undefined },
+        icon &&
+            React__namespace.cloneElement(icon, {
+                className: reactStyles.css(spin && 'fa-spin', icon.props.className, !iconOnly && 'pfext-icon-and-text__icon pfext-icon-flex-child'),
+            }),
+        !iconOnly && React__namespace.createElement(CamelCaseWrap, { value: title, dataTest: "status-text" })));
 };
 
-const GenericStatus = (props) => {
-    const { Icon, children, popoverTitle, title, noTooltip, iconOnly } = props, restProps = tslib.__rest(props, ["Icon", "children", "popoverTitle", "title", "noTooltip", "iconOnly"]);
-    const renderIcon = iconOnly && !noTooltip ? React__namespace.createElement(Icon, { title: title }) : React__namespace.createElement(Icon, null);
-    const statusBody = (React__namespace.createElement(StatusIconAndText, Object.assign({}, restProps, { noTooltip: noTooltip, title: title, iconOnly: iconOnly, icon: renderIcon })));
-    return React__namespace.Children.toArray(children).length ? (React__namespace.createElement(PopoverStatus, Object.assign({ title: popoverTitle || title }, restProps, { statusBody: statusBody }), children)) : (statusBody);
+const GenericStatus = (props) => {
+    const { Icon, children, popoverTitle, title, noTooltip, iconOnly } = props, restProps = tslib.__rest(props, ["Icon", "children", "popoverTitle", "title", "noTooltip", "iconOnly"]);
+    const renderIcon = iconOnly && !noTooltip ? React__namespace.createElement(Icon, { title: title }) : React__namespace.createElement(Icon, null);
+    const statusBody = (React__namespace.createElement(StatusIconAndText, Object.assign({}, restProps, { noTooltip: noTooltip, title: title, iconOnly: iconOnly, icon: renderIcon })));
+    return React__namespace.Children.toArray(children).length ? (React__namespace.createElement(PopoverStatus, Object.assign({ title: popoverTitle || title }, restProps, { statusBody: statusBody }), children)) : (statusBody);
 };
 
-const GreenCheckCircleIcon = ({ className, title, size }) => (React__namespace.createElement(reactCore.Icon, { size: size },
+const GreenCheckCircleIcon = ({ className, title, size }) => (React__namespace.createElement(reactCore.Icon, { size: size },
     React__namespace.createElement(CheckCircleIcon__default['default'], { "data-test": "success-icon", color: okColor__default['default'].value, className: className, title: title })));
 
-const SuccessStatus = (props) => (React__namespace.createElement(GenericStatus, Object.assign({}, props, { Icon: GreenCheckCircleIcon, title: props.title || 'Healthy' })));
+const SuccessStatus = (props) => (React__namespace.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__namespace.createElement(StatusIconAndText, Object.assign({}, statusProps, { icon: React__namespace.createElement(SyncAltIcon__default['default'], null) }));
-        case 'Complete':
-            return React__namespace.createElement(SuccessStatus, Object.assign({}, statusProps));
-        default:
-            return React__namespace.createElement(React__namespace.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__namespace.createElement(StatusIconAndText, Object.assign({}, statusProps, { icon: React__namespace.createElement(SyncAltIcon__default['default'], null) }));
+        case 'Complete':
+            return React__namespace.createElement(SuccessStatus, Object.assign({}, statusProps));
+        default:
+            return React__namespace.createElement(React__namespace.Fragment, null, status || DASH);
+    }
+};
 const StatusIcon = ({ status }) => (React__namespace.createElement(Status, { status: status, iconOnly: true }));
 
-const QuickStartTileDescription = ({ description, prerequisites, }) => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(QuickStartMarkdownView, { content: description, className: "pfext-quick-start-tile-description" }),
-        (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React__namespace.createElement("div", { className: "pfext-quick-start-tile-prerequisites" },
-            React__namespace.createElement(reactCore.Text, { component: reactCore.TextVariants.h5, className: "pfext-quick-start-tile-prerequisites__text" },
-                getResource('Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length),
-                ' '),
-            React__namespace.createElement(reactCore.Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), className: "pfext-quick-start__base", bodyContent: React__namespace.createElement("div", { className: "pfext-popover__base" },
-                    React__namespace.createElement(reactCore.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__namespace.createElement(reactCore.TextListItem, { key: index },
-                        React__namespace.createElement(QuickStartMarkdownView, { content: prerequisite })))))) },
-                React__namespace.createElement(reactCore.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__namespace.createElement(InfoCircleIcon__default['default'], null)))))));
-};
-
-const QuickStartTileFooter = ({ quickStartId, status, totalTasks, }) => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    const { activeQuickStartID, startQuickStart, restartQuickStart } = React__namespace.useContext(QuickStartContext);
-    const start = React__namespace.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        startQuickStart(quickStartId, totalTasks);
-    }, [quickStartId, startQuickStart, totalTasks]);
-    const restart = React__namespace.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        restartQuickStart(quickStartId, totalTasks);
-    }, [quickStartId, restartQuickStart, totalTasks]);
-    return (React__namespace.createElement(reactCore.Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
-        status === exports.QuickStartStatus.NOT_STARTED && (React__namespace.createElement(reactCore.FlexItem, null,
-            React__namespace.createElement(reactCore.Button, { onClick: start, variant: "link", isInline: true, "data-testid": "qs-card-notStarted-start", id: `${quickStartId}-start`, "aria-labelledby": `${quickStartId}-start ${quickStartId}` }, getResource('Start')))),
-        status === exports.QuickStartStatus.IN_PROGRESS && activeQuickStartID !== quickStartId && (React__namespace.createElement(reactCore.FlexItem, null,
-            React__namespace.createElement(reactCore.Button, { variant: "link", isInline: true, "data-testid": "qs-card-inProgress-resume", id: `${quickStartId}-continue`, "aria-labelledby": `${quickStartId}-continue ${quickStartId}` }, getResource('Continue')))),
-        status === exports.QuickStartStatus.COMPLETE && (React__namespace.createElement(reactCore.FlexItem, null,
-            React__namespace.createElement(reactCore.Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-complete-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart')))),
-        status === exports.QuickStartStatus.IN_PROGRESS && (React__namespace.createElement(reactCore.FlexItem, null,
-            React__namespace.createElement(reactCore.Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-inProgress-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart'))))));
-};
-
-const QuickStartTileFooterExternal = ({ link, quickStartId, }) => {
-    const { href, text } = link;
-    return (React__namespace.createElement(reactCore.Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
-        React__namespace.createElement(reactCore.FlexItem, null,
-            React__namespace.createElement(reactCore.Button, { component: "a", href: href, target: "_blank", rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: React__namespace.createElement(ExternalLinkAltIcon__default['default'], null), iconPosition: "right", id: quickStartId, "aria-labelledby": `${quickStartId}-external ${quickStartId}` }, text || href))));
-};
-
-const statusColorMap = {
-    [exports.QuickStartStatus.COMPLETE]: 'green',
-    [exports.QuickStartStatus.IN_PROGRESS]: 'purple',
-    [exports.QuickStartStatus.NOT_STARTED]: 'grey',
-};
-const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, }) => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    const statusLocaleMap = {
-        [exports.QuickStartStatus.COMPLETE]: getResource('Complete'),
-        [exports.QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
-        [exports.QuickStartStatus.NOT_STARTED]: getResource('Not started'),
-    };
-    return (React__namespace.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React__namespace.createElement(reactCore.Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
-            React__namespace.createElement(QuickStartMarkdownView, { content: name })),
-        React__namespace.createElement("div", { className: "pfext-quick-start-tile-header__status" },
-            type && (React__namespace.createElement(reactCore.Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
-            duration && (React__namespace.createElement(reactCore.Label, { variant: "outline", "data-test": "duration", icon: React__namespace.createElement(OutlinedClockIcon__default['default'], null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
-            status !== exports.QuickStartStatus.NOT_STARTED && (React__namespace.createElement(reactCore.Label, { variant: "outline", color: statusColorMap[status], icon: React__namespace.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__namespace.useContext(QuickStartContext);
-    const ref = React__namespace.useRef(null);
-    let quickStartIcon;
-    if (typeof icon === 'object') {
-        quickStartIcon = icon;
-    }
-    else {
-        quickStartIcon = (React__namespace.createElement(FallbackImg, { className: "pfext-catalog-item-icon__img--large", src: icon, alt: "", fallback: React__namespace.createElement(RocketIcon__default['default'], null) }));
-    }
-    const footerComponent = React__namespace.useMemo(() => {
-        if (footer && footer.show === false) {
-            return null;
-        }
-        if (link) {
-            return React__namespace.createElement(QuickStartTileFooterExternal, { link: link, quickStartId: id });
-        }
-        return React__namespace.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__namespace.createElement("div", { ref: ref },
-        React__namespace.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__namespace.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__namespace.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent, tabIndex: 0 })));
-};
-
-const QuickStartCatalog = ({ quickStarts }) => {
-    const { activeQuickStartID, allQuickStartStates } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement("div", { className: "pfext-page-layout__content" },
-        React__namespace.createElement(reactCore.Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
-            const { metadata: { name: id }, } = quickStart;
-            return (React__namespace.createElement(reactCore.GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
-                React__namespace.createElement(QuickStartTile, { quickStart: quickStart, isActive: id === activeQuickStartID, status: getQuickStartStatus(allQuickStartStates, id) })));
-        }))));
-};
-
-const QuickStartCatalogFilterSearch = (_a) => {
-    var { searchInputText, handleTextChange } = _a, props = tslib.__rest(_a, ["searchInputText", "handleTextChange"]);
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement(reactCore.ToolbarItem, { className: "pfext-quick-start-catalog-filter__input" },
-        React__namespace.createElement(reactCore.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 = tslib.__rest(_a, ["isDropdownOpen", "setIsDropdownOpen", "onRowfilterSelect", "selectedFilters", "dropdownItems"]);
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    const toggle = (toggleRef) => (React__namespace.createElement(reactCore.MenuToggle, { isFullWidth: true, ref: toggleRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), isExpanded: isDropdownOpen },
-        getResource('Status'),
-        selectedFilters.length > 0 && React__namespace.createElement(reactCore.Badge, { isRead: true }, selectedFilters.length)));
-    return (React__namespace.createElement(reactCore.ToolbarItem, null,
-        React__namespace.createElement(reactCore.Select, Object.assign({ "aria-label": getResource('Select filter'), isOpen: isDropdownOpen, selected: selectedFilters, onSelect: onRowfilterSelect, onOpenChange: (isOpen) => setIsDropdownOpen(isOpen), toggle: toggle }, props),
-            React__namespace.createElement(reactCore.SelectList, null, dropdownItems))));
-};
-const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement(reactCore.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__namespace.useContext(QuickStartContext);
-    React__namespace.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__namespace.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__namespace.useContext(QuickStartContext);
-    React__namespace.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__namespace.useState(false);
-    const onRowfilterSelect = React__namespace.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__namespace.createElement(reactCore.SelectOption, { key: key, "data-key": key, value: value, hasCheckbox: true, isSelected: filter.status.statusFilters.includes(key) },
-        React__namespace.createElement(React__namespace.Fragment, null, value))));
-    return (React__namespace.createElement(QuickStartCatalogFilterSelect, { isDropdownOpen: isDropdownOpen, setIsDropdownOpen: setIsDropdownOpen, onRowfilterSelect: onRowfilterSelect, selectedFilters: filter.status.statusFilters, dropdownItems: dropdownItems }));
-};
+const QuickStartTileDescription = ({ description, prerequisites, }) => {
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(QuickStartMarkdownView, { content: description, className: "pfext-quick-start-tile-description" }),
+        (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React__namespace.createElement("div", { className: "pfext-quick-start-tile-prerequisites" },
+            React__namespace.createElement(reactCore.Text, { component: reactCore.TextVariants.h5, className: "pfext-quick-start-tile-prerequisites__text" },
+                getResource('Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length),
+                ' '),
+            React__namespace.createElement(reactCore.Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), className: "pfext-quick-start__base", bodyContent: React__namespace.createElement("div", { className: "pfext-popover__base" },
+                    React__namespace.createElement(reactCore.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__namespace.createElement(reactCore.TextListItem, { key: index },
+                        React__namespace.createElement(QuickStartMarkdownView, { content: prerequisite })))))) },
+                React__namespace.createElement(reactCore.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__namespace.createElement(InfoCircleIcon__default['default'], null)))))));
+};
+
+const QuickStartTileFooter = ({ quickStartId, status, totalTasks, }) => {
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    const { activeQuickStartID, startQuickStart, restartQuickStart } = React__namespace.useContext(QuickStartContext);
+    const start = React__namespace.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        startQuickStart(quickStartId, totalTasks);
+    }, [quickStartId, startQuickStart, totalTasks]);
+    const restart = React__namespace.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        restartQuickStart(quickStartId, totalTasks);
+    }, [quickStartId, restartQuickStart, totalTasks]);
+    return (React__namespace.createElement(reactCore.Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
+        status === exports.QuickStartStatus.NOT_STARTED && (React__namespace.createElement(reactCore.FlexItem, null,
+            React__namespace.createElement(reactCore.Button, { onClick: start, variant: "link", isInline: true, "data-testid": "qs-card-notStarted-start", id: `${quickStartId}-start`, "aria-labelledby": `${quickStartId}-start ${quickStartId}` }, getResource('Start')))),
+        status === exports.QuickStartStatus.IN_PROGRESS && activeQuickStartID !== quickStartId && (React__namespace.createElement(reactCore.FlexItem, null,
+            React__namespace.createElement(reactCore.Button, { variant: "link", isInline: true, "data-testid": "qs-card-inProgress-resume", id: `${quickStartId}-continue`, "aria-labelledby": `${quickStartId}-continue ${quickStartId}` }, getResource('Continue')))),
+        status === exports.QuickStartStatus.COMPLETE && (React__namespace.createElement(reactCore.FlexItem, null,
+            React__namespace.createElement(reactCore.Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-complete-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart')))),
+        status === exports.QuickStartStatus.IN_PROGRESS && (React__namespace.createElement(reactCore.FlexItem, null,
+            React__namespace.createElement(reactCore.Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-inProgress-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart'))))));
+};
+
+const QuickStartTileFooterExternal = ({ link, quickStartId, }) => {
+    const { href, text } = link;
+    return (React__namespace.createElement(reactCore.Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
+        React__namespace.createElement(reactCore.FlexItem, null,
+            React__namespace.createElement(reactCore.Button, { component: "a", href: href, target: "_blank", rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: React__namespace.createElement(ExternalLinkAltIcon__default['default'], null), iconPosition: "right", id: quickStartId, "aria-labelledby": `${quickStartId}-external ${quickStartId}` }, text || href))));
+};
+
+const statusColorMap = {
+    [exports.QuickStartStatus.COMPLETE]: 'green',
+    [exports.QuickStartStatus.IN_PROGRESS]: 'purple',
+    [exports.QuickStartStatus.NOT_STARTED]: 'grey',
+};
+const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, }) => {
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    const statusLocaleMap = {
+        [exports.QuickStartStatus.COMPLETE]: getResource('Complete'),
+        [exports.QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
+        [exports.QuickStartStatus.NOT_STARTED]: getResource('Not started'),
+    };
+    return (React__namespace.createElement("div", { className: "pfext-quick-start-tile-header" },
+        React__namespace.createElement(reactCore.Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
+            React__namespace.createElement(QuickStartMarkdownView, { content: name })),
+        React__namespace.createElement("div", { className: "pfext-quick-start-tile-header__status" },
+            type && (React__namespace.createElement(reactCore.Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
+            duration && (React__namespace.createElement(reactCore.Label, { variant: "outline", "data-test": "duration", icon: React__namespace.createElement(OutlinedClockIcon__default['default'], null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
+            status !== exports.QuickStartStatus.NOT_STARTED && (React__namespace.createElement(reactCore.Label, { variant: "outline", color: statusColorMap[status], icon: React__namespace.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__namespace.useContext(QuickStartContext);
+    const ref = React__namespace.useRef(null);
+    let quickStartIcon;
+    if (typeof icon === 'object') {
+        quickStartIcon = icon;
+    }
+    else {
+        quickStartIcon = (React__namespace.createElement(FallbackImg, { className: "pfext-catalog-item-icon__img--large", src: icon, alt: "", fallback: React__namespace.createElement(RocketIcon__default['default'], null) }));
+    }
+    const footerComponent = React__namespace.useMemo(() => {
+        if (footer && footer.show === false) {
+            return null;
+        }
+        if (link) {
+            return React__namespace.createElement(QuickStartTileFooterExternal, { link: link, quickStartId: id });
+        }
+        return React__namespace.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__namespace.createElement("div", { ref: ref },
+        React__namespace.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__namespace.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__namespace.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent, tabIndex: 0 })));
+};
+
+const QuickStartCatalog = ({ quickStarts }) => {
+    const { activeQuickStartID, allQuickStartStates } = React__namespace.useContext(QuickStartContext);
+    return (React__namespace.createElement("div", { className: "pfext-page-layout__content" },
+        React__namespace.createElement(reactCore.Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
+            const { metadata: { name: id }, } = quickStart;
+            return (React__namespace.createElement(reactCore.GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
+                React__namespace.createElement(QuickStartTile, { quickStart: quickStart, isActive: id === activeQuickStartID, status: getQuickStartStatus(allQuickStartStates, id) })));
+        }))));
+};
+
+const QuickStartCatalogFilterSearch = (_a) => {
+    var { searchInputText, handleTextChange } = _a, props = tslib.__rest(_a, ["searchInputText", "handleTextChange"]);
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    return (React__namespace.createElement(reactCore.ToolbarItem, { className: "pfext-quick-start-catalog-filter__input" },
+        React__namespace.createElement(reactCore.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 = tslib.__rest(_a, ["isDropdownOpen", "setIsDropdownOpen", "onRowfilterSelect", "selectedFilters", "dropdownItems"]);
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    const toggle = (toggleRef) => (React__namespace.createElement(reactCore.MenuToggle, { isFullWidth: true, ref: toggleRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), isExpanded: isDropdownOpen },
+        getResource('Status'),
+        selectedFilters.length > 0 && React__namespace.createElement(reactCore.Badge, { isRead: true }, selectedFilters.length)));
+    return (React__namespace.createElement(reactCore.ToolbarItem, null,
+        React__namespace.createElement(reactCore.Select, Object.assign({ "aria-label": getResource('Select filter'), isOpen: isDropdownOpen, selected: selectedFilters, onSelect: onRowfilterSelect, onOpenChange: (isOpen) => setIsDropdownOpen(isOpen), toggle: toggle }, props),
+            React__namespace.createElement(reactCore.SelectList, null, dropdownItems))));
+};
+const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    return (React__namespace.createElement(reactCore.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__namespace.useContext(QuickStartContext);
+    React__namespace.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__namespace.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__namespace.useContext(QuickStartContext);
+    React__namespace.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__namespace.useState(false);
+    const onRowfilterSelect = React__namespace.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__namespace.createElement(reactCore.SelectOption, { key: key, "data-key": key, value: value, hasCheckbox: true, isSelected: filter.status.statusFilters.includes(key) },
+        React__namespace.createElement(React__namespace.Fragment, null, value))));
+    return (React__namespace.createElement(QuickStartCatalogFilterSelect, { isDropdownOpen: isDropdownOpen, setIsDropdownOpen: setIsDropdownOpen, onRowfilterSelect: onRowfilterSelect, selectedFilters: filter.status.statusFilters, dropdownItems: dropdownItems }));
+};
 const QuickStartCatalogFilterCountWrapper = ({ quickStartsCount }) => React__namespace.createElement(QuickStartCatalogFilterCount, { quickStartsCount: quickStartsCount });
 
-const QuickStartCatalogFilter = (_a) => {
-    var { quickStartsCount, onSearchInputChange = () => { }, onStatusChange = () => { } } = _a, props = tslib.__rest(_a, ["quickStartsCount", "onSearchInputChange", "onStatusChange"]);
-    return (React__namespace.createElement(reactCore.Toolbar, Object.assign({ usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, props),
-        React__namespace.createElement(reactCore.ToolbarContent, null,
-            React__namespace.createElement(QuickStartCatalogFilterSearchWrapper, { onSearchInputChange: onSearchInputChange }),
-            React__namespace.createElement(QuickStartCatalogFilterStatusWrapper, { onStatusChange: onStatusChange }),
-            React__namespace.createElement(QuickStartCatalogFilterCountWrapper, { quickStartsCount: quickStartsCount }))));
-};
-
-const QuickStartCatalogEmptyState = ({ clearFilters }) => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement(reactCore.EmptyState, null,
-        React__namespace.createElement(reactCore.EmptyStateHeader, { titleText: React__namespace.createElement(React__namespace.Fragment, null, getResource('No results found')), icon: React__namespace.createElement(reactCore.EmptyStateIcon, { icon: SearchIcon__default['default'] }), headingLevel: "h4" }),
-        React__namespace.createElement(reactCore.EmptyStateBody, null, getResource('No results match the filter criteria. Remove filters or clear all filters to show results.')),
-        React__namespace.createElement(reactCore.EmptyStateFooter, null,
-            React__namespace.createElement(reactCore.EmptyStateActions, null,
-                React__namespace.createElement(reactCore.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__namespace.useCallback(sortFnc, [sortFnc]);
-    const { allQuickStarts = [], setAllQuickStarts, allQuickStartStates, getResource, filter, setFilter, loading, } = React__namespace.useContext(QuickStartContext);
-    React__namespace.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__namespace.useState(initialFilteredQuickStarts);
-    React__namespace.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__namespace.createElement(LoadingBox, null);
-    }
-    if (!allQuickStarts || allQuickStarts.length === 0) {
-        return React__namespace.createElement(EmptyBox, { label: getResource('Quick Starts') });
-    }
-    return (React__namespace.createElement("div", { className: "pfext-quick-start__base" },
-        showTitle && (React__namespace.createElement("div", { className: "pfext-page-layout__header" },
-            React__namespace.createElement(reactCore.Text, { component: "h1", className: "pfext-page-layout__title", "data-test": "page-title" }, title || getResource('Quick Starts')),
-            hint && React__namespace.createElement("div", { className: "pfext-page-layout__hint" }, hint))),
-        showTitle && React__namespace.createElement(reactCore.Divider, { component: "div" }),
-        showFilter && (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement(QuickStartCatalogFilter, { quickStartsCount: filteredQuickStarts.length, onSearchInputChange: onSearchInputChange, onStatusChange: onStatusChange }),
-            React__namespace.createElement(reactCore.Divider, { component: "div" }))),
-        React__namespace.createElement(React__namespace.Fragment, null, filteredQuickStarts.length === 0 ? (React__namespace.createElement(QuickStartCatalogEmptyState, { clearFilters: clearFilters })) : (React__namespace.createElement(QuickStartCatalog, { quickStarts: filteredQuickStarts })))));
-};
-
-const QuickStartCatalogHeader = ({ title, hint, }) => (React__namespace.createElement("div", { className: "pfext-page-layout__header" },
-    React__namespace.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
+const QuickStartCatalogFilter = (_a) => {
+    var { quickStartsCount, onSearchInputChange = () => { }, onStatusChange = () => { } } = _a, props = tslib.__rest(_a, ["quickStartsCount", "onSearchInputChange", "onStatusChange"]);
+    return (React__namespace.createElement(reactCore.Toolbar, Object.assign({ usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, props),
+        React__namespace.createElement(reactCore.ToolbarContent, null,
+            React__namespace.createElement(QuickStartCatalogFilterSearchWrapper, { onSearchInputChange: onSearchInputChange }),
+            React__namespace.createElement(QuickStartCatalogFilterStatusWrapper, { onStatusChange: onStatusChange }),
+            React__namespace.createElement(QuickStartCatalogFilterCountWrapper, { quickStartsCount: quickStartsCount }))));
+};
+
+const QuickStartCatalogEmptyState = ({ clearFilters }) => {
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    return (React__namespace.createElement(reactCore.EmptyState, null,
+        React__namespace.createElement(reactCore.EmptyStateHeader, { titleText: React__namespace.createElement(React__namespace.Fragment, null, getResource('No results found')), icon: React__namespace.createElement(reactCore.EmptyStateIcon, { icon: SearchIcon__default['default'] }), headingLevel: "h4" }),
+        React__namespace.createElement(reactCore.EmptyStateBody, null, getResource('No results match the filter criteria. Remove filters or clear all filters to show results.')),
+        React__namespace.createElement(reactCore.EmptyStateFooter, null,
+            React__namespace.createElement(reactCore.EmptyStateActions, null,
+                React__namespace.createElement(reactCore.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__namespace.useCallback(sortFnc, [sortFnc]);
+    const { allQuickStarts = [], setAllQuickStarts, allQuickStartStates, getResource, filter, setFilter, loading, } = React__namespace.useContext(QuickStartContext);
+    React__namespace.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__namespace.useState(initialFilteredQuickStarts);
+    React__namespace.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__namespace.createElement(LoadingBox, null);
+    }
+    if (!allQuickStarts || allQuickStarts.length === 0) {
+        return React__namespace.createElement(EmptyBox, { label: getResource('Quick Starts') });
+    }
+    return (React__namespace.createElement("div", { className: "pfext-quick-start__base" },
+        showTitle && (React__namespace.createElement("div", { className: "pfext-page-layout__header" },
+            React__namespace.createElement(reactCore.Text, { component: "h1", className: "pfext-page-layout__title", "data-test": "page-title" }, title || getResource('Quick Starts')),
+            hint && React__namespace.createElement("div", { className: "pfext-page-layout__hint" }, hint))),
+        showTitle && React__namespace.createElement(reactCore.Divider, { component: "div" }),
+        showFilter && (React__namespace.createElement(React__namespace.Fragment, null,
+            React__namespace.createElement(QuickStartCatalogFilter, { quickStartsCount: filteredQuickStarts.length, onSearchInputChange: onSearchInputChange, onStatusChange: onStatusChange }),
+            React__namespace.createElement(reactCore.Divider, { component: "div" }))),
+        React__namespace.createElement(React__namespace.Fragment, null, filteredQuickStarts.length === 0 ? (React__namespace.createElement(QuickStartCatalogEmptyState, { clearFilters: clearFilters })) : (React__namespace.createElement(QuickStartCatalog, { quickStarts: filteredQuickStarts })))));
+};
+
+const QuickStartCatalogHeader = ({ title, hint, }) => (React__namespace.createElement("div", { className: "pfext-page-layout__header" },
+    React__namespace.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
     hint && React__namespace.createElement("div", { className: "pfext-page-layout__hint" }, hint)));
 
 const QuickStartCatalogSection = ({ children }) => (React__namespace.createElement("div", { className: "pfext-page-layout__content" }, children));
 
 const QuickStartCatalogToolbar = ({ children }) => (React__namespace.createElement(reactCore.Toolbar, { usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, children));
 
-const QuickStartCloseModal = ({ isOpen, onConfirm, onCancel, }) => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement(Modal, { className: "pfext-quick-start-drawer__modal pfext-quick-start__base", isOpen: isOpen, variant: reactCore.ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React__namespace.createElement(reactCore.Flex, null,
-            React__namespace.createElement(reactCore.FlexItem, { align: { default: 'alignRight' } },
-                React__namespace.createElement(reactCore.Button, { variant: "secondary", "data-test": "cancel button", onClick: onCancel }, getResource('Cancel'))),
-            React__namespace.createElement(reactCore.FlexItem, null,
-                React__namespace.createElement(reactCore.Button, { variant: "primary", "data-test": "leave button", onClick: onConfirm }, getResource('Leave')))), isFullScreen: true }, getResource('Your progress will be saved.')));
-};
-
-const TaskIcon = ({ taskIndex, taskStatus }) => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    const success = taskStatus === exports.QuickStartTaskStatus.SUCCESS;
-    const failed = taskStatus === exports.QuickStartTaskStatus.FAILED;
-    const classNames = reactStyles.css('pfext-icon-and-text__icon', {
-        'pfext-quick-start-task-header__task-icon-init': !failed && !success,
-    });
-    let content;
-    if (success) {
-        content = (React__namespace.createElement(reactCore.Icon, { size: "md" },
-            React__namespace.createElement(CheckCircleIcon__default['default'], { className: "pfext-quick-start-task-header__task-icon-success" }),
-            ' '));
-    }
-    else if (failed) {
-        content = (React__namespace.createElement(reactCore.Icon, { size: "md" },
-            React__namespace.createElement(ExclamationCircleIcon__default['default'], { className: "pfext-quick-start-task-header__task-icon-failed" })));
-    }
-    else {
-        content = getResource('{{taskIndex, number}}', taskIndex).replace('{{taskIndex, number}}', taskIndex);
-    }
-    return React__namespace.createElement("span", { className: classNames }, content);
-};
-const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
-    const titleRef = React__namespace.useRef(null);
-    React__namespace.useEffect(() => {
-        if (isActiveTask) {
-            // Focus the WizardNavItem button element that contains the title
-            titleRef.current.parentNode.focus();
-        }
-    }, [isActiveTask]);
-    const classNames = reactStyles.css('pfext-quick-start-task-header__title', {
-        'pfext-quick-start-task-header__title-success': taskStatus === exports.QuickStartTaskStatus.SUCCESS,
-        'pfext-quick-start-task-header__title-failed': taskStatus === (exports.QuickStartTaskStatus.FAILED || exports.QuickStartTaskStatus.VISITED),
-    });
-    // const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
-    // const skippedReview = taskStatus === QuickStartTaskStatus.REVIEW;
-    const failedReview = taskStatus === exports.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__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement("div", null),
-        React__namespace.createElement("div", { className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
-    const content = (React__namespace.createElement("div", { className: "pfext-quick-start-task-header", ref: titleRef },
-        React__namespace.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
-        React__namespace.createElement(reactCore.Title, { headingLevel: "h3", size: size, className: classNames },
-            React__namespace.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
-            isActiveTask && subtitle && (React__namespace.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" },
-                ' ',
-                subtitle))),
-        tryAgain));
-    return (React__namespace.createElement(reactCore.WizardNavItem, { content: content, stepIndex: taskIndex, onClick: () => onTaskSelect(taskIndex - 1), component: "button", isCurrent: isActiveTask }, children));
+const QuickStartCloseModal = ({ isOpen, onConfirm, onCancel, }) => {
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    return (React__namespace.createElement(Modal, { className: "pfext-quick-start-drawer__modal pfext-quick-start__base", isOpen: isOpen, variant: reactCore.ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React__namespace.createElement(reactCore.Flex, null,
+            React__namespace.createElement(reactCore.FlexItem, { align: { default: 'alignRight' } },
+                React__namespace.createElement(reactCore.Button, { variant: "secondary", "data-test": "cancel button", onClick: onCancel }, getResource('Cancel'))),
+            React__namespace.createElement(reactCore.FlexItem, null,
+                React__namespace.createElement(reactCore.Button, { variant: "primary", "data-test": "leave button", onClick: onConfirm }, getResource('Leave')))), isFullScreen: true }, getResource('Your progress will be saved.')));
+};
+
+const TaskIcon = ({ taskIndex, taskStatus }) => {
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    const success = taskStatus === exports.QuickStartTaskStatus.SUCCESS;
+    const failed = taskStatus === exports.QuickStartTaskStatus.FAILED;
+    const classNames = reactStyles.css('pfext-icon-and-text__icon', {
+        'pfext-quick-start-task-header__task-icon-init': !failed && !success,
+    });
+    let content;
+    if (success) {
+        content = (React__namespace.createElement(reactCore.Icon, { size: "md" },
+            React__namespace.createElement(CheckCircleIcon__default['default'], { className: "pfext-quick-start-task-header__task-icon-success" }),
+            ' '));
+    }
+    else if (failed) {
+        content = (React__namespace.createElement(reactCore.Icon, { size: "md" },
+            React__namespace.createElement(ExclamationCircleIcon__default['default'], { className: "pfext-quick-start-task-header__task-icon-failed" })));
+    }
+    else {
+        content = getResource('{{taskIndex, number}}', taskIndex).replace('{{taskIndex, number}}', taskIndex);
+    }
+    return React__namespace.createElement("span", { className: classNames }, content);
+};
+const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
+    const titleRef = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+        if (isActiveTask) {
+            // Focus the WizardNavItem button element that contains the title
+            titleRef.current.parentNode.focus();
+        }
+    }, [isActiveTask]);
+    const classNames = reactStyles.css('pfext-quick-start-task-header__title', {
+        'pfext-quick-start-task-header__title-success': taskStatus === exports.QuickStartTaskStatus.SUCCESS,
+        'pfext-quick-start-task-header__title-failed': taskStatus === (exports.QuickStartTaskStatus.FAILED || exports.QuickStartTaskStatus.VISITED),
+    });
+    // const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
+    // const skippedReview = taskStatus === QuickStartTaskStatus.REVIEW;
+    const failedReview = taskStatus === exports.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__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement("div", null),
+        React__namespace.createElement("div", { className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
+    const content = (React__namespace.createElement("div", { className: "pfext-quick-start-task-header", ref: titleRef },
+        React__namespace.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
+        React__namespace.createElement(reactCore.Title, { headingLevel: "h3", size: size, className: classNames },
+            React__namespace.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
+            isActiveTask && subtitle && (React__namespace.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" },
+                ' ',
+                subtitle))),
+        tryAgain));
+    return (React__namespace.createElement(reactCore.WizardNavItem, { content: content, stepIndex: taskIndex, onClick: () => onTaskSelect(taskIndex - 1), component: "button", isCurrent: isActiveTask }, children));
 };
 
 const QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => tasks.length > 0 ? (React__namespace.createElement(reactCore.List, { className: "pfext-quick-start-task-header__list" }, tasks.map((task, index) => (React__namespace.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(exports.QuickStartTaskStatus.FAILED);
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect }),
-        React__namespace.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__namespace.createElement(reactCore.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__namespace.createElement(ArrowRightIcon__default['default'], { style: { marginLeft: 'var(--pf-v5-global--spacer--xs)', verticalAlign: 'middle' } })));
-            })));
-};
-
-const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequisites, onTaskSelect, }) => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
-    const [isPrereqsExpanded, setIsPrereqsExpanded] = React__namespace.useState(false);
-    const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React__namespace.createElement(reactCore.ExpandableSection, { toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded), className: "pfext-quick-start-intro__prereq" },
-        React__namespace.createElement(reactCore.List, { className: "pfext-quick-start-intro__prereq-list" }, prereqs.map((pr) => (React__namespace.createElement(reactCore.ListItem, { key: pr, className: "pfext-quick-start-intro__prereq-list__item" },
-            React__namespace.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" },
-                React__namespace.createElement(QuickStartMarkdownView, { content: pr }))))))));
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(QuickStartMarkdownView, { content: introduction }),
-        prereqList,
-        React__namespace.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__namespace.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect })));
-};
-
-const getAlertVariant = (status) => {
-    switch (status) {
-        case exports.QuickStartTaskStatus.SUCCESS:
-            return 'success';
-        case exports.QuickStartTaskStatus.FAILED:
-            return 'danger';
-        default:
-            return 'info';
-    }
-};
-const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
-    const { instructions, failedTaskHelp: taskHelp } = review;
-    const { getResource } = React__namespace.useContext(QuickStartContext);
-    const alertClassNames = reactStyles.css('pfext-quick-start-task-review', {
-        'pfext-quick-start-task-review--success': taskStatus === exports.QuickStartTaskStatus.SUCCESS,
-        'pfext-quick-start-task-review--failed': taskStatus === exports.QuickStartTaskStatus.FAILED,
-    });
-    const title = React__namespace.createElement("span", { className: alertClassNames }, getResource('Check your work'));
-    return (React__namespace.createElement(reactCore.Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true, role: "alert" },
-        React__namespace.createElement(QuickStartMarkdownView, { content: instructions }),
-        React__namespace.createElement("span", { className: "pfext-quick-start-task-review__actions" },
-            React__namespace.createElement(reactCore.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 === exports.QuickStartTaskStatus.SUCCESS, onChange: () => onTaskReview(exports.QuickStartTaskStatus.SUCCESS) }),
-            React__namespace.createElement(reactCore.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 === exports.QuickStartTaskStatus.FAILED, onChange: () => onTaskReview(exports.QuickStartTaskStatus.FAILED) })),
-        taskStatus === exports.QuickStartTaskStatus.FAILED && taskHelp && (React__namespace.createElement(QuickStartMarkdownView, { content: taskHelp, exactHeight: true }))));
-};
-
-const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onTaskSelect, }) => {
-    const { getResource, alwaysShowTaskReview } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement("div", { className: "pfext-quick-start-tasks__list" },
-        React__namespace.createElement("ul", null, tasks
-            .filter((_, index) => allTaskStatuses[index] !== exports.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__namespace.createElement(React__namespace.Fragment, { key: title },
-                React__namespace.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__namespace.createElement("div", { className: "pfext-quick-start-task__content" },
-                    React__namespace.createElement(QuickStartMarkdownView, { content: description }),
-                    shouldShowTaskReview && (React__namespace.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview })))))));
-        }))));
-};
-
-const QuickStartContent = React__namespace.forwardRef(({ quickStart, nextQuickStarts = [], taskNumber, allTaskStatuses, onTaskSelect, onTaskReview, onQuickStartChange, }, ref) => {
-    const { spec: { introduction, tasks, conclusion, prerequisites }, } = quickStart;
-    const totalTasks = tasks.length;
-    return (React__namespace.createElement("div", { className: "pfext-quick-start-content", ref: ref },
-        taskNumber === -1 && (React__namespace.createElement(QuickStartIntroduction, { tasks: tasks, allTaskStatuses: allTaskStatuses, introduction: introduction, prerequisites: prerequisites, onTaskSelect: onTaskSelect })),
-        taskNumber > -1 && taskNumber < totalTasks && (React__namespace.createElement(QuickStartTasks, { tasks: tasks, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskReview: onTaskReview, onTaskSelect: onTaskSelect })),
-        taskNumber === totalTasks && (React__namespace.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(exports.QuickStartTaskStatus.FAILED);
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect }),
+        React__namespace.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__namespace.createElement(reactCore.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__namespace.createElement(ArrowRightIcon__default['default'], { style: { marginLeft: 'var(--pf-v5-global--spacer--xs)', verticalAlign: 'middle' } })));
+            })));
+};
+
+const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequisites, onTaskSelect, }) => {
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
+    const [isPrereqsExpanded, setIsPrereqsExpanded] = React__namespace.useState(false);
+    const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React__namespace.createElement(reactCore.ExpandableSection, { toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded), className: "pfext-quick-start-intro__prereq" },
+        React__namespace.createElement(reactCore.List, { className: "pfext-quick-start-intro__prereq-list" }, prereqs.map((pr) => (React__namespace.createElement(reactCore.ListItem, { key: pr, className: "pfext-quick-start-intro__prereq-list__item" },
+            React__namespace.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" },
+                React__namespace.createElement(QuickStartMarkdownView, { content: pr }))))))));
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(QuickStartMarkdownView, { content: introduction }),
+        prereqList,
+        React__namespace.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__namespace.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect })));
+};
+
+const getAlertVariant = (status) => {
+    switch (status) {
+        case exports.QuickStartTaskStatus.SUCCESS:
+            return 'success';
+        case exports.QuickStartTaskStatus.FAILED:
+            return 'danger';
+        default:
+            return 'info';
+    }
+};
+const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
+    const { instructions, failedTaskHelp: taskHelp } = review;
+    const { getResource } = React__namespace.useContext(QuickStartContext);
+    const alertClassNames = reactStyles.css('pfext-quick-start-task-review', {
+        'pfext-quick-start-task-review--success': taskStatus === exports.QuickStartTaskStatus.SUCCESS,
+        'pfext-quick-start-task-review--failed': taskStatus === exports.QuickStartTaskStatus.FAILED,
+    });
+    const title = React__namespace.createElement("span", { className: alertClassNames }, getResource('Check your work'));
+    return (React__namespace.createElement(reactCore.Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true, role: "alert" },
+        React__namespace.createElement(QuickStartMarkdownView, { content: instructions }),
+        React__namespace.createElement("span", { className: "pfext-quick-start-task-review__actions" },
+            React__namespace.createElement(reactCore.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 === exports.QuickStartTaskStatus.SUCCESS, onChange: () => onTaskReview(exports.QuickStartTaskStatus.SUCCESS) }),
+            React__namespace.createElement(reactCore.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 === exports.QuickStartTaskStatus.FAILED, onChange: () => onTaskReview(exports.QuickStartTaskStatus.FAILED) })),
+        taskStatus === exports.QuickStartTaskStatus.FAILED && taskHelp && (React__namespace.createElement(QuickStartMarkdownView, { content: taskHelp, exactHeight: true }))));
+};
+
+const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onTaskSelect, }) => {
+    const { getResource, alwaysShowTaskReview } = React__namespace.useContext(QuickStartContext);
+    return (React__namespace.createElement("div", { className: "pfext-quick-start-tasks__list" },
+        React__namespace.createElement("ul", null, tasks
+            .filter((_, index) => allTaskStatuses[index] !== exports.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__namespace.createElement(React__namespace.Fragment, { key: title },
+                React__namespace.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__namespace.createElement("div", { className: "pfext-quick-start-task__content" },
+                    React__namespace.createElement(QuickStartMarkdownView, { content: description }),
+                    shouldShowTaskReview && (React__namespace.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview })))))));
+        }))));
+};
+
+const QuickStartContent = React__namespace.forwardRef(({ quickStart, nextQuickStarts = [], taskNumber, allTaskStatuses, onTaskSelect, onTaskReview, onQuickStartChange, }, ref) => {
+    const { spec: { introduction, tasks, conclusion, prerequisites }, } = quickStart;
+    const totalTasks = tasks.length;
+    return (React__namespace.createElement("div", { className: "pfext-quick-start-content", ref: ref },
+        taskNumber === -1 && (React__namespace.createElement(QuickStartIntroduction, { tasks: tasks, allTaskStatuses: allTaskStatuses, introduction: introduction, prerequisites: prerequisites, onTaskSelect: onTaskSelect })),
+        taskNumber > -1 && taskNumber < totalTasks && (React__namespace.createElement(QuickStartTasks, { tasks: tasks, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskReview: onTaskReview, onTaskSelect: onTaskSelect })),
+        taskNumber === totalTasks && (React__namespace.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__namespace.useContext(QuickStartContext);
-    const PrimaryButtonText = React__namespace.useMemo(() => ({
-        START: getResource('Start'),
-        CONTINUE: getResource('Continue'),
-        NEXT: getResource('Next'),
-        CLOSE: getResource('Close'),
-    }), [getResource]);
-    const SecondaryButtonText = React__namespace.useMemo(() => ({
-        BACK: getResource('Back'),
-        RESTART: getResource('Restart'),
-    }), [getResource]);
-    const onRestart = React__namespace.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        restartQuickStart(quickStartId, totalTasks);
-    }, [quickStartId, restartQuickStart, totalTasks]);
-    const getPrimaryButtonText = React__namespace.useMemo(() => {
-        if (status === exports.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__namespace.useMemo(() => (React__namespace.createElement(reactCore.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__namespace.useMemo(() => taskNumber === -1 && status !== exports.QuickStartStatus.NOT_STARTED ? (React__namespace.createElement(reactCore.Button, { variant: "secondary", onClick: onRestart, "data-testid": "qs-drawer-restart" }, SecondaryButtonText.RESTART)) : (taskNumber > -1 && (React__namespace.createElement(reactCore.Button, { variant: "secondary", onClick: onBack, "data-testid": "qs-drawer-back" }, SecondaryButtonText.BACK))), [onRestart, onBack, SecondaryButtonText, status, taskNumber]);
-    const getSideNoteAction = React__namespace.useMemo(() => taskNumber !== -1 && (React__namespace.createElement(reactCore.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__namespace.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__namespace.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__namespace.useCallback((quickStartId) => setActiveQuickStart(quickStartId), [setActiveQuickStart]);
-    const handleTaskStatusChange = React__namespace.useCallback((newTaskStatus) => setQuickStartTaskStatus(newTaskStatus), [setQuickStartTaskStatus]);
-    const getQuickStartActiveTask = React__namespace.useCallback(() => {
-        let activeTaskNumber = 0;
-        while (activeTaskNumber !== totalTasks &&
-            activeQuickStartState[`taskStatus${activeTaskNumber}`] !== exports.QuickStartTaskStatus.INIT) {
-            activeTaskNumber++;
-        }
-        return activeTaskNumber;
-    }, [totalTasks, activeQuickStartState]);
-    const handleQuickStartContinue = React__namespace.useCallback(() => {
-        const activeTaskNumber = getQuickStartActiveTask();
-        setQuickStartTaskNumber(name, activeTaskNumber);
-    }, [getQuickStartActiveTask, setQuickStartTaskNumber, name]);
-    const handleNext = React__namespace.useCallback(() => {
-        if (status === exports.QuickStartStatus.COMPLETE && taskNumber === totalTasks) {
-            return handleQuickStartChange('');
-        }
-        if (status !== exports.QuickStartStatus.NOT_STARTED && taskNumber === -1) {
-            return handleQuickStartContinue();
-        }
-        return nextStep(totalTasks);
-    }, [handleQuickStartChange, nextStep, status, taskNumber, totalTasks, handleQuickStartContinue]);
-    const handleBack = React__namespace.useCallback(() => previousStep(), [previousStep]);
-    const handleTaskSelect = React__namespace.useCallback((selectedTaskNumber) => {
-        setQuickStartTaskNumber(name, selectedTaskNumber);
-    }, [name, setQuickStartTaskNumber]);
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(QuickStartContent, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskSelect: handleTaskSelect, onTaskReview: handleTaskStatusChange, onQuickStartChange: handleQuickStartChange, ref: contentRef }),
-        React__namespace.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__namespace.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 = tslib.__rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
-    const titleRef = React__namespace.useRef(null);
-    const { getResource, activeQuickStartState } = React__namespace.useContext(QuickStartContext);
-    const [contentRef, setContentRef] = React__namespace.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 = reactStyles.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 = reactStyles.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__namespace.useEffect(() => {
-        if (quickStart) {
-            titleRef.current.focus();
-        }
-    }, [quickStart]);
-    const content = quickStart ? (React__namespace.createElement(reactCore.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__namespace.createElement("div", { className: headerClasses },
-            React__namespace.createElement(reactCore.DrawerHead, null,
-                React__namespace.createElement("div", { className: "pfext-quick-start-panel-content__title", tabIndex: -1, ref: titleRef },
-                    React__namespace.createElement(reactCore.Title, { headingLevel: "h2", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-v5-global--spacer--md)' } },
-                        React__namespace.createElement("span", { dangerouslySetInnerHTML: {
-                                __html: removeParagraphWrap(markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName)),
-                            } }),
-                        ' ',
-                        React__namespace.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__namespace.createElement(reactCore.DrawerActions, null,
-                    React__namespace.createElement(reactCore.DrawerCloseButton, { onClick: handleClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))))),
-        React__namespace.createElement(reactCore.DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
-            React__namespace.createElement(QuickStartController, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, footerClass: footerClass, contentRef: setContentRef })))) : null;
-    if (appendTo) {
-        return ReactDOM__namespace.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 = tslib.__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__namespace.useEffect(() => {
-        if (quickStarts &&
-            JSON.stringify(quickStarts) !== JSON.stringify(valuesForQuickstartContext.allQuickStarts)) {
-            valuesForQuickstartContext.setAllQuickStarts(quickStarts);
-        }
-    }, [quickStarts, valuesForQuickstartContext]);
-    React__namespace.useEffect(() => {
-        if (loading !== valuesForQuickstartContext.loading) {
-            valuesForQuickstartContext.setLoading(loading);
-        }
-    }, [loading, valuesForQuickstartContext]);
-    const drawerProps = Object.assign({ appendTo,
-        fullWidth,
-        onCloseInProgress,
-        onCloseNotInProgress }, props);
-    return (React__namespace.createElement(QuickStartContext.Provider, { value: valuesForQuickstartContext },
-        React__namespace.createElement(QuickStartDrawer, Object.assign({}, drawerProps), children)));
-};
-const QuickStartDrawer = (_a) => {
-    var { quickStarts = [], children, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress } = _a, props = tslib.__rest(_a, ["quickStarts", "children", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress"]);
-    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, useLegacyHeaderColors, } = React__namespace.useContext(QuickStartContext);
-    const combinedQuickStarts = allQuickStarts.concat(quickStarts);
-    React__namespace.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__namespace.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__namespace.useState(false);
-    const activeQuickStartStatus = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.status;
-    const onClose = () => setActiveQuickStart('');
-    const handleClose = () => {
-        if (activeQuickStartStatus === exports.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__namespace.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth, headerVariant: useLegacyHeaderColors ? '' : 'blue-white' }, fullWidthPanelStyle)));
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(reactCore.Drawer, Object.assign({ isExpanded: !!activeQuickStartID, isInline: true }, props), children ? (React__namespace.createElement(reactCore.DrawerContent, Object.assign({ panelContent: panelContent }, fullWidthBodyStyle),
-            React__namespace.createElement(reactCore.DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React__namespace.createElement("div", { className: "pf-v5-c-drawer__main" }, panelContent))),
-        React__namespace.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
-};
-
-const HelpTopicContextDefaults = {
-    helpTopics: [],
-    setHelpTopics: () => { },
-    activeHelpTopic: null,
-    setActiveHelpTopicByName: () => { },
-    filteredHelpTopics: [],
-    setFilteredHelpTopics: () => { },
-    loading: false,
-};
-const HelpTopicContext = React__default['default'].createContext(HelpTopicContextDefaults);
-const useValuesForHelpTopicContext = (value = {}) => {
-    const combinedValue = Object.assign(Object.assign({}, HelpTopicContextDefaults), value);
-    const [loading, setLoading] = React__default['default'].useState(combinedValue.loading);
-    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
-    const [helpTopics, setHelpTopics] = React__default['default'].useState(combinedValue.helpTopics || []);
-    const [activeHelpTopic, setActiveHelpTopic] = React__default['default'].useState(combinedValue.activeHelpTopic || null);
-    const setActiveHelpTopicByName = React__default['default'].useCallback((helpTopicName) => {
-        const topic = helpTopics.find((t) => t.name === helpTopicName);
-        if (!helpTopicName) {
-            setActiveHelpTopic(null);
-            return;
-        }
-        setActiveHelpTopic(topic);
-    }, [helpTopics]);
-    const [filteredHelpTopics, setFilteredHelpTopics] = React__default['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 = tslib.__rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
-    const { setActiveHelpTopicByName } = React__namespace.useContext(HelpTopicContext);
-    const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React__namespace.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__namespace.createElement(reactCore.SelectOption, { key: topic.name, value: topic.name }, topic.title)));
-    const paddingContainer = (children) => React__namespace.createElement("div", { style: { padding: '24px' } }, children);
-    const panelBodyItems = (React__namespace.createElement(React__namespace.Fragment, null,
-        paddingContainer(React__namespace.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__namespace.createElement(reactCore.Divider, null),
-        paddingContainer(React__namespace.createElement(reactCore.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__namespace.createElement(reactCore.StackItem, { key: index },
-            React__namespace.createElement(reactCore.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__namespace.createElement(ExternalLinkAltIcon__default['default'], null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href))))))));
-    const content = (React__namespace.createElement(reactCore.DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base" }, props),
-        React__namespace.createElement("div", null,
-            React__namespace.createElement(reactCore.DrawerHead, null,
-                React__namespace.createElement("div", { className: "pfext-quick-start-panel-content__title" },
-                    helpTopicOptions && (React__namespace.createElement(reactCore.Select, { isPlain: true, id: "help-topics-select", selected: activeHelpTopic, isOpen: isHelpTopicMenuOpen, onSelect: onSelectHelpTopic, onOpenChange: (isOpen) => setIsHelpTopicMenuOpen(isOpen), toggle: (toggleRef) => (React__namespace.createElement(reactCore.MenuToggle, { isFullWidth: true, ref: toggleRef, icon: React__namespace.createElement(BarsIcon__default['default'], null), onClick: toggleHelpTopicMenu, isExpanded: isHelpTopicMenuOpen }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)) },
-                        React__namespace.createElement(reactCore.SelectList, null, helpTopicOptions))),
-                    React__namespace.createElement(reactCore.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__namespace.createElement(reactCore.DrawerActions, null,
-                    React__namespace.createElement(reactCore.DrawerCloseButton, { onClick: onClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))),
-            React__namespace.createElement(reactCore.Divider, null),
-            React__namespace.createElement(reactCore.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 = tslib.__rest(_a, ["helpTopics", "children", "resourceBundle", "language", "loading", "markdown", "contextProps"]);
-    const valuesForHelpTopicContext = useValuesForHelpTopicContext(Object.assign({ helpTopics,
-        language, resourceBundle: Object.assign({}, resourceBundle), loading,
-        markdown }, contextProps));
-    React__namespace.useEffect(() => {
-        if (loading !== valuesForHelpTopicContext.loading) {
-            valuesForHelpTopicContext.setLoading(loading);
-        }
-    }, [loading, valuesForHelpTopicContext]);
-    React__namespace.useEffect(() => {
-        if (helpTopics &&
-            JSON.stringify(helpTopics) !== JSON.stringify(valuesForHelpTopicContext.helpTopics)) {
-            valuesForHelpTopicContext.setHelpTopics(helpTopics);
-        }
-    }, [helpTopics, valuesForHelpTopicContext]);
-    return (React__namespace.createElement(HelpTopicContext.Provider, { value: valuesForHelpTopicContext },
-        React__namespace.createElement(HelpTopicDrawer, Object.assign({}, props), children)));
-};
-const HelpTopicDrawer = (_a) => {
-    var { children } = _a, props = tslib.__rest(_a, ["children"]);
-    const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React__namespace.useContext(HelpTopicContext);
-    const onClose = () => {
-        setActiveHelpTopicByName('');
-    };
-    const panelContent = (React__namespace.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics, onClose: onClose }));
-    return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(reactCore.Drawer, Object.assign({ isExpanded: !!activeHelpTopic, isInline: true }, props), children ? (React__namespace.createElement(reactCore.DrawerContent, { panelContent: panelContent },
-            React__namespace.createElement(reactCore.DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React__namespace.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] = React.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:
+const QuickStartFooter = ({ status, taskNumber, totalTasks, onNext, onBack, footerClass, quickStartId, }) => {
+    const { restartQuickStart, getResource } = React__namespace.useContext(QuickStartContext);
+    const PrimaryButtonText = React__namespace.useMemo(() => ({
+        START: getResource('Start'),
+        CONTINUE: getResource('Continue'),
+        NEXT: getResource('Next'),
+        CLOSE: getResource('Close'),
+    }), [getResource]);
+    const SecondaryButtonText = React__namespace.useMemo(() => ({
+        BACK: getResource('Back'),
+        RESTART: getResource('Restart'),
+    }), [getResource]);
+    const onRestart = React__namespace.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        restartQuickStart(quickStartId, totalTasks);
+    }, [quickStartId, restartQuickStart, totalTasks]);
+    const getPrimaryButtonText = React__namespace.useMemo(() => {
+        if (status === exports.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__namespace.useMemo(() => (React__namespace.createElement(reactCore.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__namespace.useMemo(() => taskNumber === -1 && status !== exports.QuickStartStatus.NOT_STARTED ? (React__namespace.createElement(reactCore.Button, { variant: "secondary", onClick: onRestart, "data-testid": "qs-drawer-restart" }, SecondaryButtonText.RESTART)) : (taskNumber > -1 && (React__namespace.createElement(reactCore.Button, { variant: "secondary", onClick: onBack, "data-testid": "qs-drawer-back" }, SecondaryButtonText.BACK))), [onRestart, onBack, SecondaryButtonText, status, taskNumber]);
+    const getSideNoteAction = React__namespace.useMemo(() => taskNumber !== -1 && (React__namespace.createElement(reactCore.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__namespace.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__namespace.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__namespace.useCallback((quickStartId) => setActiveQuickStart(quickStartId), [setActiveQuickStart]);
+    const handleTaskStatusChange = React__namespace.useCallback((newTaskStatus) => setQuickStartTaskStatus(newTaskStatus), [setQuickStartTaskStatus]);
+    const getQuickStartActiveTask = React__namespace.useCallback(() => {
+        let activeTaskNumber = 0;
+        while (activeTaskNumber !== totalTasks &&
+            activeQuickStartState[`taskStatus${activeTaskNumber}`] !== exports.QuickStartTaskStatus.INIT) {
+            activeTaskNumber++;
+        }
+        return activeTaskNumber;
+    }, [totalTasks, activeQuickStartState]);
+    const handleQuickStartContinue = React__namespace.useCallback(() => {
+        const activeTaskNumber = getQuickStartActiveTask();
+        setQuickStartTaskNumber(name, activeTaskNumber);
+    }, [getQuickStartActiveTask, setQuickStartTaskNumber, name]);
+    const handleNext = React__namespace.useCallback(() => {
+        if (status === exports.QuickStartStatus.COMPLETE && taskNumber === totalTasks) {
+            return handleQuickStartChange('');
+        }
+        if (status !== exports.QuickStartStatus.NOT_STARTED && taskNumber === -1) {
+            return handleQuickStartContinue();
+        }
+        return nextStep(totalTasks);
+    }, [handleQuickStartChange, nextStep, status, taskNumber, totalTasks, handleQuickStartContinue]);
+    const handleBack = React__namespace.useCallback(() => previousStep(), [previousStep]);
+    const handleTaskSelect = React__namespace.useCallback((selectedTaskNumber) => {
+        setQuickStartTaskNumber(name, selectedTaskNumber);
+    }, [name, setQuickStartTaskNumber]);
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(QuickStartContent, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskSelect: handleTaskSelect, onTaskReview: handleTaskStatusChange, onQuickStartChange: handleQuickStartChange, ref: contentRef }),
+        React__namespace.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__namespace.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 = tslib.__rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
+    const titleRef = React__namespace.useRef(null);
+    const { getResource, activeQuickStartState } = React__namespace.useContext(QuickStartContext);
+    const [contentRef, setContentRef] = React__namespace.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 = reactStyles.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 = reactStyles.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__namespace.useEffect(() => {
+        if (quickStart) {
+            titleRef.current.focus();
+        }
+    }, [quickStart]);
+    const content = quickStart ? (React__namespace.createElement(reactCore.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__namespace.createElement("div", { className: headerClasses },
+            React__namespace.createElement(reactCore.DrawerHead, null,
+                React__namespace.createElement("div", { className: "pfext-quick-start-panel-content__title", tabIndex: -1, ref: titleRef },
+                    React__namespace.createElement(reactCore.Title, { headingLevel: "h2", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-v5-global--spacer--md)' } },
+                        React__namespace.createElement("span", { dangerouslySetInnerHTML: {
+                                __html: removeParagraphWrap(markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName)),
+                            } }),
+                        ' ',
+                        React__namespace.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__namespace.createElement(reactCore.DrawerActions, null,
+                    React__namespace.createElement(reactCore.DrawerCloseButton, { onClick: handleClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))))),
+        React__namespace.createElement(reactCore.DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
+            React__namespace.createElement(QuickStartController, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, footerClass: footerClass, contentRef: setContentRef })))) : null;
+    if (appendTo) {
+        return ReactDOM__namespace.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 = tslib.__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__namespace.useEffect(() => {
+        if (quickStarts &&
+            JSON.stringify(quickStarts) !== JSON.stringify(valuesForQuickstartContext.allQuickStarts)) {
+            valuesForQuickstartContext.setAllQuickStarts(quickStarts);
+        }
+    }, [quickStarts, valuesForQuickstartContext]);
+    React__namespace.useEffect(() => {
+        if (loading !== valuesForQuickstartContext.loading) {
+            valuesForQuickstartContext.setLoading(loading);
+        }
+    }, [loading, valuesForQuickstartContext]);
+    const drawerProps = Object.assign({ appendTo,
+        fullWidth,
+        onCloseInProgress,
+        onCloseNotInProgress }, props);
+    return (React__namespace.createElement(QuickStartContext.Provider, { value: valuesForQuickstartContext },
+        React__namespace.createElement(QuickStartDrawer, Object.assign({}, drawerProps), children)));
+};
+const QuickStartDrawer = (_a) => {
+    var { quickStarts = [], children, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress } = _a, props = tslib.__rest(_a, ["quickStarts", "children", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress"]);
+    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, useLegacyHeaderColors, } = React__namespace.useContext(QuickStartContext);
+    const combinedQuickStarts = allQuickStarts.concat(quickStarts);
+    React__namespace.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__namespace.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__namespace.useState(false);
+    const activeQuickStartStatus = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.status;
+    const onClose = () => setActiveQuickStart('');
+    const handleClose = () => {
+        if (activeQuickStartStatus === exports.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__namespace.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth, headerVariant: useLegacyHeaderColors ? '' : 'blue-white' }, fullWidthPanelStyle)));
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(reactCore.Drawer, Object.assign({ isExpanded: !!activeQuickStartID, isInline: true }, props), children ? (React__namespace.createElement(reactCore.DrawerContent, Object.assign({ panelContent: panelContent }, fullWidthBodyStyle),
+            React__namespace.createElement(reactCore.DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React__namespace.createElement("div", { className: "pf-v5-c-drawer__main" }, panelContent))),
+        React__namespace.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
+};
+
+const HelpTopicContextDefaults = {
+    helpTopics: [],
+    setHelpTopics: () => { },
+    activeHelpTopic: null,
+    setActiveHelpTopicByName: () => { },
+    filteredHelpTopics: [],
+    setFilteredHelpTopics: () => { },
+    loading: false,
+};
+const HelpTopicContext = React__default['default'].createContext(HelpTopicContextDefaults);
+const useValuesForHelpTopicContext = (value = {}) => {
+    const combinedValue = Object.assign(Object.assign({}, HelpTopicContextDefaults), value);
+    const [loading, setLoading] = React__default['default'].useState(combinedValue.loading);
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    const [helpTopics, setHelpTopics] = React__default['default'].useState(combinedValue.helpTopics || []);
+    const [activeHelpTopic, setActiveHelpTopic] = React__default['default'].useState(combinedValue.activeHelpTopic || null);
+    const setActiveHelpTopicByName = React__default['default'].useCallback((helpTopicName) => {
+        const topic = helpTopics.find((t) => t.name === helpTopicName);
+        if (!helpTopicName) {
+            setActiveHelpTopic(null);
+            return;
+        }
+        setActiveHelpTopic(topic);
+    }, [helpTopics]);
+    const [filteredHelpTopics, setFilteredHelpTopics] = React__default['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 = tslib.__rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
+    const { setActiveHelpTopicByName } = React__namespace.useContext(HelpTopicContext);
+    const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React__namespace.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__namespace.createElement(reactCore.SelectOption, { key: topic.name, value: topic.name }, topic.title)));
+    const paddingContainer = (children) => React__namespace.createElement("div", { style: { padding: '24px' } }, children);
+    const panelBodyItems = (React__namespace.createElement(React__namespace.Fragment, null,
+        paddingContainer(React__namespace.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__namespace.createElement(reactCore.Divider, null),
+        paddingContainer(React__namespace.createElement(reactCore.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__namespace.createElement(reactCore.StackItem, { key: index },
+            React__namespace.createElement(reactCore.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__namespace.createElement(ExternalLinkAltIcon__default['default'], null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href))))))));
+    const content = (React__namespace.createElement(reactCore.DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base" }, props),
+        React__namespace.createElement("div", null,
+            React__namespace.createElement(reactCore.DrawerHead, null,
+                React__namespace.createElement("div", { className: "pfext-quick-start-panel-content__title" },
+                    helpTopicOptions && (React__namespace.createElement(reactCore.Select, { isPlain: true, id: "help-topics-select", selected: activeHelpTopic, isOpen: isHelpTopicMenuOpen, onSelect: onSelectHelpTopic, onOpenChange: (isOpen) => setIsHelpTopicMenuOpen(isOpen), toggle: (toggleRef) => (React__namespace.createElement(reactCore.MenuToggle, { isFullWidth: true, ref: toggleRef, icon: React__namespace.createElement(BarsIcon__default['default'], null), onClick: toggleHelpTopicMenu, isExpanded: isHelpTopicMenuOpen }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)) },
+                        React__namespace.createElement(reactCore.SelectList, null, helpTopicOptions))),
+                    React__namespace.createElement(reactCore.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__namespace.createElement(reactCore.DrawerActions, null,
+                    React__namespace.createElement(reactCore.DrawerCloseButton, { onClick: onClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))),
+            React__namespace.createElement(reactCore.Divider, null),
+            React__namespace.createElement(reactCore.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 = tslib.__rest(_a, ["helpTopics", "children", "resourceBundle", "language", "loading", "markdown", "contextProps"]);
+    const valuesForHelpTopicContext = useValuesForHelpTopicContext(Object.assign({ helpTopics,
+        language, resourceBundle: Object.assign({}, resourceBundle), loading,
+        markdown }, contextProps));
+    React__namespace.useEffect(() => {
+        if (loading !== valuesForHelpTopicContext.loading) {
+            valuesForHelpTopicContext.setLoading(loading);
+        }
+    }, [loading, valuesForHelpTopicContext]);
+    React__namespace.useEffect(() => {
+        if (helpTopics &&
+            JSON.stringify(helpTopics) !== JSON.stringify(valuesForHelpTopicContext.helpTopics)) {
+            valuesForHelpTopicContext.setHelpTopics(helpTopics);
+        }
+    }, [helpTopics, valuesForHelpTopicContext]);
+    return (React__namespace.createElement(HelpTopicContext.Provider, { value: valuesForHelpTopicContext },
+        React__namespace.createElement(HelpTopicDrawer, Object.assign({}, props), children)));
+};
+const HelpTopicDrawer = (_a) => {
+    var { children } = _a, props = tslib.__rest(_a, ["children"]);
+    const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React__namespace.useContext(HelpTopicContext);
+    const onClose = () => {
+        setActiveHelpTopicByName('');
+    };
+    const panelContent = (React__namespace.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics, onClose: onClose }));
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        React__namespace.createElement(reactCore.Drawer, Object.assign({ isExpanded: !!activeHelpTopic, isInline: true }, props), children ? (React__namespace.createElement(reactCore.DrawerContent, { panelContent: panelContent },
+            React__namespace.createElement(reactCore.DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React__namespace.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] = React.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:
           
-                    <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;
 };
 
 exports.Box = Box;