npm - @patternfly/patternfly-doc-core - Versions diffs - 1.13.1 → 1.13.3 - Mend

@patternfly/patternfly-doc-core 1.13.1 → 1.13.3

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 (373) hide show

package/dist/docs/components/wizard/index.html CHANGED Viewed

@@ -1,4 +1,4 @@
-<!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">
+<!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.13.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.DZnDNxNb.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">
@@ -42,65 +42,65 @@
 	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="Z14Wwwd" prefix="r5" component-url="/_astro/PageToggle.DBsLIFpI.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-502"><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="Z2vr16" 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-168"><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-503"><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-504"><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-168"><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 pf-m-current"> <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"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3152" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+			[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="Z14Wwwd" prefix="r5" component-url="/_astro/PageToggle.DBsLIFpI.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-502"><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="Z2vr16" 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-168"><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-503"><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-504"><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-168"><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.x46lNg3Y.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 pf-m-current"> <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"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3152" 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-3153" 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="Z2wyPf6" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardBasic: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;Basic wizard\&quot;&gt;\n    &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;basic-first-step\&quot;&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 \&quot;region\&quot;,\n        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 lacinia\n        vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, enim ex porttitor\n        odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla facilisi. Duis eget finibus\n        ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus posuere pulvinar id nec turpis. Morbi\n        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 orci\n        fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec bibendum ante. Vestibulum\n        sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, commodo sodales quam lectus a urna.\n        Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non egestas diam velit in mi. Ut sit amet commodo\n        orci. Duis sed diam odio. Duis mi metus, dignissim in odio nec, ornare aliquet libero. Sed luctus elit nibh.\n        Quisque et felis diam. Integer ac metus dolor.\n      &lt;/p&gt;\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;basic-second-step\&quot;&gt;\n      Step 2 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;basic-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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>
