@patternfly/quickstarts 6.0.0-alpha.2 → 6.0.0-alpha.4

package/dist/index.js

@@ -6,9 +6,9 @@ var React = require('react');
 var reactCore = require('@patternfly/react-core');
 var SearchIcon = require('@patternfly/react-icons/dist/js/icons/search-icon');
 var reactStyles = require('@patternfly/react-styles');
-var tslib = require('tslib');
-require('@patternfly/react-styles/css/components/Form/form');
 var RocketIcon = require('@patternfly/react-icons/dist/js/icons/rocket-icon');
+var tslib = require('tslib');
+var deprecated = require('@patternfly/react-core/deprecated');
 var ReactDOM = require('react-dom');
 var server = require('react-dom/server');
 var CopyIcon = require('@patternfly/react-icons/dist/js/icons/copy-icon');
@@ -20,8 +20,8 @@ var CheckCircleIcon = require('@patternfly/react-icons/dist/js/icons/check-circl
 require('@patternfly/react-icons/dist/js/icons/exclamation-circle-icon');
 var InfoCircleIcon = require('@patternfly/react-icons/dist/js/icons/info-circle-icon');
 var ExternalLinkAltIcon = require('@patternfly/react-icons/dist/js/icons/external-link-alt-icon');
-var OutlinedClockIcon = require('@patternfly/react-icons/dist/js/icons/outlined-clock-icon');
 var OutlinedBookmarkIcon = require('@patternfly/react-icons/dist/js/icons/outlined-bookmark-icon');
+var OutlinedClockIcon = require('@patternfly/react-icons/dist/js/icons/outlined-clock-icon');
 var ArrowRightIcon = require('@patternfly/react-icons/dist/js/icons/arrow-right-icon');
 var BarsIcon = require('@patternfly/react-icons/dist/js/icons/bars-icon');
 
@@ -59,8 +59,8 @@ var SyncAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SyncAltIcon);
 var CheckCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(CheckCircleIcon);
 var InfoCircleIcon__default = /*#__PURE__*/_interopDefaultLegacy(InfoCircleIcon);
 var ExternalLinkAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExternalLinkAltIcon);
-var OutlinedClockIcon__default = /*#__PURE__*/_interopDefaultLegacy(OutlinedClockIcon);
 var OutlinedBookmarkIcon__default = /*#__PURE__*/_interopDefaultLegacy(OutlinedBookmarkIcon);
+var OutlinedClockIcon__default = /*#__PURE__*/_interopDefaultLegacy(OutlinedClockIcon);
 var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
 var BarsIcon__default = /*#__PURE__*/_interopDefaultLegacy(BarsIcon);
 
@@ -796,9 +796,7 @@ const useValuesForQuickStartContext = (value = {}) => {
         setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [activeQuickStartID]: updatedQuickStart })));
     }, [allQuickStartStates, activeQuickStartID, setAllQuickStartStates]);
     const activeQuickStartState = (_b = allQuickStartStates === null || allQuickStartStates === void 0 ? void 0 : allQuickStartStates[activeQuickStartID]) !== null && _b !== void 0 ? _b : {};
-    const getQuickStartForId = React.useCallback((id) => allQuickStartStates[id], [
-        allQuickStartStates,
-    ]);
+    const getQuickStartForId = React.useCallback((id) => allQuickStartStates[id], [allQuickStartStates]);
     return {
         allQuickStarts: quickStarts,
         setAllQuickStarts: updateAllQuickStarts,
@@ -877,69 +875,9 @@ const CamelCaseWrap = ({ value, dataTest }) => {
     return rendered;
 };
 
-class CatalogTile extends React__namespace.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__namespace.createElement("div", { className: "catalog-tile-pf-badge-container" }, badges.map((badge, index) => (React__namespace.createElement("span", { key: `badge-${index}` }, badge)))));
-        };
-        this.generatedId = reactCore.getUniqueId('pf-catalog-tile');
-    }
-    render() {
-        const _a = this.props, { id, className, featured, onClick, href, icon, iconImg, iconAlt, iconClass, badges, title, vendor, description, footer, 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ref, children } = _a, props = tslib.__rest(_a, ["id", "className", "featured", "onClick", "href", "icon", "iconImg", "iconAlt", "iconClass", "badges", "title", "vendor", "description", "footer", "ref", "children"]);
-        return (React__namespace.createElement(reactCore.Card, Object.assign({ component: href ? 'a' : 'div', id: id || this.generatedId, href: href || '#', className: reactStyles.css('catalog-tile-pf', { featured }, className), variant: featured ? 'secondary' : 'default', isClickable: !!onClick }, props),
-            (badges.length > 0 || iconImg || iconClass || icon || onClick) && (React__namespace.createElement(reactCore.CardHeader, { actions: { actions: badges.length > 0 && this.renderBadges(badges), hasNoOffset: true }, selectableActions: onClick && {
-                    selectableActionId: id + '-input',
-                    onClickAction: (e) => this.handleClick(e),
-                    selectableActionAriaLabelledby: id
-                } },
-                iconImg && React__namespace.createElement("img", { className: "catalog-tile-pf-icon", src: iconImg, alt: iconAlt }),
-                !iconImg && (iconClass || icon) && React__namespace.createElement("span", { className: `catalog-tile-pf-icon ${iconClass}` }, icon))),
-            React__namespace.createElement(reactCore.CardTitle, { className: "catalog-tile-pf-header" },
-                React__namespace.createElement("div", { className: "catalog-tile-pf-title" }, title),
-                vendor && React__namespace.createElement("div", { className: "catalog-tile-pf-subtitle" }, vendor)),
-            (description || children) && (React__namespace.createElement(reactCore.CardBody, { className: "catalog-tile-pf-body" },
-                description && (React__namespace.createElement("div", { className: "catalog-tile-pf-description" },
-                    React__namespace.createElement("span", { className: reactStyles.css({ 'has-footer': footer }) }, description))),
-                children)),
-            footer && React__namespace.createElement(reactCore.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 = tslib.__rest(_a, ["isFullScreen", "className"]);
-    return (React__namespace.createElement(reactCore.Modal, Object.assign({}, props, { className: reactStyles.css('pfext-modal', className), appendTo: () => (isFullScreen ? document.body : document.querySelector('#modal-container')) })));
+    return (React__namespace.createElement(deprecated.Modal, Object.assign({}, props, { className: reactStyles.css('pfext-modal', className), appendTo: () => (isFullScreen ? document.body : document.querySelector('#modal-container')) })));
 };
 
 const getContainer = (container) => typeof container === 'function' ? container() : container;
@@ -1070,44 +1008,6 @@ var Shadows;
     Shadows["top"] = "top";
     Shadows["bottom"] = "bottom";
 })(Shadows || (Shadows = {}));
-const useScrollShadows = (node) => {
-    const [shadows, setShadows] = React__namespace.useState(Shadows.none);
-    const computeShadows = React__namespace.useCallback(() => {
-        if (node) {
-            const { scrollTop, clientHeight, scrollHeight } = node;
-            const top = scrollTop !== 0;
-            const bottom = scrollTop + clientHeight < scrollHeight;
-            if (top && bottom) {
-                setShadows(Shadows.both);
-            }
-            else if (top) {
-                setShadows(Shadows.top);
-            }
-            else if (bottom) {
-                setShadows(Shadows.bottom);
-            }
-            else {
-                setShadows(Shadows.none);
-            }
-        }
-    }, [node]);
-    // recompute when the scroll container changes in size
-    useResizeObserver(computeShadows, node);
-    React__namespace.useEffect(() => {
-        if (node) {
-            // compute initial shadows
-            computeShadows();
-            // listen for scroll events
-            node.addEventListener('scroll', computeShadows);
-        }
-        return () => {
-            if (node) {
-                node.removeEventListener('scroll', computeShadows);
-            }
-        };
-    }, [node, computeShadows]);
-    return shadows;
-};
 
 const useBoundingClientRect = (targetElement) => {
     const [clientRect, setClientRect] = React__namespace.useState(() => targetElement ? targetElement.getBoundingClientRect() : null);
@@ -1280,6 +1180,7 @@ const useInlineCopyClipboardShowdownExtension = () => {
     }), [getResource]);
 };
 
