npm - @patternfly/patternfly-doc-core - Versions diffs - 1.12.0 → 1.12.2 - Mend

@patternfly/patternfly-doc-core 1.12.0 → 1.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (460) hide show

package/dist/docs/components/wizard/react-deprecated/index.html ADDED Viewed

@@ -0,0 +1,372 @@
+<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.9.3"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
+<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css">
+<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
+<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
+<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page">  <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="1yBPte" prefix="r5" component-url="/_astro/PageToggle.Dnbvoa7R.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;:true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-250"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="Z1lu7Tb" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;ReactToolbar&quot;,&quot;value&quot;:true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-84"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-251"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-252"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-84"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body">    <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/wizard/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/wizard/react-deprecated"> React deprecated </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1588" data-pf-content="true" class="pf-v6-c-content--p">If you seek a wizard solution that allows for more composition, see the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1570" data-pf-content="true" class="pf-v6-c-content--a">React</a> tab.</p>
+<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1571" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1572" data-pf-content="true" class="pf-v6-c-content--h3">Basic</h3>
+<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="1zmbrn" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard as WizardDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const WizardBasic: React.FunctionComponent = () =&gt; {\n  const steps = [\n    {\n      name: &#39;First step&#39;,\n      component: (\n        &lt;&gt;\n          &lt;p&gt;\n            The content of this step overflows and creates a scrollbar, which causes a tabindex of \&quot;0\&quot;, a role of\n            \&quot;region\&quot;, and an aria-label or aria-labelledby to be applied.\n          &lt;/p&gt;\n          &lt;p&gt;\n            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer bibendum in neque nec pharetra. Duis\n            lacinia vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, enim\n            ex porttitor odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla facilisi. Duis\n            eget finibus ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus posuere pulvinar id\n            nec turpis. Morbi mattis orci vel posuere tincidunt. Fusce bibendum et libero a auctor.\n          &lt;/p&gt;\n          &lt;p&gt;\n            Proin elementum commodo sodales. Quisque eget libero mattis, ornare augue at, egestas nisi. Mauris ultrices\n            orci fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec bibendum ante.\n            Vestibulum sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, commodo sodales quam\n            lectus a urna. Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non egestas diam velit in mi. Ut\n            sit amet commodo orci. Duis sed diam odio. Duis mi metus, dignissim in odio nec, ornare aliquet libero. Sed\n            luctus elit nibh. Quisque et felis diam. Integer ac metus dolor.\n          &lt;/p&gt;\n        &lt;/&gt;\n      )\n    },\n    { name: &#39;Second step&#39;, component: &lt;p&gt;Step 2 content&lt;/p&gt; },\n    { name: &#39;Third step&#39;, component: &lt;p&gt;Step 3 content&lt;/p&gt; },\n    { name: &#39;Fourth step&#39;, component: &lt;p&gt;Step 4 content&lt;/p&gt; },\n    { name: &#39;Review&#39;, component: &lt;p&gt;Review step content&lt;/p&gt;, nextButtonText: &#39;Finish&#39; }\n  ];\n  const title = &#39;Basic wizard example&#39;;\n  return (\n    &lt;WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} /&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1573" data-pf-content="true" class="pf-v6-c-content--h3">Basic with disabled steps</h3>
+<astro-island uid="Z1zImmc" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard as WizardDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const WizardBasicWithDisabledSteps: React.FunctionComponent = () =&gt; {\n  const steps = [\n    { name: &#39;First step&#39;, component: &lt;p&gt;Step 1 content&lt;/p&gt; },\n    { name: &#39;Second step&#39;, component: &lt;p&gt;Step 2 content&lt;/p&gt;, isDisabled: true },\n    { name: &#39;Third step&#39;, component: &lt;p&gt;Step 3 content&lt;/p&gt; },\n    { name: &#39;Fourth step&#39;, component: &lt;p&gt;Step 4 content&lt;/p&gt;, isDisabled: true },\n    { name: &#39;Review&#39;, component: &lt;p&gt;Review step content&lt;/p&gt;, nextButtonText: &#39;Finish&#39; }\n  ];\n  const title = &#39;Basic wizard with disabled steps example&#39;;\n  return (\n    &lt;WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} /&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1574" data-pf-content="true" class="pf-v6-c-content--h3">Anchors for nav items</h3>
+<astro-island uid="Z1jDtDT" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button } from &#39;@patternfly/react-core&#39;;\nimport { Wizard as WizardDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\nimport ExternalLinkAltIcon from &#39;@patternfly/react-icons/dist/esm/icons/external-link-alt-icon&#39;;\nimport SlackHashIcon from &#39;@patternfly/react-icons/dist/esm/icons/slack-hash-icon&#39;;\n\nexport const WizardWithNavAnchors: React.FunctionComponent = () =&gt; {\n  const steps = [\n    {\n      name: (\n        &lt;div&gt;\n          &lt;ExternalLinkAltIcon /&gt; PF3\n        &lt;/div&gt;\n      ),\n      component: &lt;p&gt;Step 1: Read about PF3&lt;/p&gt;,\n      stepNavItemProps: { navItemComponent: &#39;a&#39;, href: &#39;https://www.patternfly.org/v3/&#39;, target: &#39;_blank&#39; }\n    },\n    {\n      name: (\n        &lt;div&gt;\n          &lt;ExternalLinkAltIcon /&gt; PF4\n        &lt;/div&gt;\n      ),\n      component: &lt;p&gt;Step 2: Read about PF4&lt;/p&gt;,\n      stepNavItemProps: { navItemComponent: &#39;a&#39;, href: &#39;https://www.patternfly.org/v4/&#39;, target: &#39;_blank&#39; }\n    },\n    {\n      name: (\n        &lt;div&gt;\n          &lt;SlackHashIcon /&gt; Join us on slack\n        &lt;/div&gt;\n      ),\n      component: (\n        &lt;Button variant=\&quot;link\&quot; component=\&quot;a\&quot; target=\&quot;_blank\&quot; href=\&quot;https://patternfly.slack.com/\&quot;&gt;\n          Join the conversation\n        &lt;/Button&gt;\n      ),\n      stepNavItemProps: { navItemComponent: &#39;a&#39;, href: &#39;https://patternfly.slack.com/&#39;, target: &#39;_blank&#39; }\n    }\n  ];\n  const title = &#39;Anchor link wizard example&#39;;\n  return (\n    &lt;WizardDeprecated navAriaLabel={`${title} steps`} mainAriaLabel={`${title} content`} steps={steps} height={400} /&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1575" data-pf-content="true" class="pf-v6-c-content--h3">Incrementally enabled steps</h3>
+<astro-island uid="2biLGn" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Wizard as WizardDeprecated, WizardStep } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const WizardIncrementallyEnabledSteps: React.FunctionComponent = () =&gt; {\n  const [stepIdReached, setStepIdReached] = useState(1);\n\n  const onNext = ({ id }: WizardStep) =&gt; {\n    if (id) {\n      if (typeof id === &#39;string&#39;) {\n        const [, orderIndex] = id.split(&#39;-&#39;);\n        id = parseInt(orderIndex);\n      }\n      setStepIdReached(stepIdReached &lt; id ? id : stepIdReached);\n    }\n  };\n\n  const closeWizard = () =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;close wizard&#39;);\n  };\n\n  const steps = [\n    { id: &#39;incrementallyEnabled-1&#39;, name: &#39;First step&#39;, component: &lt;p&gt;Step 1 content&lt;/p&gt; },\n    {\n      id: &#39;incrementallyEnabled-2&#39;,\n      name: &#39;Second step&#39;,\n      component: &lt;p&gt;Step 2 content&lt;/p&gt;,\n      canJumpTo: stepIdReached &gt;= 2\n    },\n    {\n      id: &#39;incrementallyEnabled-3&#39;,\n      name: &#39;Third step&#39;,\n      component: &lt;p&gt;Step 3 content&lt;/p&gt;,\n      canJumpTo: stepIdReached &gt;= 3\n    },\n    {\n      id: &#39;incrementallyEnabled-4&#39;,\n      name: &#39;Fourth step&#39;,\n      component: &lt;p&gt;Step 4 content&lt;/p&gt;,\n      canJumpTo: stepIdReached &gt;= 4\n    },\n    {\n      id: &#39;incrementallyEnabled-5&#39;,\n      name: &#39;Review&#39;,\n      component: &lt;p&gt;Review step content&lt;/p&gt;,\n      nextButtonText: &#39;Finish&#39;,\n      canJumpTo: stepIdReached &gt;= 5\n    }\n  ];\n  const title = &#39;Incrementally enabled wizard example&#39;;\n  return (\n    &lt;WizardDeprecated\n      navAriaLabel={`${title} steps`}\n      mainAriaLabel={`${title} content`}\n      onClose={closeWizard}\n      steps={steps}\n      onNext={onNext}\n      height={400}\n    /&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1576" data-pf-content="true" class="pf-v6-c-content--h3">Expandable steps</h3>
+<astro-island uid="1Aa0Je" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard as WizardDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const WizardExpandableSteps: React.FunctionComponent = () =&gt; {\n  const steps = [\n    {\n      name: &#39;First step&#39;,\n      steps: [\n        { name: &#39;Substep A&#39;, component: &lt;p&gt;Substep A content&lt;/p&gt; },\n        { name: &#39;Substep B&#39;, component: &lt;p&gt;Substep B content&lt;/p&gt; }\n      ]\n    },\n    { name: &#39;Second step&#39;, component: &lt;p&gt;Step 2 content&lt;/p&gt; },\n    {\n      name: &#39;Third step&#39;,\n      steps: [\n        { name: &#39;Substep C&#39;, component: &lt;p&gt;Substep C content&lt;/p&gt; },\n        { name: &#39;Substep D&#39;, component: &lt;p&gt;Substep D content&lt;/p&gt; }\n      ]\n    },\n    { name: &#39;Fourth step&#39;, component: &lt;p&gt;Step 4 content&lt;/p&gt; },\n    { name: &#39;Review&#39;, component: &lt;p&gt;Review step content&lt;/p&gt;, nextButtonText: &#39;Finish&#39; }\n  ];\n  const title = &#39;Expandable wizard example&#39;;\n  return (\n    &lt;WizardDeprecated\n      navAriaLabel={`${title} steps`}\n      mainAriaLabel={`${title} content`}\n      steps={steps}\n      height={400}\n      isNavExpandable\n    /&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1577" data-pf-content="true" class="pf-v6-c-content--h3">Finished</h3>
+<astro-island uid="Z1BpaMs" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useState } from &#39;react&#39;;\nimport {\n  EmptyState,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions,\n  Progress,\n  Button\n} from &#39;@patternfly/react-core&#39;;\nimport { Wizard as WizardDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n// eslint-disable-next-line patternfly-react/import-tokens-icons\nimport { CogsIcon } from &#39;@patternfly/react-icons&#39;;\nimport layout from &#39;@patternfly/react-styles/css/layouts/Bullseye/bullseye&#39;;\n\ninterface finishedProps {\n  onClose: () =&gt; void;\n}\n\nconst FinishedStep: React.FunctionComponent&lt;finishedProps&gt; = (props: finishedProps) =&gt; {\n  const [percent, setPercent] = useState(0);\n\n  const tick = () =&gt; {\n    setPercent((prevPercent) =&gt; {\n      if (prevPercent &lt; 100) {\n        return prevPercent + 20;\n      } else {\n        return prevPercent;\n      }\n    });\n  };\n\n  useEffect(() =&gt; {\n    const interval = setInterval(() =&gt; tick(), 1000);\n\n    if (percent &gt;= 100) {\n      clearInterval(interval);\n    }\n\n    return () =&gt; clearInterval(interval);\n  }, [percent]);\n\n  return (\n    &lt;div className={layout.bullseye}&gt;\n      &lt;EmptyState\n        headingLevel=\&quot;h4\&quot;\n        titleText={percent === 100 ? &#39;Validation complete&#39; : &#39;Validating credentials&#39;}\n        icon={CogsIcon}\n        variant=\&quot;lg\&quot;\n      &gt;\n        &lt;EmptyStateBody&gt;\n          &lt;Progress value={percent} measureLocation=\&quot;outside\&quot; aria-label=\&quot;validation-progress\&quot; /&gt;\n        &lt;/EmptyStateBody&gt;\n        &lt;EmptyStateBody&gt;\n          Description can be used to further elaborate on the validation step, or give the user a better idea of how\n          long the process will take.\n        &lt;/EmptyStateBody&gt;\n        &lt;EmptyStateFooter&gt;\n          &lt;EmptyStateActions&gt;\n            &lt;Button isDisabled={percent !== 100} onClick={props.onClose}&gt;\n              Log to console\n            &lt;/Button&gt;\n          &lt;/EmptyStateActions&gt;\n        &lt;/EmptyStateFooter&gt;\n      &lt;/EmptyState&gt;\n    &lt;/div&gt;\n  );\n};\n\nexport const WizardFinished: React.FunctionComponent = () =&gt; {\n  const closeWizard = () =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;close wizard&#39;);\n  };\n\n  const steps = [\n    { name: &#39;First step&#39;, component: &lt;p&gt;Step 1 content&lt;/p&gt; },\n    { name: &#39;Second step&#39;, component: &lt;p&gt;Step 2 content&lt;/p&gt; },\n    { name: &#39;Third step&#39;, component: &lt;p&gt;Step 3 content&lt;/p&gt; },\n    { name: &#39;Fourth step&#39;, component: &lt;p&gt;Step 4 content&lt;/p&gt; },\n    { name: &#39;Review&#39;, component: &lt;p&gt;Review step content&lt;/p&gt;, nextButtonText: &#39;Finish&#39; },\n    { name: &#39;Finish&#39;, component: &lt;FinishedStep onClose={closeWizard} /&gt;, isFinishedStep: true }\n  ];\n  const title = &#39;Finished wizard example&#39;;\n  return (\n    &lt;WizardDeprecated\n      navAriaLabel={`${title} steps`}\n      mainAriaLabel={`${title} content`}\n      onClose={closeWizard}\n      steps={steps}\n      height={400}\n    /&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1578" data-pf-content="true" class="pf-v6-c-content--h3">Enabled on form validation</h3>
+<astro-island uid="Z2mf7Kl" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useState } from &#39;react&#39;;\nimport { Form, FormGroup, TextInput } from &#39;@patternfly/react-core&#39;;\nimport { Wizard as WizardDeprecated, WizardStep } from &#39;@patternfly/react-core/deprecated&#39;;\ninterface PrevStepInfo {\n  prevId?: string | number;\n  prevName: React.ReactNode;\n}\n\ninterface sampleFormProps {\n  formValue: string;\n  isFormValid: boolean;\n  onChange?: (isValid: boolean, value: string) =&gt; void;\n}\n\nconst SampleForm: React.FunctionComponent&lt;sampleFormProps&gt; = (props: sampleFormProps) =&gt; {\n  const [value, setValue] = useState(props.formValue);\n  const [isValid, setIsValid] = useState(props.isFormValid);\n\n  const handleTextInputChange = (_event, value: string) =&gt; {\n    const valid = /^\\d+$/.test(value);\n    setValue(value);\n    setIsValid(valid);\n    props.onChange &amp;&amp; props.onChange(valid, value);\n  };\n\n  const validated = isValid ? &#39;default&#39; : &#39;error&#39;;\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup\n        label=\&quot;Age:\&quot;\n        type=\&quot;number\&quot;\n        helperText=\&quot;Write your age in numbers.\&quot;\n        helperTextInvalid=\&quot;Age has to be a number\&quot;\n        fieldId=\&quot;age\&quot;\n        validated={validated}\n      &gt;\n        &lt;TextInput\n          validated={validated}\n          value={value}\n          id=\&quot;age-input\&quot;\n          aria-describedby=\&quot;age-helper\&quot;\n          onChange={handleTextInputChange}\n        /&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n\nexport const WizardFormValidation: React.FunctionComponent = () =&gt; {\n  const [isFormValid, setIsFormValid] = useState(false);\n  const [formValue, setFormValue] = useState(&#39;Thirty&#39;);\n  const [allStepsValid, setAllStepsValid] = useState(false);\n  const [stepIdReached, setStepIdReached] = useState(1);\n\n  useEffect(() =&gt; {\n    setAllStepsValid(isFormValid);\n  }, [isFormValid, stepIdReached]);\n\n  const closeWizard = () =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;close wizard&#39;);\n  };\n\n  const onFormChange = (isValid: boolean, value: string) =&gt; {\n    setIsFormValid(isValid);\n    setFormValue(value);\n  };\n\n  const areAllStepsValid = () =&gt; {\n    setAllStepsValid(isFormValid);\n  };\n\n  const onNext = ({ id, name }: WizardStep, { prevId, prevName }: PrevStepInfo) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);\n    if (id) {\n      if (typeof id === &#39;string&#39;) {\n        const [, orderIndex] = id.split(&#39;-&#39;);\n        id = parseInt(orderIndex);\n      }\n      setStepIdReached(stepIdReached &lt; id ? id : stepIdReached);\n    }\n  };\n\n  const onBack = ({ id, name }: WizardStep, { prevId, prevName }: PrevStepInfo) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);\n    areAllStepsValid();\n  };\n\n  const onGoToStep = ({ id, name }: WizardStep, { prevId, prevName }: PrevStepInfo) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(`current id: ${id}, current name: ${name}, previous id: ${prevId}, previous name: ${prevName}`);\n  };\n\n  const steps = [\n    { id: &#39;validated-1&#39;, name: &#39;Information&#39;, component: &lt;p&gt;Step 1 content&lt;/p&gt; },\n    {\n      name: &#39;Configuration&#39;,\n      steps: [\n        {\n          id: &#39;validated-2&#39;,\n          name: &#39;Substep A with validation&#39;,\n          component: &lt;SampleForm formValue={formValue} isFormValid={isFormValid} onChange={onFormChange} /&gt;,\n          enableNext: isFormValid,\n          canJumpTo: stepIdReached &gt;= 2\n        },\n        { id: &#39;validated-3&#39;, name: &#39;Substep B&#39;, component: &lt;p&gt;Substep B&lt;/p&gt;, canJumpTo: stepIdReached &gt;= 3 }\n      ]\n    },\n    {\n      id: &#39;validated-4&#39;,\n      name: &#39;Additional&#39;,\n      component: &lt;p&gt;Step 3 content&lt;/p&gt;,\n      enableNext: allStepsValid,\n      canJumpTo: stepIdReached &gt;= 4\n    },\n    {\n      id: &#39;validated-5&#39;,\n      name: &#39;Review&#39;,\n      component: &lt;p&gt;Step 4 content&lt;/p&gt;,\n      nextButtonText: &#39;Finish&#39;,\n      canJumpTo: stepIdReached &gt;= 5\n    }\n  ];\n  const title = &#39;Wizard enabled on form validation example&#39;;\n  return (\n    &lt;WizardDeprecated\n      navAriaLabel={`${title} steps`}\n      mainAriaLabel={`${title} content`}\n      onClose={closeWizard}\n      steps={steps}\n      onNext={onNext}\n      onBack={onBack}\n      onGoToStep={onGoToStep}\n      height={400}\n    /&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1579" data-pf-content="true" class="pf-v6-c-content--h3">Validate on button press</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1584" data-pf-content="true" class="pf-v6-c-content--p">This example demonstrates how to use the <code>WizardContextConsumer</code> to consume the <code>WizardContext</code>. <code>WizardContext</code> can be used to imperatively move to a specific wizard step.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1585" data-pf-content="true" class="pf-v6-c-content--p">The definition of the <code>WizardContext</code> is as follows:</p>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1586" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"><span>interface WizardContext {</span></span>
+<span class="line"><span>  goToStepById: (stepId: number | string) =&gt; void;</span></span>
+<span class="line"><span>  goToStepByName: (stepName: string) =&gt; void;</span></span>
+<span class="line"><span>  onNext: () =&gt; void;</span></span>
+<span class="line"><span>  onBack: () =&gt; void;</span></span>
+<span class="line"><span>  onClose: () =&gt; void;</span></span>
+<span class="line"><span>  activeStep: WizardStep;</span></span>
+<span class="line"><span>}</span></span></code></pre>
+<astro-island uid="ZT627A" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useEffect, useState } from &#39;react&#39;;\nimport {\n  EmptyState,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions,\n  Form,\n  FormGroup,\n  TextInput,\n  Progress,\n  Button,\n  Alert\n} from &#39;@patternfly/react-core&#39;;\nimport {\n  Wizard as WizardDeprecated,\n  WizardFooter as WizardFooterDeprecated,\n  WizardContextConsumer as WizardContextConsumerDeprecated\n} from &#39;@patternfly/react-core/deprecated&#39;;\nimport layout from &#39;@patternfly/react-styles/css/layouts/Bullseye/bullseye&#39;;\n\n// eslint-disable-next-line patternfly-react/import-tokens-icons\nimport { CogsIcon } from &#39;@patternfly/react-icons&#39;;\n\ninterface finishedProps {\n  onClose: () =&gt; void;\n}\n\nconst FinishedStep: React.FunctionComponent&lt;finishedProps&gt; = (props: finishedProps) =&gt; {\n  const [percent, setPercent] = useState(0);\n\n  const tick = () =&gt; {\n    setPercent((prevPercent) =&gt; {\n      if (prevPercent &lt; 100) {\n        return prevPercent + 20;\n      } else {\n        return prevPercent;\n      }\n    });\n  };\n\n  useEffect(() =&gt; {\n    const interval = setInterval(() =&gt; tick(), 1000);\n\n    if (percent &gt;= 100) {\n      clearInterval(interval);\n    }\n\n    return () =&gt; clearInterval(interval);\n  }, [percent]);\n\n  return (\n    &lt;div className={layout.bullseye}&gt;\n      &lt;EmptyState\n        headingLevel=\&quot;h4\&quot;\n        titleText={percent === 100 ? &#39;Validation complete&#39; : &#39;Validating credentials&#39;}\n        icon={CogsIcon}\n        variant=\&quot;lg\&quot;\n      &gt;\n        &lt;EmptyStateBody&gt;\n          &lt;Progress value={percent} measureLocation=\&quot;outside\&quot; aria-label=\&quot;validation-progress\&quot; /&gt;\n        &lt;/EmptyStateBody&gt;\n        &lt;EmptyStateBody&gt;\n          Description can be used to further elaborate on the validation step, or give the user a better idea of how\n          long the process will take.\n        &lt;/EmptyStateBody&gt;\n        &lt;EmptyStateFooter&gt;\n          &lt;EmptyStateActions&gt;\n            &lt;Button isDisabled={percent !== 100} onClick={props.onClose}&gt;\n              Log to console\n            &lt;/Button&gt;\n          &lt;/EmptyStateActions&gt;\n        &lt;/EmptyStateFooter&gt;\n      &lt;/EmptyState&gt;\n    &lt;/div&gt;\n  );\n};\n\ninterface sampleFormProps {\n  formValue: string;\n  isFormValid: boolean;\n  onChange?: (isValid: boolean, value: string) =&gt; void;\n}\n\nconst SampleForm: React.FunctionComponent&lt;sampleFormProps&gt; = (props: sampleFormProps) =&gt; {\n  const [value, setValue] = useState(props.formValue);\n  const [isValid, setIsValid] = useState(props.isFormValid);\n\n  const handleTextInputChange = (_event, value: string) =&gt; {\n    const valid = /^\\d+$/.test(value);\n    setValue(value);\n    setIsValid(valid);\n    props.onChange &amp;&amp; props.onChange(valid, value);\n  };\n\n  const validated = isValid ? &#39;default&#39; : &#39;error&#39;;\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup\n        label=\&quot;Age:\&quot;\n        type=\&quot;number\&quot;\n        helperText=\&quot;Write your age in numbers.\&quot;\n        helperTextInvalid=\&quot;Age has to be a number\&quot;\n        fieldId=\&quot;age\&quot;\n        validated={validated}\n      &gt;\n        &lt;TextInput\n          validated={validated}\n          value={value}\n          id=\&quot;age\&quot;\n          aria-describedby=\&quot;age-helper\&quot;\n          onChange={handleTextInputChange}\n        /&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n\nexport const WizardValidateButtonPress: React.FunctionComponent = () =&gt; {\n  const [isFormValid, setIsFormValid] = useState(false);\n  const [formValue, setFormValue] = useState(&#39;Validating on button press&#39;);\n  const [stepsValid, setStepsValid] = useState(0);\n  const [errorText, setErrorText] = useState(false);\n\n  const closeWizard = () =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;close wizard&#39;);\n  };\n\n  const onFormChange = (isValid: boolean, value: string) =&gt; {\n    setIsFormValid(isValid);\n    setFormValue(value);\n  };\n\n  const validateLastStep: (onNext: () =&gt; void) =&gt; void = (onNext) =&gt; {\n    if (stepsValid !== 1 &amp;&amp; !isFormValid) {\n      setErrorText(true);\n    } else {\n      setStepsValid(1);\n      setErrorText(false);\n      onNext();\n    }\n  };\n\n  const steps = [\n    { name: &#39;First step&#39;, component: &lt;p&gt;Step 1 content&lt;/p&gt; },\n    { name: &#39;Second step&#39;, component: &lt;p&gt;Step 2 content&lt;/p&gt; },\n    {\n      name: &#39;Final Step&#39;,\n      component: (\n        &lt;&gt;\n          {errorText &amp;&amp; (\n            &lt;div style={{ padding: &#39;15px 0&#39; }}&gt;\n              &lt;Alert variant=\&quot;warning\&quot; title=\&quot;Validation failed, please try again\&quot; /&gt;\n            &lt;/div&gt;\n          )}\n          &lt;SampleForm formValue={formValue} isFormValid={stepsValid !== 1} onChange={onFormChange} /&gt;\n        &lt;/&gt;\n      )\n    },\n    { name: &#39;Finish&#39;, component: &lt;FinishedStep onClose={closeWizard} /&gt;, isFinishedStep: true }\n  ];\n\n  const CustomFooter = (\n    &lt;WizardFooterDeprecated&gt;\n      &lt;WizardContextConsumerDeprecated&gt;\n        {({ activeStep, goToStepByName, onNext, onBack, onClose }) =&gt; {\n          if (activeStep.name !== &#39;Final Step&#39;) {\n            return (\n              &lt;&gt;\n                &lt;Button variant=\&quot;primary\&quot; type=\&quot;submit\&quot; onClick={onNext}&gt;\n                  Forward\n                &lt;/Button&gt;\n                &lt;Button\n                  variant=\&quot;secondary\&quot;\n                  onClick={onBack}\n                  className={activeStep.name === &#39;First step&#39; ? &#39;pf-m-disabled&#39; : &#39;&#39;}\n                &gt;\n                  Backward\n                &lt;/Button&gt;\n                &lt;Button variant=\&quot;link\&quot; onClick={onClose}&gt;\n                  Cancel\n                &lt;/Button&gt;\n              &lt;/&gt;\n            );\n          }\n          // Final step buttons\n          return (\n            &lt;&gt;\n              &lt;Button onClick={() =&gt; validateLastStep(onNext)}&gt;Validate&lt;/Button&gt;\n              &lt;Button onClick={() =&gt; goToStepByName(&#39;First step&#39;)}&gt;Go to Beginning&lt;/Button&gt;\n            &lt;/&gt;\n          );\n        }}\n      &lt;/WizardContextConsumerDeprecated&gt;\n    &lt;/WizardFooterDeprecated&gt;\n  );\n\n  const title = &#39;Validate on button press wizard example&#39;;\n  return (\n    &lt;WizardDeprecated\n      navAriaLabel={`${title} steps`}\n      mainAriaLabel={`${title} content`}\n      onClose={closeWizard}\n      footer={CustomFooter}\n      steps={steps}\n      height={400}\n    /&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1580" data-pf-content="true" class="pf-v6-c-content--h3">Progressive steps</h3>
+<pre data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1587" data-pf-content="true" class="pf-v6-c-content--pre"><code><span class="line"></span>
+<span class="line"><span style="color:#F97583">class</span><span style="color:#B392F0"> ProgressiveWizard</span><span style="color:#F97583"> extends</span><span style="color:#B392F0"> React</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">Component</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#F97583">  constructor</span><span style="color:#E1E4E8">(</span><span style="color:#FFAB70">props</span><span style="color:#E1E4E8">) {</span></span>
+<span class="line"><span style="color:#79B8FF">    super</span><span style="color:#E1E4E8">(props);</span></span>
+<span class="line"><span style="color:#79B8FF">    this</span><span style="color:#E1E4E8">.state </span><span style="color:#F97583">=</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#E1E4E8">      showCreateStep: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">      showUpdateStep: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">      showOptionsStep: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">      showReviewStep: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">      getStartedStepRadio: </span><span style="color:#9ECBFF">&#39;Create&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">      createStepRadio: </span><span style="color:#9ECBFF">&#39;Quick&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">      updateStepRadio: </span><span style="color:#9ECBFF">&#39;Quick&#39;</span></span>
+<span class="line"><span style="color:#E1E4E8">    };</span></span>
+<span class="line"><span style="color:#79B8FF">    this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">closeWizard</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> () </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#E1E4E8">      console.</span><span style="color:#B392F0">log</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;close wizard&#39;</span><span style="color:#E1E4E8">);</span></span>
+<span class="line"><span style="color:#E1E4E8">    };</span></span>
+<span class="line"><span style="color:#79B8FF">    this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">onGoToStep</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> ({ </span><span style="color:#FFAB70">id</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">name</span><span style="color:#E1E4E8"> }, { </span><span style="color:#FFAB70">prevId</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">prevName</span><span style="color:#E1E4E8"> }) </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#6A737D">      // Remove steps after the currently clicked step</span></span>
+<span class="line"><span style="color:#F97583">      if</span><span style="color:#E1E4E8"> (name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Get started&#39;</span><span style="color:#E1E4E8">) {</span></span>
+<span class="line"><span style="color:#79B8FF">        this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">({</span></span>
+<span class="line"><span style="color:#E1E4E8">          showReviewStep: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">          showOptionsStep: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">          showCreateStep: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">          showUpdateStep: </span><span style="color:#79B8FF">false</span></span>
+<span class="line"><span style="color:#E1E4E8">        });</span></span>
+<span class="line"><span style="color:#E1E4E8">      } </span><span style="color:#F97583">else</span><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Create options&#39;</span><span style="color:#F97583"> ||</span><span style="color:#E1E4E8"> name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Update options&#39;</span><span style="color:#E1E4E8">) {</span></span>
+<span class="line"><span style="color:#79B8FF">        this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">({</span></span>
+<span class="line"><span style="color:#E1E4E8">          showReviewStep: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">          showOptionsStep: </span><span style="color:#79B8FF">false</span></span>
+<span class="line"><span style="color:#E1E4E8">        });</span></span>
+<span class="line"><span style="color:#E1E4E8">      } </span><span style="color:#F97583">else</span><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (name.</span><span style="color:#B392F0">indexOf</span><span style="color:#E1E4E8">(</span><span style="color:#9ECBFF">&#39;Substep&#39;</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">&gt;</span><span style="color:#F97583"> -</span><span style="color:#79B8FF">1</span><span style="color:#E1E4E8">) {</span></span>
+<span class="line"><span style="color:#79B8FF">        this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">({</span></span>
+<span class="line"><span style="color:#E1E4E8">          showReviewStep: </span><span style="color:#79B8FF">false</span></span>
+<span class="line"><span style="color:#E1E4E8">        });</span></span>
+<span class="line"><span style="color:#E1E4E8">      }</span></span>
+<span class="line"><span style="color:#E1E4E8">    };</span></span>
+<span class="line"><span style="color:#79B8FF">    this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">getNextStep</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> (</span><span style="color:#FFAB70">activeStep</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">callback</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#F97583">      if</span><span style="color:#E1E4E8"> (activeStep.name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Get started&#39;</span><span style="color:#E1E4E8">) {</span></span>
+<span class="line"><span style="color:#F97583">        if</span><span style="color:#E1E4E8"> (</span><span style="color:#79B8FF">this</span><span style="color:#E1E4E8">.state.getStartedStepRadio </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Create&#39;</span><span style="color:#E1E4E8">) {</span></span>
+<span class="line"><span style="color:#79B8FF">          this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">(</span></span>
+<span class="line"><span style="color:#E1E4E8">            {</span></span>
+<span class="line"><span style="color:#E1E4E8">              showCreateStep: </span><span style="color:#79B8FF">true</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">              showUpdateStep: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">              showOptionsStep: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">              showReviewStep: </span><span style="color:#79B8FF">false</span></span>
+<span class="line"><span style="color:#E1E4E8">            },</span></span>
+<span class="line"><span style="color:#E1E4E8">            () </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#B392F0">              callback</span><span style="color:#E1E4E8">();</span></span>
+<span class="line"><span style="color:#E1E4E8">            }</span></span>
+<span class="line"><span style="color:#E1E4E8">          );</span></span>
+<span class="line"><span style="color:#E1E4E8">        } </span><span style="color:#F97583">else</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#79B8FF">          this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">(</span></span>
+<span class="line"><span style="color:#E1E4E8">            {</span></span>
+<span class="line"><span style="color:#E1E4E8">              showCreateStep: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">              showUpdateStep: </span><span style="color:#79B8FF">true</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">              showOptionsStep: </span><span style="color:#79B8FF">false</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">              showReviewStep: </span><span style="color:#79B8FF">false</span></span>
+<span class="line"><span style="color:#E1E4E8">            },</span></span>
+<span class="line"><span style="color:#E1E4E8">            () </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#B392F0">              callback</span><span style="color:#E1E4E8">();</span></span>
+<span class="line"><span style="color:#E1E4E8">            }</span></span>
+<span class="line"><span style="color:#E1E4E8">          );</span></span>
+<span class="line"><span style="color:#E1E4E8">        }</span></span>
+<span class="line"><span style="color:#E1E4E8">      } </span><span style="color:#F97583">else</span><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (activeStep.name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Create options&#39;</span><span style="color:#F97583"> ||</span><span style="color:#E1E4E8"> activeStep.name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Update options&#39;</span><span style="color:#E1E4E8">) {</span></span>
+<span class="line"><span style="color:#79B8FF">        this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">(</span></span>
+<span class="line"><span style="color:#E1E4E8">          {</span></span>
+<span class="line"><span style="color:#E1E4E8">            showOptionsStep: </span><span style="color:#79B8FF">true</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">            showReviewStep: </span><span style="color:#79B8FF">false</span></span>
+<span class="line"><span style="color:#E1E4E8">          },</span></span>
+<span class="line"><span style="color:#E1E4E8">          () </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#B392F0">            callback</span><span style="color:#E1E4E8">();</span></span>
+<span class="line"><span style="color:#E1E4E8">          }</span></span>
+<span class="line"><span style="color:#E1E4E8">        );</span></span>
+<span class="line"><span style="color:#E1E4E8">      } </span><span style="color:#F97583">else</span><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (activeStep.name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Substep 3&#39;</span><span style="color:#E1E4E8">) {</span></span>
+<span class="line"><span style="color:#79B8FF">        this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">(</span></span>
+<span class="line"><span style="color:#E1E4E8">          {</span></span>
+<span class="line"><span style="color:#E1E4E8">            showReviewStep: </span><span style="color:#79B8FF">true</span></span>
+<span class="line"><span style="color:#E1E4E8">          },</span></span>
+<span class="line"><span style="color:#E1E4E8">          () </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#B392F0">            callback</span><span style="color:#E1E4E8">();</span></span>
+<span class="line"><span style="color:#E1E4E8">          }</span></span>
+<span class="line"><span style="color:#E1E4E8">        );</span></span>
+<span class="line"><span style="color:#E1E4E8">      } </span><span style="color:#F97583">else</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#B392F0">        callback</span><span style="color:#E1E4E8">();</span></span>
+<span class="line"><span style="color:#E1E4E8">      }</span></span>
+<span class="line"><span style="color:#E1E4E8">    };</span></span>
+<span class="line"><span style="color:#79B8FF">    this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">getPreviousStep</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> (</span><span style="color:#FFAB70">activeStep</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">callback</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#F97583">      if</span><span style="color:#E1E4E8"> (activeStep.name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Review&#39;</span><span style="color:#E1E4E8">) {</span></span>
+<span class="line"><span style="color:#79B8FF">        this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">(</span></span>
+<span class="line"><span style="color:#E1E4E8">          {</span></span>
+<span class="line"><span style="color:#E1E4E8">            showReviewStep: </span><span style="color:#79B8FF">false</span></span>
+<span class="line"><span style="color:#E1E4E8">          },</span></span>
+<span class="line"><span style="color:#E1E4E8">          () </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#B392F0">            callback</span><span style="color:#E1E4E8">();</span></span>
+<span class="line"><span style="color:#E1E4E8">          }</span></span>
+<span class="line"><span style="color:#E1E4E8">        );</span></span>
+<span class="line"><span style="color:#E1E4E8">      } </span><span style="color:#F97583">else</span><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (activeStep.name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Substep 1&#39;</span><span style="color:#E1E4E8">) {</span></span>
+<span class="line"><span style="color:#79B8FF">        this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">(</span></span>
+<span class="line"><span style="color:#E1E4E8">          {</span></span>
+<span class="line"><span style="color:#E1E4E8">            showOptionsStep: </span><span style="color:#79B8FF">false</span></span>
+<span class="line"><span style="color:#E1E4E8">          },</span></span>
+<span class="line"><span style="color:#E1E4E8">          () </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#B392F0">            callback</span><span style="color:#E1E4E8">();</span></span>
+<span class="line"><span style="color:#E1E4E8">          }</span></span>
+<span class="line"><span style="color:#E1E4E8">        );</span></span>
+<span class="line"><span style="color:#E1E4E8">      } </span><span style="color:#F97583">else</span><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (activeStep.name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Create options&#39;</span><span style="color:#E1E4E8">) {</span></span>
+<span class="line"><span style="color:#79B8FF">        this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">(</span></span>
+<span class="line"><span style="color:#E1E4E8">          {</span></span>
+<span class="line"><span style="color:#E1E4E8">            showCreateStep: </span><span style="color:#79B8FF">false</span></span>
+<span class="line"><span style="color:#E1E4E8">          },</span></span>
+<span class="line"><span style="color:#E1E4E8">          () </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#B392F0">            callback</span><span style="color:#E1E4E8">();</span></span>
+<span class="line"><span style="color:#E1E4E8">          }</span></span>
+<span class="line"><span style="color:#E1E4E8">        );</span></span>
+<span class="line"><span style="color:#E1E4E8">      } </span><span style="color:#F97583">else</span><span style="color:#F97583"> if</span><span style="color:#E1E4E8"> (activeStep.name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Update options&#39;</span><span style="color:#E1E4E8">) {</span></span>
+<span class="line"><span style="color:#79B8FF">        this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">(</span></span>
+<span class="line"><span style="color:#E1E4E8">          {</span></span>
+<span class="line"><span style="color:#E1E4E8">            showUpdateStep: </span><span style="color:#79B8FF">false</span></span>
+<span class="line"><span style="color:#E1E4E8">          },</span></span>
+<span class="line"><span style="color:#E1E4E8">          () </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#B392F0">            callback</span><span style="color:#E1E4E8">();</span></span>
+<span class="line"><span style="color:#E1E4E8">          }</span></span>
+<span class="line"><span style="color:#E1E4E8">        );</span></span>
+<span class="line"><span style="color:#E1E4E8">      } </span><span style="color:#F97583">else</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#B392F0">        callback</span><span style="color:#E1E4E8">();</span></span>
+<span class="line"><span style="color:#E1E4E8">      }</span></span>
+<span class="line"><span style="color:#E1E4E8">    };</span></span>
+<span class="line"><span style="color:#E1E4E8">  }</span></span>
+<span class="line"><span style="color:#B392F0">  render</span><span style="color:#E1E4E8">() {</span></span>
+<span class="line"><span style="color:#F97583">    const</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#79B8FF">      stepsValid</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#79B8FF">      getStartedStepRadio</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#79B8FF">      createStepRadio</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#79B8FF">      updateStepRadio</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#79B8FF">      showCreateStep</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#79B8FF">      showUpdateStep</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#79B8FF">      showOptionsStep</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#79B8FF">      showReviewStep</span></span>
+<span class="line"><span style="color:#E1E4E8">    } </span><span style="color:#F97583">=</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.state;</span></span>
+<span class="line"><span style="color:#F97583">    const</span><span style="color:#79B8FF"> getStartedStep</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#E1E4E8">      name: </span><span style="color:#9ECBFF">&#39;Get started&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#B392F0">      component</span><span style="color:#E1E4E8">: (</span></span>
+<span class="line"><span style="color:#E1E4E8">        &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">          &lt;</span><span style="color:#79B8FF">Radio</span></span>
+<span class="line"><span style="color:#B392F0">            value</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Create&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            isChecked</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{getStartedStepRadio </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Create&#39;</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#B392F0">            onChange</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{(</span><span style="color:#FFAB70">event</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=&gt;</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">({ getStartedStepRadio: event.currentTarget.value })}</span></span>
+<span class="line"><span style="color:#B392F0">            label</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Create a new thing&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            name</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;radio-step-start&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            id</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;radio-step-start-1&quot;</span></span>
+<span class="line"><span style="color:#E1E4E8">          /&gt;{</span><span style="color:#9ECBFF">&#39; &#39;</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#E1E4E8">          &lt;</span><span style="color:#79B8FF">Radio</span></span>
+<span class="line"><span style="color:#B392F0">            value</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Update&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            isChecked</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{getStartedStepRadio </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Update&#39;</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#B392F0">            onChange</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{(</span><span style="color:#FFAB70">event</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=&gt;</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">({ getStartedStepRadio: event.currentTarget.value })}</span></span>
+<span class="line"><span style="color:#B392F0">            label</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Update an existing thing&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            name</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;radio-step-start&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            id</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;radio-step-start-2&quot;</span></span>
+<span class="line"><span style="color:#E1E4E8">          /&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">        &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">      )</span></span>
+<span class="line"><span style="color:#E1E4E8">    };</span></span>
+<span class="line"><span style="color:#F97583">    const</span><span style="color:#79B8FF"> createStep</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#E1E4E8">      name: </span><span style="color:#9ECBFF">&#39;Create options&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#B392F0">      component</span><span style="color:#E1E4E8">: (</span></span>
+<span class="line"><span style="color:#E1E4E8">        &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">          &lt;</span><span style="color:#79B8FF">Radio</span></span>
+<span class="line"><span style="color:#B392F0">            value</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Quick&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            isChecked</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{createStepRadio </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Quick&#39;</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#B392F0">            onChange</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{(</span><span style="color:#FFAB70">event</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=&gt;</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">({ createStepRadio: event.currentTarget.value })}</span></span>
+<span class="line"><span style="color:#B392F0">            label</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Quick create&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            name</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;radio-step-create&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            id</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;radio-step-create-1&quot;</span></span>
+<span class="line"><span style="color:#E1E4E8">          /&gt;{</span><span style="color:#9ECBFF">&#39; &#39;</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#E1E4E8">          &lt;</span><span style="color:#79B8FF">Radio</span></span>
+<span class="line"><span style="color:#B392F0">            value</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Custom&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            isChecked</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{createStepRadio </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Custom&#39;</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#B392F0">            onChange</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{(</span><span style="color:#FFAB70">event</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=&gt;</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">({ createStepRadio: event.currentTarget.value })}</span></span>
+<span class="line"><span style="color:#B392F0">            label</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Custom create&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            name</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;radio-step-create&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            id</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;radio-step-create-2&quot;</span></span>
+<span class="line"><span style="color:#E1E4E8">          /&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">        &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">      )</span></span>
+<span class="line"><span style="color:#E1E4E8">    };</span></span>
+<span class="line"><span style="color:#F97583">    const</span><span style="color:#79B8FF"> updateStep</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#E1E4E8">      name: </span><span style="color:#9ECBFF">&#39;Update options&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#B392F0">      component</span><span style="color:#E1E4E8">: (</span></span>
+<span class="line"><span style="color:#E1E4E8">        &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">          &lt;</span><span style="color:#79B8FF">Radio</span></span>
+<span class="line"><span style="color:#B392F0">            value</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Quick&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            isChecked</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{updateStepRadio </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Quick&#39;</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#B392F0">            onChange</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{(</span><span style="color:#FFAB70">event</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=&gt;</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">({ updateStepRadio: event.currentTarget.value })}</span></span>
+<span class="line"><span style="color:#B392F0">            label</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Quick update&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            name</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;radio-step-update&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            id</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;radio-step-update-1&quot;</span></span>
+<span class="line"><span style="color:#E1E4E8">          /&gt;{</span><span style="color:#9ECBFF">&#39; &#39;</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#E1E4E8">          &lt;</span><span style="color:#79B8FF">Radio</span></span>
+<span class="line"><span style="color:#B392F0">            value</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Custom&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            isChecked</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{updateStepRadio </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Custom&#39;</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#B392F0">            onChange</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{(</span><span style="color:#FFAB70">event</span><span style="color:#E1E4E8">) </span><span style="color:#F97583">=&gt;</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">setState</span><span style="color:#E1E4E8">({ updateStepRadio: event.currentTarget.value })}</span></span>
+<span class="line"><span style="color:#B392F0">            label</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;Custom update&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            name</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;radio-step-update&quot;</span></span>
+<span class="line"><span style="color:#B392F0">            id</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;radio-step-update-2&quot;</span></span>
+<span class="line"><span style="color:#E1E4E8">          /&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">        &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">      )</span></span>
+<span class="line"><span style="color:#E1E4E8">    };</span></span>
+<span class="line"><span style="color:#F97583">    const</span><span style="color:#79B8FF"> optionsStep</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#E1E4E8">      name: showCreateStep </span><span style="color:#F97583">?</span><span style="color:#9ECBFF"> `${</span><span style="color:#E1E4E8">createStepRadio</span><span style="color:#9ECBFF">} Options`</span><span style="color:#F97583"> :</span><span style="color:#9ECBFF"> `${</span><span style="color:#E1E4E8">updateStepRadio</span><span style="color:#9ECBFF">} Options`</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">      steps: [</span></span>
+<span class="line"><span style="color:#E1E4E8">        {</span></span>
+<span class="line"><span style="color:#E1E4E8">          name: </span><span style="color:#9ECBFF">&#39;Substep 1&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">          component: </span><span style="color:#9ECBFF">&#39;Substep 1&#39;</span></span>
+<span class="line"><span style="color:#E1E4E8">        },</span></span>
+<span class="line"><span style="color:#E1E4E8">        {</span></span>
+<span class="line"><span style="color:#E1E4E8">          name: </span><span style="color:#9ECBFF">&#39;Substep 2&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">          component: </span><span style="color:#9ECBFF">&#39;Substep 2&#39;</span></span>
+<span class="line"><span style="color:#E1E4E8">        },</span></span>
+<span class="line"><span style="color:#E1E4E8">        {</span></span>
+<span class="line"><span style="color:#E1E4E8">          name: </span><span style="color:#9ECBFF">&#39;Substep 3&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#E1E4E8">          component: </span><span style="color:#9ECBFF">&#39;Substep 3&#39;</span></span>
+<span class="line"><span style="color:#E1E4E8">        }</span></span>
+<span class="line"><span style="color:#E1E4E8">      ]</span></span>
+<span class="line"><span style="color:#E1E4E8">    };</span></span>
+<span class="line"><span style="color:#F97583">    const</span><span style="color:#79B8FF"> reviewStep</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#E1E4E8">      name: </span><span style="color:#9ECBFF">&#39;Review&#39;</span><span style="color:#E1E4E8">,</span></span>
+<span class="line"><span style="color:#B392F0">      component</span><span style="color:#E1E4E8">: (</span></span>
+<span class="line"><span style="color:#E1E4E8">        &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">          &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;First choice: {getStartedStepRadio}&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">          &lt;</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;Second choice: {showCreateStep </span><span style="color:#F97583">?</span><span style="color:#E1E4E8"> createStepRadio </span><span style="color:#F97583">:</span><span style="color:#E1E4E8"> updateStepRadio}&lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">        &lt;/</span><span style="color:#85E89D">div</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">      )</span></span>
+<span class="line"><span style="color:#E1E4E8">    };</span></span>
+<span class="line"><span style="color:#F97583">    const</span><span style="color:#79B8FF"> steps</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> [</span></span>
+<span class="line"><span style="color:#E1E4E8">      getStartedStep,</span></span>
+<span class="line"><span style="color:#F97583">      ...</span><span style="color:#E1E4E8">(showCreateStep </span><span style="color:#F97583">?</span><span style="color:#E1E4E8"> [createStep] </span><span style="color:#F97583">:</span><span style="color:#E1E4E8"> []),</span></span>
+<span class="line"><span style="color:#F97583">      ...</span><span style="color:#E1E4E8">(showUpdateStep </span><span style="color:#F97583">?</span><span style="color:#E1E4E8"> [updateStep] </span><span style="color:#F97583">:</span><span style="color:#E1E4E8"> []),</span></span>
+<span class="line"><span style="color:#F97583">      ...</span><span style="color:#E1E4E8">(showOptionsStep </span><span style="color:#F97583">?</span><span style="color:#E1E4E8"> [optionsStep] </span><span style="color:#F97583">:</span><span style="color:#E1E4E8"> []),</span></span>
+<span class="line"><span style="color:#F97583">      ...</span><span style="color:#E1E4E8">(showReviewStep </span><span style="color:#F97583">?</span><span style="color:#E1E4E8"> [reviewStep] </span><span style="color:#F97583">:</span><span style="color:#E1E4E8"> [])</span></span>
+<span class="line"><span style="color:#E1E4E8">    ];</span></span>
+<span class="line"><span style="color:#F97583">    const</span><span style="color:#B392F0"> CustomFooter</span><span style="color:#F97583"> =</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#79B8FF">WizardFooterDeprecated</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">        &lt;</span><span style="color:#79B8FF">WizardContextConsumerDeprecated</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">          {({ </span><span style="color:#FFAB70">activeStep</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">goToStepByName</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">goToStepById</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">onNext</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">onBack</span><span style="color:#E1E4E8">, </span><span style="color:#FFAB70">onClose</span><span style="color:#E1E4E8"> }) </span><span style="color:#F97583">=&gt;</span><span style="color:#E1E4E8"> {</span></span>
+<span class="line"><span style="color:#F97583">            return</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#E1E4E8">              &lt;&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">                &lt;</span><span style="color:#79B8FF">Button</span></span>
+<span class="line"><span style="color:#B392F0">                  variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;secondary&quot;</span></span>
+<span class="line"><span style="color:#B392F0">                  onClick</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{() </span><span style="color:#F97583">=&gt;</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">getPreviousStep</span><span style="color:#E1E4E8">(activeStep, onBack)}</span></span>
+<span class="line"><span style="color:#B392F0">                  className</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{activeStep.name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Get started&#39;</span><span style="color:#F97583"> ?</span><span style="color:#9ECBFF"> &#39;pf-m-disabled&#39;</span><span style="color:#F97583"> :</span><span style="color:#9ECBFF"> &#39;&#39;</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#E1E4E8">                &gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">                  Back</span></span>
+<span class="line"><span style="color:#E1E4E8">                &lt;/</span><span style="color:#79B8FF">Button</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">                &lt;</span><span style="color:#79B8FF">Button</span><span style="color:#B392F0"> variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;primary&quot;</span><span style="color:#B392F0"> type</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;submit&quot;</span><span style="color:#B392F0"> onClick</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{() </span><span style="color:#F97583">=&gt;</span><span style="color:#79B8FF"> this</span><span style="color:#E1E4E8">.</span><span style="color:#B392F0">getNextStep</span><span style="color:#E1E4E8">(activeStep, onNext)}&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">                  {activeStep.name </span><span style="color:#F97583">===</span><span style="color:#9ECBFF"> &#39;Review&#39;</span><span style="color:#F97583"> ?</span><span style="color:#9ECBFF"> &#39;Finish&#39;</span><span style="color:#F97583"> :</span><span style="color:#9ECBFF"> &#39;Next&#39;</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#E1E4E8">                &lt;/</span><span style="color:#79B8FF">Button</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">                &lt;</span><span style="color:#79B8FF">Button</span><span style="color:#B392F0"> variant</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">&quot;link&quot;</span><span style="color:#B392F0"> onClick</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{onClose}&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">                  Cancel</span></span>
+<span class="line"><span style="color:#E1E4E8">                &lt;/</span><span style="color:#79B8FF">Button</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">              &lt;/&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">            );</span></span>
+<span class="line"><span style="color:#E1E4E8">          }}</span></span>
+<span class="line"><span style="color:#E1E4E8">        &lt;/</span><span style="color:#79B8FF">WizardContextConsumerDeprecated</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">      &lt;/</span><span style="color:#79B8FF">WizardFooterDeprecated</span><span style="color:#E1E4E8">&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">    );</span></span>
+<span class="line"><span style="color:#F97583">    const</span><span style="color:#79B8FF"> title</span><span style="color:#F97583"> =</span><span style="color:#9ECBFF"> &#39;Progressive wizard&#39;</span><span style="color:#E1E4E8">;</span></span>
+<span class="line"><span style="color:#F97583">    return</span><span style="color:#E1E4E8"> (</span></span>
+<span class="line"><span style="color:#E1E4E8">      &lt;</span><span style="color:#79B8FF">WizardDeprecated</span></span>
+<span class="line"><span style="color:#B392F0">        navAriaLabel</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#9ECBFF">`${</span><span style="color:#E1E4E8">title</span><span style="color:#9ECBFF">} steps`</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#B392F0">        mainAriaLabel</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#9ECBFF">`${</span><span style="color:#E1E4E8">title</span><span style="color:#9ECBFF">} content`</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#B392F0">        onClose</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">this</span><span style="color:#E1E4E8">.closeWizard}</span></span>
+<span class="line"><span style="color:#B392F0">        footer</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{CustomFooter}</span></span>
+<span class="line"><span style="color:#B392F0">        onGoToStep</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">this</span><span style="color:#E1E4E8">.onGoToStep}</span></span>
+<span class="line"><span style="color:#B392F0">        steps</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{steps}</span></span>
+<span class="line"><span style="color:#B392F0">        height</span><span style="color:#F97583">=</span><span style="color:#E1E4E8">{</span><span style="color:#79B8FF">400</span><span style="color:#E1E4E8">}</span></span>
+<span class="line"><span style="color:#E1E4E8">      /&gt;</span></span>
+<span class="line"><span style="color:#E1E4E8">    );</span></span>
+<span class="line"><span style="color:#E1E4E8">  }</span></span>
+<span class="line"><span style="color:#E1E4E8">}</span></span></code></pre>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1581" data-pf-content="true" class="pf-v6-c-content--h3">Get current step</h3>
+<astro-island uid="QbfUw" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard as WizardDeprecated, WizardStep } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const WizardGetCurrentStep: React.FunctionComponent = () =&gt; {\n  const onCurrentStepChanged = ({ id }: WizardStep) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(id);\n  };\n  const closeWizard = () =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(&#39;close wizard&#39;);\n  };\n\n  const steps = [\n    { id: 1, name: &#39;First step&#39;, component: &lt;p&gt;Step 1 content&lt;/p&gt; },\n    { id: 2, name: &#39;Second step&#39;, component: &lt;p&gt;Step 2 content&lt;/p&gt; },\n    { id: 3, name: &#39;Third step&#39;, component: &lt;p&gt;Step 3 content&lt;/p&gt; },\n    { id: 4, name: &#39;Fourth step&#39;, component: &lt;p&gt;Step 4 content&lt;/p&gt; },\n    { id: 5, name: &#39;Review&#39;, component: &lt;p&gt;Review step content&lt;/p&gt;, nextButtonText: &#39;Finish&#39; }\n  ];\n  const title = &#39;Get current step wizard example&#39;;\n  return (\n    &lt;WizardDeprecated\n      navAriaLabel={`${title} steps`}\n      mainAriaLabel={`${title} content`}\n      onClose={closeWizard}\n      description=\&quot;Simple Wizard Description\&quot;\n      steps={steps}\n      height={400}\n      onCurrentStepChanged={onCurrentStepChanged}\n    /&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1582" data-pf-content="true" class="pf-v6-c-content--h3">Wizard in modal</h3>
+<astro-island uid="Gv9Bp" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button } from &#39;@patternfly/react-core&#39;;\nimport { Wizard as WizardDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const WizardInModal: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const handleWizardToggle = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const steps = [\n    { name: &#39;First step&#39;, component: &lt;p&gt;Step 1 content&lt;/p&gt; },\n    { name: &#39;Second step&#39;, component: &lt;p&gt;Step 2 content&lt;/p&gt; },\n    { name: &#39;Third step&#39;, component: &lt;p&gt;Step 3 content&lt;/p&gt; },\n    { name: &#39;Fourth step&#39;, component: &lt;p&gt;Step 4 content&lt;/p&gt; },\n    { name: &#39;Review&#39;, component: &lt;p&gt;Review step content&lt;/p&gt;, nextButtonText: &#39;Finish&#39; }\n  ];\n\n  const title = &#39;Wizard in modal example&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show Modal\n      &lt;/Button&gt;\n      &lt;WizardDeprecated\n        title={title}\n        description=\&quot;Simple Wizard Description\&quot;\n        descriptionComponent=\&quot;div\&quot;\n        steps={steps}\n        onClose={handleWizardToggle}\n        isOpen={isOpen}\n      /&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1583" data-pf-content="true" class="pf-v6-c-content--h3">Wizard with drawer</h3>
+<astro-island uid="Z1GvNHJ" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Button,\n  DrawerActions,\n  DrawerCloseButton,\n  DrawerHead,\n  DrawerPanelContent,\n  DrawerColorVariant\n} from &#39;@patternfly/react-core&#39;;\nimport { Wizard as WizardDeprecated } from &#39;@patternfly/react-core/deprecated&#39;;\n\nexport const WizardWithDrawer: React.FunctionComponent = () =&gt; {\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n\n  const drawerRef = useRef&lt;HTMLSpanElement&gt;(null);\n\n  const onExpandDrawer = () =&gt; {\n    drawerRef.current &amp;&amp; drawerRef.current.focus();\n  };\n\n  const onOpenClick = () =&gt; {\n    setIsDrawerExpanded(true);\n  };\n\n  const onCloseClick = () =&gt; {\n    setIsDrawerExpanded(false);\n  };\n\n  const panel1Content = (\n    &lt;DrawerPanelContent widths={{ default: &#39;width_33&#39; }} colorVariant={DrawerColorVariant.secondary}&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}&gt;\n          drawer-panel-1 content\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const panel2Content = (\n    &lt;DrawerPanelContent widths={{ default: &#39;width_33&#39; }} colorVariant={DrawerColorVariant.secondary}&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={0} ref={drawerRef}&gt;\n          drawer-panel-2 content\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const panel3Content = (\n    &lt;DrawerPanelContent widths={{ default: &#39;width_33&#39; }} colorVariant={DrawerColorVariant.secondary}&gt;\n      &lt;DrawerHead&gt;\n        &lt;span tabIndex={0} ref={drawerRef}&gt;\n          drawer-panel-3 content\n        &lt;/span&gt;\n        &lt;DrawerActions&gt;\n          &lt;DrawerCloseButton onClick={onCloseClick} /&gt;\n        &lt;/DrawerActions&gt;\n      &lt;/DrawerHead&gt;\n    &lt;/DrawerPanelContent&gt;\n  );\n\n  const drawerToggleButton = (\n    &lt;Button isInline variant=\&quot;link\&quot; onClick={onOpenClick}&gt;\n      Open Drawer\n    &lt;/Button&gt;\n  );\n\n  const steps = [\n    {\n      name: &#39;Information&#39;,\n      component: &lt;p&gt;Information step content&lt;/p&gt;,\n      drawerPanelContent: panel1Content,\n      drawerToggleButton\n    },\n    {\n      name: &#39;Configuration&#39;,\n      steps: [\n        {\n          name: &#39;Substep A&#39;,\n          component: &lt;p&gt;Substep A content&lt;/p&gt;,\n          drawerPanelContent: panel2Content,\n          drawerToggleButton\n        },\n        {\n          name: &#39;Substep B&#39;,\n          component: &lt;p&gt;Substep B content&lt;/p&gt;,\n          drawerPanelContent: panel2Content,\n          drawerToggleButton\n        },\n        {\n          name: &#39;Substep C&#39;,\n          component: &lt;p&gt;Substep C content&lt;/p&gt;,\n          drawerPanelContent: panel2Content,\n          drawerToggleButton\n        }\n      ]\n    },\n    {\n      name: &#39;Additional&#39;,\n      component: &lt;p&gt;Additional step content&lt;/p&gt;,\n      drawerPanelContent: panel3Content,\n      drawerToggleButton\n    },\n    {\n      name: &#39;Review&#39;,\n      component: &lt;p&gt;Review step content&lt;/p&gt;,\n      nextButtonText: &#39;Finish&#39;\n    }\n  ];\n\n  const title = &#39;Wizard with drawer example&#39;;\n\n  return (\n    &lt;Fragment&gt;\n      &lt;WizardDeprecated\n        height={400}\n        isDrawerExpanded={isDrawerExpanded}\n        onExpandDrawer={onExpandDrawer}\n        hasDrawer\n        navAriaLabel={`${title} steps`}\n        steps={steps}\n      /&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="sworw" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Wizard&quot;],[0,&quot;WizardNav&quot;],[0,&quot;WizardNavItem&quot;],[0,&quot;WizardHeader&quot;],[0,&quot;WizardBody&quot;],[0,&quot;WizardFooter&quot;],[0,&quot;WizardToggle&quot;],[0,&quot;WizardStep&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/wizard/react-deprecated/&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1569" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
+CSS variables
+</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="ZIWqYs" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,false],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-wizard&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div></div></div></div> </div></section>   </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>