@patternfly/quickstarts 0.0.0

package/dist/index.es.js

@@ -0,0 +1,2593 @@
+import * as React from 'react';
+import React__default, { createContext, useCallback, useEffect, useState } from 'react';
+import { getUniqueId, Card, CardHeader, CardTitle, CardBody, CardFooter, Modal as Modal$1, useIsomorphicLayoutEffect, Tooltip, Alert, CodeBlock, Accordion, AccordionItem, AccordionToggle, AccordionContent, Popover, PopoverPosition, Button, Icon, Text, TextVariants, TextList, TextListItem, Flex, FlexItem, Title, Label, Gallery, GalleryItem, ToolbarItem, SearchInput, Select, SelectList, SelectOption, MenuToggle, Badge, Toolbar, ToolbarContent, EmptyState, EmptyStateHeader, EmptyStateIcon, EmptyStateBody, EmptyStateFooter, EmptyStateActions, Divider, ModalVariant, WizardNavItem, List, ExpandableSection, ListItem, Radio, DrawerPanelContent, DrawerHead, DrawerActions, DrawerCloseButton, DrawerPanelBody, Drawer, DrawerContent, DrawerContentBody, Stack, StackItem } from '@patternfly/react-core';
+import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
+import { css } from '@patternfly/react-styles';
+import { __rest } from 'tslib';
+import '@patternfly/react-styles/css/components/Form/form';
+import RocketIcon from '@patternfly/react-icons/dist/js/icons/rocket-icon';
+import * as ReactDOM from 'react-dom';
+import { renderToStaticMarkup } from 'react-dom/server';
+import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
+import LightbulbIcon from '@patternfly/react-icons/dist/js/icons/lightbulb-icon';
+import FireIcon from '@patternfly/react-icons/dist/js/icons/fire-icon';
+import { Converter } from 'showdown';
+import SyncAltIcon from '@patternfly/react-icons/dist/js/icons/sync-alt-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+import '@patternfly/react-tokens/dist/esm/global_danger_color_100';
+import '@patternfly/react-tokens/dist/esm/global_palette_blue_300';
+import okColor from '@patternfly/react-tokens/dist/esm/global_palette_green_500';
+import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
+import OutlinedClockIcon from '@patternfly/react-icons/dist/js/icons/outlined-clock-icon';
+import OutlinedBookmarkIcon from '@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon';
+import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
+import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+var m,x=m||(m={});x.Pop="POP";x.Push="PUSH";x.Replace="REPLACE";var y="production"!==process.env.NODE_ENV?function(a){return Object.freeze(a)}:function(a){return a};function z(a,b){if(!a){"undefined"!==typeof console&&console.warn(b);try{throw Error(b);}catch(g){}}}function A(a){a.preventDefault();a.returnValue="";}
+function B(){var a=[];return {get length(){return a.length},push:function(b){a.push(b);return function(){a=a.filter(function(a){return a!==b});}},call:function(b){a.forEach(function(a){return a&&a(b)});}}}function D(){return Math.random().toString(36).substr(2,8)}function E(a){var b=a.pathname,g=a.search;a=a.hash;return (void 0===b?"/":b)+(void 0===g?"":g)+(void 0===a?"":a)}
+function F(a){var b={};if(a){var g=a.indexOf("#");0<=g&&(b.hash=a.substr(g),a=a.substr(0,g));g=a.indexOf("?");0<=g&&(b.search=a.substr(g),a=a.substr(0,g));a&&(b.pathname=a);}return b}
+function createBrowserHistory(a){function b(){var a=h.location,d=f.state||{};return [d.idx,y({pathname:a.pathname,search:a.search,hash:a.hash,state:d.usr||null,key:d.key||"default"})]}function g(a){return "string"===typeof a?a:E(a)}function t(a,d){void 0===d&&(d=null);return y(_extends({},l,{},"string"===typeof a?F(a):a,{state:d,key:D()}))}function v(a){n=a;a=b();q=a[0];l=a[1];c.call({action:n,location:l});}function w(a,d){function c(){w(a,d);}var k=m.Push,C=t(a,d);if(!e.length||(e.call({action:k,
+location:C,retry:c}),!1)){var b=[{usr:C.state,key:C.key,idx:q+1},g(C)];C=b[0];b=b[1];try{f.pushState(C,"",b);}catch(G){h.location.assign(b);}v(k);}}function u(a,d){function c(){u(a,d);}var b=m.Replace,k=t(a,d);e.length&&(e.call({action:b,location:k,retry:c}),1)||(k=[{usr:k.state,key:k.key,idx:q},g(k)],f.replaceState(k[0],"",k[1]),v(b));}function r(a){f.go(a);}void 0===a&&(a={});a=a.window;var h=void 0===a?document.defaultView:a,f=h.history,p=null;h.addEventListener("popstate",function(){if(p)e.call(p),
+p=null;else {var a=m.Pop,d=b(),c=d[0];d=d[1];if(e.length)if(null!=c){var f=q-c;f&&(p={action:a,location:d,retry:function(){r(-1*f);}},r(f));}else "production"!==process.env.NODE_ENV?z(!1,"You are trying to block a POP navigation to a location that was not created by the history library. The block will fail silently in production, but in general you should do all navigation with the history library (instead of using window.history.pushState directly) to avoid this situation."):void 0;else v(a);}});var n=
+m.Pop;a=b();var q=a[0],l=a[1],c=B(),e=B();null==q&&(q=0,f.replaceState(_extends({},f.state,{idx:q}),""));return {get action(){return n},get location(){return l},createHref:g,push:w,replace:u,go:r,back:function(){r(-1);},forward:function(){r(1);},listen:function(a){return c.push(a)},block:function(a){var d=e.push(a);1===e.length&&h.addEventListener("beforeunload",A);return function(){d();e.length||h.removeEventListener("beforeunload",A);}}}}function createMemoryHistory(a){function b(a,b){void 0===b&&(b=null);return y(_extends({},n,{},"string"===typeof a?F(a):a,{state:b,key:D()}))}function g(a,b,f){return !l.length||(l.call({action:a,location:b,retry:f}),!1)}function t(a,b){p=a;n=b;q.call({action:p,location:n});}function v(a,e){var c=m.Push,d=b(a,e);"production"!==process.env.NODE_ENV?z("/"===n.pathname.charAt(0),"Relative pathnames are not supported in memory history.push("+JSON.stringify(a)+")"):void 0;g(c,d,function(){v(a,e);})&&
+(f+=1,h.splice(f,h.length,d),t(c,d));}function w(a,e){var c=m.Replace,d=b(a,e);"production"!==process.env.NODE_ENV?z("/"===n.pathname.charAt(0),"Relative pathnames are not supported in memory history.replace("+JSON.stringify(a)+")"):void 0;g(c,d,function(){w(a,e);})&&(h[f]=d,t(c,d));}function u(a){var b=Math.min(Math.max(f+a,0),h.length-1),c=m.Pop,d=h[b];g(c,d,function(){u(a);})&&(f=b,t(c,d));}void 0===a&&(a={});var r=a;a=r.initialEntries;r=r.initialIndex;var h=(void 0===a?["/"]:a).map(function(a){var b=
+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)}}}
+
+var QuickStartStatus;
+(function (QuickStartStatus) {
+    QuickStartStatus["COMPLETE"] = "Complete";
+    QuickStartStatus["IN_PROGRESS"] = "In Progress";
+    QuickStartStatus["NOT_STARTED"] = "Not started";
+})(QuickStartStatus || (QuickStartStatus = {}));
+var QuickStartTaskStatus;
+(function (QuickStartTaskStatus) {
+    QuickStartTaskStatus["INIT"] = "Initial";
+    QuickStartTaskStatus["VISITED"] = "Visited";
+    QuickStartTaskStatus["REVIEW"] = "Review";
+    QuickStartTaskStatus["SUCCESS"] = "Success";
+    QuickStartTaskStatus["FAILED"] = "Failed";
+})(QuickStartTaskStatus || (QuickStartTaskStatus = {}));
+
+const QUICKSTART_SEARCH_FILTER_KEY = 'keyword';
+const QUICKSTART_STATUS_FILTER_KEY = 'status';
+const QUICKSTART_ID_FILTER_KEY = 'quickstart';
+const QUICKSTART_TASKS_INITIAL_STATES = [
+    QuickStartTaskStatus.INIT,
+    QuickStartTaskStatus.VISITED,
+];
+const 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);
+};
+
+var Status$1 = "Status";
+var Prerequisites = "Prerequisites";
+var Complete = "Complete";
+var Start = "Start";
+var Continue = "Continue";
+var Next = "Next";
+var Close = "Close";
+var Back = "Back";
+var Restart = "Restart";
+var Yes = "Yes";
+var No = "No";
+var Cancel = "Cancel";
+var Leave = "Leave";
+var Type = "Quick start";
+var en = {
+	"No results found": "No results found",
+	"No results match the filter criteria. Remove filters or clear all filters to show results.": "No results match the filter criteria. Remove filters or clear all filters to show results.",
+	"Clear all filters": "Clear all filters",
+	"Quick Starts": "Quick Starts",
+	"Complete ({{statusCount, number}})": "Complete ({{statusCount, number}})",
+	"In progress ({{statusCount, number}})": "In progress ({{statusCount, number}})",
+	"Not started ({{statusCount, number}})": "Not started ({{statusCount, number}})",
+	"Filter by keyword...": "Filter by keyword...",
+	"Select filter": "Select filter",
+	Status: Status$1,
+	"{{count, number}} item": "{{count, number}} item",
+	"{{count, number}} item_plural": "{{count, number}} items",
+	"Prerequisites ({{totalPrereqs}})": "Prerequisites ({{totalPrereqs}})",
+	"View Prerequisites ({{totalPrereqs}})": "View Prerequisites ({{totalPrereqs}})",
+	Prerequisites: Prerequisites,
+	"Show prerequisites": "Show prerequisites",
+	Complete: Complete,
+	"In progress": "In progress",
+	"Not started": "Not started",
+	"{{duration, number}} minutes": "{{duration, number}} minutes",
+	"One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.": "One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.",
+	"Start {{nextQSDisplayName}} quick start": "Start {{nextQSDisplayName}} quick start",
+	Start: Start,
+	Continue: Continue,
+	Next: Next,
+	Close: Close,
+	Back: Back,
+	Restart: Restart,
+	"In this quick start, you will complete {{count, number}} task": "In this quick start, you will complete {{count, number}} task",
+	"In this quick start, you will complete {{count, number}} task_plural": "In this quick start, you will complete {{count, number}} tasks",
+	"{{taskIndex, number}}": "{{taskIndex, number}}",
+	"Check your work": "Check your work",
+	Yes: Yes,
+	No: No,
+	"{{index, number}} of {{tasks, number}}": "{{index, number}} of {{tasks, number}}",
+	"Leave quick start?": "Leave quick start?",
+	Cancel: Cancel,
+	Leave: Leave,
+	"Your progress will be saved.": "Your progress will be saved.",
+	"Not available": "Not available",
+	"Copy to clipboard": "Copy to clipboard",
+	"Successfully copied to clipboard!": "Successfully copied to clipboard!",
+	Type: Type,
+	"{{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 '';
+    }
+}
+
+const QUICK_START_NAME = 'console.openshift.io/name';
+const getQuickStartByName = (name, quickStarts) => quickStarts.find((quickStart) => quickStart.metadata.name === name);
+const getQuickStartStatus = (allQuickStartStates, quickStartID) => { var _a, _b; return (_b = (_a = allQuickStartStates === null || allQuickStartStates === void 0 ? void 0 : allQuickStartStates[quickStartID]) === null || _a === void 0 ? void 0 : _a.status) !== null && _b !== void 0 ? _b : QuickStartStatus.NOT_STARTED; };
+const getTaskStatusKey = (taskNumber) => `taskStatus${taskNumber}`;
+const getQuickStartStatusCount = (allQuickStartStates, quickStarts) => quickStarts.reduce((totals, item) => {
+    totals[getQuickStartStatus(allQuickStartStates, item.metadata.name)]++;
+    return totals;
+}, {
+    [QuickStartStatus.IN_PROGRESS]: 0,
+    [QuickStartStatus.COMPLETE]: 0,
+    [QuickStartStatus.NOT_STARTED]: 0,
+});
+const getDisabledQuickStarts = () => {
+    var _a, _b;
+    let disabledQuickStarts = [];
+    const quickStartServerData = (_a = window.SERVER_FLAGS) === null || _a === void 0 ? void 0 : _a.quickStarts;
+    try {
+        if (quickStartServerData) {
+            disabledQuickStarts = (_b = JSON.parse(quickStartServerData).disabled) !== null && _b !== void 0 ? _b : [];
+        }
+    }
+    catch (e) {
+        // eslint-disable-next-line no-console
+        console.error('error while parsing SERVER_FLAG.quickStarts', e);
+    }
+    return disabledQuickStarts;
+};
+const isDisabledQuickStart = (quickstart, disabledQuickStarts) => {
+    var _a, _b;
+    const quickStartName = (_b = (_a = quickstart.metadata.annotations) === null || _a === void 0 ? void 0 : _a[QUICK_START_NAME]) !== null && _b !== void 0 ? _b : quickstart.metadata.name;
+    return disabledQuickStarts.includes(quickStartName);
+};
+const filterQuickStarts = (quickStarts, filterText, statusFilters, allQuickStartStates) => {
+    const searchText = filterText.toLowerCase();
+    return quickStarts.filter(({ metadata: { name }, spec: { displayName, prerequisites = [], description } }) => {
+        const matchesFilter = statusFilters.length > 0
+            ? statusFilters.includes(getQuickStartStatus(allQuickStartStates, name))
+            : true;
+        const matchesText = displayName.toLowerCase().includes(searchText) ||
+            description.toLowerCase().includes(searchText) ||
+            prerequisites.some((text) => text.toLowerCase().includes(searchText));
+        return matchesFilter && matchesText;
+    });
+};
+const camelize = (str) => str.replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, function (match, index) {
+    if (+match === 0) {
+        return '';
+    } // or if (/\s+/.test(match)) for white spaces
+    return index === 0 ? match.toLowerCase() : match.toUpperCase();
+});
+
+const pluralResolver = new PluralResolver({ simplifyPluralSuffix: true });
+const getDefaultQuickStartState = (totalTasks, initialStatus) => {
+    const defaultQuickStartState = {
+        status: initialStatus || QuickStartStatus.NOT_STARTED,
+        taskNumber: -1,
+    };
+    if (totalTasks) {
+        for (let i = 0; i < totalTasks; i++) {
+            defaultQuickStartState[getTaskStatusKey(i)] = QuickStartTaskStatus.INIT;
+        }
+    }
+    return defaultQuickStartState;
+};
+const QuickStartContextDefaults = {
+    allQuickStarts: [],
+    activeQuickStartID: '',
+    allQuickStartStates: {},
+    activeQuickStartState: {},
+    setAllQuickStarts: () => { },
+    resourceBundle: en,
+    getResource: (resource) => resource,
+    language: 'en',
+    useQueryParams: true,
+    filter: {
+        keyword: '',
+        status: {
+            statusTypes: {},
+            statusFilters: [],
+        },
+    },
+    setFilter: () => { },
+    footer: null,
+    useLegacyHeaderColors: false,
+    markdown: null,
+    loading: false,
+    alwaysShowTaskReview: true,
+};
+const QuickStartContext = createContext(QuickStartContextDefaults);
+const getResource = (resource, options, resourceBundle, lng) => {
+    if (options && !isNaN(options.count)) {
+        const suffix = pluralResolver.getSuffix(lng, options.count);
+        if (suffix && resourceBundle[`${resource}_${suffix}`]) {
+            // needs plural
+            return resourceBundle[`${resource}_${suffix}`];
+        }
+    }
+    return (resourceBundle && resourceBundle[resource]) || resource;
+};
+const useValuesForQuickStartContext = (value = {}) => {
+    var _a, _b;
+    const combinedValue = Object.assign(Object.assign({}, QuickStartContextDefaults), value);
+    const { activeQuickStartID, setActiveQuickStartID, setAllQuickStartStates, useQueryParams, allQuickStartStates, allQuickStarts = [], footer, useLegacyHeaderColors, markdown, } = combinedValue;
+    const [quickStarts, setQuickStarts] = React__default.useState(combinedValue.allQuickStarts || []);
+    const [resourceBundle, setResourceBundle] = React__default.useState(Object.assign(Object.assign({}, en), combinedValue.resourceBundle));
+    const [language, setLanguage] = React__default.useState(combinedValue.language);
+    const changeResourceBundle = (bundle, lng) => {
+        lng && setLanguage(lng);
+        setResourceBundle(Object.assign(Object.assign({}, en), bundle));
+    };
+    const findResource = useCallback((resource, count) => getResource(resource, count !== undefined ? { count } : null, resourceBundle, language), [resourceBundle, language]);
+    const [loading, setLoading] = React__default.useState(combinedValue.loading);
+    const [alwaysShowTaskReview, setAlwaysShowTaskReview] = React__default.useState(combinedValue.alwaysShowTaskReview);
+    const initialSearchParams = new URLSearchParams(window.location.search);
+    const initialSearchQuery = initialSearchParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
+    const initialStatusFilters = ((_a = initialSearchParams.get(QUICKSTART_STATUS_FILTER_KEY)) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
+    const quickStartStatusCount = getQuickStartStatusCount(allQuickStartStates, allQuickStarts);
+    const [statusTypes, setStatusTypes] = React__default.useState({
+        [QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.COMPLETE]),
+        [QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.IN_PROGRESS]),
+        [QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', quickStartStatusCount[QuickStartStatus.NOT_STARTED]),
+    });
+    const [statusFilters, setStatusFilters] = React__default.useState(initialStatusFilters);
+    const [filterKeyword, setFilterKeyword] = React__default.useState(initialSearchQuery);
+    const setFilter = (type, val) => {
+        if (type === 'keyword') {
+            setFilterKeyword(val);
+        }
+        else if (type === 'status') {
+            setStatusFilters(val);
+        }
+    };
+    React__default.useEffect(() => {
+        const updatedQuickStartStatusCount = getQuickStartStatusCount(allQuickStartStates, quickStarts);
+        setStatusTypes({
+            [QuickStartStatus.COMPLETE]: findResource('Complete ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.COMPLETE]),
+            [QuickStartStatus.IN_PROGRESS]: findResource('In progress ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.IN_PROGRESS]),
+            [QuickStartStatus.NOT_STARTED]: findResource('Not started ({{statusCount, number}})').replace('{{statusCount, number}}', updatedQuickStartStatusCount[QuickStartStatus.NOT_STARTED]),
+        });
+    }, [allQuickStartStates, findResource, quickStarts]);
+    const updateAllQuickStarts = (qs) => {
+        setQuickStarts(qs);
+    };
+    const setActiveQuickStart = useCallback((quickStartId, totalTasks) => {
+        setActiveQuickStartID((id) => {
+            if (!quickStartId || id === quickStartId) {
+                useQueryParams && removeQueryArgument(QUICKSTART_ID_FILTER_KEY);
+                return '';
+            }
+            useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, quickStartId);
+            return quickStartId;
+        });
+        setAllQuickStartStates((qs) => !quickStartId || qs[quickStartId]
+            ? qs
+            : Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks) }));
+    }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
+    const startQuickStart = useCallback((quickStartId, totalTasks) => {
+        setActiveQuickStartID((id) => {
+            if (!id || id !== quickStartId) {
+                useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, quickStartId);
+                return quickStartId;
+            }
+            useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, id);
+            return id;
+        });
+        setAllQuickStartStates((qs) => {
+            if (qs.hasOwnProperty(quickStartId)) {
+                return Object.assign(Object.assign({}, qs), { [quickStartId]: Object.assign(Object.assign({}, qs[quickStartId]), { status: QuickStartStatus.IN_PROGRESS }) });
+            }
+            return Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, QuickStartStatus.IN_PROGRESS) });
+        });
+    }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
+    const restartQuickStart = useCallback((quickStartId, totalTasks) => {
+        setActiveQuickStartID((id) => {
+            if (!id || id !== quickStartId) {
+                useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, quickStartId);
+                return quickStartId;
+            }
+            useQueryParams && setQueryArgument(QUICKSTART_ID_FILTER_KEY, id);
+            return id;
+        });
+        setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [quickStartId]: getDefaultQuickStartState(totalTasks, QuickStartStatus.NOT_STARTED) })));
+    }, [setActiveQuickStartID, setAllQuickStartStates, useQueryParams]);
+    // When alwaysShowTaskReview preference is enabled, skip visited step and go directly to review
+    const stepAfterInitial = alwaysShowTaskReview
+        ? QuickStartTaskStatus.REVIEW
+        : QuickStartTaskStatus.VISITED;
+    const nextStep = useCallback((totalTasks) => {
+        if (!activeQuickStartID) {
+            return;
+        }
+        setAllQuickStartStates((qs) => {
+            const quickStart = qs[activeQuickStartID];
+            const status = quickStart === null || quickStart === void 0 ? void 0 : quickStart.status;
+            const taskNumber = quickStart === null || quickStart === void 0 ? void 0 : quickStart.taskNumber;
+            const taskStatus = quickStart[getTaskStatusKey(taskNumber)];
+            let updatedStatus;
+            let updatedTaskNumber;
+            let updatedTaskStatus;
+            if (status === QuickStartStatus.NOT_STARTED) {
+                updatedStatus = QuickStartStatus.IN_PROGRESS;
+            }
+            else if (status === QuickStartStatus.IN_PROGRESS &&
+                !QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) &&
+                taskNumber === totalTasks - 1) {
+                updatedStatus = QuickStartStatus.COMPLETE;
+            }
+            if (taskStatus === QuickStartTaskStatus.VISITED) {
+                updatedTaskStatus = QuickStartTaskStatus.REVIEW;
+            }
+            if (taskNumber < totalTasks && !updatedTaskStatus) {
+                updatedTaskNumber = taskNumber + 1;
+            }
+            const markInitialStepVisitedOrReview = updatedTaskNumber > -1 &&
+                quickStart[getTaskStatusKey(updatedTaskNumber)] === QuickStartTaskStatus.INIT
+                ? stepAfterInitial
+                : quickStart[getTaskStatusKey(updatedTaskNumber)];
+            const newState = Object.assign(Object.assign({}, qs), { [activeQuickStartID]: Object.assign(Object.assign(Object.assign(Object.assign({}, quickStart), (updatedStatus ? { status: updatedStatus } : {})), (updatedTaskNumber > -1
+                    ? {
+                        taskNumber: updatedTaskNumber,
+                        [getTaskStatusKey(updatedTaskNumber)]: markInitialStepVisitedOrReview,
+                    }
+                    : {})), (updatedTaskStatus ? { [getTaskStatusKey(taskNumber)]: updatedTaskStatus } : {})) });
+            return newState;
+        });
+    }, [activeQuickStartID, setAllQuickStartStates, stepAfterInitial]);
+    const previousStep = useCallback(() => {
+        setAllQuickStartStates((qs) => {
+            const quickStart = qs[activeQuickStartID];
+            const taskNumber = quickStart === null || quickStart === void 0 ? void 0 : quickStart.taskNumber;
+            if (taskNumber < 0) {
+                return qs;
+            }
+            return Object.assign(Object.assign({}, qs), { [activeQuickStartID]: Object.assign(Object.assign({}, quickStart), { taskNumber: taskNumber - 1 }) });
+        });
+    }, [activeQuickStartID, setAllQuickStartStates]);
+    const setQuickStartTaskNumber = useCallback((quickStartId, taskNumber) => {
+        setAllQuickStartStates((qs) => {
+            const quickStart = qs[quickStartId];
+            const status = quickStart === null || quickStart === void 0 ? void 0 : quickStart.status;
+            let updatedStatus;
+            if (taskNumber > -1 && status === QuickStartStatus.NOT_STARTED) {
+                updatedStatus = QuickStartStatus.IN_PROGRESS;
+            }
+            let updatedTaskStatus = {};
+            for (let taskIndex = 0; taskIndex <= taskNumber; taskIndex++) {
+                const taskStatus = quickStart[getTaskStatusKey(taskIndex)];
+                const newTaskStatus = taskStatus === QuickStartTaskStatus.INIT ? stepAfterInitial : undefined;
+                if (newTaskStatus) {
+                    updatedTaskStatus = Object.assign(Object.assign({}, updatedTaskStatus), { [getTaskStatusKey(taskIndex)]: newTaskStatus });
+                }
+            }
+            const updatedQuickStart = Object.assign(Object.assign(Object.assign(Object.assign({}, quickStart), (updatedStatus ? { status: updatedStatus } : {})), { taskNumber }), updatedTaskStatus);
+            return Object.assign(Object.assign({}, qs), { [quickStartId]: updatedQuickStart });
+        });
+    }, [setAllQuickStartStates, stepAfterInitial]);
+    const setQuickStartTaskStatus = useCallback((taskStatus) => {
+        const quickStart = allQuickStartStates[activeQuickStartID];
+        const { taskNumber } = quickStart;
+        const updatedQuickStart = Object.assign(Object.assign({}, quickStart), { [getTaskStatusKey(taskNumber)]: taskStatus });
+        setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [activeQuickStartID]: updatedQuickStart })));
+    }, [allQuickStartStates, activeQuickStartID, setAllQuickStartStates]);
+    const activeQuickStartState = (_b = allQuickStartStates === null || allQuickStartStates === void 0 ? void 0 : allQuickStartStates[activeQuickStartID]) !== null && _b !== void 0 ? _b : {};
+    const getQuickStartForId = useCallback((id) => allQuickStartStates[id], [
+        allQuickStartStates,
+    ]);
+    return {
+        allQuickStarts: quickStarts,
+        setAllQuickStarts: updateAllQuickStarts,
+        activeQuickStartID,
+        setActiveQuickStartID,
+        allQuickStartStates,
+        setAllQuickStartStates,
+        activeQuickStartState,
+        setActiveQuickStart: value.setActiveQuickStart || setActiveQuickStart,
+        startQuickStart: value.startQuickStart || startQuickStart,
+        restartQuickStart: value.restartQuickStart || restartQuickStart,
+        nextStep: value.nextStep || nextStep,
+        previousStep: value.previousStep || previousStep,
+        setQuickStartTaskNumber,
+        setQuickStartTaskStatus,
+        getQuickStartForId,
+        footer,
+        useLegacyHeaderColors,
+        useQueryParams,
+        markdown,
+        resourceBundle,
+        getResource: findResource,
+        setResourceBundle: changeResourceBundle,
+        language,
+        setLanguage,
+        // revisit if this should be in public context API
+        filter: {
+            keyword: filterKeyword,
+            status: {
+                statusTypes,
+                statusFilters,
+            },
+        },
+        setFilter,
+        loading,
+        setLoading,
+        alwaysShowTaskReview,
+        setAlwaysShowTaskReview,
+    };
+};
+const QuickStartContextProvider = ({ children, value }) => (React__default.createElement(QuickStartContext.Provider, { value: useValuesForQuickStartContext(value) }, children));
+
+const Box = ({ children, className }) => (React.createElement("div", { className: css('pfext-status-box', className) }, children));
+const Loading = ({ className }) => (React.createElement("div", { className: css('pfext-m-loader', className) },
+    React.createElement("div", { className: "pfext-m-loader-dot__one" }),
+    React.createElement("div", { className: "pfext-m-loader-dot__two" }),
+    React.createElement("div", { className: "pfext-m-loader-dot__three" })));
+Loading.displayName = 'Loading';
+const LoadingBox = ({ className, message }) => (React.createElement(Box, { className: css('pfext-status-box--loading', className) },
+    React.createElement(Loading, null),
+    message && React.createElement("div", { className: "pfext-status-box__loading-message" }, message)));
+LoadingBox.displayName = 'LoadingBox';
+const EmptyBox = ({ label }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    return (React.createElement(Box, null,
+        React.createElement("div", { "data-test": "empty-message", className: "text-center" }, label
+            ? getResource('No {{label}} found').replace('{{label}}', label)
+            : getResource('Not found'))));
+};
+EmptyBox.displayName = 'EmptyBox';
+
+const MEMO = {};
+const CamelCaseWrap = ({ value, dataTest }) => {
+    if (!value) {
+        return '-';
+    }
+    if (MEMO[value]) {
+        return MEMO[value];
+    }
+    // Add word break points before capital letters (but keep consecutive capital letters together).
+    const words = value.match(/[A-Z]+[^A-Z]*|[^A-Z]+/g);
+    const rendered = (React.createElement("span", { "data-test": dataTest }, words.map((word, i) => (React.createElement(React.Fragment, { key: i },
+        word,
+        i !== words.length - 1 && React.createElement("wbr", null))))));
+    MEMO[value] = rendered;
+    return rendered;
+};
+
+class CatalogTile extends React.Component {
+    constructor(props) {
+        super(props);
+        this.handleClick = (e) => {
+            const { onClick, href } = this.props;
+            if (!href) {
+                e.preventDefault();
+            }
+            if (onClick) {
+                onClick(e);
+            }
+        };
+        this.renderBadges = (badges) => {
+            if (!badges || !badges.length) {
+                return null;
+            }
+            return (React.createElement("div", { className: "catalog-tile-pf-badge-container" }, badges.map((badge, index) => (React.createElement("span", { key: `badge-${index}` }, badge)))));
+        };
+        this.generatedId = 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 = __rest(_a, ["id", "className", "featured", "onClick", "href", "icon", "iconImg", "iconAlt", "iconClass", "badges", "title", "vendor", "description", "footer", "ref", "children"]);
+        return (React.createElement(Card, Object.assign({ component: href ? 'a' : 'div', id: id || this.generatedId, href: href || '#', className: css('catalog-tile-pf', { featured }, className), isClickable: !!onClick }, props),
+            (badges.length > 0 || iconImg || iconClass || icon || onClick) && (React.createElement(CardHeader, { actions: { actions: badges.length > 0 && this.renderBadges(badges) }, selectableActions: onClick && {
+                    selectableActionId: id + '-input',
+                    onClickAction: (e) => this.handleClick(e),
+                    selectableActionAriaLabelledby: id
+                } },
+                iconImg && React.createElement("img", { className: "catalog-tile-pf-icon", src: iconImg, alt: iconAlt }),
+                !iconImg && (iconClass || icon) && React.createElement("span", { className: `catalog-tile-pf-icon ${iconClass}` }, icon))),
+            React.createElement(CardTitle, { className: "catalog-tile-pf-header" },
+                React.createElement("div", { className: "catalog-tile-pf-title" }, title),
+                vendor && React.createElement("div", { className: "catalog-tile-pf-subtitle" }, vendor)),
+            (description || children) && (React.createElement(CardBody, { className: "catalog-tile-pf-body" },
+                description && (React.createElement("div", { className: "catalog-tile-pf-description" },
+                    React.createElement("span", { className: css({ 'has-footer': footer }) }, description))),
+                children)),
+            footer && React.createElement(CardFooter, { className: "catalog-tile-pf-footer" }, footer)));
+    }
+}
+CatalogTile.displayName = 'CatalogTile';
+CatalogTile.defaultProps = {
+    id: null,
+    className: '',
+    featured: false,
+    onClick: null,
+    href: null,
+    iconImg: null,
+    iconAlt: '',
+    iconClass: '',
+    icon: null,
+    badges: [],
+    vendor: null,
+    description: null,
+    footer: null,
+    children: null
+};
+
+const Modal = (_a) => {
+    var { isFullScreen = false, className } = _a, props = __rest(_a, ["isFullScreen", "className"]);
+    return (React.createElement(Modal$1, Object.assign({}, props, { className: css('pfext-modal', className), appendTo: () => (isFullScreen ? document.body : document.querySelector('#modal-container')) })));
+};
+
+const getContainer = (container) => typeof container === 'function' ? container() : container;
+const Portal = ({ children, container }) => {
+    const [containerNode, setContainerNode] = React.useState();
+    useIsomorphicLayoutEffect(() => {
+        setContainerNode(getContainer(container) || document.body);
+    }, [container]);
+    return containerNode ? ReactDOM.createPortal(children, containerNode) : null;
+};
+
+const SimplePopper = ({ children }) => {
+    const openProp = true;
+    const nodeRef = React.useRef();
+    const popperRef = React.useRef(null);
+    const [isOpen, setOpenState] = React.useState(openProp);
+    const setOpen = React.useCallback((newOpen) => {
+        setOpenState(newOpen);
+    }, []);
+    React.useEffect(() => {
+        setOpen(openProp);
+    }, [openProp, setOpen]);
+    const onKeyDown = React.useCallback((e) => {
+        if (e.keyCode === 27) {
+            setOpen(false);
+        }
+    }, [setOpen]);
+    const onClickOutside = React.useCallback((e) => {
+        if (!nodeRef.current || (e.target instanceof Node && !nodeRef.current.contains(e.target))) {
+            setOpen(false);
+        }
+    }, [setOpen]);
+    const destroy = React.useCallback(() => {
+        if (popperRef.current) {
+            popperRef.current.destroy();
+            document.removeEventListener('keydown', onKeyDown, true);
+            document.removeEventListener('mousedown', onClickOutside, true);
+            document.removeEventListener('touchstart', onClickOutside, true);
+        }
+    }, [onClickOutside, onKeyDown]);
+    const initialize = React.useCallback(() => {
+        if (!nodeRef.current || !isOpen) {
+            return;
+        }
+        destroy();
+    }, [isOpen, destroy]);
+    const nodeRefCallback = React.useCallback((node) => {
+        nodeRef.current = node;
+        initialize();
+    }, [initialize]);
+    React.useEffect(() => {
+        initialize();
+    }, [initialize]);
+    React.useEffect(() => () => {
+        destroy();
+    }, [destroy]);
+    React.useEffect(() => {
+        if (!isOpen) {
+            destroy();
+        }
+    }, [destroy, isOpen]);
+    return isOpen ? (React.createElement(Portal, null,
+        React.createElement("div", { ref: nodeRefCallback, style: { zIndex: 9999, position: 'absolute', top: 0, left: 0 }, className: "pfext-quick-start__base" }, children))) : null;
+};
+
+const isInViewport = (elementToCheck) => {
+    const rect = elementToCheck.getBoundingClientRect();
+    return (rect.top >= 0 &&
+        rect.left >= 0 &&
+        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+        rect.right <= (window.innerWidth || document.documentElement.clientWidth));
+};
+const InteractiveSpotlight = ({ element }) => {
+    const { top, bottom, left, right, height, width } = element.getBoundingClientRect();
+    const style = {
+        height,
+        width,
+        top,
+        left,
+        bottom,
+        right,
+    };
+    const [clicked, setClicked] = React.useState(false);
+    React.useEffect(() => {
+        if (!clicked) {
+            if (!isInViewport(element)) {
+                element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });
+            }
+            const handleClick = () => setClicked(true);
+            document.addEventListener('click', handleClick);
+            return () => {
+                document.removeEventListener('click', handleClick);
+            };
+        }
+        return () => { };
+    }, [element, clicked]);
+    if (clicked) {
+        return null;
+    }
+    return (React.createElement(Portal, null,
+        React.createElement(SimplePopper, null,
+            React.createElement("div", { className: "pfext-spotlight pfext-spotlight__element-highlight-animate", style: style }))));
+};
+
+var ScrollDirection;
+(function (ScrollDirection) {
+    ScrollDirection["scrollingUp"] = "scrolling-up";
+    ScrollDirection["scrollingDown"] = "scrolling-down";
+    ScrollDirection["scrolledToBottom"] = "scrolled-to-bottom";
+    ScrollDirection["scrolledToTop"] = "scrolled-to-top";
+})(ScrollDirection || (ScrollDirection = {}));
+
+const useResizeObserver = (callback, targetElement, observerOptions = undefined) => {
+    const element = React.useMemo(() => targetElement !== null && targetElement !== void 0 ? targetElement : document.querySelector('body'), [targetElement]);
+    React.useEffect(() => {
+        const observer = new ResizeObserver(callback);
+        observer.observe(element, observerOptions);
+        return () => {
+            observer.disconnect();
+        };
+    }, [callback, observerOptions, element]);
+};
+
+var Shadows;
+(function (Shadows) {
+    Shadows["none"] = "none";
+    Shadows["both"] = "both";
+    Shadows["top"] = "top";
+    Shadows["bottom"] = "bottom";
+})(Shadows || (Shadows = {}));
+const useScrollShadows = (node) => {
+    const [shadows, setShadows] = React.useState(Shadows.none);
+    const computeShadows = React.useCallback(() => {
+        if (node) {
+            const { scrollTop, clientHeight, scrollHeight } = node;
+            const top = scrollTop !== 0;
+            const bottom = scrollTop + clientHeight < scrollHeight;
+            if (top && bottom) {
+                setShadows(Shadows.both);
+            }
+            else if (top) {
+                setShadows(Shadows.top);
+            }
+            else if (bottom) {
+                setShadows(Shadows.bottom);
+            }
+            else {
+                setShadows(Shadows.none);
+            }
+        }
+    }, [node]);
+    // recompute when the scroll container changes in size
+    useResizeObserver(computeShadows, node);
+    React.useEffect(() => {
+        if (node) {
+            // compute initial shadows
+            computeShadows();
+            // listen for scroll events
+            node.addEventListener('scroll', computeShadows);
+        }
+        return () => {
+            if (node) {
+                node.removeEventListener('scroll', computeShadows);
+            }
+        };
+    }, [node, computeShadows]);
+    return shadows;
+};
+
+const useBoundingClientRect = (targetElement) => {
+    const [clientRect, setClientRect] = React.useState(() => targetElement ? targetElement.getBoundingClientRect() : null);
+    const observerCallback = React.useCallback(() => {
+        setClientRect(targetElement ? targetElement.getBoundingClientRect() : null);
+    }, [targetElement]);
+    useResizeObserver(observerCallback);
+    return clientRect;
+};
+
+/**
+ * React hook that forces component render.
+ */
+const useForceRender = () => React.useReducer((s) => !s, false)[1];
+
+const useEventListener = (target, event, callback) => {
+    useEffect(() => {
+        target.addEventListener(event, callback);
+        return () => {
+            target.removeEventListener(event, callback);
+        };
+    }, [target, event, callback]);
+};
+
+const StaticSpotlight = ({ element }) => {
+    const clientRect = useBoundingClientRect(element);
+    const style = clientRect
+        ? {
+            top: clientRect.top,
+            left: clientRect.left,
+            height: clientRect.height,
+            width: clientRect.width,
+        }
+        : {};
+    return clientRect ? (React.createElement(Portal, null,
+        React.createElement("div", { className: "pf-v5-c-backdrop pfext-spotlight__with-backdrop" },
+            React.createElement("div", { className: "pfext-spotlight pfext-spotlight__element-highlight-noanimate", style: style })))) : null;
+};
+
+const Spotlight = ({ selector, interactive }) => {
+    // if target element is a hidden one return null
+    const element = React.useMemo(() => {
+        const highlightElement = document.querySelector(selector);
+        let hiddenElement = highlightElement;
+        while (hiddenElement) {
+            const ariaHidden = hiddenElement.getAttribute('aria-hidden');
+            if (ariaHidden === 'true') {
+                return null;
+            }
+            hiddenElement = hiddenElement.parentElement;
+        }
+        return highlightElement;
+    }, [selector]);
+    if (!element) {
+        return null;
+    }
+    return interactive ? (React.createElement(InteractiveSpotlight, { element: element })) : (React.createElement(StaticSpotlight, { element: element }));
+};
+
+const MarkdownHighlightExtension = ({ docContext, rootSelector, }) => {
+    const [selector, setSelector] = React.useState(null);
+    React.useEffect(() => {
+        const elements = docContext.querySelectorAll(`${rootSelector} [data-highlight]`);
+        let timeoutId;
+        function startHighlight(e) {
+            const highlightId = e.target.getAttribute('data-highlight');
+            if (!highlightId) {
+                return;
+            }
+            setSelector(null);
+            timeoutId = setTimeout(() => {
+                setSelector(`[data-quickstart-id="${highlightId}"]`);
+            }, 0);
+        }
+        elements && elements.forEach((elm) => elm.addEventListener('click', startHighlight));
+        return () => {
+            clearTimeout(timeoutId);
+            elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
+        };
+    }, [docContext, rootSelector]);
+    React.useEffect(() => {
+        const elements = docContext.querySelectorAll(`${rootSelector} [class^=data-highlight__]`);
+        let timeoutId;
+        function startHighlight(e) {
+            e.preventDefault();
+            const classes = e.target.getAttribute('class').split(' ');
+            let highlightId;
+            for (const className of classes) {
+                if (className.startsWith('data-highlight__')) {
+                    highlightId = className.split('__')[1];
+                    break;
+                }
+            }
+            if (!highlightId) {
+                return;
+            }
+            setSelector(null);
+            timeoutId = setTimeout(() => {
+                setSelector(`[data-quickstart-id="${highlightId}"]`);
+            }, 0);
+        }
+        elements && elements.forEach((elm) => elm.addEventListener('click', startHighlight));
+        return () => {
+            clearTimeout(timeoutId);
+            elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
+        };
+    }, [docContext, rootSelector]);
+    if (!selector) {
+        return null;
+    }
+    return React.createElement(Spotlight, { selector: selector, interactive: true });
+};
+
+const MARKDOWN_COPY_BUTTON_ID = 'data-copy-for';
+const MARKDOWN_SNIPPET_ID = 'data-snippet-id';
+const ACCORDION_MARKDOWN_BUTTON_ID = `accordion-markdown-button-id`;
+const ACCORDION_MARKDOWN_CONTENT_ID = `accordion-markdown-content-id`;
+
+const CopyClipboard = ({ element, rootSelector, docContext, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const [showSuccessContent, setShowSuccessContent] = React.useState(false);
+    const textToCopy = React.useMemo(() => {
+        var _a;
+        const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
+        return (_a = docContext.querySelector(`${rootSelector} [${MARKDOWN_SNIPPET_ID}="${copyTextId}"]`)) === null || _a === void 0 ? void 0 : _a.innerText;
+    }, [element, docContext, rootSelector]);
+    useEventListener(element, 'click', React.useCallback(() => {
+        navigator.clipboard
+            .writeText(textToCopy.trim())
+            .then(() => {
+            setShowSuccessContent(true);
+        })
+            .catch(() => { });
+    }, [textToCopy]));
+    useEventListener(element, 'mouseleave', React.useCallback(() => {
+        setShowSuccessContent(false);
+    }, []));
+    return showSuccessContent ? (React.createElement(Tooltip, { key: "after-copy", isVisible: true, triggerRef: () => element, content: getResource('Successfully copied to clipboard!'), className: "pfext-quick-start__base" })) : (React.createElement(Tooltip, { key: "before-copy", triggerRef: () => element, content: getResource('Copy to clipboard'), className: "pfext-quick-start__base" }));
+};
+const MarkdownCopyClipboard = ({ docContext, rootSelector, }) => {
+    const elements = docContext.querySelectorAll(`${rootSelector} [${MARKDOWN_COPY_BUTTON_ID}]`);
+    return elements.length > 0 ? (React.createElement(React.Fragment, null, Array.from(elements).map((elm) => {
+        const attributeValue = elm.getAttribute(MARKDOWN_COPY_BUTTON_ID);
+        return (React.createElement(CopyClipboard, { key: attributeValue, element: elm, rootSelector: rootSelector, docContext: docContext }));
+    }))) : null;
+};
+
+const removeTemplateWhitespace = (template) => template.replace(/>(?:\s|\n)+</g, '><');
+
+const useInlineCopyClipboardShowdownExtension = () => {
+    const { getResource } = React.useContext(QuickStartContext);
+    return React.useMemo(() => ({
+        type: 'lang',
+        regex: /`([^`](.*?)[^`])`{{copy}}/g,
+        replace: (text, group, _, groupId) => {
+            if (!group || isNaN(groupId)) {
+                return text;
+            }
+            return removeTemplateWhitespace(`<span class="pf-v5-c-clipboard-copy pf-m-inline">
+              <span class="pf-v5-c-clipboard-copy__text" ${MARKDOWN_SNIPPET_ID}="${groupId}">${group}</span>
+              <span class="pf-v5-c-clipboard-copy__actions">
+                <span class="pf-v5-c-clipboard-copy__actions-item">
+                  <button class="pf-v5-c-button pf-m-plain" aria-label="${getResource('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
+                    ${renderToStaticMarkup(React.createElement(CopyIcon, null))}
+                  </button>
+                </span>
+              </span>
+            </span>`);
+        },
+    }), [getResource]);
+};
+
+const useMultilineCopyClipboardShowdownExtension = () => {
+    const { getResource } = React.useContext(QuickStartContext);
+    return React.useMemo(() => ({
+        type: 'lang',
+        regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,
+        replace: (text, group, _1, _2, groupId) => {
+            if (!group || isNaN(groupId)) {
+                return text;
+            }
+            return `<div class="pf-v5-c-code-block">
+              <div class="pf-v5-c-code-block__header">
+                <div class="pf-v5-c-code-block__actions">
+                  <div class="pf-v5-c-code-block__actions-item">
+                    <button class="pf-v5-c-button pf-m-plain" type="button" aria-label="${getResource('Copy to clipboard')}" ${MARKDOWN_COPY_BUTTON_ID}="${groupId}">
+                      ${renderToStaticMarkup(React.createElement(CopyIcon, null))}
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div class="pf-v5-c-code-block__content">
+                <pre class="pf-v5-c-code-block__pre pfext-code-block__pre">
+                  <code class="pf-v5-c-code-block__code" 
+                    ${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 Converter({
+        tables: true,
+        openLinksInNewWindow: true,
+        strikethrough: true,
+        emoji: false,
+    });
+    if (extensions) {
+        converter.addExtension(extensions);
+    }
+    DOMPurify.addHook('beforeSanitizeElements', function (node) {
+        // nodeType 1 = element type
+        // transform anchor tags
+        if (node.nodeType === 1 && node.nodeName.toLowerCase() === 'a') {
+            node.setAttribute('rel', 'noopener noreferrer');
+            return node;
+        }
+        // add PF class to ul and ol lists
+        if (node.nodeType === 1 &&
+            (node.nodeName.toLowerCase() === 'ul' || node.nodeName.toLowerCase() === 'ol')) {
+            node.setAttribute('class', 'pf-v5-c-list');
+            return node;
+        }
+    });
+    // Add a hook to make all links open a new window
+    DOMPurify.addHook('afterSanitizeAttributes', function (node) {
+        // set all elements owning target to target=_blank
+        if ('target' in node) {
+            node.setAttribute('target', '_blank');
+        }
+        // set non-HTML/MathML links to xlink:show=new
+        if (!node.hasAttribute('target') &&
+            (node.hasAttribute('xlink:href') || node.hasAttribute('href'))) {
+            node.setAttribute('xlink:show', 'new');
+        }
+    });
+    return DOMPurify.sanitize(converter.makeHtml(markdown), {
+        USE_PROFILES: {
+            html: true,
+            svg: true,
+        },
+    });
+};
+const SyncMarkdownView = ({ content, emptyMsg, extensions, renderExtension, exactHeight, inline, className, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const markup = React.useMemo(() => markdownConvert(content || emptyMsg || getResource('Not available'), extensions), [content, emptyMsg, extensions, getResource]);
+    const innerProps = {
+        renderExtension: (extensions === null || extensions === void 0 ? void 0 : extensions.length) > 0 ? renderExtension : undefined,
+        exactHeight,
+        markup,
+        isEmpty: !content,
+        className,
+    };
+    return inline ? React.createElement(InlineMarkdownView, Object.assign({}, innerProps)) : React.createElement(IFrameMarkdownView, Object.assign({}, innerProps));
+};
+const uniqueId = (function () {
+    let num = 0;
+    return function (prefix) {
+        const prefixStr = String(prefix) || '';
+        num += 1;
+        return prefixStr + num;
+    };
+})();
+const RenderExtension = ({ renderExtension, selector, markup, docContext, }) => {
+    const forceRender = useForceRender();
+    const markupRef = React.useRef(null);
+    const shouldRenderExtension = React.useCallback(() => {
+        if (markupRef.current === markup) {
+            return true;
+        }
+        markupRef.current = markup;
+        return false;
+    }, [markup]);
+    /**
+     * During a render cycle in which markup changes, renderExtension receives an old copy of document
+     * because react is still updating the dom using `dangerouslySetInnerHTML` with latest markdown markup
+     * which causes the component rendered by renderExtension to receive old copy of document
+     * use forceRender to delay the rendering of extension by one render cycle
+     */
+    React.useEffect(() => {
+        if (renderExtension) {
+            forceRender();
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [markup]);
+    return (React.createElement(React.Fragment, null, shouldRenderExtension() ? renderExtension === null || renderExtension === void 0 ? void 0 : renderExtension(docContext !== null && docContext !== void 0 ? docContext : document, selector) : null));
+};
+const InlineMarkdownView = ({ markup, isEmpty, renderExtension, className, }) => {
+    const id = React.useMemo(() => uniqueId('markdown'), []);
+    return (React.createElement("div", { className: css('pfext-markdown-view', { 'is-empty': isEmpty }, className), id: id },
+        React.createElement("div", { dangerouslySetInnerHTML: { __html: markup } }),
+        renderExtension && (React.createElement(RenderExtension, { renderExtension: renderExtension, selector: `#${id}`, markup: markup }))));
+};
+const IFrameMarkdownView = ({ exactHeight, markup, isEmpty, renderExtension, className, }) => {
+    const [frame, setFrame] = React.useState();
+    const [loaded, setLoaded] = React.useState(false);
+    const updateTimeoutHandle = React.useRef();
+    const updateDimensions = React.useCallback(() => {
+        var _a;
+        if (!((_a = frame === null || frame === void 0 ? void 0 : frame.contentWindow) === null || _a === void 0 ? void 0 : _a.document.body.firstChild)) {
+            return;
+        }
+        frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight}px`;
+        // Let the new height take effect, then reset again once we recompute
+        updateTimeoutHandle.current = setTimeout(() => {
+            if (exactHeight) {
+                frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight}px`;
+            }
+            else {
+                // Increase by 15px for the case where a horizontal scrollbar might appear
+                frame.style.height = `${frame.contentWindow.document.body.firstElementChild.scrollHeight + 15}px`;
+            }
+        });
+    }, [frame, exactHeight]);
+    React.useEffect(() => () => {
+        clearTimeout(updateTimeoutHandle.current);
+    }, []);
+    const onLoad = React.useCallback(() => {
+        updateDimensions();
+        setLoaded(true);
+    }, [updateDimensions]);
+    // Find the app's stylesheets and inject them into the frame to ensure consistent styling.
+    const filteredLinks = Array.from(document.getElementsByTagName('link')).filter((l) => l.href.includes('app-bundle'));
+    const linkRefs = filteredLinks.reduce((refs, link) => `${refs}
+    <link rel="stylesheet" href="${link.href}">`, '');
+    const contents = `
+  ${linkRefs}
+  <style type="text/css">
+  body {
+    background-color: transparent !important;
+    color: ${isEmpty ? '#999' : '#333'};
+    font-family: var(--pf-v5-global--FontFamily--sans-serif);
+    min-width: auto !important;
+  }
+  table {
+    display: block;
+    margin-bottom: 11.5px;
+    overflow-x: auto;
+  }
+  td,
+  th {
+    border-bottom: 1px solid #ededed;
+    padding: 10px;
+    vertical-align: top;
+  }
+  th {
+    padding-top: 0;
+  }
+  </style>
+  <body class="pf-m-redhat-font"><div style="overflow-y: auto;">${markup}</div></body>`;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("iframe", { sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin", srcDoc: contents, style: { border: '0px', display: 'block', width: '100%', height: '0' }, ref: (r) => setFrame(r), onLoad: () => onLoad(), className: className }),
+        loaded && frame && renderExtension && (React.createElement(RenderExtension, { markup: markup, selector: '', renderExtension: renderExtension, docContext: frame.contentDocument }))));
+};
+
+const LINK_LABEL = '[\\d\\w\\s-()$!]+';
+const HIGHLIGHT_ACTIONS = ['highlight'];
+const SELECTOR_ID = `[\\w-]+`;
+// [linkLabel]{{action id}}
+const HIGHLIGHT_REGEXP = new RegExp(`\\[(${LINK_LABEL})]{{(${HIGHLIGHT_ACTIONS.join('|')}) (${SELECTOR_ID})}}`, 'g');
+
+const removeParagraphWrap = (markdown) => markdown.replace(/^<p>|<\/p>$/g, '');
+const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
+    const { markdown } = React.useContext(QuickStartContext);
+    const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
+    const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
+    const admonitionShowdownExtension = useAdmonitionShowdownExtension();
+    const codeShowdownExtension = useCodeShowdownExtension();
+    const accordionShowdownExtension = useAccordionShowdownExtension();
+    return (React.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
+            {
+                type: 'lang',
+                regex: HIGHLIGHT_REGEXP,
+                replace: (text, linkLabel, linkType, linkId) => {
+                    if (!linkLabel || !linkType || !linkId) {
+                        return text;
+                    }
+                    return `<button class="pf-v5-c-button pf-m-inline pf-m-link" data-highlight="${linkId}">${linkLabel}</button>`;
+                },
+            },
+            {
+                type: 'output',
+                filter(text) {
+                    // check HTML for patterns like: <em>Status: unknown</em>{#extension-requirement-status}
+                    // and replace with <em id="extension-requirement-status">Status: unknown</em>
+                    return text.replace(/<em>(.*)<\/em>{#(.*)}/g, '<em id="$2">$1</em>');
+                },
+            },
+            inlineCopyClipboardShowdownExtension,
+            multilineCopyClipboardShowdownExtension,
+            admonitionShowdownExtension,
+            codeShowdownExtension,
+            accordionShowdownExtension,
+            ...(markdown ? markdown.extensions : []),
+        ], renderExtension: (docContext, rootSelector) => (React.createElement(React.Fragment, null,
+            React.createElement(AccordionRenderExtension, { docContext: docContext }),
+            React.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
+            React.createElement(MarkdownCopyClipboard, { docContext: docContext, rootSelector: rootSelector }),
+            markdown &&
+                markdown.renderExtension &&
+                markdown.renderExtension(docContext, rootSelector))), className: className }));
+};
+
+var AdmonitionType;
+(function (AdmonitionType) {
+    AdmonitionType["TIP"] = "TIP";
+    AdmonitionType["NOTE"] = "NOTE";
+    AdmonitionType["IMPORTANT"] = "IMPORTANT";
+    AdmonitionType["WARNING"] = "WARNING";
+    AdmonitionType["CAUTION"] = "CAUTION";
+})(AdmonitionType || (AdmonitionType = {}));
+const admonitionToAlertVariantMap = {
+    [AdmonitionType.NOTE]: { variant: 'info' },
+    [AdmonitionType.TIP]: { variant: 'default', customIcon: React.createElement(LightbulbIcon, null) },
+    [AdmonitionType.IMPORTANT]: { variant: 'danger' },
+    [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: React.createElement(FireIcon, null) },
+    [AdmonitionType.WARNING]: { variant: 'warning' },
+};
+const useAdmonitionShowdownExtension = () => 
+// const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+React.useMemo(() => ({
+    type: 'lang',
+    regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,
+    replace: (text, content, admonitionLabel, admonitionType, groupId) => {
+        if (!content || !admonitionLabel || !admonitionType || !groupId) {
+            return text;
+        }
+        admonitionType = admonitionType.toUpperCase();
+        const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
+        const style = admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
+        const mdContent = React.createElement(QuickStartMarkdownView, { content: content });
+        const pfAlert = (React.createElement(Alert, { variant: variant, customIcon: customIcon && customIcon, isInline: true, title: admonitionType, className: "pfext-markdown-admonition", style: style }, mdContent));
+        return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));
+    },
+}), []);
+
+const useCodeShowdownExtension = () => React.useMemo(() => ({
+    type: 'output',
+    regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
+    replace: (text, content) => {
+        if (!content) {
+            return text;
+        }
+        const pfCodeBlock = React.createElement(CodeBlock, null, content);
+        return removeTemplateWhitespace(renderToStaticMarkup(pfCodeBlock));
+    },
+}), []);
+
+const useAccordionShowdownExtension = () => React.useMemo(() => ({
+    type: 'lang',
+    regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,
+    replace: (_text, accordionContent, _command, accordionHeading) => {
+        const accordionId = String(accordionHeading).replace(/\s/g, '-');
+        return removeTemplateWhitespace(renderToStaticMarkup(React.createElement(Accordion, { asDefinitionList: true },
+            React.createElement(AccordionItem, null,
+                React.createElement(AccordionToggle, { isExpanded: false, id: `${ACCORDION_MARKDOWN_BUTTON_ID}-${accordionId}` }, accordionHeading),
+                React.createElement(AccordionContent, { id: `${ACCORDION_MARKDOWN_CONTENT_ID}-${accordionId}`, isHidden: !false }, accordionContent)))));
+    },
+}), []);
+
+const AccordionShowdownHandler = ({ buttonElement, contentElement, }) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const handleClick = () => {
+        const expandedModifier = 'pf-m-expanded';
+        buttonElement.className = `pf-v5-c-accordion__toggle ${!expanded ? expandedModifier : ''}`;
+        contentElement.hidden = expanded;
+        contentElement.className = `pf-v5-c-accordion__expanded-content ${!expanded ? expandedModifier : ''}`;
+        setExpanded(!expanded);
+    };
+    useEventListener(buttonElement, 'click', handleClick);
+    return React.createElement(React.Fragment, null);
+};
+const AccordionRenderExtension = ({ docContext }) => {
+    const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);
+    const contentElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_CONTENT_ID}]`);
+    return buttonElements.length > 0 ? (React.createElement(React.Fragment, null, Array.from(buttonElements).map((elm) => {
+        const content = Array.from(contentElements).find((elm2) => {
+            const elmId = elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1];
+            const elm2Id = elm2.id.split(ACCORDION_MARKDOWN_CONTENT_ID)[1];
+            return elmId === elm2Id;
+        });
+        return (React.createElement(AccordionShowdownHandler, { key: elm.id.split(ACCORDION_MARKDOWN_BUTTON_ID)[1], buttonElement: elm, contentElement: content }));
+    }))) : null;
+};
+
+const FallbackImg = ({ src, alt, className, fallback }) => {
+    const [isSrcValid, setIsSrcValid] = React.useState(true);
+    if (src && isSrcValid) {
+        return React.createElement("img", { className: className, src: src, alt: alt, onError: () => setIsSrcValid(false) });
+    }
+    return React.createElement(React.Fragment, null, fallback);
+};
+
+const DASH = '-';
+
+const PopoverStatus = ({ hideHeader, children, isVisible = null, statusBody, title, onHide, onShow, }) => (React.createElement(Popover, { position: PopoverPosition.right, headerContent: hideHeader ? null : title, bodyContent: children, "aria-label": title, onHide: onHide, onShow: onShow, isVisible: isVisible },
+    React.createElement(Button, { variant: "link", isInline: true }, statusBody)));
+
+const StatusIconAndText = ({ icon, title, spin, iconOnly, noTooltip, className, }) => {
+    if (!title) {
+        return React.createElement(React.Fragment, null, DASH);
+    }
+    return (React.createElement("span", { className: css('pfext-icon-and-text', className), title: iconOnly && !noTooltip ? title : undefined },
+        icon &&
+            React.cloneElement(icon, {
+                className: css(spin && 'fa-spin', icon.props.className, !iconOnly && 'pfext-icon-and-text__icon pfext-icon-flex-child'),
+            }),
+        !iconOnly && React.createElement(CamelCaseWrap, { value: title, dataTest: "status-text" })));
+};
+
+const GenericStatus = (props) => {
+    const { Icon, children, popoverTitle, title, noTooltip, iconOnly } = props, restProps = __rest(props, ["Icon", "children", "popoverTitle", "title", "noTooltip", "iconOnly"]);
+    const renderIcon = iconOnly && !noTooltip ? React.createElement(Icon, { title: title }) : React.createElement(Icon, null);
+    const statusBody = (React.createElement(StatusIconAndText, Object.assign({}, restProps, { noTooltip: noTooltip, title: title, iconOnly: iconOnly, icon: renderIcon })));
+    return React.Children.toArray(children).length ? (React.createElement(PopoverStatus, Object.assign({ title: popoverTitle || title }, restProps, { statusBody: statusBody }), children)) : (statusBody);
+};
+
+const GreenCheckCircleIcon = ({ className, title, size }) => (React.createElement(Icon, { size: size },
+    React.createElement(CheckCircleIcon, { "data-test": "success-icon", color: okColor.value, className: className, title: title })));
+
+const SuccessStatus = (props) => (React.createElement(GenericStatus, Object.assign({}, props, { Icon: GreenCheckCircleIcon, title: props.title || 'Healthy' })));
+SuccessStatus.displayName = 'SuccessStatus';
+
+const Status = ({ status, title, iconOnly, noTooltip, className, }) => {
+    const statusProps = { title: title || status, iconOnly, noTooltip, className };
+    switch (status) {
+        case 'In Progress':
+            return React.createElement(StatusIconAndText, Object.assign({}, statusProps, { icon: React.createElement(SyncAltIcon, null) }));
+        case 'Complete':
+            return React.createElement(SuccessStatus, Object.assign({}, statusProps));
+        default:
+            return React.createElement(React.Fragment, null, status || DASH);
+    }
+};
+const StatusIcon = ({ status }) => (React.createElement(Status, { status: status, iconOnly: true }));
+
+const QuickStartTileDescription = ({ description, prerequisites, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(QuickStartMarkdownView, { content: description, className: "pfext-quick-start-tile-description" }),
+        (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React.createElement("div", { className: "pfext-quick-start-tile-prerequisites" },
+            React.createElement(Text, { component: TextVariants.h5, className: "pfext-quick-start-tile-prerequisites__text" },
+                getResource('Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length),
+                ' '),
+            React.createElement(Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), className: "pfext-quick-start__base", bodyContent: React.createElement("div", { className: "pfext-popover__base" },
+                    React.createElement(TextList, { "aria-label": getResource('Prerequisites'), className: "pfext-quick-start-tile-prerequisites-list" }, prereqs.map((prerequisite, index) => (
+                    // eslint-disable-next-line react/no-array-index-key
+                    React.createElement(TextListItem, { key: index },
+                        React.createElement(QuickStartMarkdownView, { content: prerequisite })))))) },
+                React.createElement(Button, { variant: "link", isInline: true, className: "pfext-quick-start-tile-prerequisites__icon", "data-testid": "qs-card-prereqs", onClick: (e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                    }, "aria-label": getResource('Show prerequisites') },
+                    React.createElement(InfoCircleIcon, null)))))));
+};
+
+const QuickStartTileFooter = ({ quickStartId, status, totalTasks, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const { activeQuickStartID, startQuickStart, restartQuickStart } = React.useContext(QuickStartContext);
+    const start = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        startQuickStart(quickStartId, totalTasks);
+    }, [quickStartId, startQuickStart, totalTasks]);
+    const restart = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        restartQuickStart(quickStartId, totalTasks);
+    }, [quickStartId, restartQuickStart, totalTasks]);
+    return (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
+        status === QuickStartStatus.NOT_STARTED && (React.createElement(FlexItem, null,
+            React.createElement(Button, { onClick: start, variant: "link", isInline: true, "data-testid": "qs-card-notStarted-start", id: `${quickStartId}-start`, "aria-labelledby": `${quickStartId}-start ${quickStartId}` }, getResource('Start')))),
+        status === QuickStartStatus.IN_PROGRESS && activeQuickStartID !== quickStartId && (React.createElement(FlexItem, null,
+            React.createElement(Button, { variant: "link", isInline: true, "data-testid": "qs-card-inProgress-resume", id: `${quickStartId}-continue`, "aria-labelledby": `${quickStartId}-continue ${quickStartId}` }, getResource('Continue')))),
+        status === QuickStartStatus.COMPLETE && (React.createElement(FlexItem, null,
+            React.createElement(Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-complete-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart')))),
+        status === QuickStartStatus.IN_PROGRESS && (React.createElement(FlexItem, null,
+            React.createElement(Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-inProgress-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart'))))));
+};
+
+const QuickStartTileFooterExternal = ({ link, quickStartId, }) => {
+    const { href, text } = link;
+    return (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
+        React.createElement(FlexItem, null,
+            React.createElement(Button, { component: "a", href: href, target: "_blank", rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: React.createElement(ExternalLinkAltIcon, null), iconPosition: "right", id: quickStartId, "aria-labelledby": `${quickStartId}-external ${quickStartId}` }, text || href))));
+};
+
+const statusColorMap = {
+    [QuickStartStatus.COMPLETE]: 'green',
+    [QuickStartStatus.IN_PROGRESS]: 'purple',
+    [QuickStartStatus.NOT_STARTED]: 'grey',
+};
+const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, action, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const statusLocaleMap = {
+        [QuickStartStatus.COMPLETE]: getResource('Complete'),
+        [QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
+        [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
+    };
+    const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon;
+    return (React.createElement("div", { className: "pfext-quick-start-tile-header" },
+        React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
+            React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
+                React.createElement(QuickStartMarkdownView, { content: name })),
+            action && (React.createElement(Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps)))),
+        React.createElement("div", { className: "pfext-quick-start-tile-header__status" },
+            type && (React.createElement(Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
+            duration && (React.createElement(Label, { variant: "outline", "data-test": "duration", icon: React.createElement(OutlinedClockIcon, null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
+            status !== QuickStartStatus.NOT_STARTED && (React.createElement(Label, { variant: "outline", color: statusColorMap[status], icon: React.createElement(StatusIcon, { status: status }), "data-test": "status" }, statusLocaleMap[status])))));
+};
+
+const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, action, }) => {
+    const { metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
+    const { setActiveQuickStart, footer } = React.useContext(QuickStartContext);
+    const ref = React.useRef(null);
+    let quickStartIcon;
+    if (typeof icon === 'object') {
+        quickStartIcon = icon;
+    }
+    else {
+        quickStartIcon = (React.createElement(FallbackImg, { className: "pfext-catalog-item-icon__img--large", src: icon, alt: "", fallback: React.createElement(RocketIcon, null) }));
+    }
+    const footerComponent = React.useMemo(() => {
+        if (footer && footer.show === false) {
+            return null;
+        }
+        if (link) {
+            return React.createElement(QuickStartTileFooterExternal, { link: link, quickStartId: id });
+        }
+        return React.createElement(QuickStartTileFooter, { quickStartId: id, status: status, totalTasks: tasks === null || tasks === void 0 ? void 0 : tasks.length });
+    }, [footer, id, link, status, tasks === null || tasks === void 0 ? void 0 : tasks.length]);
+    const handleClick = (e) => {
+        var _a;
+        if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
+            if (!link) {
+                setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
+            }
+            onClick();
+        }
+    };
+    const linkProps = link
+        ? {
+            href: link.href,
+            target: '_blank',
+            rel: 'noreferrer',
+        }
+        : {};
+    return (React.createElement("div", { ref: ref, onClick: handleClick },
+        React.createElement(CatalogTile, Object.assign({ id: id + '-catalog-tile', style: {
+                cursor: 'pointer',
+            }, icon: quickStartIcon, className: "pfext-quick-start-tile", "data-testid": `qs-card-${camelize(displayName)}`, featured: isActive, title: React.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type, quickStartId: id, action: action }), onKeyDown: (event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
+                    onClick();
+                }
+            } }, linkProps, { "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent, tabIndex: 0, 
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore-next-line
+            isSelectableRaised: true }))));
+};
+
+const QuickStartCatalog = ({ quickStarts }) => {
+    const { activeQuickStartID, allQuickStartStates } = React.useContext(QuickStartContext);
+    return (React.createElement("div", { className: "pfext-page-layout__content" },
+        React.createElement(Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
+            const { metadata: { name: id }, } = quickStart;
+            return (React.createElement(GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
+                React.createElement(QuickStartTile, { quickStart: quickStart, isActive: id === activeQuickStartID, status: getQuickStartStatus(allQuickStartStates, id) })));
+        }))));
+};
+
+const QuickStartCatalogFilterSearch = (_a) => {
+    var { searchInputText, handleTextChange } = _a, props = __rest(_a, ["searchInputText", "handleTextChange"]);
+    const { getResource } = React.useContext(QuickStartContext);
+    return (React.createElement(ToolbarItem, { className: "pfext-quick-start-catalog-filter__input" },
+        React.createElement(SearchInput, Object.assign({ placeholder: getResource('Filter by keyword...'), value: searchInputText, onChange: (_ev, value) => handleTextChange(value), onClear: () => handleTextChange('') }, props))));
+};
+const QuickStartCatalogFilterSelect = (_a) => {
+    var { isDropdownOpen, setIsDropdownOpen, onRowfilterSelect, selectedFilters, dropdownItems } = _a, props = __rest(_a, ["isDropdownOpen", "setIsDropdownOpen", "onRowfilterSelect", "selectedFilters", "dropdownItems"]);
+    const { getResource } = React.useContext(QuickStartContext);
+    const toggle = (toggleRef) => (React.createElement(MenuToggle, { isFullWidth: true, ref: toggleRef, onClick: () => setIsDropdownOpen(!isDropdownOpen), isExpanded: isDropdownOpen },
+        getResource('Status'),
+        selectedFilters.length > 0 && React.createElement(Badge, { isRead: true }, selectedFilters.length)));
+    return (React.createElement(ToolbarItem, null,
+        React.createElement(Select, Object.assign({ "aria-label": getResource('Select filter'), isOpen: isDropdownOpen, selected: selectedFilters, onSelect: onRowfilterSelect, onOpenChange: (isOpen) => setIsDropdownOpen(isOpen), toggle: toggle }, props),
+            React.createElement(SelectList, null, dropdownItems))));
+};
+const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    return (React.createElement(ToolbarItem, { className: "pfext-quick-start-catalog-filter__count", align: { default: 'alignRight' } }, getResource('{{count, number}} item', quickStartsCount).replace('{{count, number}}', quickStartsCount)));
+};
+const QuickStartCatalogFilterSearchWrapper = ({ onSearchInputChange = () => { } }) => {
+    const { useQueryParams, filter, setFilter } = React.useContext(QuickStartContext);
+    React.useEffect(() => {
+        //   use this effect to clear the search when a `clear all` action is performed higher up
+        const unlisten = history.listen(({ location }) => {
+            const searchParams = new URLSearchParams(location.search);
+            const searchQuery = searchParams.get(QUICKSTART_SEARCH_FILTER_KEY) || '';
+            if (searchQuery === '') {
+                setFilter('keyword', '');
+                onSearchInputChange('');
+            }
+        });
+        return () => {
+            unlisten();
+        };
+    }, [onSearchInputChange, setFilter]);
+    const handleTextChange = (val) => {
+        if (val.length > 0) {
+            useQueryParams && setQueryArgument(QUICKSTART_SEARCH_FILTER_KEY, val);
+        }
+        else {
+            useQueryParams && removeQueryArgument(QUICKSTART_SEARCH_FILTER_KEY);
+        }
+        if ((filter === null || filter === void 0 ? void 0 : filter.keyword) !== val) {
+            setFilter('keyword', val);
+        }
+        onSearchInputChange(val);
+    };
+    return (React.createElement(QuickStartCatalogFilterSearch, { searchInputText: filter === null || filter === void 0 ? void 0 : filter.keyword, handleTextChange: handleTextChange }));
+};
+// compare string/number arrays
+const equalsIgnoreOrder = (a, b) => {
+    if (a.length !== b.length) {
+        return false;
+    }
+    const uniqueValues = new Set([...a, ...b]);
+    for (const v of uniqueValues) {
+        const aCount = a.filter((e) => e === v).length;
+        const bCount = b.filter((e) => e === v).length;
+        if (aCount !== bCount) {
+            return false;
+        }
+    }
+    return true;
+};
+const QuickStartCatalogFilterStatusWrapper = ({ onStatusChange = () => { } }) => {
+    const { useQueryParams, filter, setFilter } = React.useContext(QuickStartContext);
+    React.useEffect(() => {
+        //   use this effect to clear the status when a `clear all` action is performed higher up
+        const unlisten = history.listen(({ location }) => {
+            var _a;
+            const searchParams = new URLSearchParams(location.search);
+            const updatedStatusFilters = ((_a = searchParams.get(QUICKSTART_STATUS_FILTER_KEY)) === null || _a === void 0 ? void 0 : _a.split(',')) || [];
+            if (updatedStatusFilters.length === 0) {
+                setFilter('status', []);
+                onStatusChange([]);
+            }
+        });
+        return () => {
+            unlisten();
+        };
+    });
+    const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+    const onRowfilterSelect = React.useCallback((_e, selectedValue) => {
+        setIsDropdownOpen(false);
+        const selection = Object.entries(filter.status.statusTypes).find(([_key, value]) => value === selectedValue)[0];
+        const selectedFiltersList = filter.status.statusFilters.includes(selection)
+            ? filter.status.statusFilters.filter((status) => status !== selection)
+            : [...filter.status.statusFilters, selection];
+        if (!equalsIgnoreOrder(filter.status.statusFilters, selectedFiltersList)) {
+            setFilter('status', selectedFiltersList);
+        }
+        if (selectedFiltersList.length > 0) {
+            useQueryParams && setQueryArgument('status', selectedFiltersList.join(','));
+        }
+        else {
+            useQueryParams && removeQueryArgument(QUICKSTART_STATUS_FILTER_KEY);
+        }
+        onStatusChange(selectedFiltersList);
+    }, [filter.status.statusFilters, onStatusChange, setFilter, useQueryParams]);
+    const dropdownItems = Object.entries(filter.status.statusTypes).map(([key, value]) => (React.createElement(SelectOption, { key: key, "data-key": key, value: value, hasCheckbox: true, isSelected: filter.status.statusFilters.includes(key) },
+        React.createElement(React.Fragment, null, value))));
+    return (React.createElement(QuickStartCatalogFilterSelect, { isDropdownOpen: isDropdownOpen, setIsDropdownOpen: setIsDropdownOpen, onRowfilterSelect: onRowfilterSelect, selectedFilters: filter.status.statusFilters, dropdownItems: dropdownItems }));
+};
+const QuickStartCatalogFilterCountWrapper = ({ quickStartsCount }) => React.createElement(QuickStartCatalogFilterCount, { quickStartsCount: quickStartsCount });
+
+const QuickStartCatalogFilter = (_a) => {
+    var { quickStartsCount, onSearchInputChange = () => { }, onStatusChange = () => { } } = _a, props = __rest(_a, ["quickStartsCount", "onSearchInputChange", "onStatusChange"]);
+    return (React.createElement(Toolbar, Object.assign({ usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, props),
+        React.createElement(ToolbarContent, null,
+            React.createElement(QuickStartCatalogFilterSearchWrapper, { onSearchInputChange: onSearchInputChange }),
+            React.createElement(QuickStartCatalogFilterStatusWrapper, { onStatusChange: onStatusChange }),
+            React.createElement(QuickStartCatalogFilterCountWrapper, { quickStartsCount: quickStartsCount }))));
+};
+
+const QuickStartCatalogEmptyState = ({ clearFilters }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    return (React.createElement(EmptyState, null,
+        React.createElement(EmptyStateHeader, { titleText: React.createElement(React.Fragment, null, getResource('No results found')), icon: React.createElement(EmptyStateIcon, { icon: SearchIcon }), headingLevel: "h4" }),
+        React.createElement(EmptyStateBody, null, getResource('No results match the filter criteria. Remove filters or clear all filters to show results.')),
+        React.createElement(EmptyStateFooter, null,
+            React.createElement(EmptyStateActions, null,
+                React.createElement(Button, { variant: "link", onClick: clearFilters, "data-test": "clear-filter button" }, getResource('Clear all filters'))))));
+};
+const QuickStartCatalogPage = ({ quickStarts, showFilter, sortFnc = (q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName), title, hint, showTitle = true, }) => {
+    const sortFncCallback = React.useCallback(sortFnc, [sortFnc]);
+    const { allQuickStarts = [], setAllQuickStarts, allQuickStartStates, getResource, filter, setFilter, loading, } = React.useContext(QuickStartContext);
+    React.useEffect(() => {
+        // passed through prop, not context
+        if (quickStarts && JSON.stringify(quickStarts) !== JSON.stringify(allQuickStarts)) {
+            setAllQuickStarts(quickStarts);
+        }
+    }, [quickStarts, allQuickStarts, setAllQuickStarts]);
+    const initialFilteredQuickStarts = showFilter
+        ? filterQuickStarts(allQuickStarts, filter.keyword, filter.status.statusFilters, allQuickStartStates).sort(sortFncCallback)
+        : allQuickStarts;
+    const [filteredQuickStarts, setFilteredQuickStarts] = React.useState(initialFilteredQuickStarts);
+    React.useEffect(() => {
+        const filteredQs = showFilter
+            ? filterQuickStarts(allQuickStarts, filter.keyword, filter.status.statusFilters, allQuickStartStates).sort(sortFncCallback)
+            : allQuickStarts;
+        // also needs a check whether the content of the QS changed
+        if (filteredQs.length !== filteredQuickStarts.length ||
+            JSON.stringify(filteredQs) !== JSON.stringify(filteredQuickStarts)) {
+            setFilteredQuickStarts(filteredQs);
+        }
+    }, [
+        allQuickStarts,
+        allQuickStartStates,
+        showFilter,
+        filter.keyword,
+        filter.status.statusFilters,
+        sortFncCallback,
+        filteredQuickStarts,
+    ]);
+    const clearFilters = () => {
+        setFilter('keyword', '');
+        setFilter('status', []);
+        clearFilterParams();
+        setFilteredQuickStarts(allQuickStarts.sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName)));
+    };
+    const onSearchInputChange = (searchValue) => {
+        const result = filterQuickStarts(allQuickStarts, searchValue, filter.status.statusFilters, allQuickStartStates).sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName));
+        if (searchValue !== filter.keyword) {
+            setFilter('keyword', searchValue);
+        }
+        if (result.length !== filteredQuickStarts.length) {
+            setFilteredQuickStarts(result);
+        }
+    };
+    const onStatusChange = (statusList) => {
+        const result = filterQuickStarts(allQuickStarts, filter.keyword, statusList, allQuickStartStates).sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName));
+        if (JSON.stringify(statusList) !== JSON.stringify(filter.status)) {
+            setFilter('status', statusList);
+        }
+        if (result.length !== filteredQuickStarts.length) {
+            setFilteredQuickStarts(result);
+        }
+    };
+    if (loading) {
+        return React.createElement(LoadingBox, null);
+    }
+    if (!allQuickStarts || allQuickStarts.length === 0) {
+        return React.createElement(EmptyBox, { label: getResource('Quick Starts') });
+    }
+    return (React.createElement("div", { className: "pfext-quick-start__base" },
+        showTitle && (React.createElement("div", { className: "pfext-page-layout__header" },
+            React.createElement(Text, { component: "h1", className: "pfext-page-layout__title", "data-test": "page-title" }, title || getResource('Quick Starts')),
+            hint && React.createElement("div", { className: "pfext-page-layout__hint" }, hint))),
+        showTitle && React.createElement(Divider, { component: "div" }),
+        showFilter && (React.createElement(React.Fragment, null,
+            React.createElement(QuickStartCatalogFilter, { quickStartsCount: filteredQuickStarts.length, onSearchInputChange: onSearchInputChange, onStatusChange: onStatusChange }),
+            React.createElement(Divider, { component: "div" }))),
+        React.createElement(React.Fragment, null, filteredQuickStarts.length === 0 ? (React.createElement(QuickStartCatalogEmptyState, { clearFilters: clearFilters })) : (React.createElement(QuickStartCatalog, { quickStarts: filteredQuickStarts })))));
+};
+
+const QuickStartCatalogHeader = ({ title, hint, }) => (React.createElement("div", { className: "pfext-page-layout__header" },
+    React.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
+    hint && React.createElement("div", { className: "pfext-page-layout__hint" }, hint)));
+
+const QuickStartCatalogSection = ({ children }) => (React.createElement("div", { className: "pfext-page-layout__content" }, children));
+
+const QuickStartCatalogToolbar = ({ children }) => (React.createElement(Toolbar, { usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, children));
+
+const QuickStartCloseModal = ({ isOpen, onConfirm, onCancel, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    return (React.createElement(Modal, { className: "pfext-quick-start-drawer__modal pfext-quick-start__base", isOpen: isOpen, variant: ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React.createElement(Flex, null,
+            React.createElement(FlexItem, { align: { default: 'alignRight' } },
+                React.createElement(Button, { variant: "secondary", "data-test": "cancel button", onClick: onCancel }, getResource('Cancel'))),
+            React.createElement(FlexItem, null,
+                React.createElement(Button, { variant: "primary", "data-test": "leave button", onClick: onConfirm }, getResource('Leave')))), isFullScreen: true }, getResource('Your progress will be saved.')));
+};
+
+const TaskIcon = ({ taskIndex, taskStatus }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const success = taskStatus === QuickStartTaskStatus.SUCCESS;
+    const failed = taskStatus === QuickStartTaskStatus.FAILED;
+    const classNames = css('pfext-icon-and-text__icon', {
+        'pfext-quick-start-task-header__task-icon-init': !failed && !success,
+    });
+    let content;
+    if (success) {
+        content = (React.createElement(Icon, { size: "md" },
+            React.createElement(CheckCircleIcon, { className: "pfext-quick-start-task-header__task-icon-success" }),
+            ' '));
+    }
+    else if (failed) {
+        content = (React.createElement(Icon, { size: "md" },
+            React.createElement(ExclamationCircleIcon, { className: "pfext-quick-start-task-header__task-icon-failed" })));
+    }
+    else {
+        content = getResource('{{taskIndex, number}}', taskIndex).replace('{{taskIndex, number}}', taskIndex);
+    }
+    return React.createElement("span", { className: classNames }, content);
+};
+const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
+    const titleRef = React.useRef(null);
+    React.useEffect(() => {
+        if (isActiveTask) {
+            // Focus the WizardNavItem button element that contains the title
+            titleRef.current.parentNode.focus();
+        }
+    }, [isActiveTask]);
+    const classNames = css('pfext-quick-start-task-header__title', {
+        'pfext-quick-start-task-header__title-success': taskStatus === QuickStartTaskStatus.SUCCESS,
+        'pfext-quick-start-task-header__title-failed': taskStatus === (QuickStartTaskStatus.FAILED || QuickStartTaskStatus.VISITED),
+    });
+    // const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
+    // const skippedReview = taskStatus === QuickStartTaskStatus.REVIEW;
+    const failedReview = taskStatus === QuickStartTaskStatus.FAILED;
+    // TODO: toned down when this is shown, investigate further when we should display it
+    // related: https://github.com/patternfly/patternfly-quickstarts/issues/104
+    const tryAgain = failedReview && (React.createElement(React.Fragment, null,
+        React.createElement("div", null),
+        React.createElement("div", { className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
+    const content = (React.createElement("div", { className: "pfext-quick-start-task-header", ref: titleRef },
+        React.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
+        React.createElement(Title, { headingLevel: "h3", size: size, className: classNames },
+            React.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
+            isActiveTask && subtitle && (React.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" },
+                ' ',
+                subtitle))),
+        tryAgain));
+    return (React.createElement(WizardNavItem, { content: content, stepIndex: taskIndex, onClick: () => onTaskSelect(taskIndex - 1), component: "button", isCurrent: isActiveTask }, children));
+};
+
+const QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => tasks.length > 0 ? (React.createElement(List, { className: "pfext-quick-start-task-header__list" }, tasks.map((task, index) => (React.createElement(QuickStartTaskHeader, { key: task.title, title: task.title, taskIndex: index + 1, size: "md", taskStatus: allTaskStatuses[index], onTaskSelect: onTaskSelect }))))) : null;
+
+const QuickStartConclusion = ({ tasks, conclusion, allTaskStatuses, nextQuickStarts, onQuickStartChange, onTaskSelect, }) => {
+    const hasFailedTask = allTaskStatuses.includes(QuickStartTaskStatus.FAILED);
+    const { getResource } = React.useContext(QuickStartContext);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect }),
+        React.createElement(QuickStartMarkdownView, { content: hasFailedTask
+                ? getResource('One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.')
+                : conclusion }),
+        !hasFailedTask &&
+            nextQuickStarts &&
+            nextQuickStarts.length > 0 &&
+            nextQuickStarts.map((nextQuickStart, index) => {
+                var _a;
+                return (React.createElement(Button, { variant: "link", onClick: () => onQuickStartChange(nextQuickStart.metadata.name), isInline: true, isBlock: true, key: index },
+                    getResource('Start {{nextQSDisplayName}} quick start').replace('{{nextQSDisplayName}}', (_a = nextQuickStart === null || nextQuickStart === void 0 ? void 0 : nextQuickStart.spec) === null || _a === void 0 ? void 0 : _a.displayName),
+                    ' ',
+                    React.createElement(ArrowRightIcon, { style: { marginLeft: 'var(--pf-v5-global--spacer--xs)', verticalAlign: 'middle' } })));
+            })));
+};
+
+const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequisites, onTaskSelect, }) => {
+    const { getResource } = React.useContext(QuickStartContext);
+    const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
+    const [isPrereqsExpanded, setIsPrereqsExpanded] = React.useState(false);
+    const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React.createElement(ExpandableSection, { toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded), className: "pfext-quick-start-intro__prereq" },
+        React.createElement(List, { className: "pfext-quick-start-intro__prereq-list" }, prereqs.map((pr) => (React.createElement(ListItem, { key: pr, className: "pfext-quick-start-intro__prereq-list__item" },
+            React.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" },
+                React.createElement(QuickStartMarkdownView, { content: pr }))))))));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(QuickStartMarkdownView, { content: introduction }),
+        prereqList,
+        React.createElement("p", { style: { marginBottom: 'var(--pf-v5-global--spacer--md)' } },
+            getResource('In this quick start, you will complete {{count, number}} task', tasks.length).replace('{{count, number}}', tasks.length),
+            ":"),
+        React.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect })));
+};
+
+const getAlertVariant = (status) => {
+    switch (status) {
+        case QuickStartTaskStatus.SUCCESS:
+            return 'success';
+        case QuickStartTaskStatus.FAILED:
+            return 'danger';
+        default:
+            return 'info';
+    }
+};
+const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
+    const { instructions, failedTaskHelp: taskHelp } = review;
+    const { getResource } = React.useContext(QuickStartContext);
+    const alertClassNames = css('pfext-quick-start-task-review', {
+        'pfext-quick-start-task-review--success': taskStatus === QuickStartTaskStatus.SUCCESS,
+        'pfext-quick-start-task-review--failed': taskStatus === QuickStartTaskStatus.FAILED,
+    });
+    const title = React.createElement("span", { className: alertClassNames }, getResource('Check your work'));
+    return (React.createElement(Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true, role: "alert" },
+        React.createElement(QuickStartMarkdownView, { content: instructions }),
+        React.createElement("span", { className: "pfext-quick-start-task-review__actions" },
+            React.createElement(Radio, { id: "review-success", name: "review-success", "data-testid": "qs-drawer-check-yes", label: getResource('Yes'), className: "pfext-quick-start-task-review__radio", isChecked: taskStatus === QuickStartTaskStatus.SUCCESS, onChange: () => onTaskReview(QuickStartTaskStatus.SUCCESS) }),
+            React.createElement(Radio, { id: "review-failed", name: "review-failed", "data-testid": "qs-drawer-check-no", label: getResource('No'), className: "pfext-quick-start-task-review__radio", isChecked: taskStatus === QuickStartTaskStatus.FAILED, onChange: () => onTaskReview(QuickStartTaskStatus.FAILED) })),
+        taskStatus === QuickStartTaskStatus.FAILED && taskHelp && (React.createElement(QuickStartMarkdownView, { content: taskHelp, exactHeight: true }))));
+};
+
+const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onTaskSelect, }) => {
+    const { getResource, alwaysShowTaskReview } = React.useContext(QuickStartContext);
+    return (React.createElement("div", { className: "pfext-quick-start-tasks__list" },
+        React.createElement("ul", null, tasks
+            .filter((_, index) => allTaskStatuses[index] !== QuickStartTaskStatus.INIT)
+            .map((task, index) => {
+            const { title, description, review } = task;
+            const isActiveTask = index === taskNumber;
+            const taskStatus = allTaskStatuses[index];
+            const shouldShowTaskReview = (!QUICKSTART_TASKS_INITIAL_STATES.includes(taskStatus) || alwaysShowTaskReview) &&
+                review;
+            return (React.createElement(React.Fragment, { key: title },
+                React.createElement(QuickStartTaskHeader, { taskIndex: index + 1, title: title, size: "md", subtitle: getResource('{{index, number}} of {{tasks, number}}')
+                        .replace('{{index, number}}', index + 1)
+                        .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }, isActiveTask && (React.createElement("div", { className: "pfext-quick-start-task__content" },
+                    React.createElement(QuickStartMarkdownView, { content: description }),
+                    shouldShowTaskReview && (React.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview })))))));
+        }))));
+};
+
+const QuickStartContent = React.forwardRef(({ quickStart, nextQuickStarts = [], taskNumber, allTaskStatuses, onTaskSelect, onTaskReview, onQuickStartChange, }, ref) => {
+    const { spec: { introduction, tasks, conclusion, prerequisites }, } = quickStart;
+    const totalTasks = tasks.length;
+    return (React.createElement("div", { className: "pfext-quick-start-content", ref: ref },
+        taskNumber === -1 && (React.createElement(QuickStartIntroduction, { tasks: tasks, allTaskStatuses: allTaskStatuses, introduction: introduction, prerequisites: prerequisites, onTaskSelect: onTaskSelect })),
+        taskNumber > -1 && taskNumber < totalTasks && (React.createElement(QuickStartTasks, { tasks: tasks, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskReview: onTaskReview, onTaskSelect: onTaskSelect })),
+        taskNumber === totalTasks && (React.createElement(QuickStartConclusion, { tasks: tasks, conclusion: conclusion, allTaskStatuses: allTaskStatuses, nextQuickStarts: nextQuickStarts, onQuickStartChange: onQuickStartChange, onTaskSelect: onTaskSelect }))));
+});
+
+const QuickStartFooter = ({ status, taskNumber, totalTasks, onNext, onBack, footerClass, quickStartId, }) => {
+    const { restartQuickStart, getResource } = React.useContext(QuickStartContext);
+    const PrimaryButtonText = React.useMemo(() => ({
+        START: getResource('Start'),
+        CONTINUE: getResource('Continue'),
+        NEXT: getResource('Next'),
+        CLOSE: getResource('Close'),
+    }), [getResource]);
+    const SecondaryButtonText = React.useMemo(() => ({
+        BACK: getResource('Back'),
+        RESTART: getResource('Restart'),
+    }), [getResource]);
+    const onRestart = React.useCallback((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        restartQuickStart(quickStartId, totalTasks);
+    }, [quickStartId, restartQuickStart, totalTasks]);
+    const getPrimaryButtonText = React.useMemo(() => {
+        if (status === QuickStartStatus.NOT_STARTED) {
+            return PrimaryButtonText.START;
+        }
+        if (taskNumber === totalTasks) {
+            return PrimaryButtonText.CLOSE;
+        }
+        if (taskNumber > -1 && taskNumber < totalTasks) {
+            return PrimaryButtonText.NEXT;
+        }
+        return PrimaryButtonText.CONTINUE;
+    }, [taskNumber, totalTasks, PrimaryButtonText, status]);
+    const getPrimaryButton = React.useMemo(() => (React.createElement(Button, { variant: "primary", className: "pfext-quick-start-footer__actionbtn", onClick: onNext, "data-testid": `qs-drawer-${camelize(getPrimaryButtonText)}`, "data-test": `${getPrimaryButtonText} button` }, getPrimaryButtonText)), [getPrimaryButtonText, onNext]);
+    const getSecondaryButton = React.useMemo(() => taskNumber === -1 && status !== QuickStartStatus.NOT_STARTED ? (React.createElement(Button, { variant: "secondary", onClick: onRestart, "data-testid": "qs-drawer-restart" }, SecondaryButtonText.RESTART)) : (taskNumber > -1 && (React.createElement(Button, { variant: "secondary", onClick: onBack, "data-testid": "qs-drawer-back" }, SecondaryButtonText.BACK))), [onRestart, onBack, SecondaryButtonText, status, taskNumber]);
+    const getSideNoteAction = React.useMemo(() => taskNumber !== -1 && (React.createElement(Button, { variant: "link", className: "pfext-quick-start-footer__restartbtn", onClick: onRestart, "data-testid": "qs-drawer-side-note-action" }, SecondaryButtonText.RESTART)), [taskNumber, onRestart, SecondaryButtonText.RESTART]);
+    return (React.createElement("div", { className: `pfext-quick-start-footer ${footerClass}` },
+        getPrimaryButton,
+        getSecondaryButton,
+        getSideNoteAction));
+};
+
+const QuickStartController = ({ quickStart, nextQuickStarts, contentRef, footerClass, }) => {
+    const { metadata: { name }, spec: { tasks = [] }, } = quickStart;
+    const totalTasks = tasks === null || tasks === void 0 ? void 0 : tasks.length;
+    const { activeQuickStartState, setActiveQuickStart, setQuickStartTaskNumber, setQuickStartTaskStatus, nextStep, previousStep, } = React.useContext(QuickStartContext);
+    const status = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.status;
+    const taskNumber = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.taskNumber;
+    const allTaskStatuses = tasks.map((task, index) => activeQuickStartState[`taskStatus${index}`]);
+    const handleQuickStartChange = React.useCallback((quickStartId) => setActiveQuickStart(quickStartId), [setActiveQuickStart]);
+    const handleTaskStatusChange = React.useCallback((newTaskStatus) => setQuickStartTaskStatus(newTaskStatus), [setQuickStartTaskStatus]);
+    const getQuickStartActiveTask = React.useCallback(() => {
+        let activeTaskNumber = 0;
+        while (activeTaskNumber !== totalTasks &&
+            activeQuickStartState[`taskStatus${activeTaskNumber}`] === QuickStartTaskStatus.SUCCESS) {
+            activeTaskNumber++;
+        }
+        return activeTaskNumber;
+    }, [totalTasks, activeQuickStartState]);
+    const handleQuickStartContinue = React.useCallback(() => {
+        const activeTaskNumber = getQuickStartActiveTask();
+        setQuickStartTaskNumber(name, activeTaskNumber);
+    }, [getQuickStartActiveTask, setQuickStartTaskNumber, name]);
+    const handleNext = React.useCallback(() => {
+        if (status === QuickStartStatus.COMPLETE && taskNumber === totalTasks) {
+            return handleQuickStartChange('');
+        }
+        if (status !== QuickStartStatus.NOT_STARTED && taskNumber === -1) {
+            return handleQuickStartContinue();
+        }
+        return nextStep(totalTasks);
+    }, [handleQuickStartChange, nextStep, status, taskNumber, totalTasks, handleQuickStartContinue]);
+    const handleBack = React.useCallback(() => previousStep(), [previousStep]);
+    const handleTaskSelect = React.useCallback((selectedTaskNumber) => {
+        setQuickStartTaskNumber(name, selectedTaskNumber);
+    }, [name, setQuickStartTaskNumber]);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(QuickStartContent, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskSelect: handleTaskSelect, onTaskReview: handleTaskStatusChange, onQuickStartChange: handleQuickStartChange, ref: contentRef }),
+        React.createElement(QuickStartFooter, { status: status, taskNumber: taskNumber, totalTasks: totalTasks, onNext: handleNext, onBack: handleBack, footerClass: footerClass, quickStartId: quickStart.metadata.name })));
+};
+
+const getElement = (appendTo) => {
+    if (typeof appendTo === 'function') {
+        return appendTo();
+    }
+    return appendTo;
+};
+const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
+    React.useEffect(() => {
+        if (node) {
+            node.scrollTo({ top: 0, behavior: 'smooth' });
+        }
+    }, [taskNumber, node]);
+};
+const QuickStartPanelContent = (_a) => {
+    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, headerVariant = '' } = _a, props = __rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
+    const titleRef = React.useRef(null);
+    const { getResource, activeQuickStartState } = React.useContext(QuickStartContext);
+    const [contentRef, setContentRef] = React.useState();
+    const shadows = useScrollShadows(contentRef);
+    const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
+    const taskNumber = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.taskNumber;
+    useScrollTopOnTaskNumberChange(contentRef, taskNumber);
+    const nextQuickStarts = quickStarts.filter((qs) => { var _a; return (_a = quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.nextQuickStart) === null || _a === void 0 ? void 0 : _a.includes(qs.metadata.name); });
+    const headerClasses = css('pfext-quick-start-panel-content__header', {
+        'pfext-quick-start-panel-content__header__shadow': shadows === Shadows.top || shadows === Shadows.both,
+        'pfext-quick-start-panel-content__header--blue-white': headerVariant === 'blue-white',
+    });
+    const footerClass = css({
+        'pfext-quick-start-panel-content__footer__shadow': shadows === Shadows.bottom || shadows === Shadows.both,
+    });
+    const getStep = () => {
+        const tasks = quickStart.spec.tasks.length;
+        if (Number.parseInt(taskNumber) === -1) {
+            return 'intro';
+        }
+        if (Number.parseInt(taskNumber) === tasks) {
+            return 'conclusion';
+        }
+        return Number.parseInt(taskNumber) + 1;
+    };
+    React.useEffect(() => {
+        if (quickStart) {
+            titleRef.current.focus();
+        }
+    }, [quickStart]);
+    const content = quickStart ? (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base", "data-testid": `qs-drawer-${camelize(quickStart.spec.displayName)}`, "data-qs": `qs-step-${getStep()}`, "data-test": "quickstart drawer" }, props),
+        React.createElement("div", { className: headerClasses },
+            React.createElement(DrawerHead, null,
+                React.createElement("div", { className: "pfext-quick-start-panel-content__title", tabIndex: -1, ref: titleRef },
+                    React.createElement(Title, { headingLevel: "h2", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-v5-global--spacer--md)' } },
+                        React.createElement("span", { dangerouslySetInnerHTML: {
+                                __html: removeParagraphWrap(markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName)),
+                            } }),
+                        ' ',
+                        React.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, (quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                            ? getResource('{{type}} • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                                .replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                                .replace('{{type}}', getResource('Type'))
+                            : getResource('Type')))),
+                showClose && (React.createElement(DrawerActions, null,
+                    React.createElement(DrawerCloseButton, { onClick: handleClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))))),
+        React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
+            React.createElement(QuickStartController, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, footerClass: footerClass, contentRef: setContentRef })))) : null;
+    if (appendTo) {
+        return ReactDOM.createPortal(content, getElement(appendTo));
+    }
+    return content;
+};
+
+const QuickStartContainer = (_a) => {
+    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, useLegacyHeaderColors, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = true } = _a, props = __rest(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "useLegacyHeaderColors", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
+    const valuesForQuickstartContext = useValuesForQuickStartContext(Object.assign({ allQuickStarts: quickStarts, activeQuickStartID,
+        setActiveQuickStartID,
+        allQuickStartStates,
+        setAllQuickStartStates, footer: {
+            show: showCardFooters,
+        }, useLegacyHeaderColors,
+        language, resourceBundle: Object.assign({}, resourceBundle), loading,
+        useQueryParams,
+        markdown,
+        alwaysShowTaskReview }, contextProps));
+    React.useEffect(() => {
+        if (quickStarts &&
+            JSON.stringify(quickStarts) !== JSON.stringify(valuesForQuickstartContext.allQuickStarts)) {
+            valuesForQuickstartContext.setAllQuickStarts(quickStarts);
+        }
+    }, [quickStarts, valuesForQuickstartContext]);
+    React.useEffect(() => {
+        if (loading !== valuesForQuickstartContext.loading) {
+            valuesForQuickstartContext.setLoading(loading);
+        }
+    }, [loading, valuesForQuickstartContext]);
+    const drawerProps = Object.assign({ appendTo,
+        fullWidth,
+        onCloseInProgress,
+        onCloseNotInProgress }, props);
+    return (React.createElement(QuickStartContext.Provider, { value: valuesForQuickstartContext },
+        React.createElement(QuickStartDrawer, Object.assign({}, drawerProps), children)));
+};
+const QuickStartDrawer = (_a) => {
+    var { quickStarts = [], children, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress } = _a, props = __rest(_a, ["quickStarts", "children", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress"]);
+    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, useLegacyHeaderColors, } = React.useContext(QuickStartContext);
+    const combinedQuickStarts = allQuickStarts.concat(quickStarts);
+    React.useEffect(() => {
+        const params = new URLSearchParams(window.location.search);
+        // if there is a quick start param, but the quick start is not active, set it
+        // this can happen if a new browser session is opened or an incognito window for example
+        const quickStartIdFromParam = params.get(QUICKSTART_ID_FILTER_KEY) || '';
+        if (quickStartIdFromParam && activeQuickStartID !== quickStartIdFromParam) {
+            const activeQuickStart = getQuickStartByName(quickStartIdFromParam, combinedQuickStarts);
+            // don't try to load a quick start that is actually just an external resource (spec.link)
+            if (combinedQuickStarts.length > 0 && activeQuickStart && !activeQuickStart.spec.link) {
+                setActiveQuickStart(quickStartIdFromParam);
+            }
+        }
+    }, [activeQuickStartID, combinedQuickStarts, setActiveQuickStart]);
+    React.useEffect(() => {
+        // If activeQuickStartID was changed through prop from QuickStartContainer, need to init the state if it does not exist yet
+        if (activeQuickStartID && !allQuickStartStates[activeQuickStartID]) {
+            setAllQuickStartStates(Object.assign(Object.assign({}, allQuickStartStates), { [activeQuickStartID]: getDefaultQuickStartState() }));
+        }
+    }, [activeQuickStartID, allQuickStartStates, setAllQuickStartStates]);
+    const [modalOpen, setModalOpen] = React.useState(false);
+    const activeQuickStartStatus = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.status;
+    const onClose = () => setActiveQuickStart('');
+    const handleClose = () => {
+        if (activeQuickStartStatus === QuickStartStatus.IN_PROGRESS) {
+            if (onCloseInProgress) {
+                onCloseInProgress();
+            }
+            else {
+                setModalOpen(true);
+            }
+        }
+        else if (onCloseNotInProgress) {
+            onCloseNotInProgress();
+        }
+        else {
+            onClose();
+        }
+    };
+    const onModalConfirm = () => {
+        setModalOpen(false);
+        onClose();
+    };
+    const onModalCancel = () => setModalOpen(false);
+    const fullWidthPanelStyle = fullWidth
+        ? {
+            style: {
+                flex: 1,
+            },
+        }
+        : {};
+    const fullWidthBodyStyle = fullWidth
+        ? {
+            style: {
+                display: activeQuickStartID ? 'none' : 'flex',
+            },
+        }
+        : {};
+    const panelContent = (React.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth, headerVariant: useLegacyHeaderColors ? '' : 'blue-white' }, fullWidthPanelStyle)));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Drawer, Object.assign({ isExpanded: !!activeQuickStartID, isInline: true }, props), children ? (React.createElement(DrawerContent, Object.assign({ panelContent: panelContent }, fullWidthBodyStyle),
+            React.createElement(DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-v5-c-drawer__main" }, panelContent))),
+        React.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
+};
+
+const HelpTopicContextDefaults = {
+    helpTopics: [],
+    setHelpTopics: () => { },
+    activeHelpTopic: null,
+    setActiveHelpTopicByName: () => { },
+    filteredHelpTopics: [],
+    setFilteredHelpTopics: () => { },
+    loading: false,
+};
+const HelpTopicContext = React__default.createContext(HelpTopicContextDefaults);
+const useValuesForHelpTopicContext = (value = {}) => {
+    const combinedValue = Object.assign(Object.assign({}, HelpTopicContextDefaults), value);
+    const [loading, setLoading] = React__default.useState(combinedValue.loading);
+    // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
+    const [helpTopics, setHelpTopics] = React__default.useState(combinedValue.helpTopics || []);
+    const [activeHelpTopic, setActiveHelpTopic] = React__default.useState(combinedValue.activeHelpTopic || null);
+    const setActiveHelpTopicByName = React__default.useCallback((helpTopicName) => {
+        const topic = helpTopics.find((t) => t.name === helpTopicName);
+        if (!helpTopicName) {
+            setActiveHelpTopic(null);
+            return;
+        }
+        setActiveHelpTopic(topic);
+    }, [helpTopics]);
+    const [filteredHelpTopics, setFilteredHelpTopics] = React__default.useState(combinedValue.filteredHelpTopics || []);
+    return {
+        helpTopics,
+        setHelpTopics,
+        activeHelpTopic,
+        setActiveHelpTopicByName,
+        filteredHelpTopics,
+        setFilteredHelpTopics,
+        loading,
+        setLoading,
+    };
+};
+
+const HelpTopicPanelContent = (_a) => {
+    var _b, _c;
+    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true, onClose } = _a, props = __rest(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
+    const { setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
+    const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React.useState(false);
+    const toggleHelpTopicMenu = () => {
+        setIsHelpTopicMenuOpen(!isHelpTopicMenuOpen);
+    };
+    const onSelectHelpTopic = (_event, value) => {
+        const topicName = value;
+        setActiveHelpTopicByName(topicName.toString());
+        toggleHelpTopicMenu();
+    };
+    const helpTopicOptions = filteredHelpTopics.length > 1 &&
+        filteredHelpTopics.map((topic) => (React.createElement(SelectOption, { key: topic.name, value: topic.name }, topic.title)));
+    const paddingContainer = (children) => React.createElement("div", { style: { padding: '24px' } }, children);
+    const panelBodyItems = (React.createElement(React.Fragment, null,
+        paddingContainer(React.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
+        !!((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React.createElement(Divider, null),
+        paddingContainer(React.createElement(Stack, { hasGutter: true }, (_c = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _c === void 0 ? void 0 : _c.map(({ href, text, newTab, isExternal }, index) => (React.createElement(StackItem, { key: index },
+            React.createElement(Button, { component: "a", href: href, target: newTab ? '_blank' : '', rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: isExternal ? React.createElement(ExternalLinkAltIcon, null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href))))))));
+    const content = (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base" }, props),
+        React.createElement("div", null,
+            React.createElement(DrawerHead, null,
+                React.createElement("div", { className: "pfext-quick-start-panel-content__title" },
+                    helpTopicOptions && (React.createElement(Select, { isPlain: true, id: "help-topics-select", selected: activeHelpTopic, isOpen: isHelpTopicMenuOpen, onSelect: onSelectHelpTopic, onOpenChange: (isOpen) => setIsHelpTopicMenuOpen(isOpen), toggle: (toggleRef) => (React.createElement(MenuToggle, { isFullWidth: true, ref: toggleRef, icon: React.createElement(BarsIcon, null), onClick: toggleHelpTopicMenu, isExpanded: isHelpTopicMenuOpen }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)) },
+                        React.createElement(SelectList, null, helpTopicOptions))),
+                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-v5-global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)),
+                React.createElement(DrawerActions, null,
+                    React.createElement(DrawerCloseButton, { onClick: onClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))),
+            React.createElement(Divider, null),
+            React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" }, panelBodyItems))));
+    return content;
+};
+
+const HelpTopicContainer = (_a) => {
+    var { helpTopics, children, resourceBundle, language, loading = false, markdown, contextProps } = _a, props = __rest(_a, ["helpTopics", "children", "resourceBundle", "language", "loading", "markdown", "contextProps"]);
+    const valuesForHelpTopicContext = useValuesForHelpTopicContext(Object.assign({ helpTopics,
+        language, resourceBundle: Object.assign({}, resourceBundle), loading,
+        markdown }, contextProps));
+    React.useEffect(() => {
+        if (loading !== valuesForHelpTopicContext.loading) {
+            valuesForHelpTopicContext.setLoading(loading);
+        }
+    }, [loading, valuesForHelpTopicContext]);
+    React.useEffect(() => {
+        if (helpTopics &&
+            JSON.stringify(helpTopics) !== JSON.stringify(valuesForHelpTopicContext.helpTopics)) {
+            valuesForHelpTopicContext.setHelpTopics(helpTopics);
+        }
+    }, [helpTopics, valuesForHelpTopicContext]);
+    return (React.createElement(HelpTopicContext.Provider, { value: valuesForHelpTopicContext },
+        React.createElement(HelpTopicDrawer, Object.assign({}, props), children)));
+};
+const HelpTopicDrawer = (_a) => {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
+    const onClose = () => {
+        setActiveHelpTopicByName('');
+    };
+    const panelContent = (React.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics, onClose: onClose }));
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Drawer, Object.assign({ isExpanded: !!activeHelpTopic, isInline: true }, props), children ? (React.createElement(DrawerContent, { panelContent: panelContent },
+            React.createElement(DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-v5-c-drawer__main" }, panelContent)))));
+};
+
+const useLocalStorage = (key, initialValue) => {
+    // State to store our value
+    // Pass initial state function to useState so logic is only executed once
+    const [storedValue, setStoredValue] = useState(() => {
+        try {
+            // Get from local storage by key
+            const item = window.localStorage.getItem(key);
+            // Parse stored json or if none return initialValue
+            return item ? JSON.parse(item) : initialValue;
+        }
+        catch (error) {
+            // If error also return initialValue
+            // eslint-disable-next-line no-console
+            console.log(error);
+            return initialValue;
+        }
+    });
+    // Return a wrapped version of useState's setter function that ...
+    // ... persists the new value to localStorage.
+    const setValue = (value) => {
+        try {
+            // Allow value to be a function so we have same API as useState
+            const valueToStore = value instanceof Function ? value(storedValue) : value;
+            // Save state
+            setStoredValue(valueToStore);
+            // Save to local storage
+            window.localStorage.setItem(key, JSON.stringify(valueToStore));
+        }
+        catch (error) {
+            // A more advanced implementation would handle the error case
+            // eslint-disable-next-line no-console
+            console.log(error);
+        }
+    };
+    return [storedValue, setValue];
+};
+
+/* eslint-disable */
+// Brought in from dev to publish this with QS module
+// Dev now imports from here
+const ProcQuickStartParser = (quickStart, environmentVariables) => {
+    var _a;
+    const replaceEnvironmentVariables = (s) => s === null || s === void 0 ? void 0 : s.replace(/\${(\w+)}/, (substring, name) => {
+        return environmentVariables ? ([name] ? environmentVariables[name] : substring) : substring;
+    });
+    quickStart.spec.tasks = (_a = quickStart.spec.tasks) === null || _a === void 0 ? void 0 : _a.map((task, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        let proc;
+        let answer;
+        if (typeof task === 'string') {
+            proc = task;
+            answer = {};
+        }
+        else {
+            proc = task.proc;
+            answer = task;
+            delete task.proc;
+        }
+        let description = '', procedure, verification, title, summaryFailed, success, reviewFailed, prerequisites;
+        if (proc) {
+            const taskDOM = document.createElement('div');
+            taskDOM.innerHTML = proc;
+            // remove the screencapture images
+            taskDOM.querySelectorAll('.imageblock.screencapture').forEach((node) => {
+                var _a;
+                (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+            });
+            title = (_a = taskDOM
+                .querySelector('h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child')) === null || _a === void 0 ? void 0 : _a.innerHTML.trim();
+            let sectionBody = taskDOM.querySelector('.sectionbody');
+            if (!(sectionBody === null || sectionBody === void 0 ? void 0 : sectionBody.hasChildNodes())) {
+                // possibly in other templates, where we want to look for article
+                sectionBody = taskDOM.querySelector('article');
+            }
+            if (sectionBody) {
+                for (let i = 0; i < sectionBody.children.length || 0; i++) {
+                    /**
+                    child typically looks like:
+          
+                    <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;
+};
+
+export { Box, CamelCaseWrap, EmptyBox, HELP_TOPIC_NAME_KEY, HelpTopicContainer, HelpTopicContext, HelpTopicContextDefaults, HelpTopicDrawer, Loading, LoadingBox, ProcQuickStartParser, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForHelpTopicContext, useValuesForQuickStartContext };
+//# sourceMappingURL=index.es.js.map