@patternfly/quickstarts 1.4.0 → 1.4.1-rc.0

package/dist/patternfly-nested.css

@@ -84,12 +84,15 @@
 
 .pfext-quick-start__base {
   text-align: left; }
-  .pfext-quick-start__base [class*="pf-c-"], .pfext-quick-start__base [class*="pf-c-"]::before, .pfext-quick-start__base [class*="pf-c-"]::after {
+  .pfext-quick-start__base *,
+  .pfext-quick-start__base *::before,
+  .pfext-quick-start__base *::after {
     padding: 0;
     margin: 0;
-    background-color: transparent; }
-  .pfext-quick-start__base html {
-    font-size: unset !important; }
+    background-color: transparent;
+    border: 0;
+    min-width: auto;
+    height: auto; }
   .pfext-quick-start__base .pf-u-screen-reader {
     position: fixed;
     top: 0;
@@ -7231,3 +7234,8 @@
     @media (min-width: 1450px) {
       .pfext-quick-start__base .pf-l-gallery {
         --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))))); } }
+  .pfext-quick-start__base .pfext-quick-start__base * + .pf-c-select__toggle-arrow {
+    margin-right: var(--pf-c-select__toggle-arrow--MarginRight);
+    margin-left: var(--pf-c-select__toggle-arrow--MarginLeft); }
+  .pfext-quick-start__base .pfext-quick-start__base .pf-c-select.pf-m-top.pf-m-expanded .pf-c-select__toggle-arrow {
+    transform: rotate(var(--pf-c-select__toggle-arrow--m-top--m-expanded__toggle-arrow--Rotate)); }

package/dist/quickstarts-base.css