+<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="Z2wyPf6" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardBasic: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;Basic wizard\&quot;&gt;\n    &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;basic-first-step\&quot;&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 \&quot;region\&quot;,\n        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 lacinia\n        vel sapien ut imperdiet. Nunc ultrices mollis dictum. Duis tempus, massa nec tincidunt tempor, enim ex porttitor\n        odio, eu facilisis dolor tortor id sapien. Etiam sit amet molestie lacus. Nulla facilisi. Duis eget finibus\n        ipsum. Quisque dictum enim sed sodales porta. Curabitur eget orci eu risus posuere pulvinar id nec turpis. Morbi\n        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 orci\n        fringilla pretium mattis. Aliquam erat volutpat. Sed pharetra condimentum dui, nec bibendum ante. Vestibulum\n        sollicitudin, sem accumsan pharetra molestie, purus turpis lacinia lorem, commodo sodales quam lectus a urna.\n        Nam gravida, felis a lacinia varius, ex ipsum ultrices orci, non egestas diam velit in mi. Ut sit amet commodo\n        orci. Duis sed diam odio. Duis mi metus, dignissim in odio nec, ornare aliquet libero. Sed luctus elit nibh.\n        Quisque et felis diam. Integer ac metus dolor.\n      &lt;/p&gt;\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;basic-second-step\&quot;&gt;\n      Step 2 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;basic-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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-3154" data-pf-content="true" class="pf-v6-c-content--h3">Focus content on next/back</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3177" data-pf-content="true" class="pf-v6-c-content--p">To focus the main content element of the <code>Wizard</code>, pass in the <code>shouldFocusContent</code> property. It is recommended that this is passed in so that users can navigate through a <code>WizardStep</code> content in order.</p>
-<astro-island uid="ZIimzG" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardFocusOnNextBack: React.FunctionComponent = () =&gt; (\n  &lt;Wizard shouldFocusContent title=\&quot;Wizard that focuses content on next or back click\&quot;&gt;\n    &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;wizard-focus-first-step\&quot;&gt;\n      Step 1 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;wizard-focus-second-step\&quot;&gt;\n      Step 2 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;wizard-focus-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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>
+<astro-island uid="ZIimzG" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardFocusOnNextBack: React.FunctionComponent = () =&gt; (\n  &lt;Wizard shouldFocusContent title=\&quot;Wizard that focuses content on next or back click\&quot;&gt;\n    &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;wizard-focus-first-step\&quot;&gt;\n      Step 1 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;wizard-focus-second-step\&quot;&gt;\n      Step 2 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;wizard-focus-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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-3155" data-pf-content="true" class="pf-v6-c-content--h3">Basic with disabled steps</h3>
-<astro-island uid="ZDi09i" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardBasicDisabledSteps: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;Basic disabled wizard\&quot;&gt;\n    &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;bdisabled-first-step\&quot;&gt;\n      Step 1 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;bdisabled-second-step\&quot; isDisabled&gt;\n      Step 2 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 3\&quot; id=\&quot;bdisabled-third-step\&quot;&gt;\n      Step 3 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 4\&quot; id=\&quot;bdisabled-fourth-step\&quot; isDisabled&gt;\n      Step 4 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;bdisabled-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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>
+<astro-island uid="ZDi09i" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardBasicDisabledSteps: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;Basic disabled wizard\&quot;&gt;\n    &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;bdisabled-first-step\&quot;&gt;\n      Step 1 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;bdisabled-second-step\&quot; isDisabled&gt;\n      Step 2 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 3\&quot; id=\&quot;bdisabled-third-step\&quot;&gt;\n      Step 3 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 4\&quot; id=\&quot;bdisabled-fourth-step\&quot; isDisabled&gt;\n      Step 4 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;bdisabled-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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-3156" data-pf-content="true" class="pf-v6-c-content--h3">Anchors for nav items</h3>
-<astro-island uid="Z2s13fR" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Wizard, WizardStep } from &#39;@patternfly/react-core&#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  &lt;Wizard height={400} title=\&quot;Anchor link wizard\&quot;&gt;\n    &lt;WizardStep\n      name={\n        &lt;&gt;\n          &lt;ExternalLinkAltIcon /&gt; PF3\n        &lt;/&gt;\n      }\n      id=\&quot;navanchors-pf3-step\&quot;\n      navItem={{ component: &#39;a&#39;, href: &#39;https://www.patternfly.org/v3&#39;, target: &#39;_blank&#39; }}\n    &gt;\n      Step 1: Read about PF3\n    &lt;/WizardStep&gt;\n    &lt;WizardStep\n      name={\n        &lt;&gt;\n          &lt;ExternalLinkAltIcon /&gt; PF4\n        &lt;/&gt;\n      }\n      id=\&quot;navanchors-pf4-step\&quot;\n      navItem={{ component: &#39;a&#39;, href: &#39;https://www.patternfly.org/v4&#39;, target: &#39;_blank&#39; }}\n    &gt;\n      Step 2: Read about PF4\n    &lt;/WizardStep&gt;\n    &lt;WizardStep\n      name={\n        &lt;&gt;\n          &lt;SlackHashIcon /&gt; Join us on slack\n        &lt;/&gt;\n      }\n      id=\&quot;navanchors-slack-step\&quot;\n      navItem={{ component: &#39;a&#39;, href: &#39;https://patternfly.slack.com&#39;, target: &#39;_blank&#39; }}\n    &gt;\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    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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>
+<astro-island uid="Z2s13fR" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Button, Wizard, WizardStep } from &#39;@patternfly/react-core&#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  &lt;Wizard height={400} title=\&quot;Anchor link wizard\&quot;&gt;\n    &lt;WizardStep\n      name={\n        &lt;&gt;\n          &lt;ExternalLinkAltIcon /&gt; PF3\n        &lt;/&gt;\n      }\n      id=\&quot;navanchors-pf3-step\&quot;\n      navItem={{ component: &#39;a&#39;, href: &#39;https://www.patternfly.org/v3&#39;, target: &#39;_blank&#39; }}\n    &gt;\n      Step 1: Read about PF3\n    &lt;/WizardStep&gt;\n    &lt;WizardStep\n      name={\n        &lt;&gt;\n          &lt;ExternalLinkAltIcon /&gt; PF4\n        &lt;/&gt;\n      }\n      id=\&quot;navanchors-pf4-step\&quot;\n      navItem={{ component: &#39;a&#39;, href: &#39;https://www.patternfly.org/v4&#39;, target: &#39;_blank&#39; }}\n    &gt;\n      Step 2: Read about PF4\n    &lt;/WizardStep&gt;\n    &lt;WizardStep\n      name={\n        &lt;&gt;\n          &lt;SlackHashIcon /&gt; Join us on slack\n        &lt;/&gt;\n      }\n      id=\&quot;navanchors-slack-step\&quot;\n      navItem={{ component: &#39;a&#39;, href: &#39;https://patternfly.slack.com&#39;, target: &#39;_blank&#39; }}\n    &gt;\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    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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-3157" data-pf-content="true" class="pf-v6-c-content--h3">Incrementally enabled steps</h3>
-<astro-island uid="1SlS9R" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardStepVisitRequired: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;Incrementally enabled steps wizard\&quot; isVisitRequired&gt;\n    &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;req-visit-first-step\&quot;&gt;\n      Step 1 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;req-visit-second-step\&quot;&gt;\n      Step 2 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 3\&quot; id=\&quot;req-visit-third-step\&quot;&gt;\n      Step 3 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 4\&quot; id=\&quot;req-visit-fourth-step\&quot;&gt;\n      Step 4 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;req-visit-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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>
+<astro-island uid="1SlS9R" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardStepVisitRequired: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;Incrementally enabled steps wizard\&quot; isVisitRequired&gt;\n    &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;req-visit-first-step\&quot;&gt;\n      Step 1 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;req-visit-second-step\&quot;&gt;\n      Step 2 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 3\&quot; id=\&quot;req-visit-third-step\&quot;&gt;\n      Step 3 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 4\&quot; id=\&quot;req-visit-fourth-step\&quot;&gt;\n      Step 4 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;req-visit-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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-3158" data-pf-content="true" class="pf-v6-c-content--h3">Expandable steps</h3>
-<astro-island uid="Z2c6LNo" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardExpandableSteps: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;Expandable steps wizard\&quot; nav={{ isExpanded: true }}&gt;\n    &lt;WizardStep\n      name=\&quot;Step 1\&quot;\n      id=\&quot;expand-steps-1\&quot;\n      isExpandable\n      steps={[\n        &lt;WizardStep name=\&quot;Substep A\&quot; id=\&quot;expand-steps-sub-a\&quot; key=\&quot;expand-steps-sub-a\&quot;&gt;\n          Substep A content\n        &lt;/WizardStep&gt;,\n        &lt;WizardStep name=\&quot;Substep B\&quot; id=\&quot;expand-steps-sub-b\&quot; key=\&quot;expand-steps-sub-b\&quot;&gt;\n          Substep B content\n        &lt;/WizardStep&gt;\n      ]}\n    /&gt;\n    &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;expand-steps-2\&quot;&gt;\n      Step 2 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep\n      name=\&quot;Step 3\&quot;\n      id=\&quot;expand-steps-3\&quot;\n      isExpandable\n      steps={[\n        &lt;WizardStep name=\&quot;Substep C\&quot; id=\&quot;expand-steps-sub-c\&quot; key=\&quot;expand-steps-sub-c\&quot;&gt;\n          Substep C content\n        &lt;/WizardStep&gt;,\n        &lt;WizardStep name=\&quot;Substep D\&quot; id=\&quot;expand-steps-sub-d\&quot; key=\&quot;expand-steps-sub-d\&quot;&gt;\n          Substep D content\n        &lt;/WizardStep&gt;\n      ]}\n    /&gt;\n    &lt;WizardStep name=\&quot;Step 4\&quot; id=\&quot;expand-steps-4\&quot;&gt;\n      Step 4 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;expand-steps-review\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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>
+<astro-island uid="Z2c6LNo" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardExpandableSteps: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;Expandable steps wizard\&quot; nav={{ isExpanded: true }}&gt;\n    &lt;WizardStep\n      name=\&quot;Step 1\&quot;\n      id=\&quot;expand-steps-1\&quot;\n      isExpandable\n      steps={[\n        &lt;WizardStep name=\&quot;Substep A\&quot; id=\&quot;expand-steps-sub-a\&quot; key=\&quot;expand-steps-sub-a\&quot;&gt;\n          Substep A content\n        &lt;/WizardStep&gt;,\n        &lt;WizardStep name=\&quot;Substep B\&quot; id=\&quot;expand-steps-sub-b\&quot; key=\&quot;expand-steps-sub-b\&quot;&gt;\n          Substep B content\n        &lt;/WizardStep&gt;\n      ]}\n    /&gt;\n    &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;expand-steps-2\&quot;&gt;\n      Step 2 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep\n      name=\&quot;Step 3\&quot;\n      id=\&quot;expand-steps-3\&quot;\n      isExpandable\n      steps={[\n        &lt;WizardStep name=\&quot;Substep C\&quot; id=\&quot;expand-steps-sub-c\&quot; key=\&quot;expand-steps-sub-c\&quot;&gt;\n          Substep C content\n        &lt;/WizardStep&gt;,\n        &lt;WizardStep name=\&quot;Substep D\&quot; id=\&quot;expand-steps-sub-d\&quot; key=\&quot;expand-steps-sub-d\&quot;&gt;\n          Substep D content\n        &lt;/WizardStep&gt;\n      ]}\n    /&gt;\n    &lt;WizardStep name=\&quot;Step 4\&quot; id=\&quot;expand-steps-4\&quot;&gt;\n      Step 4 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;expand-steps-review\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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-3159" data-pf-content="true" class="pf-v6-c-content--h3">Progress after submission</h3>
-<astro-island uid="gdvfH" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useCallback, useEffect, useState } from &#39;react&#39;;\nimport {\n  EmptyState,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions,\n  Progress,\n  Button,\n  Wizard,\n  WizardStep\n} from &#39;@patternfly/react-core&#39;;\nimport CogsIcon from &#39;@patternfly/react-icons/dist/esm/icons/cogs-icon&#39;;\nimport layout from &#39;@patternfly/react-styles/css/layouts/Bullseye/bullseye&#39;;\n\ninterface ValidationProgressProps {\n  onClose(): void;\n}\n\nconst ValidationProgress: React.FunctionComponent&lt;ValidationProgressProps&gt; = ({ onClose }) =&gt; {\n  const [percentValidated, setPercentValidated] = useState(0);\n\n  const tick = useCallback(() =&gt; {\n    if (percentValidated &lt; 100) {\n      setPercentValidated((prevValue) =&gt; prevValue + 20);\n    }\n  }, [percentValidated]);\n\n  useEffect(() =&gt; {\n    const interval = setInterval(() =&gt; tick(), 1000);\n\n    return () =&gt; {\n      clearInterval(interval);\n    };\n  }, [tick]);\n\n  return (\n    &lt;div className={layout.bullseye}&gt;\n      &lt;EmptyState\n        headingLevel=\&quot;h4\&quot;\n        titleText={percentValidated === 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={percentValidated} measureLocation=\&quot;outside\&quot; aria-label=\&quot;Wizard 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={percentValidated !== 100} onClick={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 WizardWithSubmitProgress: React.FunctionComponent = () =&gt; {\n  const [isSubmitted, setIsSubmitted] = useState(false);\n\n  // eslint-disable-next-line no-console\n  const onClose = () =&gt; console.log(&#39;Some close action occurs here.&#39;);\n\n  if (isSubmitted) {\n    return &lt;ValidationProgress onClose={onClose} /&gt;;\n  }\n\n  return (\n    &lt;Wizard height={400} title=\&quot;Submit progress wizard\&quot; onClose={onClose}&gt;\n      &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;submit-progress-step-1\&quot;&gt;\n        Step 1 content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;submit-progress-step-2\&quot;&gt;\n        Step 2 content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep\n        name=\&quot;Review\&quot;\n        id=\&quot;submit-progress-review\&quot;\n        footer={{ nextButtonText: &#39;Finish&#39;, onNext: () =&gt; setIsSubmitted(true) }}\n      &gt;\n        Review step content\n      &lt;/WizardStep&gt;\n    &lt;/Wizard&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>
+<astro-island uid="gdvfH" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useCallback, useEffect, useState } from &#39;react&#39;;\nimport {\n  EmptyState,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions,\n  Progress,\n  Button,\n  Wizard,\n  WizardStep\n} from &#39;@patternfly/react-core&#39;;\nimport CogsIcon from &#39;@patternfly/react-icons/dist/esm/icons/cogs-icon&#39;;\nimport layout from &#39;@patternfly/react-styles/css/layouts/Bullseye/bullseye&#39;;\n\ninterface ValidationProgressProps {\n  onClose(): void;\n}\n\nconst ValidationProgress: React.FunctionComponent&lt;ValidationProgressProps&gt; = ({ onClose }) =&gt; {\n  const [percentValidated, setPercentValidated] = useState(0);\n\n  const tick = useCallback(() =&gt; {\n    if (percentValidated &lt; 100) {\n      setPercentValidated((prevValue) =&gt; prevValue + 20);\n    }\n  }, [percentValidated]);\n\n  useEffect(() =&gt; {\n    const interval = setInterval(() =&gt; tick(), 1000);\n\n    return () =&gt; {\n      clearInterval(interval);\n    };\n  }, [tick]);\n\n  return (\n    &lt;div className={layout.bullseye}&gt;\n      &lt;EmptyState\n        headingLevel=\&quot;h4\&quot;\n        titleText={percentValidated === 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={percentValidated} measureLocation=\&quot;outside\&quot; aria-label=\&quot;Wizard 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={percentValidated !== 100} onClick={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 WizardWithSubmitProgress: React.FunctionComponent = () =&gt; {\n  const [isSubmitted, setIsSubmitted] = useState(false);\n\n  // eslint-disable-next-line no-console\n  const onClose = () =&gt; console.log(&#39;Some close action occurs here.&#39;);\n\n  if (isSubmitted) {\n    return &lt;ValidationProgress onClose={onClose} /&gt;;\n  }\n\n  return (\n    &lt;Wizard height={400} title=\&quot;Submit progress wizard\&quot; onClose={onClose}&gt;\n      &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;submit-progress-step-1\&quot;&gt;\n        Step 1 content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;submit-progress-step-2\&quot;&gt;\n        Step 2 content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep\n        name=\&quot;Review\&quot;\n        id=\&quot;submit-progress-review\&quot;\n        footer={{ nextButtonText: &#39;Finish&#39;, onNext: () =&gt; setIsSubmitted(true) }}\n      &gt;\n        Review step content\n      &lt;/WizardStep&gt;\n    &lt;/Wizard&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-3160" data-pf-content="true" class="pf-v6-c-content--h3">Enabled on form validation</h3>
-<astro-island uid="Z13idMX" 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 {\n  Form,\n  FormGroup,\n  FormHelperText,\n  HelperText,\n  HelperTextItem,\n  TextInput,\n  Wizard,\n  WizardStep\n} from &#39;@patternfly/react-core&#39;;\n\ninterface SampleFormProps {\n  value: string;\n  isValid: boolean;\n  setValue: (value: string) =&gt; void;\n  setIsValid: (isValid: boolean) =&gt; void;\n}\n\nconst SampleForm: React.FunctionComponent&lt;SampleFormProps&gt; = ({ value, isValid, setValue, setIsValid }) =&gt; {\n  const validated = isValid ? &#39;default&#39; : &#39;error&#39;;\n\n  const handleTextInputChange = (_event, value: string) =&gt; {\n    const isValid = /^\\d+$/.test(value);\n\n    setValue(value);\n    setIsValid(isValid);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup label=\&quot;Age:\&quot; type=\&quot;number\&quot; fieldId=\&quot;age\&quot;&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;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem variant={validated}&gt;\n              {validated === &#39;error&#39; ? &#39;Age has to be a number&#39; : &#39;Write your age in numbers.&#39;}\n            &lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n\nexport const WizardEnabledOnFormValidation: React.FunctionComponent = () =&gt; {\n  const [ageValue, setAgeValue] = useState(&#39;Thirty&#39;);\n  const [isSubAFormValid, setIsSubAFormValid] = useState(false);\n\n  const onSave = () =&gt; alert(`Wow, you look a lot younger than ${ageValue}.`);\n\n  return (\n    &lt;Wizard isVisitRequired height={400} title=\&quot;Enabled on form validation wizard\&quot; onSave={onSave}&gt;\n      &lt;WizardStep name=\&quot;Information\&quot; id=\&quot;form-valid-info\&quot;&gt;\n        Information content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep\n        name=\&quot;Configuration\&quot;\n        id=\&quot;form-valid-config\&quot;\n        steps={[\n          &lt;WizardStep\n            name=\&quot;Substep A with validation\&quot;\n            id=\&quot;form-valid-sub-a\&quot;\n            key=\&quot;form-valid-sub-a\&quot;\n            footer={{ isNextDisabled: !isSubAFormValid }}\n          &gt;\n            &lt;SampleForm\n              value={ageValue}\n              setValue={setAgeValue}\n              isValid={isSubAFormValid}\n              setIsValid={setIsSubAFormValid}\n            /&gt;\n          &lt;/WizardStep&gt;,\n          &lt;WizardStep name=\&quot;Substep B\&quot; id=\&quot;form-valid-sub-b\&quot; key=\&quot;form-valid-sub-b\&quot;&gt;\n            Substep B content\n          &lt;/WizardStep&gt;\n        ]}\n      /&gt;\n      &lt;WizardStep name=\&quot;Additional\&quot; id=\&quot;form-valid-additional\&quot;&gt;\n        Additional step content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;form-valid-review\&quot; footer={{ nextButtonText: &#39;Submit form&#39; }}&gt;&lt;/WizardStep&gt;\n    &lt;/Wizard&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>
+<astro-island uid="Z13idMX" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Form,\n  FormGroup,\n  FormHelperText,\n  HelperText,\n  HelperTextItem,\n  TextInput,\n  Wizard,\n  WizardStep\n} from &#39;@patternfly/react-core&#39;;\n\ninterface SampleFormProps {\n  value: string;\n  isValid: boolean;\n  setValue: (value: string) =&gt; void;\n  setIsValid: (isValid: boolean) =&gt; void;\n}\n\nconst SampleForm: React.FunctionComponent&lt;SampleFormProps&gt; = ({ value, isValid, setValue, setIsValid }) =&gt; {\n  const validated = isValid ? &#39;default&#39; : &#39;error&#39;;\n\n  const handleTextInputChange = (_event, value: string) =&gt; {\n    const isValid = /^\\d+$/.test(value);\n\n    setValue(value);\n    setIsValid(isValid);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup label=\&quot;Age:\&quot; type=\&quot;number\&quot; fieldId=\&quot;age\&quot;&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;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem variant={validated}&gt;\n              {validated === &#39;error&#39; ? &#39;Age has to be a number&#39; : &#39;Write your age in numbers.&#39;}\n            &lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n\nexport const WizardEnabledOnFormValidation: React.FunctionComponent = () =&gt; {\n  const [ageValue, setAgeValue] = useState(&#39;Thirty&#39;);\n  const [isSubAFormValid, setIsSubAFormValid] = useState(false);\n\n  const onSave = () =&gt; alert(`Wow, you look a lot younger than ${ageValue}.`);\n\n  return (\n    &lt;Wizard isVisitRequired height={400} title=\&quot;Enabled on form validation wizard\&quot; onSave={onSave}&gt;\n      &lt;WizardStep name=\&quot;Information\&quot; id=\&quot;form-valid-info\&quot;&gt;\n        Information content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep\n        name=\&quot;Configuration\&quot;\n        id=\&quot;form-valid-config\&quot;\n        steps={[\n          &lt;WizardStep\n            name=\&quot;Substep A with validation\&quot;\n            id=\&quot;form-valid-sub-a\&quot;\n            key=\&quot;form-valid-sub-a\&quot;\n            footer={{ isNextDisabled: !isSubAFormValid }}\n          &gt;\n            &lt;SampleForm\n              value={ageValue}\n              setValue={setAgeValue}\n              isValid={isSubAFormValid}\n              setIsValid={setIsSubAFormValid}\n            /&gt;\n          &lt;/WizardStep&gt;,\n          &lt;WizardStep name=\&quot;Substep B\&quot; id=\&quot;form-valid-sub-b\&quot; key=\&quot;form-valid-sub-b\&quot;&gt;\n            Substep B content\n          &lt;/WizardStep&gt;\n        ]}\n      /&gt;\n      &lt;WizardStep name=\&quot;Additional\&quot; id=\&quot;form-valid-additional\&quot;&gt;\n        Additional step content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;form-valid-review\&quot; footer={{ nextButtonText: &#39;Submit form&#39; }}&gt;&lt;/WizardStep&gt;\n    &lt;/Wizard&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-3161" data-pf-content="true" class="pf-v6-c-content--h3">Validate on button press</h3>
-<astro-island uid="ZJj6Wc" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useCallback, useEffect, useState } from &#39;react&#39;;\nimport {\n  Button,\n  ActionList,\n  ActionListGroup,\n  ActionListItem,\n  Alert,\n  EmptyState,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions,\n  Progress,\n  Form,\n  FormGroup,\n  TextInput,\n  HelperText,\n  HelperTextItem,\n  FormHelperText,\n  Wizard,\n  WizardStep,\n  WizardFooterWrapper,\n  useWizardContext\n} from &#39;@patternfly/react-core&#39;;\nimport CogsIcon from &#39;@patternfly/react-icons/dist/esm/icons/cogs-icon&#39;;\nimport layout from &#39;@patternfly/react-styles/css/layouts/Bullseye/bullseye&#39;;\n\ninterface ValidationProgressProps {\n  onClose(): void;\n}\n\nconst ValidationProgress: React.FunctionComponent&lt;ValidationProgressProps&gt; = ({ onClose }) =&gt; {\n  const [percentValidated, setPercentValidated] = useState(0);\n\n  const tick = useCallback(() =&gt; {\n    if (percentValidated &lt; 100) {\n      setPercentValidated((prevValue) =&gt; prevValue + 20);\n    }\n  }, [percentValidated]);\n\n  useEffect(() =&gt; {\n    const interval = setInterval(() =&gt; tick(), 1000);\n\n    return () =&gt; {\n      clearInterval(interval);\n    };\n  }, [tick]);\n\n  return (\n    &lt;div className={layout.bullseye}&gt;\n      &lt;EmptyState\n        headingLevel=\&quot;h4\&quot;\n        titleText={percentValidated === 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={percentValidated} measureLocation=\&quot;outside\&quot; aria-label=\&quot;Wizard 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={percentValidated !== 100} onClick={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 LastStepFooterProps {\n  isValid: boolean;\n  setIsSubmitted(isSubmitted: boolean): void;\n  setHasErrorOnSubmit(isSubmitted: boolean): void;\n}\n\nconst LastStepFooter: React.FunctionComponent&lt;LastStepFooterProps&gt; = ({\n  isValid,\n  setIsSubmitted,\n  setHasErrorOnSubmit\n}) =&gt; {\n  const { goToNextStep, goToPrevStep } = useWizardContext();\n\n  const onValidate = () =&gt; {\n    setIsSubmitted(true);\n\n    if (!isValid) {\n      setIsSubmitted(false);\n      setHasErrorOnSubmit(true);\n    } else {\n      goToNextStep();\n    }\n  };\n\n  return (\n    &lt;WizardFooterWrapper&gt;\n      &lt;ActionList&gt;\n        &lt;ActionListGroup&gt;\n          &lt;ActionListItem&gt;\n            &lt;Button variant=\&quot;secondary\&quot; onClick={goToPrevStep}&gt;\n              Back\n            &lt;/Button&gt;\n          &lt;/ActionListItem&gt;\n          &lt;ActionListItem&gt;\n            &lt;Button onClick={onValidate}&gt;Validate&lt;/Button&gt;\n          &lt;/ActionListItem&gt;\n        &lt;/ActionListGroup&gt;\n      &lt;/ActionList&gt;\n    &lt;/WizardFooterWrapper&gt;\n  );\n};\n\ninterface SampleFormProps {\n  value: string;\n  isValid: boolean;\n  setValue: (value: string) =&gt; void;\n  setIsValid: (isValid: boolean) =&gt; void;\n}\n\nconst SampleForm: React.FunctionComponent&lt;SampleFormProps&gt; = ({ value, isValid, setValue, setIsValid }) =&gt; {\n  const validated = isValid ? &#39;default&#39; : &#39;error&#39;;\n\n  const handleTextInputChange = (_event, value: string) =&gt; {\n    const isValid = /^\\d+$/.test(value);\n\n    setValue(value);\n    setIsValid(isValid);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup label=\&quot;Age:\&quot; type=\&quot;number\&quot; fieldId=\&quot;age\&quot;&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;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem variant={validated}&gt;\n              {validated === &#39;error&#39; ? &#39;Age has to be a number&#39; : &#39;Write your age in numbers.&#39;}\n            &lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n\nexport const WizardValidateOnButtonPress: React.FunctionComponent = () =&gt; {\n  const [ageValue, setAgeValue] = useState(&#39;Thirty&#39;);\n  const [isSubmitted, setIsSubmitted] = useState(false);\n  const [isFirstStepValid, setIsFirstStepValid] = useState(false);\n  const [hasErrorOnSubmit, setHasErrorOnSubmit] = useState(false);\n\n  // eslint-disable-next-line no-console\n  const onClose = () =&gt; console.log(&#39;Some close action occurs here.&#39;);\n\n  if (isSubmitted &amp;&amp; isFirstStepValid) {\n    return &lt;ValidationProgress onClose={onClose} /&gt;;\n  }\n\n  return (\n    &lt;Wizard title=\&quot;Validate on button press wizard\&quot; onClose={onClose} height={400}&gt;\n      &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;validate-btn-step-1\&quot;&gt;\n        Step 1 content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;validate-btn-step-2\&quot;&gt;\n        Step 2 content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep\n        name=\&quot;Final Step\&quot;\n        id=\&quot;validate-btn-finish-step\&quot;\n        footer={\n          &lt;LastStepFooter\n            isValid={isFirstStepValid}\n            setIsSubmitted={setIsSubmitted}\n            setHasErrorOnSubmit={setHasErrorOnSubmit}\n          /&gt;\n        }\n      &gt;\n        {hasErrorOnSubmit &amp;&amp; (\n          &lt;div style={{ padding: &#39;15px 0&#39; }}&gt;\n            &lt;Alert isInline variant=\&quot;danger\&quot; title=\&quot;Validation failed, please try again.\&quot; /&gt;\n          &lt;/div&gt;\n        )}\n        &lt;SampleForm\n          value={ageValue}\n          setValue={(value) =&gt; setAgeValue(value)}\n          isValid={!hasErrorOnSubmit || isFirstStepValid}\n          setIsValid={setIsFirstStepValid}\n        /&gt;\n      &lt;/WizardStep&gt;\n    &lt;/Wizard&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>
+<astro-island uid="ZJj6Wc" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useCallback, useEffect, useState } from &#39;react&#39;;\nimport {\n  Button,\n  ActionList,\n  ActionListGroup,\n  ActionListItem,\n  Alert,\n  EmptyState,\n  EmptyStateFooter,\n  EmptyStateBody,\n  EmptyStateActions,\n  Progress,\n  Form,\n  FormGroup,\n  TextInput,\n  HelperText,\n  HelperTextItem,\n  FormHelperText,\n  Wizard,\n  WizardStep,\n  WizardFooterWrapper,\n  useWizardContext\n} from &#39;@patternfly/react-core&#39;;\nimport CogsIcon from &#39;@patternfly/react-icons/dist/esm/icons/cogs-icon&#39;;\nimport layout from &#39;@patternfly/react-styles/css/layouts/Bullseye/bullseye&#39;;\n\ninterface ValidationProgressProps {\n  onClose(): void;\n}\n\nconst ValidationProgress: React.FunctionComponent&lt;ValidationProgressProps&gt; = ({ onClose }) =&gt; {\n  const [percentValidated, setPercentValidated] = useState(0);\n\n  const tick = useCallback(() =&gt; {\n    if (percentValidated &lt; 100) {\n      setPercentValidated((prevValue) =&gt; prevValue + 20);\n    }\n  }, [percentValidated]);\n\n  useEffect(() =&gt; {\n    const interval = setInterval(() =&gt; tick(), 1000);\n\n    return () =&gt; {\n      clearInterval(interval);\n    };\n  }, [tick]);\n\n  return (\n    &lt;div className={layout.bullseye}&gt;\n      &lt;EmptyState\n        headingLevel=\&quot;h4\&quot;\n        titleText={percentValidated === 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={percentValidated} measureLocation=\&quot;outside\&quot; aria-label=\&quot;Wizard 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={percentValidated !== 100} onClick={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 LastStepFooterProps {\n  isValid: boolean;\n  setIsSubmitted(isSubmitted: boolean): void;\n  setHasErrorOnSubmit(isSubmitted: boolean): void;\n}\n\nconst LastStepFooter: React.FunctionComponent&lt;LastStepFooterProps&gt; = ({\n  isValid,\n  setIsSubmitted,\n  setHasErrorOnSubmit\n}) =&gt; {\n  const { goToNextStep, goToPrevStep } = useWizardContext();\n\n  const onValidate = () =&gt; {\n    setIsSubmitted(true);\n\n    if (!isValid) {\n      setIsSubmitted(false);\n      setHasErrorOnSubmit(true);\n    } else {\n      goToNextStep();\n    }\n  };\n\n  return (\n    &lt;WizardFooterWrapper&gt;\n      &lt;ActionList&gt;\n        &lt;ActionListGroup&gt;\n          &lt;ActionListItem&gt;\n            &lt;Button variant=\&quot;secondary\&quot; onClick={goToPrevStep}&gt;\n              Back\n            &lt;/Button&gt;\n          &lt;/ActionListItem&gt;\n          &lt;ActionListItem&gt;\n            &lt;Button onClick={onValidate}&gt;Validate&lt;/Button&gt;\n          &lt;/ActionListItem&gt;\n        &lt;/ActionListGroup&gt;\n      &lt;/ActionList&gt;\n    &lt;/WizardFooterWrapper&gt;\n  );\n};\n\ninterface SampleFormProps {\n  value: string;\n  isValid: boolean;\n  setValue: (value: string) =&gt; void;\n  setIsValid: (isValid: boolean) =&gt; void;\n}\n\nconst SampleForm: React.FunctionComponent&lt;SampleFormProps&gt; = ({ value, isValid, setValue, setIsValid }) =&gt; {\n  const validated = isValid ? &#39;default&#39; : &#39;error&#39;;\n\n  const handleTextInputChange = (_event, value: string) =&gt; {\n    const isValid = /^\\d+$/.test(value);\n\n    setValue(value);\n    setIsValid(isValid);\n  };\n\n  return (\n    &lt;Form&gt;\n      &lt;FormGroup label=\&quot;Age:\&quot; type=\&quot;number\&quot; fieldId=\&quot;age\&quot;&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;FormHelperText&gt;\n          &lt;HelperText&gt;\n            &lt;HelperTextItem variant={validated}&gt;\n              {validated === &#39;error&#39; ? &#39;Age has to be a number&#39; : &#39;Write your age in numbers.&#39;}\n            &lt;/HelperTextItem&gt;\n          &lt;/HelperText&gt;\n        &lt;/FormHelperText&gt;\n      &lt;/FormGroup&gt;\n    &lt;/Form&gt;\n  );\n};\n\nexport const WizardValidateOnButtonPress: React.FunctionComponent = () =&gt; {\n  const [ageValue, setAgeValue] = useState(&#39;Thirty&#39;);\n  const [isSubmitted, setIsSubmitted] = useState(false);\n  const [isFirstStepValid, setIsFirstStepValid] = useState(false);\n  const [hasErrorOnSubmit, setHasErrorOnSubmit] = useState(false);\n\n  // eslint-disable-next-line no-console\n  const onClose = () =&gt; console.log(&#39;Some close action occurs here.&#39;);\n\n  if (isSubmitted &amp;&amp; isFirstStepValid) {\n    return &lt;ValidationProgress onClose={onClose} /&gt;;\n  }\n\n  return (\n    &lt;Wizard title=\&quot;Validate on button press wizard\&quot; onClose={onClose} height={400}&gt;\n      &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;validate-btn-step-1\&quot;&gt;\n        Step 1 content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;validate-btn-step-2\&quot;&gt;\n        Step 2 content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep\n        name=\&quot;Final Step\&quot;\n        id=\&quot;validate-btn-finish-step\&quot;\n        footer={\n          &lt;LastStepFooter\n            isValid={isFirstStepValid}\n            setIsSubmitted={setIsSubmitted}\n            setHasErrorOnSubmit={setHasErrorOnSubmit}\n          /&gt;\n        }\n      &gt;\n        {hasErrorOnSubmit &amp;&amp; (\n          &lt;div style={{ padding: &#39;15px 0&#39; }}&gt;\n            &lt;Alert isInline variant=\&quot;danger\&quot; title=\&quot;Validation failed, please try again.\&quot; /&gt;\n          &lt;/div&gt;\n        )}\n        &lt;SampleForm\n          value={ageValue}\n          setValue={(value) =&gt; setAgeValue(value)}\n          isValid={!hasErrorOnSubmit || isFirstStepValid}\n          setIsValid={setIsFirstStepValid}\n        /&gt;\n      &lt;/WizardStep&gt;\n    &lt;/Wizard&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-3162" data-pf-content="true" class="pf-v6-c-content--h3">Progressive steps</h3>
-<astro-island uid="2m5aYR" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardProgressiveSteps: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;Progressive steps wizard\&quot; isProgressive&gt;\n    &lt;WizardStep id=\&quot;progressive-step-1\&quot; name=\&quot;Get started\&quot;&gt;\n      Get started content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep id=\&quot;progressive-step-2\&quot; name=\&quot;Update options\&quot;&gt;\n      Update options content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep\n      id=\&quot;progressive-step-3\&quot;\n      name=\&quot;Quick options\&quot;\n      steps={[\n        &lt;WizardStep key=\&quot;progressive-substep-1\&quot; id=\&quot;progressive-substep-1\&quot; name=\&quot;Substep 1\&quot;&gt;\n          Substep 1 content\n        &lt;/WizardStep&gt;,\n        &lt;WizardStep key=\&quot;progressive-substep-2\&quot; id=\&quot;progressive-substep-2\&quot; name=\&quot;Substep 2\&quot;&gt;\n          Substep 2 content\n        &lt;/WizardStep&gt;,\n        &lt;WizardStep key=\&quot;progressive-substep-3\&quot; id=\&quot;progressive-substep-3\&quot; name=\&quot;Substep 3\&quot;&gt;\n          Substep 3 content\n        &lt;/WizardStep&gt;\n      ]}\n    /&gt;\n    &lt;WizardStep id=\&quot;progressive-step-4\&quot; name=\&quot;Review\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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>
+<astro-island uid="2m5aYR" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardProgressiveSteps: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;Progressive steps wizard\&quot; isProgressive&gt;\n    &lt;WizardStep id=\&quot;progressive-step-1\&quot; name=\&quot;Get started\&quot;&gt;\n      Get started content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep id=\&quot;progressive-step-2\&quot; name=\&quot;Update options\&quot;&gt;\n      Update options content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep\n      id=\&quot;progressive-step-3\&quot;\n      name=\&quot;Quick options\&quot;\n      steps={[\n        &lt;WizardStep key=\&quot;progressive-substep-1\&quot; id=\&quot;progressive-substep-1\&quot; name=\&quot;Substep 1\&quot;&gt;\n          Substep 1 content\n        &lt;/WizardStep&gt;,\n        &lt;WizardStep key=\&quot;progressive-substep-2\&quot; id=\&quot;progressive-substep-2\&quot; name=\&quot;Substep 2\&quot;&gt;\n          Substep 2 content\n        &lt;/WizardStep&gt;,\n        &lt;WizardStep key=\&quot;progressive-substep-3\&quot; id=\&quot;progressive-substep-3\&quot; name=\&quot;Substep 3\&quot;&gt;\n          Substep 3 content\n        &lt;/WizardStep&gt;\n      ]}\n    /&gt;\n    &lt;WizardStep id=\&quot;progressive-step-4\&quot; name=\&quot;Review\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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-3163" data-pf-content="true" class="pf-v6-c-content--h3">Get current step</h3>
-<astro-island uid="ZrbSMK" 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 {\n  DescriptionList,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  DescriptionListDescription,\n  Wizard,\n  WizardStep,\n  WizardStepType\n} from &#39;@patternfly/react-core&#39;;\n\nconst CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepType | undefined }) =&gt; (\n  &lt;DescriptionList isHorizontal isCompact&gt;\n    &lt;DescriptionListGroup&gt;\n      &lt;DescriptionListTerm&gt;Index&lt;/DescriptionListTerm&gt;\n      &lt;DescriptionListDescription&gt;{currentStep?.index}&lt;/DescriptionListDescription&gt;\n    &lt;/DescriptionListGroup&gt;\n\n    &lt;DescriptionListGroup&gt;\n      &lt;DescriptionListTerm&gt;ID&lt;/DescriptionListTerm&gt;\n      &lt;DescriptionListDescription&gt;{currentStep?.id}&lt;/DescriptionListDescription&gt;\n    &lt;/DescriptionListGroup&gt;\n\n    &lt;DescriptionListGroup&gt;\n      &lt;DescriptionListTerm&gt;Name&lt;/DescriptionListTerm&gt;\n      &lt;DescriptionListDescription&gt;{currentStep?.name}&lt;/DescriptionListDescription&gt;\n    &lt;/DescriptionListGroup&gt;\n\n    &lt;DescriptionListGroup&gt;\n      &lt;DescriptionListTerm&gt;Visited&lt;/DescriptionListTerm&gt;\n      &lt;DescriptionListDescription&gt;{currentStep?.isVisited ? &#39;true&#39; : &#39;false&#39;}&lt;/DescriptionListDescription&gt;\n    &lt;/DescriptionListGroup&gt;\n  &lt;/DescriptionList&gt;\n);\n\nexport const GetCurrentStepWizard: React.FunctionComponent = () =&gt; {\n  const [currentStep, setCurrentStep] = useState&lt;WizardStepType&gt;();\n\n  const onStepChange = (_event: React.MouseEvent&lt;HTMLButtonElement&gt;, currentStep: WizardStepType) =&gt;\n    setCurrentStep(currentStep);\n\n  return (\n    &lt;Wizard height={400} title=\&quot;Get current step wizard\&quot; onStepChange={onStepChange}&gt;\n      &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;get-current-step-1\&quot;&gt;\n        {currentStep ? &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt; : &#39;Step 1 content&#39;}\n      &lt;/WizardStep&gt;\n      &lt;WizardStep\n        name=\&quot;Step 2\&quot;\n        id=\&quot;get-current-step-2\&quot;\n        isDisabled\n        steps={[\n          &lt;WizardStep name=\&quot;Substep 1\&quot; id=\&quot;get-current-substep-1\&quot; key=\&quot;get-current-substep-1\&quot;&gt;\n            &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n          &lt;/WizardStep&gt;,\n          &lt;WizardStep name=\&quot;Substep 2\&quot; id=\&quot;get-current-substep-2\&quot; key=\&quot;get-current-substep-2\&quot;&gt;\n            &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n          &lt;/WizardStep&gt;\n        ]}\n      /&gt;\n      &lt;WizardStep\n        name=\&quot;Step 3\&quot;\n        id=\&quot;get-current-step-3\&quot;\n        steps={[\n          &lt;WizardStep name=\&quot;Substep 3\&quot; id=\&quot;get-current-substep-3\&quot; key=\&quot;get-current-substep-3\&quot;&gt;\n            &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n          &lt;/WizardStep&gt;,\n          &lt;WizardStep name=\&quot;Substep 4\&quot; id=\&quot;get-current-substep-4\&quot; key=\&quot;get-current-substep-4\&quot;&gt;\n            &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n          &lt;/WizardStep&gt;\n        ]}\n      /&gt;\n      &lt;WizardStep\n        name=\&quot;Step 4\&quot;\n        id=\&quot;get-current-step-4\&quot;\n        steps={[\n          &lt;WizardStep name=\&quot;Substep 5\&quot; id=\&quot;get-current-substep-5\&quot; key=\&quot;get-current-substep-5\&quot; isHidden&gt;\n            &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n          &lt;/WizardStep&gt;,\n          &lt;WizardStep name=\&quot;Substep 6\&quot; id=\&quot;get-current-substep-6\&quot; key=\&quot;get-current-substep-6\&quot;&gt;\n            &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n          &lt;/WizardStep&gt;\n        ]}\n      /&gt;\n      &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;get-current-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n        &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n      &lt;/WizardStep&gt;\n    &lt;/Wizard&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>
+<astro-island uid="ZrbSMK" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  DescriptionList,\n  DescriptionListGroup,\n  DescriptionListTerm,\n  DescriptionListDescription,\n  Wizard,\n  WizardStep,\n  WizardStepType\n} from &#39;@patternfly/react-core&#39;;\n\nconst CurrentStepDescriptionList = ({ currentStep }: { currentStep: WizardStepType | undefined }) =&gt; (\n  &lt;DescriptionList isHorizontal isCompact&gt;\n    &lt;DescriptionListGroup&gt;\n      &lt;DescriptionListTerm&gt;Index&lt;/DescriptionListTerm&gt;\n      &lt;DescriptionListDescription&gt;{currentStep?.index}&lt;/DescriptionListDescription&gt;\n    &lt;/DescriptionListGroup&gt;\n\n    &lt;DescriptionListGroup&gt;\n      &lt;DescriptionListTerm&gt;ID&lt;/DescriptionListTerm&gt;\n      &lt;DescriptionListDescription&gt;{currentStep?.id}&lt;/DescriptionListDescription&gt;\n    &lt;/DescriptionListGroup&gt;\n\n    &lt;DescriptionListGroup&gt;\n      &lt;DescriptionListTerm&gt;Name&lt;/DescriptionListTerm&gt;\n      &lt;DescriptionListDescription&gt;{currentStep?.name}&lt;/DescriptionListDescription&gt;\n    &lt;/DescriptionListGroup&gt;\n\n    &lt;DescriptionListGroup&gt;\n      &lt;DescriptionListTerm&gt;Visited&lt;/DescriptionListTerm&gt;\n      &lt;DescriptionListDescription&gt;{currentStep?.isVisited ? &#39;true&#39; : &#39;false&#39;}&lt;/DescriptionListDescription&gt;\n    &lt;/DescriptionListGroup&gt;\n  &lt;/DescriptionList&gt;\n);\n\nexport const GetCurrentStepWizard: React.FunctionComponent = () =&gt; {\n  const [currentStep, setCurrentStep] = useState&lt;WizardStepType&gt;();\n\n  const onStepChange = (_event: React.MouseEvent&lt;HTMLButtonElement&gt;, currentStep: WizardStepType) =&gt;\n    setCurrentStep(currentStep);\n\n  return (\n    &lt;Wizard height={400} title=\&quot;Get current step wizard\&quot; onStepChange={onStepChange}&gt;\n      &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;get-current-step-1\&quot;&gt;\n        {currentStep ? &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt; : &#39;Step 1 content&#39;}\n      &lt;/WizardStep&gt;\n      &lt;WizardStep\n        name=\&quot;Step 2\&quot;\n        id=\&quot;get-current-step-2\&quot;\n        isDisabled\n        steps={[\n          &lt;WizardStep name=\&quot;Substep 1\&quot; id=\&quot;get-current-substep-1\&quot; key=\&quot;get-current-substep-1\&quot;&gt;\n            &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n          &lt;/WizardStep&gt;,\n          &lt;WizardStep name=\&quot;Substep 2\&quot; id=\&quot;get-current-substep-2\&quot; key=\&quot;get-current-substep-2\&quot;&gt;\n            &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n          &lt;/WizardStep&gt;\n        ]}\n      /&gt;\n      &lt;WizardStep\n        name=\&quot;Step 3\&quot;\n        id=\&quot;get-current-step-3\&quot;\n        steps={[\n          &lt;WizardStep name=\&quot;Substep 3\&quot; id=\&quot;get-current-substep-3\&quot; key=\&quot;get-current-substep-3\&quot;&gt;\n            &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n          &lt;/WizardStep&gt;,\n          &lt;WizardStep name=\&quot;Substep 4\&quot; id=\&quot;get-current-substep-4\&quot; key=\&quot;get-current-substep-4\&quot;&gt;\n            &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n          &lt;/WizardStep&gt;\n        ]}\n      /&gt;\n      &lt;WizardStep\n        name=\&quot;Step 4\&quot;\n        id=\&quot;get-current-step-4\&quot;\n        steps={[\n          &lt;WizardStep name=\&quot;Substep 5\&quot; id=\&quot;get-current-substep-5\&quot; key=\&quot;get-current-substep-5\&quot; isHidden&gt;\n            &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n          &lt;/WizardStep&gt;,\n          &lt;WizardStep name=\&quot;Substep 6\&quot; id=\&quot;get-current-substep-6\&quot; key=\&quot;get-current-substep-6\&quot;&gt;\n            &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n          &lt;/WizardStep&gt;\n        ]}\n      /&gt;\n      &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;get-current-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n        &lt;CurrentStepDescriptionList currentStep={currentStep} /&gt;\n      &lt;/WizardStep&gt;\n    &lt;/Wizard&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-3164" data-pf-content="true" class="pf-v6-c-content--h3">Within modal</h3>
-<astro-island uid="13NKNu" 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 { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardWithinModal: React.FunctionComponent = () =&gt; {\n  const [isModelOpen, setIsModalOpen] = useState(false);\n\n  return (\n    &lt;&gt;\n      &lt;Button onClick={() =&gt; setIsModalOpen(true)}&gt;Show Modal&lt;/Button&gt;\n\n      &lt;Modal\n        isOpen={isModelOpen}\n        aria-label=\&quot;Wizard modal\&quot;\n        onEscapePress={() =&gt; setIsModalOpen(false)}\n        variant={ModalVariant.medium}\n      &gt;\n        &lt;Wizard\n          height={400}\n          onClose={() =&gt; setIsModalOpen(false)}\n          title=\&quot;In modal wizard\&quot;\n          header={\n            &lt;WizardHeader\n              onClose={() =&gt; setIsModalOpen(false)}\n              title=\&quot;Wizard in modal\&quot;\n              description=\&quot;Simple wizard description\&quot;\n            /&gt;\n          }\n        &gt;\n          &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;in-modal-step-1\&quot;&gt;\n            Step 1 content\n          &lt;/WizardStep&gt;\n          &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;in-modal-step-2\&quot;&gt;\n            Step 2 content\n          &lt;/WizardStep&gt;\n          &lt;WizardStep\n            name=\&quot;Review\&quot;\n            id=\&quot;in-modal-review-step\&quot;\n            footer={{ nextButtonText: &#39;Finish&#39;, onNext: () =&gt; setIsModalOpen(false) }}\n          &gt;\n            Review step content\n          &lt;/WizardStep&gt;\n        &lt;/Wizard&gt;\n      &lt;/Modal&gt;\n    &lt;/&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>
+<astro-island uid="13NKNu" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardWithinModal: React.FunctionComponent = () =&gt; {\n  const [isModelOpen, setIsModalOpen] = useState(false);\n\n  return (\n    &lt;&gt;\n      &lt;Button onClick={() =&gt; setIsModalOpen(true)}&gt;Show Modal&lt;/Button&gt;\n\n      &lt;Modal\n        isOpen={isModelOpen}\n        aria-label=\&quot;Wizard modal\&quot;\n        onEscapePress={() =&gt; setIsModalOpen(false)}\n        variant={ModalVariant.medium}\n      &gt;\n        &lt;Wizard\n          height={400}\n          onClose={() =&gt; setIsModalOpen(false)}\n          title=\&quot;In modal wizard\&quot;\n          header={\n            &lt;WizardHeader\n              onClose={() =&gt; setIsModalOpen(false)}\n              title=\&quot;Wizard in modal\&quot;\n              description=\&quot;Simple wizard description\&quot;\n            /&gt;\n          }\n        &gt;\n          &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;in-modal-step-1\&quot;&gt;\n            Step 1 content\n          &lt;/WizardStep&gt;\n          &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;in-modal-step-2\&quot;&gt;\n            Step 2 content\n          &lt;/WizardStep&gt;\n          &lt;WizardStep\n            name=\&quot;Review\&quot;\n            id=\&quot;in-modal-review-step\&quot;\n            footer={{ nextButtonText: &#39;Finish&#39;, onNext: () =&gt; setIsModalOpen(false) }}\n          &gt;\n            Review step content\n          &lt;/WizardStep&gt;\n        &lt;/Wizard&gt;\n      &lt;/Modal&gt;\n    &lt;/&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-3165" data-pf-content="true" class="pf-v6-c-content--h3">Step drawer content</h3>
-<astro-island uid="ZaWFhs" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerPanelContent,\n  DrawerColorVariant,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Flex,\n  Button,\n  useWizardContext,\n  Wizard,\n  WizardStep\n} from &#39;@patternfly/react-core&#39;;\nimport styles from &#39;@patternfly/react-styles/css/components/Wizard/wizard&#39;;\n\nconst StepContentWithDrawer: React.FunctionComponent = () =&gt; {\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n  const { activeStep } = useWizardContext();\n  const drawerRef = useRef&lt;HTMLSpanElement&gt;(null);\n\n  const onWizardExpand = () =&gt; drawerRef.current &amp;&amp; drawerRef.current.focus();\n\n  return (\n    &lt;Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}&gt;\n      &lt;DrawerContent\n        panelContent={\n          &lt;DrawerPanelContent widths={{ default: &#39;width_50&#39; }} colorVariant={DrawerColorVariant.secondary}&gt;\n            &lt;DrawerHead&gt;\n              &lt;span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}&gt;\n                Drawer content: &lt;strong&gt;{activeStep?.name}&lt;/strong&gt;\n              &lt;/span&gt;\n              &lt;DrawerActions&gt;\n                &lt;DrawerCloseButton onClick={() =&gt; setIsDrawerExpanded(false)} /&gt;\n              &lt;/DrawerActions&gt;\n            &lt;/DrawerHead&gt;\n          &lt;/DrawerPanelContent&gt;\n        }\n      &gt;\n        &lt;Flex\n          className={styles.wizardMainBody}\n          direction={{ default: &#39;column&#39; }}\n          spaceItems={{ default: &#39;spaceItemsLg&#39; }}\n          height=\&quot;100%\&quot;\n        &gt;\n          {!isDrawerExpanded &amp;&amp; (\n            &lt;Button isInline variant=\&quot;link\&quot; onClick={() =&gt; setIsDrawerExpanded((prevExpanded) =&gt; !prevExpanded)}&gt;\n              Open drawer\n            &lt;/Button&gt;\n          )}\n          &lt;div&gt;{activeStep?.name} content&lt;/div&gt;\n        &lt;/Flex&gt;\n      &lt;/DrawerContent&gt;\n    &lt;/Drawer&gt;\n  );\n};\n\nexport const WizardStepDrawerContent: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;With drawer wizard\&quot;&gt;\n    &lt;WizardStep body={{ hasNoPadding: true }} name=\&quot;Step 1\&quot; id=\&quot;with-drawer-step-1\&quot;&gt;\n      &lt;StepContentWithDrawer /&gt;\n    &lt;/WizardStep&gt;\n    &lt;WizardStep\n      name=\&quot;Step 2\&quot;\n      id=\&quot;with-drawer-step-2\&quot;\n      steps={[\n        &lt;WizardStep\n          body={{ hasNoPadding: true }}\n          key=\&quot;with-drawer-substep-1\&quot;\n          name=\&quot;Substep 1\&quot;\n          id=\&quot;with-drawer-substep-1\&quot;\n        &gt;\n          &lt;StepContentWithDrawer /&gt;\n        &lt;/WizardStep&gt;,\n        &lt;WizardStep\n          body={{ hasNoPadding: true }}\n          key=\&quot;with-drawer-substep-2\&quot;\n          name=\&quot;Substep 2\&quot;\n          id=\&quot;with-drawer-substep-2\&quot;\n        &gt;\n          &lt;StepContentWithDrawer /&gt;\n        &lt;/WizardStep&gt;\n      ]}\n    &gt;\n      &lt;StepContentWithDrawer /&gt;\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;with-drawer-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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>
+<astro-island uid="ZaWFhs" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useRef, useState } from &#39;react&#39;;\nimport {\n  Drawer,\n  DrawerContent,\n  DrawerPanelContent,\n  DrawerColorVariant,\n  DrawerHead,\n  DrawerActions,\n  DrawerCloseButton,\n  Flex,\n  Button,\n  useWizardContext,\n  Wizard,\n  WizardStep\n} from &#39;@patternfly/react-core&#39;;\nimport styles from &#39;@patternfly/react-styles/css/components/Wizard/wizard&#39;;\n\nconst StepContentWithDrawer: React.FunctionComponent = () =&gt; {\n  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);\n  const { activeStep } = useWizardContext();\n  const drawerRef = useRef&lt;HTMLSpanElement&gt;(null);\n\n  const onWizardExpand = () =&gt; drawerRef.current &amp;&amp; drawerRef.current.focus();\n\n  return (\n    &lt;Drawer isInline isExpanded={isDrawerExpanded} onExpand={onWizardExpand}&gt;\n      &lt;DrawerContent\n        panelContent={\n          &lt;DrawerPanelContent widths={{ default: &#39;width_50&#39; }} colorVariant={DrawerColorVariant.secondary}&gt;\n            &lt;DrawerHead&gt;\n              &lt;span tabIndex={isDrawerExpanded ? 0 : -1} ref={drawerRef}&gt;\n                Drawer content: &lt;strong&gt;{activeStep?.name}&lt;/strong&gt;\n              &lt;/span&gt;\n              &lt;DrawerActions&gt;\n                &lt;DrawerCloseButton onClick={() =&gt; setIsDrawerExpanded(false)} /&gt;\n              &lt;/DrawerActions&gt;\n            &lt;/DrawerHead&gt;\n          &lt;/DrawerPanelContent&gt;\n        }\n      &gt;\n        &lt;Flex\n          className={styles.wizardMainBody}\n          direction={{ default: &#39;column&#39; }}\n          spaceItems={{ default: &#39;spaceItemsLg&#39; }}\n          height=\&quot;100%\&quot;\n        &gt;\n          {!isDrawerExpanded &amp;&amp; (\n            &lt;Button isInline variant=\&quot;link\&quot; onClick={() =&gt; setIsDrawerExpanded((prevExpanded) =&gt; !prevExpanded)}&gt;\n              Open drawer\n            &lt;/Button&gt;\n          )}\n          &lt;div&gt;{activeStep?.name} content&lt;/div&gt;\n        &lt;/Flex&gt;\n      &lt;/DrawerContent&gt;\n    &lt;/Drawer&gt;\n  );\n};\n\nexport const WizardStepDrawerContent: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;With drawer wizard\&quot;&gt;\n    &lt;WizardStep body={{ hasNoPadding: true }} name=\&quot;Step 1\&quot; id=\&quot;with-drawer-step-1\&quot;&gt;\n      &lt;StepContentWithDrawer /&gt;\n    &lt;/WizardStep&gt;\n    &lt;WizardStep\n      name=\&quot;Step 2\&quot;\n      id=\&quot;with-drawer-step-2\&quot;\n      steps={[\n        &lt;WizardStep\n          body={{ hasNoPadding: true }}\n          key=\&quot;with-drawer-substep-1\&quot;\n          name=\&quot;Substep 1\&quot;\n          id=\&quot;with-drawer-substep-1\&quot;\n        &gt;\n          &lt;StepContentWithDrawer /&gt;\n        &lt;/WizardStep&gt;,\n        &lt;WizardStep\n          body={{ hasNoPadding: true }}\n          key=\&quot;with-drawer-substep-2\&quot;\n          name=\&quot;Substep 2\&quot;\n          id=\&quot;with-drawer-substep-2\&quot;\n        &gt;\n          &lt;StepContentWithDrawer /&gt;\n        &lt;/WizardStep&gt;\n      ]}\n    &gt;\n      &lt;StepContentWithDrawer /&gt;\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;with-drawer-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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-3166" data-pf-content="true" class="pf-v6-c-content--h3">Custom navigation</h3>
-<astro-island uid="1d99Gc" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import {\n  Wizard,\n  WizardStep,\n  WizardStepType,\n  CustomWizardNavFunction,\n  WizardNav,\n  WizardNavItem\n} from &#39;@patternfly/react-core&#39;;\n\nexport const WizardWithCustomNav: React.FunctionComponent = () =&gt; {\n  const nav: CustomWizardNavFunction = (\n    isExpanded: boolean,\n    steps: WizardStepType[],\n    activeStep: WizardStepType,\n    goToStepByIndex: (index: number) =&gt; void\n  ) =&gt; (\n    &lt;WizardNav isExpanded={isExpanded}&gt;\n      {steps.map((step) =&gt; (\n        &lt;WizardNavItem\n          key={step.id}\n          id={step.id}\n          content={step.name}\n          isCurrent={activeStep.id === step.id}\n          isDisabled={step.isDisabled}\n          stepIndex={step.index}\n          onClick={() =&gt; goToStepByIndex(step.index)}\n        /&gt;\n      ))}\n    &lt;/WizardNav&gt;\n  );\n\n  return (\n    &lt;Wizard height={400} nav={nav}&gt;\n      &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;custom-nav-first-step\&quot;&gt;\n        Did you say...custom nav?\n      &lt;/WizardStep&gt;\n      &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;custom-nav-second-step\&quot;&gt;\n        Oh, you didn&#39;t?\n      &lt;/WizardStep&gt;\n      &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;custom-nav-review-step\&quot; footer={{ nextButtonText: &#39;Wrap it up&#39; }}&gt;\n        Well, this is awkward.\n      &lt;/WizardStep&gt;\n    &lt;/Wizard&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>
+<astro-island uid="1d99Gc" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import {\n  Wizard,\n  WizardStep,\n  WizardStepType,\n  CustomWizardNavFunction,\n  WizardNav,\n  WizardNavItem\n} from &#39;@patternfly/react-core&#39;;\n\nexport const WizardWithCustomNav: React.FunctionComponent = () =&gt; {\n  const nav: CustomWizardNavFunction = (\n    isExpanded: boolean,\n    steps: WizardStepType[],\n    activeStep: WizardStepType,\n    goToStepByIndex: (index: number) =&gt; void\n  ) =&gt; (\n    &lt;WizardNav isExpanded={isExpanded}&gt;\n      {steps.map((step) =&gt; (\n        &lt;WizardNavItem\n          key={step.id}\n          id={step.id}\n          content={step.name}\n          isCurrent={activeStep.id === step.id}\n          isDisabled={step.isDisabled}\n          stepIndex={step.index}\n          onClick={() =&gt; goToStepByIndex(step.index)}\n        /&gt;\n      ))}\n    &lt;/WizardNav&gt;\n  );\n\n  return (\n    &lt;Wizard height={400} nav={nav}&gt;\n      &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;custom-nav-first-step\&quot;&gt;\n        Did you say...custom nav?\n      &lt;/WizardStep&gt;\n      &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;custom-nav-second-step\&quot;&gt;\n        Oh, you didn&#39;t?\n      &lt;/WizardStep&gt;\n      &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;custom-nav-review-step\&quot; footer={{ nextButtonText: &#39;Wrap it up&#39; }}&gt;\n        Well, this is awkward.\n      &lt;/WizardStep&gt;\n    &lt;/Wizard&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-3167" data-pf-content="true" class="pf-v6-c-content--h3">Header</h3>
-<astro-island uid="Xeens" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardHeader, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardWithHeader: React.FunctionComponent = () =&gt; (\n  &lt;Wizard\n    height={400}\n    title=\&quot;Header wizard\&quot;\n    header={\n      &lt;WizardHeader\n        title=\&quot;You&#39;re a wizard, Harry\&quot;\n        description=\&quot;To be clear, all those not named Harry are not wizards.\&quot;\n        closeButtonAriaLabel=\&quot;Close header\&quot;\n      /&gt;\n    }\n  &gt;\n    &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;header-first-step\&quot;&gt;\n      Step 1 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;header-second-step\&quot;&gt;\n      Step 2 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;header-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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>
+<astro-island uid="Xeens" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardHeader, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardWithHeader: React.FunctionComponent = () =&gt; (\n  &lt;Wizard\n    height={400}\n    title=\&quot;Header wizard\&quot;\n    header={\n      &lt;WizardHeader\n        title=\&quot;You&#39;re a wizard, Harry\&quot;\n        description=\&quot;To be clear, all those not named Harry are not wizards.\&quot;\n        closeButtonAriaLabel=\&quot;Close header\&quot;\n      /&gt;\n    }\n  &gt;\n    &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;header-first-step\&quot;&gt;\n      Step 1 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;header-second-step\&quot;&gt;\n      Step 2 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;header-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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-3168" data-pf-content="true" class="pf-v6-c-content--h3">Custom footer</h3>
-<astro-island uid="EhpwV" 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 {\n  ActionList,\n  ActionListGroup,\n  ActionListItem,\n  Button,\n  Flex,\n  FlexItem,\n  Spinner,\n  useWizardContext,\n  Wizard,\n  WizardFooter,\n  WizardFooterWrapper,\n  WizardStep\n} from &#39;@patternfly/react-core&#39;;\n\nconst CustomWizardFooter = () =&gt; {\n  const { activeStep, goToNextStep, goToPrevStep, close } = useWizardContext();\n\n  return (\n    &lt;WizardFooter\n      activeStep={activeStep}\n      onNext={goToNextStep}\n      onBack={goToPrevStep}\n      onClose={close}\n      isBackDisabled={activeStep.index === 1}\n    /&gt;\n  );\n};\n\nconst CustomStepTwoFooter = () =&gt; {\n  const { goToNextStep, goToPrevStep, close } = useWizardContext();\n  const [isLoading, setIsLoading] = useState(false);\n\n  async function onNext() {\n    setIsLoading(true);\n    await new Promise((resolve) =&gt; setTimeout(resolve, 2000));\n    setIsLoading(false);\n\n    goToNextStep();\n  }\n\n  return (\n    &lt;WizardFooterWrapper&gt;\n      &lt;ActionList&gt;\n        &lt;ActionListGroup&gt;\n          &lt;ActionListItem&gt;\n            &lt;Button variant=\&quot;secondary\&quot; onClick={goToPrevStep} isDisabled={isLoading}&gt;\n              Back\n            &lt;/Button&gt;\n          &lt;/ActionListItem&gt;\n          &lt;ActionListItem&gt;\n            &lt;Button variant=\&quot;primary\&quot; onClick={onNext} isLoading={isLoading} isDisabled={isLoading}&gt;\n              Async Next\n            &lt;/Button&gt;\n          &lt;/ActionListItem&gt;\n        &lt;/ActionListGroup&gt;\n        &lt;ActionListGroup&gt;\n          &lt;ActionListItem&gt;\n            &lt;Button variant=\&quot;link\&quot; onClick={close} isDisabled={isLoading}&gt;\n              Cancel\n            &lt;/Button&gt;\n          &lt;/ActionListItem&gt;\n        &lt;/ActionListGroup&gt;\n      &lt;/ActionList&gt;\n    &lt;/WizardFooterWrapper&gt;\n  );\n};\n\ninterface ReviewStepContentProps {\n  isSubmitting: boolean | undefined;\n}\n\nconst ReviewStepContent: React.FunctionComponent&lt;ReviewStepContentProps&gt; = ({ isSubmitting }) =&gt; {\n  if (isSubmitting === undefined) {\n    return &lt;FlexItem alignSelf={{ default: &#39;alignSelfFlexStart&#39; }}&gt;Review step content&lt;/FlexItem&gt;;\n  }\n\n  if (isSubmitting) {\n    return (\n      &lt;&gt;\n        &lt;div&gt;Calculating wizard score...&lt;/div&gt;\n        &lt;Spinner /&gt;\n      &lt;/&gt;\n    );\n  }\n\n  return &lt;&gt;50 points to Gryffindor!&lt;/&gt;;\n};\n\nexport const WizardWithCustomFooter: React.FunctionComponent = () =&gt; {\n  const [isSubmitting, setIsSubmitting] = useState&lt;boolean&gt;();\n\n  async function onSubmit(): Promise&lt;void&gt; {\n    setIsSubmitting(true);\n\n    await new Promise((resolve) =&gt; setTimeout(resolve, 5000));\n\n    setIsSubmitting(false);\n  }\n\n  return (\n    &lt;Wizard height={400} title=\&quot;Custom footer wizard\&quot; footer={&lt;CustomWizardFooter /&gt;}&gt;\n      &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;custom-footer-first-step\&quot;&gt;\n        Step 1 content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep id=\&quot;custom-footer-second-step\&quot; name=\&quot;Step 2\&quot; footer={&lt;CustomStepTwoFooter /&gt;}&gt;\n        Step 2 content with a custom async footer\n      &lt;/WizardStep&gt;\n      &lt;WizardStep\n        id=\&quot;custom-footer-review-step\&quot;\n        name=\&quot;Review\&quot;\n        footer={{\n          nextButtonText: &#39;Submit&#39;,\n          onNext: onSubmit,\n          isNextDisabled: isSubmitting,\n          isBackDisabled: isSubmitting\n        }}\n      &gt;\n        &lt;Flex\n          direction={{ default: &#39;column&#39; }}\n          alignItems={{ default: &#39;alignItemsCenter&#39; }}\n          spaceItems={{ default: &#39;spaceItemsLg&#39; }}\n        &gt;\n          &lt;ReviewStepContent isSubmitting={isSubmitting} /&gt;\n        &lt;/Flex&gt;\n      &lt;/WizardStep&gt;\n    &lt;/Wizard&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>
+<astro-island uid="EhpwV" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  ActionList,\n  ActionListGroup,\n  ActionListItem,\n  Button,\n  Flex,\n  FlexItem,\n  Spinner,\n  useWizardContext,\n  Wizard,\n  WizardFooter,\n  WizardFooterWrapper,\n  WizardStep\n} from &#39;@patternfly/react-core&#39;;\n\nconst CustomWizardFooter = () =&gt; {\n  const { activeStep, goToNextStep, goToPrevStep, close } = useWizardContext();\n\n  return (\n    &lt;WizardFooter\n      activeStep={activeStep}\n      onNext={goToNextStep}\n      onBack={goToPrevStep}\n      onClose={close}\n      isBackDisabled={activeStep.index === 1}\n    /&gt;\n  );\n};\n\nconst CustomStepTwoFooter = () =&gt; {\n  const { goToNextStep, goToPrevStep, close } = useWizardContext();\n  const [isLoading, setIsLoading] = useState(false);\n\n  async function onNext() {\n    setIsLoading(true);\n    await new Promise((resolve) =&gt; setTimeout(resolve, 2000));\n    setIsLoading(false);\n\n    goToNextStep();\n  }\n\n  return (\n    &lt;WizardFooterWrapper&gt;\n      &lt;ActionList&gt;\n        &lt;ActionListGroup&gt;\n          &lt;ActionListItem&gt;\n            &lt;Button variant=\&quot;secondary\&quot; onClick={goToPrevStep} isDisabled={isLoading}&gt;\n              Back\n            &lt;/Button&gt;\n          &lt;/ActionListItem&gt;\n          &lt;ActionListItem&gt;\n            &lt;Button variant=\&quot;primary\&quot; onClick={onNext} isLoading={isLoading} isDisabled={isLoading}&gt;\n              Async Next\n            &lt;/Button&gt;\n          &lt;/ActionListItem&gt;\n        &lt;/ActionListGroup&gt;\n        &lt;ActionListGroup&gt;\n          &lt;ActionListItem&gt;\n            &lt;Button variant=\&quot;link\&quot; onClick={close} isDisabled={isLoading}&gt;\n              Cancel\n            &lt;/Button&gt;\n          &lt;/ActionListItem&gt;\n        &lt;/ActionListGroup&gt;\n      &lt;/ActionList&gt;\n    &lt;/WizardFooterWrapper&gt;\n  );\n};\n\ninterface ReviewStepContentProps {\n  isSubmitting: boolean | undefined;\n}\n\nconst ReviewStepContent: React.FunctionComponent&lt;ReviewStepContentProps&gt; = ({ isSubmitting }) =&gt; {\n  if (isSubmitting === undefined) {\n    return &lt;FlexItem alignSelf={{ default: &#39;alignSelfFlexStart&#39; }}&gt;Review step content&lt;/FlexItem&gt;;\n  }\n\n  if (isSubmitting) {\n    return (\n      &lt;&gt;\n        &lt;div&gt;Calculating wizard score...&lt;/div&gt;\n        &lt;Spinner /&gt;\n      &lt;/&gt;\n    );\n  }\n\n  return &lt;&gt;50 points to Gryffindor!&lt;/&gt;;\n};\n\nexport const WizardWithCustomFooter: React.FunctionComponent = () =&gt; {\n  const [isSubmitting, setIsSubmitting] = useState&lt;boolean&gt;();\n\n  async function onSubmit(): Promise&lt;void&gt; {\n    setIsSubmitting(true);\n\n    await new Promise((resolve) =&gt; setTimeout(resolve, 5000));\n\n    setIsSubmitting(false);\n  }\n\n  return (\n    &lt;Wizard height={400} title=\&quot;Custom footer wizard\&quot; footer={&lt;CustomWizardFooter /&gt;}&gt;\n      &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;custom-footer-first-step\&quot;&gt;\n        Step 1 content\n      &lt;/WizardStep&gt;\n      &lt;WizardStep id=\&quot;custom-footer-second-step\&quot; name=\&quot;Step 2\&quot; footer={&lt;CustomStepTwoFooter /&gt;}&gt;\n        Step 2 content with a custom async footer\n      &lt;/WizardStep&gt;\n      &lt;WizardStep\n        id=\&quot;custom-footer-review-step\&quot;\n        name=\&quot;Review\&quot;\n        footer={{\n          nextButtonText: &#39;Submit&#39;,\n          onNext: onSubmit,\n          isNextDisabled: isSubmitting,\n          isBackDisabled: isSubmitting\n        }}\n      &gt;\n        &lt;Flex\n          direction={{ default: &#39;column&#39; }}\n          alignItems={{ default: &#39;alignItemsCenter&#39; }}\n          spaceItems={{ default: &#39;spaceItemsLg&#39; }}\n        &gt;\n          &lt;ReviewStepContent isSubmitting={isSubmitting} /&gt;\n        &lt;/Flex&gt;\n      &lt;/WizardStep&gt;\n    &lt;/Wizard&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-3169" data-pf-content="true" class="pf-v6-c-content--h3">Custom navigation item</h3>
-<astro-island uid="211aaI" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardWithCustomNavItem: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;Custom navigation item wizard\&quot;&gt;\n    &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;custom-nav-item-first-step\&quot;&gt;\n      Step 1 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep\n      id=\&quot;custom-nav-item-second-step\&quot;\n      name=\&quot;Step 2\&quot;\n      navItem={{\n        content: &lt;span&gt;Custom item&lt;/span&gt;\n      }}\n    &gt;\n      Step 2 content with a custom navigation item\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;custom-nav-item-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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>
+<astro-island uid="211aaI" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const WizardWithCustomNavItem: React.FunctionComponent = () =&gt; (\n  &lt;Wizard height={400} title=\&quot;Custom navigation item wizard\&quot;&gt;\n    &lt;WizardStep name=\&quot;Step 1\&quot; id=\&quot;custom-nav-item-first-step\&quot;&gt;\n      Step 1 content\n    &lt;/WizardStep&gt;\n    &lt;WizardStep\n      id=\&quot;custom-nav-item-second-step\&quot;\n      name=\&quot;Step 2\&quot;\n      navItem={{\n        content: &lt;span&gt;Custom item&lt;/span&gt;\n      }}\n    &gt;\n      Step 2 content with a custom navigation item\n    &lt;/WizardStep&gt;\n    &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;custom-nav-item-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n      Review step content\n    &lt;/WizardStep&gt;\n  &lt;/Wizard&gt;\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-3170" data-pf-content="true" class="pf-v6-c-content--h3">Toggle step visibility</h3>
-<astro-island uid="Zda6EJ" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { createContext, useContext, useState } from &#39;react&#39;;\nimport { Checkbox, Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\ninterface SomeContextProps {\n  isToggleStepChecked: boolean;\n  setIsToggleStepChecked(isHidden: boolean): void;\n}\ntype SomeContextRenderProps = Pick&lt;SomeContextProps, &#39;isToggleStepChecked&#39;&gt;;\ninterface SomeContextProviderProps {\n  children: (context: SomeContextRenderProps) =&gt; React.ReactElement&lt;any&gt;;\n}\n\nconst SomeContext: React.Context&lt;SomeContextProps&gt; = createContext({} as SomeContextProps);\n\nconst SomeContextProvider: React.FunctionComponent&lt;SomeContextProviderProps&gt; = ({ children }) =&gt; {\n  const [isToggleStepChecked, setIsToggleStepChecked] = useState(false);\n\n  return (\n    &lt;SomeContext.Provider value={{ isToggleStepChecked, setIsToggleStepChecked }}&gt;\n      {children({ isToggleStepChecked })}\n    &lt;/SomeContext.Provider&gt;\n  );\n};\n\nconst StepContentWithAction: React.FunctionComponent = () =&gt; {\n  const { isToggleStepChecked, setIsToggleStepChecked } = useContext(SomeContext);\n\n  return (\n    &lt;Checkbox\n      label=\&quot;Toggle visibility of the next step\&quot;\n      isChecked={isToggleStepChecked}\n      onChange={(_event, checked) =&gt; setIsToggleStepChecked(checked)}\n      id=\&quot;toggle-hide-step-checkbox\&quot;\n      name=\&quot;Toggle Hide Step Checkbox\&quot;\n    /&gt;\n  );\n};\n\nexport const WizardToggleStepVisibility: React.FunctionComponent = () =&gt; (\n  &lt;SomeContextProvider&gt;\n    {({ isToggleStepChecked }) =&gt; (\n      &lt;Wizard height={400} title=\&quot;Toggle step visibility wizard\&quot;&gt;\n        &lt;WizardStep name=\&quot;Hidden action step\&quot; id=\&quot;toggle-visible-step-1\&quot;&gt;\n          &lt;StepContentWithAction /&gt;\n        &lt;/WizardStep&gt;\n        &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;toggle-visible-step-2\&quot; isHidden={isToggleStepChecked}&gt;\n          Step 2 content\n        &lt;/WizardStep&gt;\n        &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;toggle-visible-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n          Review step content\n        &lt;/WizardStep&gt;\n      &lt;/Wizard&gt;\n    )}\n  &lt;/SomeContextProvider&gt;\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>
+<astro-island uid="Zda6EJ" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { createContext, useContext, useState } from &#39;react&#39;;\nimport { Checkbox, Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\ninterface SomeContextProps {\n  isToggleStepChecked: boolean;\n  setIsToggleStepChecked(isHidden: boolean): void;\n}\ntype SomeContextRenderProps = Pick&lt;SomeContextProps, &#39;isToggleStepChecked&#39;&gt;;\ninterface SomeContextProviderProps {\n  children: (context: SomeContextRenderProps) =&gt; React.ReactElement&lt;any&gt;;\n}\n\nconst SomeContext: React.Context&lt;SomeContextProps&gt; = createContext({} as SomeContextProps);\n\nconst SomeContextProvider: React.FunctionComponent&lt;SomeContextProviderProps&gt; = ({ children }) =&gt; {\n  const [isToggleStepChecked, setIsToggleStepChecked] = useState(false);\n\n  return (\n    &lt;SomeContext.Provider value={{ isToggleStepChecked, setIsToggleStepChecked }}&gt;\n      {children({ isToggleStepChecked })}\n    &lt;/SomeContext.Provider&gt;\n  );\n};\n\nconst StepContentWithAction: React.FunctionComponent = () =&gt; {\n  const { isToggleStepChecked, setIsToggleStepChecked } = useContext(SomeContext);\n\n  return (\n    &lt;Checkbox\n      label=\&quot;Toggle visibility of the next step\&quot;\n      isChecked={isToggleStepChecked}\n      onChange={(_event, checked) =&gt; setIsToggleStepChecked(checked)}\n      id=\&quot;toggle-hide-step-checkbox\&quot;\n      name=\&quot;Toggle Hide Step Checkbox\&quot;\n    /&gt;\n  );\n};\n\nexport const WizardToggleStepVisibility: React.FunctionComponent = () =&gt; (\n  &lt;SomeContextProvider&gt;\n    {({ isToggleStepChecked }) =&gt; (\n      &lt;Wizard height={400} title=\&quot;Toggle step visibility wizard\&quot;&gt;\n        &lt;WizardStep name=\&quot;Hidden action step\&quot; id=\&quot;toggle-visible-step-1\&quot;&gt;\n          &lt;StepContentWithAction /&gt;\n        &lt;/WizardStep&gt;\n        &lt;WizardStep name=\&quot;Step 2\&quot; id=\&quot;toggle-visible-step-2\&quot; isHidden={isToggleStepChecked}&gt;\n          Step 2 content\n        &lt;/WizardStep&gt;\n        &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;toggle-visible-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n          Review step content\n        &lt;/WizardStep&gt;\n      &lt;/Wizard&gt;\n    )}\n  &lt;/SomeContextProvider&gt;\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-3171" data-pf-content="true" class="pf-v6-c-content--h3">Step status</h3>
-<astro-island uid="ZBWdjL" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { createContext, useContext, useState } from &#39;react&#39;;\nimport { Radio, Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\ninterface SomeContextProps {\n  errorMessage: string | undefined;\n  setErrorMessage(error: string | undefined): void;\n  successMessage: string | undefined;\n  setSuccessMessage(error: string | undefined): void;\n}\ntype SomeContextRenderProps = Pick&lt;SomeContextProps, &#39;successMessage&#39;, &#39;errorMessage&#39;&gt;;\ninterface SomeContextProviderProps {\n  children: (context: SomeContextRenderProps) =&gt; React.ReactElement&lt;any&gt;;\n}\n\nconst SomeContext: React.Context&lt;SomeContextProps&gt; = createContext({} as SomeContextProps);\n\nconst SomeContextProvider = ({ children }: SomeContextProviderProps) =&gt; {\n  const [errorMessage, setErrorMessage] = useState&lt;string&gt;();\n  const [successMessage, setSuccessMessage] = useState&lt;string&gt;();\n\n  return (\n    &lt;SomeContext.Provider value={{ errorMessage, setErrorMessage, successMessage, setSuccessMessage }}&gt;\n      {children({ errorMessage, successMessage })}\n    &lt;/SomeContext.Provider&gt;\n  );\n};\n\nconst StepContentWithAction = () =&gt; {\n  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage } = useContext(SomeContext);\n\n  return (\n    &lt;&gt;\n      &lt;Radio\n        label=\&quot;Give step 1 an error status\&quot;\n        isChecked={!!errorMessage}\n        onChange={(_event, checked) =&gt; {\n          setErrorMessage(checked ? &#39;Some error message&#39; : undefined);\n          setSuccessMessage(!checked ? &#39;Some error message&#39; : undefined);\n        }}\n        id=\&quot;toggle-error-checkbox\&quot;\n        name=\&quot;Toggle Status\&quot;\n      /&gt;\n      &lt;Radio\n        label=\&quot;Give step 1 a success status\&quot;\n        isChecked={!!successMessage}\n        onChange={(_event, checked) =&gt; {\n          setSuccessMessage(checked ? &#39;Some success message&#39; : undefined);\n          setErrorMessage(!checked ? &#39;Some success message&#39; : undefined);\n        }}\n        id=\&quot;toggle-success-checkbox\&quot;\n        name=\&quot;Toggle Status\&quot;\n      /&gt;\n    &lt;/&gt;\n  );\n};\n\nexport const WizardStepStatus: React.FunctionComponent = () =&gt; (\n  &lt;SomeContextProvider&gt;\n    {({ errorMessage, successMessage }) =&gt; {\n      let status = &#39;default&#39;;\n      if (errorMessage) {\n        status = &#39;error&#39;;\n      } else if (successMessage) {\n        status = &#39;success&#39;;\n      }\n      return (\n        &lt;Wizard height={400} title=\&quot;Step status wizard\&quot;&gt;\n          &lt;WizardStep status={status} id=\&quot;status-step-1\&quot; name=\&quot;Step 1\&quot;&gt;\n            Step 1 content\n          &lt;/WizardStep&gt;\n          &lt;WizardStep name=\&quot;Status step\&quot; id=\&quot;error-status-step-2\&quot;&gt;\n            &lt;StepContentWithAction /&gt;\n          &lt;/WizardStep&gt;\n          &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;status-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n            Review step content\n          &lt;/WizardStep&gt;\n        &lt;/Wizard&gt;\n      );\n    }}\n  &lt;/SomeContextProvider&gt;\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>
+<astro-island uid="ZBWdjL" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { createContext, useContext, useState } from &#39;react&#39;;\nimport { Radio, Wizard, WizardStep } from &#39;@patternfly/react-core&#39;;\n\ninterface SomeContextProps {\n  errorMessage: string | undefined;\n  setErrorMessage(error: string | undefined): void;\n  successMessage: string | undefined;\n  setSuccessMessage(error: string | undefined): void;\n}\ntype SomeContextRenderProps = Pick&lt;SomeContextProps, &#39;successMessage&#39;, &#39;errorMessage&#39;&gt;;\ninterface SomeContextProviderProps {\n  children: (context: SomeContextRenderProps) =&gt; React.ReactElement&lt;any&gt;;\n}\n\nconst SomeContext: React.Context&lt;SomeContextProps&gt; = createContext({} as SomeContextProps);\n\nconst SomeContextProvider = ({ children }: SomeContextProviderProps) =&gt; {\n  const [errorMessage, setErrorMessage] = useState&lt;string&gt;();\n  const [successMessage, setSuccessMessage] = useState&lt;string&gt;();\n\n  return (\n    &lt;SomeContext.Provider value={{ errorMessage, setErrorMessage, successMessage, setSuccessMessage }}&gt;\n      {children({ errorMessage, successMessage })}\n    &lt;/SomeContext.Provider&gt;\n  );\n};\n\nconst StepContentWithAction = () =&gt; {\n  const { errorMessage, setErrorMessage, successMessage, setSuccessMessage } = useContext(SomeContext);\n\n  return (\n    &lt;&gt;\n      &lt;Radio\n        label=\&quot;Give step 1 an error status\&quot;\n        isChecked={!!errorMessage}\n        onChange={(_event, checked) =&gt; {\n          setErrorMessage(checked ? &#39;Some error message&#39; : undefined);\n          setSuccessMessage(!checked ? &#39;Some error message&#39; : undefined);\n        }}\n        id=\&quot;toggle-error-checkbox\&quot;\n        name=\&quot;Toggle Status\&quot;\n      /&gt;\n      &lt;Radio\n        label=\&quot;Give step 1 a success status\&quot;\n        isChecked={!!successMessage}\n        onChange={(_event, checked) =&gt; {\n          setSuccessMessage(checked ? &#39;Some success message&#39; : undefined);\n          setErrorMessage(!checked ? &#39;Some success message&#39; : undefined);\n        }}\n        id=\&quot;toggle-success-checkbox\&quot;\n        name=\&quot;Toggle Status\&quot;\n      /&gt;\n    &lt;/&gt;\n  );\n};\n\nexport const WizardStepStatus: React.FunctionComponent = () =&gt; (\n  &lt;SomeContextProvider&gt;\n    {({ errorMessage, successMessage }) =&gt; {\n      let status = &#39;default&#39;;\n      if (errorMessage) {\n        status = &#39;error&#39;;\n      } else if (successMessage) {\n        status = &#39;success&#39;;\n      }\n      return (\n        &lt;Wizard height={400} title=\&quot;Step status wizard\&quot;&gt;\n          &lt;WizardStep status={status} id=\&quot;status-step-1\&quot; name=\&quot;Step 1\&quot;&gt;\n            Step 1 content\n          &lt;/WizardStep&gt;\n          &lt;WizardStep name=\&quot;Status step\&quot; id=\&quot;error-status-step-2\&quot;&gt;\n            &lt;StepContentWithAction /&gt;\n          &lt;/WizardStep&gt;\n          &lt;WizardStep name=\&quot;Review\&quot; id=\&quot;status-review-step\&quot; footer={{ nextButtonText: &#39;Finish&#39; }}&gt;\n            Review step content\n          &lt;/WizardStep&gt;\n        &lt;/Wizard&gt;\n      );\n    }}\n  &lt;/SomeContextProvider&gt;\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>
 <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3172" data-pf-content="true" class="pf-v6-c-content--h2">Hooks</h2>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3173" data-pf-content="true" class="pf-v6-c-content--h3">useWizardContext</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3180" data-pf-content="true" class="pf-v6-c-content--p">Used to access any property of <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-3174" data-pf-content="true" class="pf-v6-c-content--a">WizardContext</a>:</p>