+/* eslint-disable max-len */
 const useMultilineCopyClipboardShowdownExtension = () => {
     const { getResource } = React__namespace.useContext(QuickStartContext);
     return React__namespace.useMemo(() => ({
@@ -1300,10 +1201,7 @@ const useMultilineCopyClipboardShowdownExtension = () => {
                 </div>
               </div>
               <div class="pf-v6-c-code-block__content">
-                <pre class="pf-v6-c-code-block__pre pfext-code-block__pre">
-                  <code class="pf-v6-c-code-block__code" 
-                    ${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code>
-                </pre>
+                <pre class="pf-v6-c-code-block__pre pfext-code-block__pre"><code class="pf-v6-c-code-block__code"${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code></pre>
               </div>
             </div>`;
         },
@@ -1324,16 +1222,40 @@ const markdownConvert = (markdown, extensions) => {
     }
     DOMPurify.addHook('beforeSanitizeElements', function (node) {
         // nodeType 1 = element type
+        var _a;
         // 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-v6-c-list');
-            return node;
+        // add PF content classes
+        if (node.nodeType === 1) {
+            const contentElements = [
+                'ul',
+                'ol',
+                'p',
+                'li',
+                'hr',
+                'h1',
+                'h2',
+                'h3',
+                'h4',
+                'h5',
+                'h6',
+                'blockquote',
+                'pre',
+                'dl',
+                'dt',
+                'dd',
+                'table',
+            ];
+            if (contentElements.includes(node.nodeName.toLowerCase())) {
+                // don't overwrite elements already being styled by PatternFly
+                if (!((_a = node.getAttribute('class')) === null || _a === void 0 ? void 0 : _a.includes('pf-v6-c-'))) {
+                    node.setAttribute('class', `pf-v6-c-content--${node.nodeName.toLowerCase()}`);
+                    return node;
+                }
+            }
         }
     });
     // Add a hook to make all links open a new window
@@ -1401,7 +1323,7 @@ const RenderExtension = ({ renderExtension, selector, markup, docContext, }) =>
 };
 const InlineMarkdownView = ({ markup, isEmpty, renderExtension, className, }) => {
     const id = React__namespace.useMemo(() => uniqueId('markdown'), []);
-    return (React__namespace.createElement("div", { className: reactStyles.css('pfext-markdown-view', { 'is-empty': isEmpty }, className), id: id },
+    return (React__namespace.createElement("div", { className: reactStyles.css({ 'is-empty': isEmpty }, className), id: id },
         React__namespace.createElement("div", { dangerouslySetInnerHTML: { __html: markup } }),
         renderExtension && (React__namespace.createElement(RenderExtension, { renderExtension: renderExtension, selector: `#${id}`, markup: markup }))));
 };
@@ -1473,7 +1395,6 @@ const SELECTOR_ID = `[\\w-]+`;
 // [linkLabel]{{action id}}
 const HIGHLIGHT_REGEXP = new RegExp(`\\[(${LINK_LABEL})]{{(${HIGHLIGHT_ACTIONS.join('|')}) (${SELECTOR_ID})}}`, 'g');
 
-const removeParagraphWrap = (markdown) => markdown.replace(/^<p>|<\/p>$/g, '');
 const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const { markdown } = React__namespace.useContext(QuickStartContext);
     const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
@@ -1525,7 +1446,7 @@ var AdmonitionType;
 })(AdmonitionType || (AdmonitionType = {}));
 const admonitionToAlertVariantMap = {
     [AdmonitionType.NOTE]: { variant: 'info' },
-    [AdmonitionType.TIP]: { variant: 'default', customIcon: React__namespace.createElement(LightbulbIcon__default['default'], null) },
+    [AdmonitionType.TIP]: { variant: 'custom', customIcon: React__namespace.createElement(LightbulbIcon__default['default'], null) },
     [AdmonitionType.IMPORTANT]: { variant: 'danger' },
     [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: React__namespace.createElement(FireIcon__default['default'], null) },
     [AdmonitionType.WARNING]: { variant: 'warning' },
@@ -1541,9 +1462,8 @@ React__namespace.useMemo(() => ({
         }
         admonitionType = admonitionType.toUpperCase();
         const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
-        const style = admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
         const mdContent = React__namespace.createElement(QuickStartMarkdownView, { content: content });
-        const pfAlert = (React__namespace.createElement(reactCore.Alert, { variant: variant, customIcon: customIcon && customIcon, isInline: true, title: admonitionType, className: "pfext-markdown-admonition", style: style }, mdContent));
+        const pfAlert = (React__namespace.createElement(reactCore.Alert, Object.assign({ variant: variant }, (customIcon && { customIcon }), { isInline: true, title: admonitionType, className: "pfext-markdown-admonition" }), mdContent));
         return removeTemplateWhitespace(server.renderToStaticMarkup(pfAlert));
     },
 }), []);
@@ -1652,42 +1572,39 @@ const StatusIcon = ({ status }) => (React__namespace.createElement(Status, { sta
 const QuickStartTileDescription = ({ description, prerequisites, }) => {
     const { getResource } = React__namespace.useContext(QuickStartContext);
     const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
+    const buttonRef = React__namespace.useRef(null);
     return (React__namespace.createElement(React__namespace.Fragment, null,
-        React__namespace.createElement(QuickStartMarkdownView, { content: description, className: "pfext-quick-start-tile-description" }),
-        (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React__namespace.createElement("div", { className: "pfext-quick-start-tile-prerequisites" },
-            React__namespace.createElement(reactCore.Text, { component: reactCore.TextVariants.h5, className: "pfext-quick-start-tile-prerequisites__text" },
+        React__namespace.createElement(QuickStartMarkdownView, { content: description }),
+        (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React__namespace.createElement(reactCore.Flex, { spaceItems: { default: 'spaceItemsSm' } },
+            React__namespace.createElement("h5", null,
                 getResource('Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length),
                 ' '),
-            React__namespace.createElement(reactCore.Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), className: "pfext-quick-start__base", bodyContent: React__namespace.createElement("div", { className: "pfext-popover__base" },
-                    React__namespace.createElement(reactCore.TextList, { "aria-label": getResource('Prerequisites'), className: "pfext-quick-start-tile-prerequisites-list" }, prereqs.map((prerequisite, index) => (
+            React__namespace.createElement(reactCore.Button, { variant: "link", isInline: true, "data-testid": "qs-card-prereqs", ref: buttonRef, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, "aria-label": getResource('Show prerequisites') },
+                React__namespace.createElement(InfoCircleIcon__default['default'], null)),
+            React__namespace.createElement(reactCore.Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), triggerRef: buttonRef, bodyContent: React__namespace.createElement("div", null,
+                    React__namespace.createElement("ul", { "aria-label": getResource('Prerequisites') }, prereqs.map((prerequisite, index) => (
                     // eslint-disable-next-line react/no-array-index-key
-                    React__namespace.createElement(reactCore.TextListItem, { key: index },
-                        React__namespace.createElement(QuickStartMarkdownView, { content: prerequisite })))))) },
-                React__namespace.createElement(reactCore.Button, { variant: "link", isInline: true, className: "pfext-quick-start-tile-prerequisites__icon", "data-testid": "qs-card-prereqs", onClick: (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                    }, "aria-label": getResource('Show prerequisites') },
-                    React__namespace.createElement(InfoCircleIcon__default['default'], null)))))));
+                    React__namespace.createElement("li", { key: index },
+                        React__namespace.createElement(QuickStartMarkdownView, { content: prerequisite })))))) })))));
 };
 
-const QuickStartTileFooter = ({ quickStartId, status, totalTasks, }) => {
+const QuickStartTileFooter = ({ quickStartId, status, totalTasks, onClickContinue, }) => {
     const { getResource } = React__namespace.useContext(QuickStartContext);
     const { activeQuickStartID, startQuickStart, restartQuickStart } = React__namespace.useContext(QuickStartContext);
-    const start = React__namespace.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
+    const start = React__namespace.useCallback(() => {
         startQuickStart(quickStartId, totalTasks);
     }, [quickStartId, startQuickStart, totalTasks]);
-    const restart = React__namespace.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
+    const restart = React__namespace.useCallback(() => {
         restartQuickStart(quickStartId, totalTasks);
     }, [quickStartId, restartQuickStart, totalTasks]);
     return (React__namespace.createElement(reactCore.Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
         status === exports.QuickStartStatus.NOT_STARTED && (React__namespace.createElement(reactCore.FlexItem, null,
             React__namespace.createElement(reactCore.Button, { onClick: start, variant: "link", isInline: true, "data-testid": "qs-card-notStarted-start", id: `${quickStartId}-start`, "aria-labelledby": `${quickStartId}-start ${quickStartId}` }, getResource('Start')))),
         status === exports.QuickStartStatus.IN_PROGRESS && activeQuickStartID !== quickStartId && (React__namespace.createElement(reactCore.FlexItem, null,
-            React__namespace.createElement(reactCore.Button, { variant: "link", isInline: true, "data-testid": "qs-card-inProgress-resume", id: `${quickStartId}-continue`, "aria-labelledby": `${quickStartId}-continue ${quickStartId}` }, getResource('Continue')))),
+            React__namespace.createElement(reactCore.Button, { variant: "link", onClick: onClickContinue, isInline: true, "data-testid": "qs-card-inProgress-resume", id: `${quickStartId}-continue`, "aria-labelledby": `${quickStartId}-continue ${quickStartId}` }, getResource('Continue')))),
         status === exports.QuickStartStatus.COMPLETE && (React__namespace.createElement(reactCore.FlexItem, null,
             React__namespace.createElement(reactCore.Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-complete-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart')))),
         status === exports.QuickStartStatus.IN_PROGRESS && (React__namespace.createElement(reactCore.FlexItem, null,
@@ -1701,42 +1618,43 @@ const QuickStartTileFooterExternal = ({ link, quickStartId, }) => {
             React__namespace.createElement(reactCore.Button, { component: "a", href: href, target: "_blank", rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: React__namespace.createElement(ExternalLinkAltIcon__default['default'], null), iconPosition: "right", id: quickStartId, "aria-labelledby": `${quickStartId}-external ${quickStartId}` }, text || href))));
 };
 
-const statusColorMap = {
-    [exports.QuickStartStatus.COMPLETE]: 'green',
-    [exports.QuickStartStatus.IN_PROGRESS]: 'purple',
-    [exports.QuickStartStatus.NOT_STARTED]: 'grey',
+const QuickStartTileHeader = ({ name, quickStartId, onSelect, }) => {
+    return (React__namespace.createElement(reactCore.Flex, { flexWrap: { default: 'nowrap' } },
+        React__namespace.createElement(reactCore.Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
+            React__namespace.createElement(reactCore.Button, { variant: "link", isInline: true, onClick: onSelect },
+                React__namespace.createElement(QuickStartMarkdownView, { content: name })))));
 };
-const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, action, }) => {
-    const { getResource } = React__namespace.useContext(QuickStartContext);
+
+const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, action, }) => {
+    const { metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
+    const { setActiveQuickStart, footer, getResource } = React__namespace.useContext(QuickStartContext);
+    const statusColorMap = {
+        [exports.QuickStartStatus.COMPLETE]: 'green',
+        [exports.QuickStartStatus.IN_PROGRESS]: 'purple',
+        [exports.QuickStartStatus.NOT_STARTED]: 'grey',
+    };
     const statusLocaleMap = {
         [exports.QuickStartStatus.COMPLETE]: getResource('Complete'),
         [exports.QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
         [exports.QuickStartStatus.NOT_STARTED]: getResource('Not started'),
     };
-    const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon__default['default'];
-    return (React__namespace.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React__namespace.createElement(reactCore.Flex, { flexWrap: { default: 'nowrap' } },
-            React__namespace.createElement(reactCore.Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
-                React__namespace.createElement(QuickStartMarkdownView, { content: name })),
-            action && (React__namespace.createElement(reactCore.Button, Object.assign({ "aria-label": action['aria-label'], icon: React__namespace.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps)))),
-        React__namespace.createElement("div", { className: "pfext-quick-start-tile-header__status" },
-            type && (React__namespace.createElement(reactCore.Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
-            duration && (React__namespace.createElement(reactCore.Label, { variant: "outline", "data-test": "duration", icon: React__namespace.createElement(OutlinedClockIcon__default['default'], null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
-            status !== exports.QuickStartStatus.NOT_STARTED && (React__namespace.createElement(reactCore.Label, { variant: "outline", color: statusColorMap[status], icon: React__namespace.createElement(StatusIcon, { status: status }), "data-test": "status" }, statusLocaleMap[status])))));
-};
-
-const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, action, }) => {
-    const { metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
-    const { setActiveQuickStart, footer } = React__namespace.useContext(QuickStartContext);
-    const ref = React__namespace.useRef(null);
     let quickStartIcon;
     if (typeof icon === 'object') {
-        quickStartIcon = React__namespace.createElement(reactCore.Icon, { size: "xl" }, icon);
+        quickStartIcon = React__namespace.createElement(reactCore.Icon, { size: "2xl" }, icon);
     }
     else {
-        quickStartIcon = (React__namespace.createElement(reactCore.Icon, { size: "xl" },
-            React__namespace.createElement(FallbackImg, { className: "pfext-catalog-item-icon__img--large", src: icon, alt: "", fallback: React__namespace.createElement(RocketIcon__default['default'], null) })));
+        quickStartIcon = (React__namespace.createElement(reactCore.Icon, { size: "2xl" },
+            React__namespace.createElement(FallbackImg, { src: icon, alt: "", className: "pfext-catalog-item-icon__img", fallback: React__namespace.createElement(RocketIcon__default['default'], null) })));
     }
+    const onSelect = () => {
+        if (!link) {
+            setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
+        }
+        else {
+            window.open(link.href, '_blank', 'noopener,noreferrer');
+        }
+        onClick();
+    };
     const footerComponent = React__namespace.useMemo(() => {
         if (footer && footer.show === false) {
             return null;
@@ -1744,52 +1662,44 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, act
         if (link) {
             return React__namespace.createElement(QuickStartTileFooterExternal, { link: link, quickStartId: id });
         }
-        return React__namespace.createElement(QuickStartTileFooter, { quickStartId: id, status: status, totalTasks: tasks === null || tasks === void 0 ? void 0 : tasks.length });
+        return (React__namespace.createElement(QuickStartTileFooter, { quickStartId: id, status: status, totalTasks: tasks === null || tasks === void 0 ? void 0 : tasks.length, onClickContinue: onSelect }));
     }, [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__namespace.createElement("div", { ref: ref, onClick: handleClick },
-        React__namespace.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__namespace.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__namespace.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 ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon__default['default'];
+    const additionalAction = action ? (React__namespace.createElement(reactCore.Button, Object.assign({ "aria-label": action['aria-label'], icon: React__namespace.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
+    return (React__namespace.createElement(reactCore.Card, Object.assign({ id: `${id}-catalog-tile`, style: { height: '100%' }, "data-testid": `qs-card-${camelize(displayName)}` }, (isActive && {
+        isClickable: true,
+        isSelectable: true,
+        isSelected: true,
+        isClicked: true,
+    })),
+        React__namespace.createElement(reactCore.CardHeader, Object.assign({}, (action && {
+            actions: { actions: additionalAction },
+        })), quickStartIcon),
+        React__namespace.createElement(reactCore.CardTitle, null,
+            React__namespace.createElement(QuickStartTileHeader, { name: displayName, onSelect: onSelect, quickStartId: id })),
+        React__namespace.createElement(reactCore.CardBody, null,
+            React__namespace.createElement(reactCore.Stack, { hasGutter: true },
+                React__namespace.createElement(reactCore.Flex, { spaceItems: { default: 'spaceItemsSm' } },
+                    type && React__namespace.createElement(reactCore.Label, { color: type.color }, type.text),
+                    durationMinutes && (React__namespace.createElement(reactCore.Label, { variant: "outline", "data-test": "duration", icon: React__namespace.createElement(OutlinedClockIcon__default['default'], null) }, getResource('{{duration, number}} minutes', durationMinutes).replace('{{duration, number}}', durationMinutes))),
+                    status !== exports.QuickStartStatus.NOT_STARTED && (React__namespace.createElement(reactCore.Label, { variant: "outline", color: statusColorMap[status], icon: React__namespace.createElement(StatusIcon, { status: status }), "data-test": "status" }, statusLocaleMap[status]))),
+                React__namespace.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }))),
+        React__namespace.createElement(reactCore.CardFooter, null, footerComponent)));
 };
 
 const QuickStartCatalog = ({ quickStarts }) => {
     const { activeQuickStartID, allQuickStartStates } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement("div", { className: "pfext-page-layout__content" },
-        React__namespace.createElement(reactCore.Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
+    return (React__namespace.createElement("div", null,
+        React__namespace.createElement(reactCore.Gallery, { hasGutter: true }, quickStarts.map((quickStart, index) => {
             const { metadata: { name: id }, } = quickStart;
-            return (React__namespace.createElement(reactCore.GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
-                React__namespace.createElement(QuickStartTile, { quickStart: quickStart, isActive: id === activeQuickStartID, status: getQuickStartStatus(allQuickStartStates, id) })));
+            return (React__namespace.createElement(QuickStartTile, { key: index, quickStart: quickStart, isActive: id === activeQuickStartID, status: getQuickStartStatus(allQuickStartStates, id) }));
         }))));
 };
 
 const QuickStartCatalogFilterSearch = (_a) => {
     var { searchInputText, handleTextChange } = _a, props = tslib.__rest(_a, ["searchInputText", "handleTextChange"]);
     const { getResource } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement(reactCore.ToolbarItem, { className: "pfext-quick-start-catalog-filter__input" },
+    return (React__namespace.createElement(reactCore.ToolbarItem, null,
         React__namespace.createElement(reactCore.SearchInput, Object.assign({ placeholder: getResource('Filter by keyword...'), value: searchInputText, onChange: (_ev, value) => handleTextChange(value), onClear: () => handleTextChange('') }, props))));
 };
 const QuickStartCatalogFilterSelect = (_a) => {
@@ -1804,7 +1714,7 @@ const QuickStartCatalogFilterSelect = (_a) => {
 };
 const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
     const { getResource } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement(reactCore.ToolbarItem, { className: "pfext-quick-start-catalog-filter__count", align: { default: 'alignEnd' } }, getResource('{{count, number}} item', quickStartsCount).replace('{{count, number}}', quickStartsCount)));
+    return (React__namespace.createElement(reactCore.ToolbarItem, { align: { default: 'alignEnd' } }, getResource('{{count, number}} item', quickStartsCount).replace('{{count, number}}', quickStartsCount)));
 };
 const QuickStartCatalogFilterSearchWrapper = ({ onSearchInputChange = () => { } }) => {
     const { useQueryParams, filter, setFilter } = React__namespace.useContext(QuickStartContext);
@@ -1894,7 +1804,7 @@ const QuickStartCatalogFilterCountWrapper = ({ quickStartsCount }) => React__nam
 
 const QuickStartCatalogFilter = (_a) => {
     var { quickStartsCount, onSearchInputChange = () => { }, onStatusChange = () => { } } = _a, props = tslib.__rest(_a, ["quickStartsCount", "onSearchInputChange", "onStatusChange"]);
-    return (React__namespace.createElement(reactCore.Toolbar, Object.assign({ usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, props),
+    return (React__namespace.createElement(reactCore.Toolbar, Object.assign({}, props),
         React__namespace.createElement(reactCore.ToolbarContent, null,
             React__namespace.createElement(QuickStartCatalogFilterSearchWrapper, { onSearchInputChange: onSearchInputChange }),
             React__namespace.createElement(QuickStartCatalogFilterStatusWrapper, { onStatusChange: onStatusChange }),
@@ -1970,28 +1880,29 @@ const QuickStartCatalogPage = ({ quickStarts, showFilter, sortFnc = (q1, q2) =>
     if (!allQuickStarts || allQuickStarts.length === 0) {
         return React__namespace.createElement(EmptyBox, { label: getResource('Quick Starts') });
     }
-    return (React__namespace.createElement("div", { className: "pfext-quick-start__base" },
-        showTitle && (React__namespace.createElement("div", { className: "pfext-page-layout__header" },
-            React__namespace.createElement(reactCore.Text, { component: "h1", className: "pfext-page-layout__title", "data-test": "page-title" }, title || getResource('Quick Starts')),
-            hint && React__namespace.createElement("div", { className: "pfext-page-layout__hint" }, hint))),
-        showTitle && React__namespace.createElement(reactCore.Divider, { component: "div" }),
-        showFilter && (React__namespace.createElement(React__namespace.Fragment, null,
-            React__namespace.createElement(QuickStartCatalogFilter, { quickStartsCount: filteredQuickStarts.length, onSearchInputChange: onSearchInputChange, onStatusChange: onStatusChange }),
-            React__namespace.createElement(reactCore.Divider, { component: "div" }))),
-        React__namespace.createElement(React__namespace.Fragment, null, filteredQuickStarts.length === 0 ? (React__namespace.createElement(QuickStartCatalogEmptyState, { clearFilters: clearFilters })) : (React__namespace.createElement(QuickStartCatalog, { quickStarts: filteredQuickStarts })))));
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        (showTitle || showFilter) && (React__namespace.createElement(reactCore.PageSection, { hasBodyWrapper: false },
+            showTitle && (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(reactCore.Content, { component: "h1", "data-test": "page-title" }, title || getResource('Quick Starts')),
+                hint && React__namespace.createElement("div", null, hint))),
+            showTitle && React__namespace.createElement(reactCore.Divider, { component: "div" }),
+            showFilter && (React__namespace.createElement(React__namespace.Fragment, null,
+                React__namespace.createElement(QuickStartCatalogFilter, { quickStartsCount: filteredQuickStarts.length, onSearchInputChange: onSearchInputChange, onStatusChange: onStatusChange }),
+                React__namespace.createElement(reactCore.Divider, { component: "div" }))))),
+        React__namespace.createElement(reactCore.PageSection, { hasBodyWrapper: false }, filteredQuickStarts.length === 0 ? (React__namespace.createElement(QuickStartCatalogEmptyState, { clearFilters: clearFilters })) : (React__namespace.createElement(QuickStartCatalog, { quickStarts: filteredQuickStarts })))));
 };
 
-const QuickStartCatalogHeader = ({ title, hint, }) => (React__namespace.createElement("div", { className: "pfext-page-layout__header" },
-    React__namespace.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
-    hint && React__namespace.createElement("div", { className: "pfext-page-layout__hint" }, hint)));
+const QuickStartCatalogHeader = ({ title, hint, }) => (React__namespace.createElement("div", null,
+    React__namespace.createElement(reactCore.Title, { headingLevel: "h1", "data-pf-content": "true" }, title),
+    hint && React__namespace.createElement("div", null, hint)));
 
-const QuickStartCatalogSection = ({ children }) => (React__namespace.createElement("div", { className: "pfext-page-layout__content" }, children));
+const QuickStartCatalogSection = ({ children }) => (React__namespace.createElement("div", null, children));
 
-const QuickStartCatalogToolbar = ({ children }) => (React__namespace.createElement(reactCore.Toolbar, { usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, children));
+const QuickStartCatalogToolbar = ({ children }) => (React__namespace.createElement(reactCore.Toolbar, null, children));
 
 const QuickStartCloseModal = ({ isOpen, onConfirm, onCancel, }) => {
     const { getResource } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement(Modal, { className: "pfext-quick-start-drawer__modal pfext-quick-start__base", isOpen: isOpen, variant: reactCore.ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React__namespace.createElement(reactCore.Flex, null,
+    return (React__namespace.createElement(Modal, { isOpen: isOpen, variant: deprecated.ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React__namespace.createElement(reactCore.Flex, null,
             React__namespace.createElement(reactCore.FlexItem, { align: { default: 'alignRight' } },
                 React__namespace.createElement(reactCore.Button, { variant: "secondary", "data-test": "cancel button", onClick: onCancel }, getResource('Cancel'))),
             React__namespace.createElement(reactCore.FlexItem, null,
@@ -2007,29 +1918,28 @@ const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, is
             titleRef.current.parentNode.focus();
         }
     }, [focusOnQuickStart, isActiveTask]);
-    reactStyles.css('pfext-quick-start-task-header__title', {
-        'pfext-quick-start-task-header__title-success': taskStatus === exports.QuickStartTaskStatus.SUCCESS,
-        'pfext-quick-start-task-header__title-failed': taskStatus === (exports.QuickStartTaskStatus.FAILED || exports.QuickStartTaskStatus.VISITED),
-    });
-    // const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
-    // const skippedReview = taskStatus === QuickStartTaskStatus.REVIEW;
     const failedReview = taskStatus === exports.QuickStartTaskStatus.FAILED;
-    // TODO: toned down when this is shown, investigate further when we should display it
-    // related: https://github.com/patternfly/patternfly-quickstarts/issues/104
     const tryAgain = failedReview && (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement("div", null),
         React__namespace.createElement("div", { className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
     const content = (React__namespace.createElement("div", { ref: titleRef },
-        React__namespace.createElement(reactCore.Title, { headingLevel: "h3" },
-            React__namespace.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
-            isActiveTask && subtitle && (React__namespace.createElement("span", { "data-test-id": "quick-start-task-subtitle" },
+        React__namespace.createElement(reactCore.Title, { headingLevel: "h3", size: size },
+            React__namespace.createElement("span", { className: "pfext-quick-start-task-header__title" }, title),
+            isActiveTask && subtitle && (React__namespace.createElement("span", null,
                 ' ',
-                React__namespace.createElement(reactCore.Text, { component: reactCore.TextVariants.small }, subtitle))),
+                React__namespace.createElement("span", { "data-test-id": "quick-start-task-subtitle", className: "pfext-quick-start-task-header__subtitle" }, subtitle))),
             tryAgain)));
-    return (React__namespace.createElement(reactCore.WizardNavItem, { content: content, stepIndex: taskIndex, onClick: () => onTaskSelect(taskIndex - 1), component: "button", isCurrent: isActiveTask }, children));
+    let status = 'default';
+    if (taskStatus === exports.QuickStartTaskStatus.FAILED) {
+        status = 'error';
+    }
+    else if (taskStatus === exports.QuickStartTaskStatus.SUCCESS) {
+        status = 'success';
+    }
+    return (React__namespace.createElement(reactCore.WizardNavItem, { content: content, stepIndex: taskIndex, onClick: () => onTaskSelect(taskIndex - 1), component: "button", isCurrent: isActiveTask, status: status }, children));
 };
 
-const QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => tasks.length > 0 ? (React__namespace.createElement(reactCore.List, { className: "pf-v6-c-wizard__nav-list" }, tasks.map((task, index) => (React__namespace.createElement(QuickStartTaskHeader, { key: task.title, title: task.title, taskIndex: index + 1, size: "md", taskStatus: allTaskStatuses[index], onTaskSelect: onTaskSelect }))))) : null;
+const QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => (tasks === null || tasks === void 0 ? void 0 : tasks.length) > 0 ? (React__namespace.createElement("div", { className: "pf-v6-c-wizard__nav-list" }, tasks.map((task, index) => (React__namespace.createElement(QuickStartTaskHeader, { key: task.title, title: task.title, taskIndex: index + 1, size: "md", taskStatus: allTaskStatuses[index], onTaskSelect: onTaskSelect }))))) : null;
 
 const QuickStartConclusion = ({ tasks, conclusion, allTaskStatuses, nextQuickStarts, onQuickStartChange, onTaskSelect, }) => {
     const hasFailedTask = allTaskStatuses.includes(exports.QuickStartTaskStatus.FAILED);
@@ -2044,10 +1954,7 @@ const QuickStartConclusion = ({ tasks, conclusion, allTaskStatuses, nextQuickSta
             nextQuickStarts.length > 0 &&
             nextQuickStarts.map((nextQuickStart, index) => {
                 var _a;
-                return (React__namespace.createElement(reactCore.Button, { variant: "link", onClick: () => onQuickStartChange(nextQuickStart.metadata.name), isInline: true, isBlock: true, key: index },
-                    getResource('Start {{nextQSDisplayName}} quick start').replace('{{nextQSDisplayName}}', (_a = nextQuickStart === null || nextQuickStart === void 0 ? void 0 : nextQuickStart.spec) === null || _a === void 0 ? void 0 : _a.displayName),
-                    ' ',
-                    React__namespace.createElement(ArrowRightIcon__default['default'], { style: { marginLeft: 'var(--pf-t--global--spacer--xs)', verticalAlign: 'middle' } })));
+                return (React__namespace.createElement(reactCore.Button, { variant: "link", onClick: () => onQuickStartChange(nextQuickStart.metadata.name), isInline: true, icon: React__namespace.createElement(ArrowRightIcon__default['default'], null), iconPosition: "end", isBlock: true, key: index, style: { marginTop: 'var(--pf-t--global--spacer--md' } }, 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)));
             })));
 };
 
@@ -2055,15 +1962,14 @@ const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequi
     const { getResource } = React__namespace.useContext(QuickStartContext);
     const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
     const [isPrereqsExpanded, setIsPrereqsExpanded] = React__namespace.useState(false);
-    const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React__namespace.createElement(reactCore.ExpandableSection, { toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded), className: "pfext-quick-start-intro__prereq" },
-        React__namespace.createElement(reactCore.List, { className: "pfext-quick-start-intro__prereq-list" }, prereqs.map((pr) => (React__namespace.createElement(reactCore.ListItem, { key: pr, className: "pfext-quick-start-intro__prereq-list__item" },
-            React__namespace.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" },
-                React__namespace.createElement(QuickStartMarkdownView, { content: pr }))))))));
-    return (React__namespace.createElement(React__namespace.Fragment, null,
+    const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React__namespace.createElement(reactCore.ExpandableSection, { toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded) },
+        React__namespace.createElement(reactCore.List, null, prereqs.map((pr) => (React__namespace.createElement(reactCore.ListItem, { key: pr },
+            React__namespace.createElement(QuickStartMarkdownView, { content: pr })))))));
+    return (React__namespace.createElement(reactCore.Stack, { hasGutter: true },
         React__namespace.createElement(QuickStartMarkdownView, { content: introduction }),
         prereqList,
-        React__namespace.createElement("p", { style: { marginBottom: 'var(--pf-t--global--spacer--md)' } },
-            getResource('In this quick start, you will complete {{count, number}} task', tasks.length).replace('{{count, number}}', tasks.length),
+        React__namespace.createElement("p", null,
+            getResource('In this quick start, you will complete {{count, number}} task', tasks === null || tasks === void 0 ? void 0 : tasks.length).replace('{{count, number}}', (tasks === null || tasks === void 0 ? void 0 : tasks.length) || 0),
             ":"),
         React__namespace.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect })));
 };
@@ -2081,12 +1987,9 @@ const getAlertVariant = (status) => {
 const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
     const { instructions, failedTaskHelp: taskHelp } = review;
     const { getResource } = React__namespace.useContext(QuickStartContext);
-    const alertClassNames = reactStyles.css('pfext-quick-start-task-review', {
-        'pfext-quick-start-task-review--success': taskStatus === exports.QuickStartTaskStatus.SUCCESS,
-        'pfext-quick-start-task-review--failed': taskStatus === exports.QuickStartTaskStatus.FAILED,
-    });
-    const title = React__namespace.createElement("span", { className: alertClassNames }, getResource('Check your work'));
-    return (React__namespace.createElement(reactCore.Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true, role: "alert" },
+    return (React__namespace.createElement(reactCore.Alert, { variant: getAlertVariant(taskStatus), title: getResource('Check your work'), isInline: true, role: "alert", style: {
+            marginBottom: 'var(--pf-t--global--spacer--md)',
+        } },
         React__namespace.createElement(QuickStartMarkdownView, { content: instructions }),
         React__namespace.createElement("span", { className: "pfext-quick-start-task-review__actions" },
             React__namespace.createElement(reactCore.Radio, { id: "review-success", name: "review-success", "data-testid": "qs-drawer-check-yes", label: getResource('Yes'), className: "pfext-quick-start-task-review__radio", isChecked: taskStatus === exports.QuickStartTaskStatus.SUCCESS, onChange: () => onTaskReview(exports.QuickStartTaskStatus.SUCCESS) }),
@@ -2096,7 +1999,7 @@ const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
 
 const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onTaskSelect, }) => {
     const { getResource, alwaysShowTaskReview } = React__namespace.useContext(QuickStartContext);
-    return (React__namespace.createElement("div", { className: "pfext-quick-start-tasks__list" },
+    return (React__namespace.createElement("div", { className: "pf-v6-c-wizard__nav-list", style: { padding: '0 0 0 0' } },
         React__namespace.createElement("ul", null, tasks
             .filter((_, index) => allTaskStatuses[index] !== exports.QuickStartTaskStatus.INIT)
             .map((task, index) => {
@@ -2108,7 +2011,7 @@ const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onT
             return (React__namespace.createElement(React__namespace.Fragment, { key: title },
                 React__namespace.createElement(QuickStartTaskHeader, { taskIndex: index + 1, title: title, size: "md", subtitle: getResource('{{index, number}} of {{tasks, number}}')
                         .replace('{{index, number}}', index + 1)
-                        .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }, isActiveTask && (React__namespace.createElement("div", { className: "pfext-quick-start-task__content" },
+                        .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }, isActiveTask && (React__namespace.createElement(reactCore.Stack, { hasGutter: true },
                     React__namespace.createElement(QuickStartMarkdownView, { content: description }),
                     shouldShowTaskReview && (React__namespace.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview })))))));
         }))));
@@ -2116,14 +2019,14 @@ const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onT
 
 const QuickStartContent = React__namespace.forwardRef(({ quickStart, nextQuickStarts = [], taskNumber, allTaskStatuses, onTaskSelect, onTaskReview, onQuickStartChange, }, ref) => {
     const { spec: { introduction, tasks, conclusion, prerequisites }, } = quickStart;
-    const totalTasks = tasks.length;
-    return (React__namespace.createElement("div", { className: "pfext-quick-start-content", ref: ref },
+    const totalTasks = tasks === null || tasks === void 0 ? void 0 : tasks.length;
+    return (React__namespace.createElement("div", { className: "pfext-quick-start-task", ref: ref },
         taskNumber === -1 && (React__namespace.createElement(QuickStartIntroduction, { tasks: tasks, allTaskStatuses: allTaskStatuses, introduction: introduction, prerequisites: prerequisites, onTaskSelect: onTaskSelect })),
         taskNumber > -1 && taskNumber < totalTasks && (React__namespace.createElement(QuickStartTasks, { tasks: tasks, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskReview: onTaskReview, onTaskSelect: onTaskSelect })),
         taskNumber === totalTasks && (React__namespace.createElement(QuickStartConclusion, { tasks: tasks, conclusion: conclusion, allTaskStatuses: allTaskStatuses, nextQuickStarts: nextQuickStarts, onQuickStartChange: onQuickStartChange, onTaskSelect: onTaskSelect }))));
 });
 
-const QuickStartFooter = ({ status, taskNumber, totalTasks, onNext, onBack, footerClass, quickStartId, }) => {
+const QuickStartFooter = ({ status, taskNumber, totalTasks, onNext, onBack, quickStartId, className, }) => {
     const { restartQuickStart, getResource } = React__namespace.useContext(QuickStartContext);
     const PrimaryButtonText = React__namespace.useMemo(() => ({
         START: getResource('Start'),
@@ -2152,13 +2055,16 @@ const QuickStartFooter = ({ status, taskNumber, totalTasks, onNext, onBack, foot
         }
         return PrimaryButtonText.CONTINUE;
     }, [taskNumber, totalTasks, PrimaryButtonText, status]);
-    const getPrimaryButton = React__namespace.useMemo(() => (React__namespace.createElement(reactCore.Button, { variant: "primary", className: "pfext-quick-start-footer__actionbtn", onClick: onNext, "data-testid": `qs-drawer-${camelize(getPrimaryButtonText)}`, "data-test": `${getPrimaryButtonText} button` }, getPrimaryButtonText)), [getPrimaryButtonText, onNext]);
+    const getPrimaryButton = React__namespace.useMemo(() => (React__namespace.createElement(reactCore.Button, { variant: "primary", onClick: onNext, "data-testid": `qs-drawer-${camelize(getPrimaryButtonText)}`, "data-test": `${getPrimaryButtonText} button` }, getPrimaryButtonText)), [getPrimaryButtonText, onNext]);
     const getSecondaryButton = React__namespace.useMemo(() => taskNumber === -1 && status !== exports.QuickStartStatus.NOT_STARTED ? (React__namespace.createElement(reactCore.Button, { variant: "secondary", onClick: onRestart, "data-testid": "qs-drawer-restart" }, SecondaryButtonText.RESTART)) : (taskNumber > -1 && (React__namespace.createElement(reactCore.Button, { variant: "secondary", onClick: onBack, "data-testid": "qs-drawer-back" }, SecondaryButtonText.BACK))), [onRestart, onBack, SecondaryButtonText, status, taskNumber]);
-    const getSideNoteAction = React__namespace.useMemo(() => taskNumber !== -1 && (React__namespace.createElement(reactCore.Button, { variant: "link", className: "pfext-quick-start-footer__restartbtn", onClick: onRestart, "data-testid": "qs-drawer-side-note-action" }, SecondaryButtonText.RESTART)), [taskNumber, onRestart, SecondaryButtonText.RESTART]);
-    return (React__namespace.createElement("div", { className: `pfext-quick-start-footer ${footerClass}` },
-        getPrimaryButton,
-        getSecondaryButton,
-        getSideNoteAction));
+    const getSideNoteAction = React__namespace.useMemo(() => taskNumber !== -1 && (React__namespace.createElement(reactCore.Button, { variant: "link", onClick: onRestart, "data-testid": "qs-drawer-side-note-action" }, SecondaryButtonText.RESTART)), [taskNumber, onRestart, SecondaryButtonText.RESTART]);
+    return (React__namespace.createElement("div", { className: reactStyles.css('pfext-quick-start-footer', className) },
+        React__namespace.createElement(reactCore.ActionList, null,
+            React__namespace.createElement(reactCore.ActionListGroup, null,
+                React__namespace.createElement(reactCore.ActionListItem, null, getPrimaryButton),
+                React__namespace.createElement(reactCore.ActionListItem, null, getSecondaryButton)),
+            React__namespace.createElement(reactCore.ActionListGroup, null,
+                React__namespace.createElement(reactCore.ActionListItem, null, getSideNoteAction)))));
 };
 
 const QuickStartController = ({ quickStart, nextQuickStarts, contentRef, footerClass, }) => {
@@ -2197,7 +2103,7 @@ const QuickStartController = ({ quickStart, nextQuickStarts, contentRef, footerC
     }, [name, setQuickStartTaskNumber]);
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(QuickStartContent, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskSelect: handleTaskSelect, onTaskReview: handleTaskStatusChange, onQuickStartChange: handleQuickStartChange, ref: contentRef }),
-        React__namespace.createElement(QuickStartFooter, { status: status, taskNumber: taskNumber, totalTasks: totalTasks, onNext: handleNext, onBack: handleBack, footerClass: footerClass, quickStartId: quickStart.metadata.name })));
+        React__namespace.createElement(QuickStartFooter, { status: status, taskNumber: taskNumber, totalTasks: totalTasks, onNext: handleNext, onBack: handleBack, className: footerClass, quickStartId: quickStart.metadata.name })));
 };
 
 const getElement = (appendTo) => {
@@ -2214,24 +2120,17 @@ const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
     }, [taskNumber, node]);
 };
 const QuickStartPanelContent = (_a) => {
-    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, headerVariant = '' } = _a, props = tslib.__rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
+    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, footerClass } = _a, props = tslib.__rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "footerClass"]);
     const titleRef = React__namespace.useRef(null);
     const { getResource, activeQuickStartState, focusOnQuickStart } = React__namespace.useContext(QuickStartContext);
     const [contentRef, setContentRef] = React__namespace.useState();
-    const shadows = useScrollShadows(contentRef);
     const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
     const taskNumber = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.taskNumber;
     useScrollTopOnTaskNumberChange(contentRef, taskNumber);
     const nextQuickStarts = quickStarts.filter((qs) => { var _a; return (_a = quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.nextQuickStart) === null || _a === void 0 ? void 0 : _a.includes(qs.metadata.name); });
-    const headerClasses = reactStyles.css('pfext-quick-start-panel-content__header', {
-        'pfext-quick-start-panel-content__header__shadow': shadows === Shadows.top || shadows === Shadows.both,
-        'pfext-quick-start-panel-content__header--blue-white': headerVariant === 'blue-white',
-    });
-    const footerClass = reactStyles.css({
-        'pfext-quick-start-panel-content__footer__shadow': shadows === Shadows.bottom || shadows === Shadows.both,
-    });
     const getStep = () => {
-        const tasks = quickStart.spec.tasks.length;
+        var _a;
+        const tasks = ((_a = quickStart.spec.tasks) === null || _a === void 0 ? void 0 : _a.length) || 0;
         if (Number.parseInt(taskNumber) === -1) {
             return 'intro';
         }
@@ -2245,23 +2144,21 @@ const QuickStartPanelContent = (_a) => {
             titleRef.current.focus();
         }
     }, [focusOnQuickStart, quickStart]);
-    const content = quickStart ? (React__namespace.createElement(reactCore.DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base", "data-testid": `qs-drawer-${camelize(quickStart.spec.displayName)}`, "data-qs": `qs-step-${getStep()}`, "data-test": "quickstart drawer" }, props),
-        React__namespace.createElement("div", { className: headerClasses },
+    const content = quickStart ? (React__namespace.createElement(reactCore.DrawerPanelContent, Object.assign({ isResizable: isResizable, "data-testid": `qs-drawer-${camelize(quickStart.spec.displayName)}`, "data-qs": `qs-step-${getStep()}`, "data-test": "quickstart drawer", style: { '--pf-v6-c-drawer__panel--PaddingBlockStart': '0' } }, props),
+        React__namespace.createElement("div", { className: "pfext-quick-start-panel-content" },
             React__namespace.createElement(reactCore.DrawerHead, null,
-                React__namespace.createElement("div", { className: "pfext-quick-start-panel-content__title", tabIndex: -1, ref: titleRef },
-                    React__namespace.createElement(reactCore.Title, { headingLevel: "h2", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-t--global--spacer--md)' } },
-                        React__namespace.createElement("span", { dangerouslySetInnerHTML: {
-                                __html: removeParagraphWrap(markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName)),
-                            } }),
-                        ' ',
-                        React__namespace.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, (quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
-                            ? getResource('{{type}} • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
-                                .replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
-                                .replace('{{type}}', getResource('Type'))
-                            : getResource('Type')))),
+                React__namespace.createElement("div", { tabIndex: -1, ref: titleRef },
+                    React__namespace.createElement(reactCore.Title, { headingLevel: "h2", size: "xl", style: { marginRight: 'var(--pf-t--global--spacer--md)' } },
+                        React__namespace.createElement("span", null, quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName),
+                        ' '),
+                    React__namespace.createElement("span", null, (quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                        ? getResource('{{type}} • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                            .replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                            .replace('{{type}}', getResource('Type'))
+                        : getResource('Type'))),
                 showClose && (React__namespace.createElement(reactCore.DrawerActions, null,
                     React__namespace.createElement(reactCore.DrawerCloseButton, { onClick: handleClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))))),
-        React__namespace.createElement(reactCore.DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
+        React__namespace.createElement(reactCore.DrawerPanelBody, { className: "pfext-quick-start-panel-content__body", "data-test": "content" },
             React__namespace.createElement(QuickStartController, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, footerClass: footerClass, contentRef: setContentRef })))) : null;
     if (appendTo) {
         return ReactDOM__namespace.createPortal(content, getElement(appendTo));
@@ -2301,7 +2198,7 @@ const QuickStartContainer = (_a) => {
 };
 const QuickStartDrawer = (_a) => {
     var { quickStarts = [], children, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress } = _a, props = tslib.__rest(_a, ["quickStarts", "children", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress"]);
-    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, useLegacyHeaderColors, } = React__namespace.useContext(QuickStartContext);
+    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, } = React__namespace.useContext(QuickStartContext);
     const combinedQuickStarts = allQuickStarts.concat(quickStarts);
     React__namespace.useEffect(() => {
         const params = new URLSearchParams(window.location.search);
@@ -2360,10 +2257,10 @@ const QuickStartDrawer = (_a) => {
             },
         }
         : {};
-    const panelContent = (React__namespace.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth, headerVariant: useLegacyHeaderColors ? '' : 'blue-white' }, fullWidthPanelStyle)));
+    const panelContent = (React__namespace.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth }, fullWidthPanelStyle)));
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(reactCore.Drawer, Object.assign({ isExpanded: !!activeQuickStartID, isInline: true }, props), children ? (React__namespace.createElement(reactCore.DrawerContent, Object.assign({ panelContent: panelContent }, fullWidthBodyStyle),
-            React__namespace.createElement(reactCore.DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React__namespace.createElement("div", { className: "pf-v6-c-drawer__main" }, panelContent))),
+            React__namespace.createElement(reactCore.DrawerContentBody, null, children))) : (React__namespace.createElement("div", null, panelContent))),
         React__namespace.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
 };
 
@@ -2425,17 +2322,17 @@ const HelpTopicPanelContent = (_a) => {
         !!((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React__namespace.createElement(reactCore.Divider, null),
         paddingContainer(React__namespace.createElement(reactCore.Stack, { hasGutter: true }, (_c = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _c === void 0 ? void 0 : _c.map(({ href, text, newTab, isExternal }, index) => (React__namespace.createElement(reactCore.StackItem, { key: index },
             React__namespace.createElement(reactCore.Button, { component: "a", href: href, target: newTab ? '_blank' : '', rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: isExternal ? React__namespace.createElement(ExternalLinkAltIcon__default['default'], null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href))))))));
-    const content = (React__namespace.createElement(reactCore.DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base" }, props),
+    const content = (React__namespace.createElement(reactCore.DrawerPanelContent, Object.assign({ isResizable: isResizable }, props),
         React__namespace.createElement("div", null,
             React__namespace.createElement(reactCore.DrawerHead, null,
-                React__namespace.createElement("div", { className: "pfext-quick-start-panel-content__title" },
+                React__namespace.createElement("div", null,
                     helpTopicOptions && (React__namespace.createElement(reactCore.Select, { isPlain: true, id: "help-topics-select", selected: activeHelpTopic, isOpen: isHelpTopicMenuOpen, onSelect: onSelectHelpTopic, onOpenChange: (isOpen) => setIsHelpTopicMenuOpen(isOpen), toggle: (toggleRef) => (React__namespace.createElement(reactCore.MenuToggle, { isFullWidth: true, ref: toggleRef, icon: React__namespace.createElement(BarsIcon__default['default'], null), onClick: toggleHelpTopicMenu, isExpanded: isHelpTopicMenuOpen }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)) },
                         React__namespace.createElement(reactCore.SelectList, null, helpTopicOptions))),
-                    React__namespace.createElement(reactCore.Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-t--global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)),
+                    React__namespace.createElement(reactCore.Title, { headingLevel: "h1", size: "xl", style: { marginRight: 'var(--pf-t--global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)),
                 React__namespace.createElement(reactCore.DrawerActions, null,
-                    React__namespace.createElement(reactCore.DrawerCloseButton, { onClick: onClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))),
+                    React__namespace.createElement(reactCore.DrawerCloseButton, { onClick: onClose, "data-testid": "qs-drawer-close" }))),
             React__namespace.createElement(reactCore.Divider, null),
-            React__namespace.createElement(reactCore.DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" }, panelBodyItems))));
+            React__namespace.createElement(reactCore.DrawerPanelBody, { "data-test": "content" }, panelBodyItems))));
     return content;
 };
 
@@ -2467,7 +2364,7 @@ const HelpTopicDrawer = (_a) => {
     const panelContent = (React__namespace.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics, onClose: onClose }));
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement(reactCore.Drawer, Object.assign({ isExpanded: !!activeHelpTopic, isInline: true }, props), children ? (React__namespace.createElement(reactCore.DrawerContent, { panelContent: panelContent },
-            React__namespace.createElement(reactCore.DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React__namespace.createElement("div", { className: "pf-v6-c-drawer__main" }, panelContent)))));
+            React__namespace.createElement(reactCore.DrawerContentBody, null, children))) : (React__namespace.createElement("div", { className: "pf-v6-c-drawer__main" }, panelContent)))));
 };
 
 const useLocalStorage = (key, initialValue) => {