@@ -369,6 +369,7 @@
     background: var(--pf-global--palette--black-150); }
 
 .pfext-page-layout__header {
+  padding-top: 1px;
   background-color: var(--pf-global--BackgroundColor--light-100); }
 
 .pfext-page-layout__hint {
@@ -587,15 +588,6 @@
 .pfext-markdown-view th {
   text-align: left; }
 
-.pfext-quick-start-drawer__body {
-  display: flex;
-  flex-direction: column;
-  z-index: 0;
-  position: relative; }
-
-.pfext-quick-start-drawer__modal > .pf-c-modal-box__footer {
-  display: block; }
-
 .pfext-quick-start-panel-content__header {
   position: sticky;
   top: 0px;
@@ -603,6 +595,14 @@
   z-index: var(--pf-global--ZIndex--xs); }
   .pfext-quick-start-panel-content__header__shadow {
     box-shadow: var(--pf-global--BoxShadow--sm-bottom); }
+  .pfext-quick-start-panel-content__header--blue-white {
+    background-color: var(--pf-global--palette--blue-400); }
+    .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__title {
+      color: var(--pf-global--Color--light-100); }
+    .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__duration {
+      color: var(--pf-global--Color--light-200); }
+    .pfext-quick-start-panel-content__header--blue-white .pfext-quick-start-panel-content__close-button button {
+      color: var(--pf-global--Color--light-100) !important; }
 
 .pfext-quick-start-panel-content__body {
   display: flex;
@@ -617,7 +617,7 @@
 
 .pfext-quick-start-panel-content__duration {
   display: inline-block;
-  font-size: 65%;
+  font-size: var(--pf-global--FontSize--md);
   font-weight: 400;
   line-height: 1;
   color: #9c9c9c; }
@@ -625,19 +625,14 @@
 .pfext-quick-start-panel-content__footer__shadow {
   box-shadow: var(--pf-global--BoxShadow--sm-top); }
 
-.pfext-quick-start-catalog__gallery {
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important; }
-
-.pfext-quick-start-catalog__gallery-item {
-  display: inherit !important; }
+.pfext-quick-start-drawer__body {
+  display: flex;
+  flex-direction: column;
+  z-index: 0;
+  position: relative; }
 
-.pfext-quick-start-tile {
-  height: 100%; }
-  .pfext-quick-start-tile .catalog-tile-pf-description .has-footer {
-    display: block;
-    -webkit-line-clamp: unset; }
-  .pfext-quick-start-tile .catalog-tile-pf-icon {
-    display: flex; }
+.pfext-quick-start-drawer__modal > .pf-c-modal-box__footer {
+  display: block; }
 
 .pfext-quick-start-tile-description {
   display: -webkit-box;
@@ -674,6 +669,20 @@
 .pfext-quick-start-tile-header .pf-c-badge:not(:last-of-type) {
   margin-right: var(--pf-global--spacer--sm); }
 
+.pfext-quick-start-catalog__gallery {
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, 300px) !important; }
+
+.pfext-quick-start-catalog__gallery-item {
+  display: inherit !important; }
+
+.pfext-quick-start-tile {
+  height: 100%; }
+  .pfext-quick-start-tile .catalog-tile-pf-description .has-footer {
+    display: block;
+    -webkit-line-clamp: unset; }
+  .pfext-quick-start-tile .catalog-tile-pf-icon {
+    display: flex; }
+
 .pfext-quick-start-catalog-filter__input {
   flex-grow: 1;
   max-width: 500px; }
@@ -691,14 +700,6 @@
   .pf-c-toolbar.pf-m-page-insets.pfext-quick-start-catalog-filter__flex .pf-c-check {
     --pf-c-check__label--FontSize: 14px; }
 
-.pfext-quick-start-content {
-  flex: 1 1 0;
-  overflow: auto;
-  padding: var(--pf-global--spacer--sm) var(--pf-global--spacer--lg);
-  font-size: 16px; }
-  .pfext-quick-start-content .pf-c-alert__description p {
-    font-size: 13px; }
-
 .pfext-quick-start-footer {
   background-color: var(--pf-global--Color--light-100);
   flex: 0 0 auto;
@@ -708,6 +709,14 @@
   .pfext-quick-start-footer__restartbtn {
     float: right; }
 
+.pfext-quick-start-content {
+  flex: 1 1 0;
+  overflow: auto;
+  padding: var(--pf-global--spacer--lg);
+  font-size: 16px; }
+  .pfext-quick-start-content .pf-c-alert__description p {
+    font-size: 13px; }
+
 .pfext-markdown-view.is-empty {
   color: #999; }
 
@@ -725,6 +734,65 @@
 .pfext-markdown-view th {
   padding-top: 0; }
 
+.pfext-quick-start-tasks__list button::before {
+  content: none; }
+
+.pfext-quick-start-tasks__list li.pf-c-wizard__nav-item {
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: var(--pf-global--spacer--xs); }
+
+.pfext-quick-start-tasks__list .pfext-quick-start-task__content {
+  margin-left: var(--pf-global--spacer--lg);
+  margin-bottom: var(--pf-global--spacer--md); }
+
+.pfext-quick-start-tasks__list .task-pflist-title {
+  font-size: 14px !important;
+  margin-bottom: 6px; }
+
+.pfext-quick-start-tasks__list .task-pflist-subtitle {
+  color: var(--pf-global--Color--200);
+  font-size: 16px; }
+
+.pfext-quick-start-tasks__list .task-pflist-list {
+  font-size: 16px; }
+  .pfext-quick-start-tasks__list .task-pflist-list--prereq {
+    padding-left: var(--pf-global--spacer--lg); }
+    .pfext-quick-start-tasks__list .task-pflist-list--prereq li + li {
+      margin-top: 4px; }
+  .pfext-quick-start-tasks__list .task-pflist-list--proc {
+    padding-left: 10px; }
+    .pfext-quick-start-tasks__list .task-pflist-list--proc li + li {
+      margin-top: 16px; }
+  .pfext-quick-start-tasks__list .task-pflist-list__item--prereq::marker {
+    font-size: 0.8rem; }
+  .pfext-quick-start-tasks__list .task-pflist-list__item--prereq .task-pflist-list__item__content {
+    position: relative;
+    left: 2px; }
+  .pfext-quick-start-tasks__list .task-pflist-list__item--proc {
+    font-size: 14px; }
+    .pfext-quick-start-tasks__list .task-pflist-list__item--proc .task-pflist-list__item__content {
+      position: relative;
+      left: 4px; }
+  .pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-c-alert {
+    margin: var(--pf-global--spacer--md) 0; }
+  .pfext-quick-start-tasks__list .task-pflist-list__item__content .pf-c-alert__title {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: var(--pf-c-alert__title--FontWeight);
+    font-family: inherit;
+    line-height: inherit;
+    color: var(--pf-c-alert__title--Color);
+    word-break: break-word; }
+  .pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note {
+    background-color: var(--pf-global--palette--blue-50);
+    border-color: var(--pf-global--active-color--200);
+    margin: var(--pf-global--spacer--md) 0; }
+    .pfext-quick-start-tasks__list .task-pflist-list__item__content .task-pflist-list__item__content__note__body {
+      font-size: 14px; }
+
 .pfext-quick-start-intro__prereq {
   margin-bottom: var(--pf-global--spacer--md); }
   .pfext-quick-start-intro__prereq .pf-c-expandable-section__content {
@@ -746,41 +814,22 @@
       position: relative;
       left: 2px; }
 
-.pfext-quick-start-tasks__list button::before {
-  content: none; }
-
-.pfext-quick-start-tasks__list li.pf-c-wizard__nav-item {
-  list-style-type: none;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  margin-bottom: var(--pf-global--spacer--xs); }
-
-.pfext-quick-start-task-header__list {
-  padding: 0 !important; }
-  .pfext-quick-start-task-header__list button::before {
-    content: none; }
-  .pfext-quick-start-task-header__list li {
-    list-style-type: none;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    margin-bottom: var(--pf-global--spacer--xs); }
-
 .pfext-quick-start-task-header {
-  margin-bottom: var(--pf-global--spacer--xs); }
+  margin-bottom: var(--pf-global--spacer--sm);
+  display: grid;
+  grid-template-columns: min-content auto;
+  font-size: var(--pf-global--FontSize--md); }
   .pfext-quick-start-task-header button::before {
     content: none; }
   .pfext-quick-start-task-header__title {
     color: var(--pf-global--primary-color--100) !important;
     margin-right: var(--pf-global--spacer--md) !important; }
   .pfext-quick-start-task-header__subtitle {
-    display: inline-block;
     font-size: var(--pf-global--FontSize--sm);
     color: var(--pf-global--Color--400) !important; }
   .pfext-quick-start-task-header__tryagain {
     display: block;
-    font-size: var(--pf-global--FontSize--sm);
+    font-size: var(--pf-global--FontSize--md);
     color: var(--pf-global--Color--300) !important; }
   .pfext-quick-start-task-header__title-success {
     color: var(--pf-global--palette--green-500) !important; }
@@ -796,6 +845,10 @@
     width: 1.5em; }
   .pfext-quick-start-task-header__task-icon-success, .pfext-quick-start-task-header__task-icon-failed {
     vertical-align: middle !important; }
+  .pfext-quick-start-task-header__task-icon-success {
+    color: var(--pf-global--palette--green-500) !important; }
+  .pfext-quick-start-task-header__task-icon-failed {
+    color: var(--pf-global--danger-color--100) !important; }
 
 .pfext-quick-start-task-review-alert {
   margin: var(--pf-global--spacer--lg) 0; }
@@ -818,8 +871,16 @@
   .pfext-quick-start-task-review--failed {
     color: var(--pf-chart-global--danger--Color--100); }
 
-.pfext-modal {
-  position: absolute !important; }
+.pfext-quick-start-task-header__list {
+  padding: 0 !important; }
+  .pfext-quick-start-task-header__list button::before {
+    content: none; }
+  .pfext-quick-start-task-header__list li {
+    list-style-type: none;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: var(--pf-global--spacer--xs); }
 
 .pfext-markdown-view .pfext-code-block__pre {
   /* override the styles applied by showdown while parsing <pre /> */
@@ -842,6 +903,9 @@
 .pfext-markdown-view .pfext-markdown-execute-snippet__button[data-executed] > i.fa-play {
   display: none; }
 
+.pfext-modal {
+  position: absolute !important; }
+
 @keyframes pfext-spotlight-expand {
   0% {
     outline-offset: -4px;

package/dist/quickstarts-full.es.js

@@ -8834,7 +8834,8 @@ var en = {
 	"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!"
+	"Successfully copied to clipboard!": "Successfully copied to clipboard!",
+	"Quick start • {{duration, number}} minutes": "Quick start • {{duration, number}} minutes"
 };
 
 /* eslint-disable */
@@ -9244,6 +9245,7 @@ const QuickStartContextDefaults = {
     },
     setFilter: () => { },
     footer: null,
+    useLegacyHeaderColors: false,
     markdown: null,
     loading: false,
     alwaysShowTaskReview: false,
@@ -9262,7 +9264,7 @@ const getResource = (resource, options, resourceBundle, lng) => {
 const useValuesForQuickStartContext = (value = {}) => {
     var _a, _b;
     const combinedValue = Object.assign(Object.assign({}, QuickStartContextDefaults), value);
-    const { activeQuickStartID, setActiveQuickStartID, setAllQuickStartStates, useQueryParams, allQuickStartStates, allQuickStarts = [], footer, markdown, } = combinedValue;
+    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);
@@ -9445,6 +9447,7 @@ const useValuesForQuickStartContext = (value = {}) => {
         setQuickStartTaskStatus,
         getQuickStartForId,
         footer,
+        useLegacyHeaderColors,
         useQueryParams,
         markdown,
         resourceBundle,
@@ -19465,16 +19468,16 @@ const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, is
     });
     const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
     const skippedReviewOrFailed = taskStatus === QuickStartTaskStatus.REVIEW || taskStatus === QuickStartTaskStatus.FAILED;
-    const tryAgain = !isActiveTask && (skippedReviewOrFailed || notCompleted) && (React.createElement(FlexItem, null,
-        React.createElement(Title, { headingLevel: "h4", className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
-    const content = (React.createElement(Flex, { className: "pfext-quick-start-task-header", direction: { default: 'column' }, spaceItems: { default: 'spaceItemsXs' } },
-        React.createElement(FlexItem, null,
-            React.createElement(Title, { headingLevel: "h3", size: size, className: classNames },
-                React.createElement(TaskIcon, { taskIndex: taskIndex, taskStatus: taskStatus }),
-                React.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
-                isActiveTask && subtitle && (React.createElement(React.Fragment, null,
-                    ' ',
-                    React.createElement("span", { className: "pfext-quick-start-task-header__subtitle", "data-test-id": "quick-start-task-subtitle" }, subtitle))))),
+    const tryAgain = !isActiveTask && (skippedReviewOrFailed || notCompleted) && (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" },
+        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, step: taskIndex, onNavItemClick: () => onTaskSelect(taskIndex - 1), navItemComponent: "button", isCurrent: isActiveTask }));
 };
@@ -19561,7 +19564,7 @@ const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onT
             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", { style: { marginBottom: 'var(--pf-global--spacer--md)' } },
+            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 }))))));
     })));
@@ -19673,7 +19676,7 @@ const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
     }, [taskNumber, node]);
 };
 const QuickStartPanelContent = (_a) => {
-    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true } = _a, props = __rest$1(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose"]);
+    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, headerVariant = '' } = _a, props = __rest$1(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
     const { getResource } = React.useContext(QuickStartContext);
     const [contentRef, setContentRef] = React.useState();
     const shadows = useScrollShadows(contentRef);
@@ -19684,6 +19687,7 @@ const QuickStartPanelContent = (_a) => {
     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,
@@ -19702,12 +19706,12 @@ const QuickStartPanelContent = (_a) => {
         React.createElement("div", { className: headerClasses },
             React.createElement(DrawerHead, null,
                 React.createElement("div", { className: "pfext-quick-start-panel-content__title" },
-                    React.createElement(Title, { headingLevel: "h1", size: "xl", style: { marginRight: 'var(--pf-global--spacer--md)' } }, quickStart === null || quickStart === void 0 ? void 0 :
+                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, quickStart === null || quickStart === void 0 ? void 0 :
                         quickStart.spec.displayName,
                         ' ',
-                        React.createElement("small", { className: "pfext-quick-start-panel-content__duration text-secondary" }, getResource('{{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)))),
+                        React.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, getResource('Quick start • {{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)))),
                 showClose && (React.createElement(DrawerActions, null,
-                    React.createElement(DrawerCloseButton, { onClick: handleClose, "data-testid": "qs-drawer-close" }))))),
+                    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) {
@@ -19717,13 +19721,14 @@ const QuickStartPanelContent = (_a) => {
 };
 
 const QuickStartContainer = (_a) => {
-    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = false } = _a, props = __rest$1(_a, ["quickStarts", "children", "activeQuickStartID", "allQuickStartStates", "setActiveQuickStartID", "setAllQuickStartStates", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress", "resourceBundle", "showCardFooters", "language", "loading", "useQueryParams", "markdown", "contextProps", "alwaysShowTaskReview"]);
+    var { quickStarts, children, activeQuickStartID, allQuickStartStates, setActiveQuickStartID, setAllQuickStartStates, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress, resourceBundle, showCardFooters, useLegacyHeaderColors, language, loading = false, useQueryParams = true, markdown, contextProps, alwaysShowTaskReview = false } = _a, props = __rest$1(_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,
-        }, language, resourceBundle: Object.assign({}, resourceBundle), loading,
+        }, useLegacyHeaderColors,
+        language, resourceBundle: Object.assign({}, resourceBundle), loading,
         useQueryParams,
         markdown,
         alwaysShowTaskReview }, contextProps));
@@ -19747,7 +19752,7 @@ const QuickStartContainer = (_a) => {
 };
 const QuickStartDrawer = (_a) => {
     var { quickStarts = [], children, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress } = _a, props = __rest$1(_a, ["quickStarts", "children", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress"]);
-    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, } = React.useContext(QuickStartContext);
+    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);
@@ -19806,7 +19811,7 @@ const QuickStartDrawer = (_a) => {
             },
         }
         : {};
-    const panelContent = (React.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth }, fullWidthPanelStyle)));
+    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-c-drawer__main" }, panelContent))),