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

@patternfly/patternfly-doc-core 1.13.2 → 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 (369) hide show

package/dist/docs/components/modal/react/index.html CHANGED Viewed

@@ -42,72 +42,72 @@
 	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="Zed1Ot" 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-127"><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="1qAXJ" 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-43"><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-128"><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-129"><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-43"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body">    <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/modal/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/modal/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-778" 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="Zed1Ot" 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-127"><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="1qAXJ" 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-43"><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-128"><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-129"><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-43"><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"> <a class="pf-v6-c-tabs__link" href="/components/modal/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/modal/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-778" 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-779" data-pf-content="true" class="pf-v6-c-content--h3">Basic modals</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-780" data-pf-content="true" class="pf-v6-c-content--p">Basic modals give users the option to either confirm or cancel an action.</p>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-801" data-pf-content="true" class="pf-v6-c-content--p">To flag an open modal, use the <code>isOpen</code> property. To execute a callback when a modal is closed, use the <code>onClose</code> property.</p>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-802" data-pf-content="true" class="pf-v6-c-content--p">The <code>&lt;ModalBody&gt;</code>, <code>&lt;ModalHeader&gt;</code>, and <code>&lt;ModalFooter&gt;</code> components are not required, but are typically used to display the main content of the modal, modal title, and any button actions, respectively.</p>
-<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="1AYfRU" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalBasic: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle} ouiaId=\&quot;ShowBasicModal\&quot;&gt;\n        Show basic modal\n      &lt;/Button&gt;\n      &lt;Modal\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        ouiaId=\&quot;BasicModal\&quot;\n        aria-labelledby=\&quot;basic-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-basic\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Basic modal\&quot; labelId=\&quot;basic-modal-title\&quot; /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-basic\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<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="1AYfRU" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalBasic: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle} ouiaId=\&quot;ShowBasicModal\&quot;&gt;\n        Show basic modal\n      &lt;/Button&gt;\n      &lt;Modal\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        ouiaId=\&quot;BasicModal\&quot;\n        aria-labelledby=\&quot;basic-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-basic\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Basic modal\&quot; labelId=\&quot;basic-modal-title\&quot; /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-basic\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-781" data-pf-content="true" class="pf-v6-c-content--h3">Scrollable modals</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-803" data-pf-content="true" class="pf-v6-c-content--p">To enable keyboard-accessible scrolling of a modal’s content, pass <code>tabIndex={0}</code> to the <code>&lt;ModalBody&gt;</code>.</p>
-<astro-island uid="Z2mWEE7" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalWithOverflowingContent: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen((prevIsModalOpen) =&gt; !prevIsModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;scrollable-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-scrollable\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Modal with overflowing content\&quot; labelId=\&quot;scrollable-modal-title\&quot; /&gt;\n        &lt;ModalBody tabIndex={0} id=\&quot;modal-box-body-scrollable\&quot; aria-label=\&quot;Scrollable modal content\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Semper auctor neque vitae\n          tempus. Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat\n          maecenas volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi\n          tristique senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum\n          consectetur libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras\n          sed felis eget velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus\n          ultricies tristique nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa\n          ultricies. Lacinia quis vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget\n          aliquet.\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Molestie at elementum eu facilisis sed odio\n          morbi. Elit pellentesque habitant morbi tristique. Consequat nisl vel pretium lectus quam id leo in vitae.\n          Quis varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus.\n          Sollicitudin tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim\n          sit amet venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar\n          elementum integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis\n          enim ut tellus elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed\n          enim. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla.\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Nulla pharetra diam sit amet nisl suscipit adipiscing. Ac tortor vitae purus faucibus ornare suspendisse sed\n          nisi. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt tortor aliquam nulla facilisi cras\n          fermentum. Volutpat est velit egestas dui id ornare arcu odio. Pharetra magna ac placerat vestibulum. Ultrices\n          sagittis orci a scelerisque purus semper eget duis at. Nisi est sit amet facilisis magna etiam tempor orci eu.\n          Convallis tellus id interdum velit. Facilisis sed odio morbi quis commodo odio aenean sed.\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Facilisi etiam dignissim diam quis enim\n          lobortis scelerisque fermentum. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Magna\n          etiam tempor orci eu lobortis elementum. Quis auctor elit sed vulputate mi sit. Eleifend quam adipiscing vitae\n          proin sagittis nisl rhoncus mattis rhoncus. Erat velit scelerisque in dictum non. Sit amet nulla facilisi\n          morbi tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at\n          varius vel pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique\n          magna sit amet purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum\n          morbi. Mauris a diam maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="Z2mWEE7" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalWithOverflowingContent: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen((prevIsModalOpen) =&gt; !prevIsModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;scrollable-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-scrollable\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Modal with overflowing content\&quot; labelId=\&quot;scrollable-modal-title\&quot; /&gt;\n        &lt;ModalBody tabIndex={0} id=\&quot;modal-box-body-scrollable\&quot; aria-label=\&quot;Scrollable modal content\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Semper auctor neque vitae\n          tempus. Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat\n          maecenas volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi\n          tristique senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum\n          consectetur libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras\n          sed felis eget velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus\n          ultricies tristique nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa\n          ultricies. Lacinia quis vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget\n          aliquet.\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Molestie at elementum eu facilisis sed odio\n          morbi. Elit pellentesque habitant morbi tristique. Consequat nisl vel pretium lectus quam id leo in vitae.\n          Quis varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus.\n          Sollicitudin tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim\n          sit amet venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar\n          elementum integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis\n          enim ut tellus elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed\n          enim. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla.\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Nulla pharetra diam sit amet nisl suscipit adipiscing. Ac tortor vitae purus faucibus ornare suspendisse sed\n          nisi. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt tortor aliquam nulla facilisi cras\n          fermentum. Volutpat est velit egestas dui id ornare arcu odio. Pharetra magna ac placerat vestibulum. Ultrices\n          sagittis orci a scelerisque purus semper eget duis at. Nisi est sit amet facilisis magna etiam tempor orci eu.\n          Convallis tellus id interdum velit. Facilisis sed odio morbi quis commodo odio aenean sed.\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Facilisi etiam dignissim diam quis enim\n          lobortis scelerisque fermentum. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Magna\n          etiam tempor orci eu lobortis elementum. Quis auctor elit sed vulputate mi sit. Eleifend quam adipiscing vitae\n          proin sagittis nisl rhoncus mattis rhoncus. Erat velit scelerisque in dictum non. Sit amet nulla facilisi\n          morbi tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at\n          varius vel pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique\n          magna sit amet purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum\n          morbi. Mauris a diam maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-782" data-pf-content="true" class="pf-v6-c-content--h3">With a static description</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-804" data-pf-content="true" class="pf-v6-c-content--p">To provide additional information about a modal, use the <code>description</code> property. Descriptions are static and do not scroll with other modal content.</p>
-<astro-island uid="Z1ejXnJ" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalWithDescription: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show modal with description\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;modal-with-description-title\&quot;\n        aria-describedby=\&quot;modal-box-body-with-description\&quot;\n      &gt;\n        &lt;ModalHeader\n          title=\&quot;Modal with description\&quot;\n          labelId=\&quot;modal-with-description-title\&quot;\n          description=\&quot;A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body.\&quot;\n        /&gt;\n\n        &lt;ModalBody tabIndex={0} id=\&quot;modal-box-body-with-description\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Semper auctor neque vitae\n          tempus. Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat\n          maecenas volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi\n          tristique senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum\n          consectetur libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras\n          sed felis eget velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus\n          ultricies tristique nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa\n          ultricies. Lacinia quis vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget\n          aliquet.\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Molestie at elementum eu facilisis sed odio\n          morbi. Elit pellentesque habitant morbi tristique. Consequat nisl vel pretium lectus quam id leo in vitae.\n          Quis varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus.\n          Sollicitudin tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim\n          sit amet venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar\n          elementum integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis\n          enim ut tellus elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed\n          enim. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla.\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Nulla pharetra diam sit amet nisl suscipit adipiscing. Ac tortor vitae purus faucibus ornare suspendisse sed\n          nisi. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt tortor aliquam nulla facilisi cras\n          fermentum. Volutpat est velit egestas dui id ornare arcu odio. Pharetra magna ac placerat vestibulum. Ultrices\n          sagittis orci a scelerisque purus semper eget duis at. Nisi est sit amet facilisis magna etiam tempor orci eu.\n          Convallis tellus id interdum velit. Facilisis sed odio morbi quis commodo odio aenean sed.\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Facilisi etiam dignissim diam quis enim\n          lobortis scelerisque fermentum. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Magna\n          etiam tempor orci eu lobortis elementum. Quis auctor elit sed vulputate mi sit. Eleifend quam adipiscing vitae\n          proin sagittis nisl rhoncus mattis rhoncus. Erat velit scelerisque in dictum non. Sit amet nulla facilisi\n          morbi tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at\n          varius vel pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique\n          magna sit amet purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum\n          morbi. Mauris a diam maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="Z1ejXnJ" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalWithDescription: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show modal with description\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;modal-with-description-title\&quot;\n        aria-describedby=\&quot;modal-box-body-with-description\&quot;\n      &gt;\n        &lt;ModalHeader\n          title=\&quot;Modal with description\&quot;\n          labelId=\&quot;modal-with-description-title\&quot;\n          description=\&quot;A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body.\&quot;\n        /&gt;\n\n        &lt;ModalBody tabIndex={0} id=\&quot;modal-box-body-with-description\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Semper auctor neque vitae\n          tempus. Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat\n          maecenas volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi\n          tristique senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum\n          consectetur libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras\n          sed felis eget velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus\n          ultricies tristique nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa\n          ultricies. Lacinia quis vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget\n          aliquet.\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Molestie at elementum eu facilisis sed odio\n          morbi. Elit pellentesque habitant morbi tristique. Consequat nisl vel pretium lectus quam id leo in vitae.\n          Quis varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus.\n          Sollicitudin tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim\n          sit amet venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar\n          elementum integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis\n          enim ut tellus elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed\n          enim. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla.\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Nulla pharetra diam sit amet nisl suscipit adipiscing. Ac tortor vitae purus faucibus ornare suspendisse sed\n          nisi. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt tortor aliquam nulla facilisi cras\n          fermentum. Volutpat est velit egestas dui id ornare arcu odio. Pharetra magna ac placerat vestibulum. Ultrices\n          sagittis orci a scelerisque purus semper eget duis at. Nisi est sit amet facilisis magna etiam tempor orci eu.\n          Convallis tellus id interdum velit. Facilisis sed odio morbi quis commodo odio aenean sed.\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Facilisi etiam dignissim diam quis enim\n          lobortis scelerisque fermentum. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Magna\n          etiam tempor orci eu lobortis elementum. Quis auctor elit sed vulputate mi sit. Eleifend quam adipiscing vitae\n          proin sagittis nisl rhoncus mattis rhoncus. Erat velit scelerisque in dictum non. Sit amet nulla facilisi\n          morbi tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at\n          varius vel pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique\n          magna sit amet purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum\n          morbi. Mauris a diam maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-783" data-pf-content="true" class="pf-v6-c-content--h3">Top aligned</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-805" data-pf-content="true" class="pf-v6-c-content--p">To override a modal’s default center alignment, use the <code>position</code> property. In this example, <code>position</code> is set to “top”, which moves the modal to the top of the screen.</p>
-<astro-island uid="Z2fGNf7" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalTopAligned: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show top aligned modal\n      &lt;/Button&gt;\n      &lt;Modal\n        position=\&quot;top\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;top-aligned-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-top-aligned\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Top aligned modal\&quot; labelId=\&quot;top-aligned-modal-title\&quot; /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-top-aligned\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="Z2fGNf7" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalTopAligned: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show top aligned modal\n      &lt;/Button&gt;\n      &lt;Modal\n        position=\&quot;top\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;top-aligned-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-top-aligned\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Top aligned modal\&quot; labelId=\&quot;top-aligned-modal-title\&quot; /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-top-aligned\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-784" data-pf-content="true" class="pf-v6-c-content--h3">Modal sizes</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-806" data-pf-content="true" class="pf-v6-c-content--p">To adjust the size of a modal, use the <code>variant</code> property. Modal variants include “small”, “medium”, “large”, and “default”.</p>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-785" data-pf-content="true" class="pf-v6-c-content--p">In the following example, you can display each modal size option. To launch a modal with a specific size, first select the respective radio button, followed by the “Show modal” button.</p>
-<astro-island uid="Z7Ndck" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, Radio } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalSize: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [selectedVariant, setSelectedVariant] = useState(ModalVariant.small);\n\n  const capitalize = (input: string) =&gt; input[0].toUpperCase() + input.substring(1);\n  const formatSizeVariantName = (variant: string) =&gt; capitalize(variant);\n\n  const variantOptions = [ModalVariant.small, ModalVariant.medium, ModalVariant.large];\n\n  const renderSizeOptions = variantOptions.map((variant) =&gt; (\n    &lt;Radio\n      id={`modal-size-${variant}-selector`}\n      label={`${formatSizeVariantName(variant)} variant`}\n      isChecked={variant === selectedVariant}\n      onChange={() =&gt; setSelectedVariant(variant)}\n      key={formatSizeVariantName(variant)}\n      name=\&quot;Variant options\&quot;\n    /&gt;\n  ));\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      {renderSizeOptions}\n      &lt;br /&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={selectedVariant}\n        title=\&quot;Variant modal\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;variant-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-variant\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Small modal\&quot; labelId=\&quot;variant-modal-title\&quot; /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-variant\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="Z7Ndck" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, Radio } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalSize: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [selectedVariant, setSelectedVariant] = useState(ModalVariant.small);\n\n  const capitalize = (input: string) =&gt; input[0].toUpperCase() + input.substring(1);\n  const formatSizeVariantName = (variant: string) =&gt; capitalize(variant);\n\n  const variantOptions = [ModalVariant.small, ModalVariant.medium, ModalVariant.large];\n\n  const renderSizeOptions = variantOptions.map((variant) =&gt; (\n    &lt;Radio\n      id={`modal-size-${variant}-selector`}\n      label={`${formatSizeVariantName(variant)} variant`}\n      isChecked={variant === selectedVariant}\n      onChange={() =&gt; setSelectedVariant(variant)}\n      key={formatSizeVariantName(variant)}\n      name=\&quot;Variant options\&quot;\n    /&gt;\n  ));\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      {renderSizeOptions}\n      &lt;br /&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={selectedVariant}\n        title=\&quot;Variant modal\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;variant-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-variant\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Small modal\&quot; labelId=\&quot;variant-modal-title\&quot; /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-variant\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-786" data-pf-content="true" class="pf-v6-c-content--h3">Custom width</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-807" data-pf-content="true" class="pf-v6-c-content--p">To choose a specific width for a modal, use the <code>width</code> property. The following example has a <code>width</code> of “50%”.</p>
-<astro-island uid="Z21fJXS" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalCustomWidth: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show custom width modal\n      &lt;/Button&gt;\n      &lt;Modal\n        width=\&quot;50%\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;custom-width-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-custom-width\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Custom width modal\&quot; labelId=\&quot;custom-width-modal-title\&quot; /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-custom-width\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="Z21fJXS" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalCustomWidth: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show custom width modal\n      &lt;/Button&gt;\n      &lt;Modal\n        width=\&quot;50%\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;custom-width-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-custom-width\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Custom width modal\&quot; labelId=\&quot;custom-width-modal-title\&quot; /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-custom-width\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-787" data-pf-content="true" class="pf-v6-c-content--h3">Custom header</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-808" data-pf-content="true" class="pf-v6-c-content--p">To add a custom header to a modal, your custom content must be passed as a child of the <code>&lt;ModalHeader&gt;</code> component. Do not pass the <code>title</code> property to <code>&lt;ModalHeader&gt;</code> when using a custom header.</p>
-<astro-island uid="1L7pef" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Button,\n  Modal,\n  ModalBody,\n  ModalFooter,\n  ModalHeader,\n  ModalVariant,\n  Title,\n  TitleSizes,\n  Content,\n  Flex\n} from &#39;@patternfly/react-core&#39;;\n\nimport WarningTriangleIcon from &#39;@patternfly/react-icons/dist/esm/icons/warning-triangle-icon&#39;;\n\nexport const ModalCustomHeaderFooter: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show custom header/footer modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.large}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;modal-custom-header-label\&quot;\n        aria-describedby=\&quot;modal-custom-header-description\&quot;\n      &gt;\n        &lt;ModalHeader&gt;\n          &lt;Content&gt;\n            &lt;h1 id=\&quot;modal-custom-header-label\&quot;&gt;Custom header modal&lt;/h1&gt;\n            &lt;p&gt;Add custom content to the header by not passing the titles prop the modal box header component.&lt;/p&gt;\n          &lt;/Content&gt;\n        &lt;/ModalHeader&gt;\n        &lt;ModalBody&gt;\n          &lt;span id=\&quot;modal-custom-header-description\&quot;&gt;\n            When static text describing the modal is available outside of the modal header, it can be given an ID that\n            is then passed in as the modal&#39;s aria-describedby value.\n          &lt;/span&gt;\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Title headingLevel=\&quot;h4\&quot; size={TitleSizes.md}&gt;\n            &lt;Flex spaceItems={{ default: &#39;spaceItemsSm&#39; }}&gt;\n              &lt;WarningTriangleIcon /&gt;\n              &lt;span&gt;Custom modal footer.&lt;/span&gt;\n            &lt;/Flex&gt;\n          &lt;/Title&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="1L7pef" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Button,\n  Modal,\n  ModalBody,\n  ModalFooter,\n  ModalHeader,\n  ModalVariant,\n  Title,\n  TitleSizes,\n  Content,\n  Flex\n} from &#39;@patternfly/react-core&#39;;\n\nimport WarningTriangleIcon from &#39;@patternfly/react-icons/dist/esm/icons/warning-triangle-icon&#39;;\n\nexport const ModalCustomHeaderFooter: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show custom header/footer modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.large}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;modal-custom-header-label\&quot;\n        aria-describedby=\&quot;modal-custom-header-description\&quot;\n      &gt;\n        &lt;ModalHeader&gt;\n          &lt;Content&gt;\n            &lt;h1 id=\&quot;modal-custom-header-label\&quot;&gt;Custom header modal&lt;/h1&gt;\n            &lt;p&gt;Add custom content to the header by not passing the titles prop the modal box header component.&lt;/p&gt;\n          &lt;/Content&gt;\n        &lt;/ModalHeader&gt;\n        &lt;ModalBody&gt;\n          &lt;span id=\&quot;modal-custom-header-description\&quot;&gt;\n            When static text describing the modal is available outside of the modal header, it can be given an ID that\n            is then passed in as the modal&#39;s aria-describedby value.\n          &lt;/span&gt;\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Title headingLevel=\&quot;h4\&quot; size={TitleSizes.md}&gt;\n            &lt;Flex spaceItems={{ default: &#39;spaceItemsSm&#39; }}&gt;\n              &lt;WarningTriangleIcon /&gt;\n              &lt;span&gt;Custom modal footer.&lt;/span&gt;\n            &lt;/Flex&gt;\n          &lt;/Title&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-788" data-pf-content="true" class="pf-v6-c-content--h3">No header or footer</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-789" data-pf-content="true" class="pf-v6-c-content--p">To exclusively present information in a modal, remove the header and/or footer.</p>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-809" data-pf-content="true" class="pf-v6-c-content--p">When a modal has no header or footer, make sure to add an <code>aria-label</code> explicitly stating this, so that those using assistive technologies can understand this context.</p>
-<astro-island uid="Z1he6vH" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalVariant } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalNoHeaderFooter: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show no header/footer modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.large}\n        isOpen={isModalOpen}\n        aria-label=\&quot;No header/footer modal\&quot;\n        aria-describedby=\&quot;modal-no-header-description\&quot;\n        onClose={handleModalToggle}\n      &gt;\n        &lt;ModalBody&gt;\n          &lt;span id=\&quot;modal-no-header-description\&quot;&gt;\n            When static text describing the modal is available outside of the modal header, it can be given an ID that\n            is then passed in as the modal&#39;s aria-describedby value.\n          &lt;/span&gt;\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="Z1he6vH" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalVariant } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalNoHeaderFooter: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show no header/footer modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.large}\n        isOpen={isModalOpen}\n        aria-label=\&quot;No header/footer modal\&quot;\n        aria-describedby=\&quot;modal-no-header-description\&quot;\n        onClose={handleModalToggle}\n      &gt;\n        &lt;ModalBody&gt;\n          &lt;span id=\&quot;modal-no-header-description\&quot;&gt;\n            When static text describing the modal is available outside of the modal header, it can be given an ID that\n            is then passed in as the modal&#39;s aria-describedby value.\n          &lt;/span&gt;\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-790" data-pf-content="true" class="pf-v6-c-content--h3">Title icon</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-810" data-pf-content="true" class="pf-v6-c-content--p">To add an icon before a modal’s title, use the <code>titleIconVariant</code> property, which can be set to a “success”, “danger”, “warning”, or “info” variant. The following example uses a “warning” variant.</p>
-<astro-island uid="Z1qISeq" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalTitleIcon: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show title icon modal\n      &lt;/Button&gt;\n      &lt;Modal\n        isOpen={isModalOpen}\n        aria-describedby=\&quot;modal-title-icon-description\&quot;\n        aria-labelledby=\&quot;title-icon-modal-title\&quot;\n        onClose={handleModalToggle}\n      &gt;\n        &lt;ModalHeader title=\&quot;Title icon modal\&quot; titleIconVariant=\&quot;warning\&quot; labelId=\&quot;title-icon-modal-title\&quot; /&gt;\n        &lt;ModalBody&gt;\n          &lt;span id=\&quot;modal-title-icon-description\&quot;&gt;\n            When static text describing the modal is available outside of the modal header, it can be given an ID that\n            is then passed in as the modal&#39;s aria-describedby value.\n          &lt;/span&gt;\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="Z1qISeq" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalTitleIcon: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show title icon modal\n      &lt;/Button&gt;\n      &lt;Modal\n        isOpen={isModalOpen}\n        aria-describedby=\&quot;modal-title-icon-description\&quot;\n        aria-labelledby=\&quot;title-icon-modal-title\&quot;\n        onClose={handleModalToggle}\n      &gt;\n        &lt;ModalHeader title=\&quot;Title icon modal\&quot; titleIconVariant=\&quot;warning\&quot; labelId=\&quot;title-icon-modal-title\&quot; /&gt;\n        &lt;ModalBody&gt;\n          &lt;span id=\&quot;modal-title-icon-description\&quot;&gt;\n            When static text describing the modal is available outside of the modal header, it can be given an ID that\n            is then passed in as the modal&#39;s aria-describedby value.\n          &lt;/span&gt;\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-791" data-pf-content="true" class="pf-v6-c-content--h3">Custom title icon</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-811" data-pf-content="true" class="pf-v6-c-content--p">To add a custom icon before a modal’s title, set <code>titleIconVariant</code> to an imported custom icon. The following example imports and uses a bullhorn icon.</p>
-<astro-island uid="Z1Hdpmv" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from &#39;@patternfly/react-core&#39;;\nimport BullhornIcon from &#39;@patternfly/react-icons/dist/esm/icons/bullhorn-icon&#39;;\n\nexport const ModalCustomTitleIcon: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show custom title icon modal\n      &lt;/Button&gt;\n      &lt;Modal\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-describedby=\&quot;modal-custom-icon-description\&quot;\n        aria-labelledby=\&quot;custom-title-icon-modal-title\&quot;\n      &gt;\n        &lt;ModalHeader\n          title=\&quot;Custom title icon modal\&quot;\n          titleIconVariant={BullhornIcon}\n          labelId=\&quot;custom-title-icon-modal-title\&quot;\n        /&gt;\n        &lt;ModalBody&gt;\n          &lt;span id=\&quot;modal-custom-icon-description\&quot;&gt;\n            When static text describing the modal is available outside of the modal header, it can be given an ID that\n            is then passed in as the modal&#39;s aria-describedby value.\n          &lt;/span&gt;\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="Z1Hdpmv" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from &#39;@patternfly/react-core&#39;;\nimport BullhornIcon from &#39;@patternfly/react-icons/dist/esm/icons/bullhorn-icon&#39;;\n\nexport const ModalCustomTitleIcon: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show custom title icon modal\n      &lt;/Button&gt;\n      &lt;Modal\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-describedby=\&quot;modal-custom-icon-description\&quot;\n        aria-labelledby=\&quot;custom-title-icon-modal-title\&quot;\n      &gt;\n        &lt;ModalHeader\n          title=\&quot;Custom title icon modal\&quot;\n          titleIconVariant={BullhornIcon}\n          labelId=\&quot;custom-title-icon-modal-title\&quot;\n        /&gt;\n        &lt;ModalBody&gt;\n          &lt;span id=\&quot;modal-custom-icon-description\&quot;&gt;\n            When static text describing the modal is available outside of the modal header, it can be given an ID that\n            is then passed in as the modal&#39;s aria-describedby value.\n          &lt;/span&gt;\n          &lt;br /&gt;\n          &lt;br /&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-792" data-pf-content="true" class="pf-v6-c-content--h3">With wizard</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-815" data-pf-content="true" class="pf-v6-c-content--p">To guide users through a series of steps in a modal, you can add a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-793" data-pf-content="true" class="pf-v6-c-content--a">wizard</a> to a modal. To configure the <code>&lt;Wizard&gt;</code>, pass an array that contains a “name” and “component” value for each step into the <code>steps</code> property.</p>
-<astro-island uid="zlkyH" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalWithWizard: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen((prevIsModalOpen) =&gt; !prevIsModalOpen);\n  };\n\n  const handleWizardToggle = () =&gt; {\n    setIsModalOpen((prevIsModalOpen) =&gt; !prevIsModalOpen);\n  };\n\n  const numberedSteps = [1, 2, 3, 4].map((stepNumber) =&gt; (\n    &lt;WizardStep name={`Step ${stepNumber}`} key={`Step ${stepNumber}`} id={`with-wizard-step-${stepNumber}`}&gt;\n      {`Step ${stepNumber}`}\n    &lt;/WizardStep&gt;\n  ));\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show wizard modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.large}\n        isOpen={isModalOpen}\n        aria-labelledby=\&quot;modal-wizard-label\&quot;\n        aria-describedby=\&quot;modal-wizard-description\&quot;\n      &gt;\n        &lt;Wizard\n          height={400}\n          header={\n            &lt;WizardHeader\n              title=\&quot;Wizard modal\&quot;\n              titleId=\&quot;modal-wizard-label\&quot;\n              description=\&quot;This is a wizard inside of a modal.\&quot;\n              descriptionId=\&quot;modal-wizard-description\&quot;\n              onClose={handleWizardToggle}\n              closeButtonAriaLabel=\&quot;Close wizard\&quot;\n            /&gt;\n          }\n          onClose={handleWizardToggle}\n        &gt;\n          {numberedSteps}\n          &lt;WizardStep\n            name=\&quot;Review\&quot;\n            id=\&quot;with-wizard-review-step\&quot;\n            footer={{ nextButtonText: &#39;Finish&#39;, onNext: handleWizardToggle }}\n          &gt;\n            Review step\n          &lt;/WizardStep&gt;\n        &lt;/Wizard&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="zlkyH" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalWithWizard: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen((prevIsModalOpen) =&gt; !prevIsModalOpen);\n  };\n\n  const handleWizardToggle = () =&gt; {\n    setIsModalOpen((prevIsModalOpen) =&gt; !prevIsModalOpen);\n  };\n\n  const numberedSteps = [1, 2, 3, 4].map((stepNumber) =&gt; (\n    &lt;WizardStep name={`Step ${stepNumber}`} key={`Step ${stepNumber}`} id={`with-wizard-step-${stepNumber}`}&gt;\n      {`Step ${stepNumber}`}\n    &lt;/WizardStep&gt;\n  ));\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show wizard modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.large}\n        isOpen={isModalOpen}\n        aria-labelledby=\&quot;modal-wizard-label\&quot;\n        aria-describedby=\&quot;modal-wizard-description\&quot;\n      &gt;\n        &lt;Wizard\n          height={400}\n          header={\n            &lt;WizardHeader\n              title=\&quot;Wizard modal\&quot;\n              titleId=\&quot;modal-wizard-label\&quot;\n              description=\&quot;This is a wizard inside of a modal.\&quot;\n              descriptionId=\&quot;modal-wizard-description\&quot;\n              onClose={handleWizardToggle}\n              closeButtonAriaLabel=\&quot;Close wizard\&quot;\n            /&gt;\n          }\n          onClose={handleWizardToggle}\n        &gt;\n          {numberedSteps}\n          &lt;WizardStep\n            name=\&quot;Review\&quot;\n            id=\&quot;with-wizard-review-step\&quot;\n            footer={{ nextButtonText: &#39;Finish&#39;, onNext: handleWizardToggle }}\n          &gt;\n            Review step\n          &lt;/WizardStep&gt;\n        &lt;/Wizard&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-794" data-pf-content="true" class="pf-v6-c-content--h3">With dropdown</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-816" data-pf-content="true" class="pf-v6-c-content--p">To present a menu of actions or links to a user, you can add a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-795" data-pf-content="true" class="pf-v6-c-content--a">dropdown</a> to a modal.</p>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-812" data-pf-content="true" class="pf-v6-c-content--p">To allow the dropdown to visually break out of the modal container, set the <code>menuAppendTo</code> property to “parent”. Handle the modal’s closing behavior by listening to the <code>onEscapePress</code> callback on the <code>&lt;Modal&gt;</code> component. This allows the “escape” key to collapse the dropdown without closing the entire modal.</p>
-<astro-island uid="Z25VATs" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Button,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement,\n  Modal,\n  ModalBody,\n  ModalHeader,\n  ModalFooter,\n  ModalVariant\n} from &#39;@patternfly/react-core&#39;;\n\nexport const ModalWithDropdown: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n    setIsDropdownOpen(false);\n  };\n\n  const handleDropdownToggle = () =&gt; {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onSelect = () =&gt; {\n    setIsDropdownOpen(!isDropdownOpen);\n    onFocus();\n  };\n\n  const onFocus = () =&gt; {\n    const element = document.getElementById(&#39;modal-dropdown-toggle&#39;);\n    (element as HTMLElement).focus();\n  };\n\n  const onEscapePress = (event: KeyboardEvent) =&gt; {\n    if (isDropdownOpen) {\n      setIsDropdownOpen(!isDropdownOpen);\n      onFocus();\n    } else {\n      handleModalToggle(event);\n    }\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show dropdown modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        onEscapePress={onEscapePress}\n        aria-labelledby=\&quot;modal-with-dropdown\&quot;\n        aria-describedby=\&quot;modal-box-body-with-dropdown\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Dropdown modal\&quot; labelId=\&quot;modal-with-dropdown\&quot; /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-with-dropdown\&quot;&gt;\n          &lt;div&gt;\n            Set the dropdown &lt;strong&gt;menuAppendTo&lt;/strong&gt; prop to &lt;em&gt;parent&lt;/em&gt; in order to allow the dropdown menu\n            break out of the modal container. You&#39;ll also want to handle closing of the modal yourself, by listening to\n            the &lt;strong&gt;onEscapePress&lt;/strong&gt; callback on the Modal component, so you can close the Dropdown first if\n            it&#39;s open without closing the entire modal.\n          &lt;/div&gt;\n          &lt;br /&gt;\n          &lt;div&gt;\n            &lt;Dropdown\n              isOpen={isDropdownOpen}\n              onSelect={onSelect}\n              onOpenChange={(isOpen: boolean) =&gt; setIsDropdownOpen(isOpen)}\n              toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                &lt;MenuToggle ref={toggleRef} onClick={handleDropdownToggle} isExpanded={isDropdownOpen}&gt;\n                  Dropdown\n                &lt;/MenuToggle&gt;\n              )}\n            &gt;\n              &lt;DropdownList&gt;\n                &lt;DropdownItem value={0} key=\&quot;action\&quot;&gt;\n                  Action\n                &lt;/DropdownItem&gt;\n                &lt;DropdownItem\n                  value={1}\n                  key=\&quot;link\&quot;\n                  to=\&quot;#default-link2\&quot;\n                  // Prevent the default onClick functionality for example purposes\n                  onClick={(ev: any) =&gt; ev.preventDefault()}\n                &gt;\n                  Link\n                &lt;/DropdownItem&gt;\n                &lt;DropdownItem value={2} isDisabled key=\&quot;disabled action\&quot;&gt;\n                  Disabled Action\n                &lt;/DropdownItem&gt;\n                &lt;DropdownItem value={3} isDisabled key=\&quot;disabled link\&quot; to=\&quot;#default-link4\&quot;&gt;\n                  Disabled Link\n                &lt;/DropdownItem&gt;\n              &lt;/DropdownList&gt;\n            &lt;/Dropdown&gt;\n          &lt;/div&gt;\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="Z25VATs" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Button,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement,\n  Modal,\n  ModalBody,\n  ModalHeader,\n  ModalFooter,\n  ModalVariant\n} from &#39;@patternfly/react-core&#39;;\n\nexport const ModalWithDropdown: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n    setIsDropdownOpen(false);\n  };\n\n  const handleDropdownToggle = () =&gt; {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onSelect = () =&gt; {\n    setIsDropdownOpen(!isDropdownOpen);\n    onFocus();\n  };\n\n  const onFocus = () =&gt; {\n    const element = document.getElementById(&#39;modal-dropdown-toggle&#39;);\n    (element as HTMLElement).focus();\n  };\n\n  const onEscapePress = (event: KeyboardEvent) =&gt; {\n    if (isDropdownOpen) {\n      setIsDropdownOpen(!isDropdownOpen);\n      onFocus();\n    } else {\n      handleModalToggle(event);\n    }\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show dropdown modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        onEscapePress={onEscapePress}\n        aria-labelledby=\&quot;modal-with-dropdown\&quot;\n        aria-describedby=\&quot;modal-box-body-with-dropdown\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Dropdown modal\&quot; labelId=\&quot;modal-with-dropdown\&quot; /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-with-dropdown\&quot;&gt;\n          &lt;div&gt;\n            Set the dropdown &lt;strong&gt;menuAppendTo&lt;/strong&gt; prop to &lt;em&gt;parent&lt;/em&gt; in order to allow the dropdown menu\n            break out of the modal container. You&#39;ll also want to handle closing of the modal yourself, by listening to\n            the &lt;strong&gt;onEscapePress&lt;/strong&gt; callback on the Modal component, so you can close the Dropdown first if\n            it&#39;s open without closing the entire modal.\n          &lt;/div&gt;\n          &lt;br /&gt;\n          &lt;div&gt;\n            &lt;Dropdown\n              isOpen={isDropdownOpen}\n              onSelect={onSelect}\n              onOpenChange={(isOpen: boolean) =&gt; setIsDropdownOpen(isOpen)}\n              toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n                &lt;MenuToggle ref={toggleRef} onClick={handleDropdownToggle} isExpanded={isDropdownOpen}&gt;\n                  Dropdown\n                &lt;/MenuToggle&gt;\n              )}\n            &gt;\n              &lt;DropdownList&gt;\n                &lt;DropdownItem value={0} key=\&quot;action\&quot;&gt;\n                  Action\n                &lt;/DropdownItem&gt;\n                &lt;DropdownItem\n                  value={1}\n                  key=\&quot;link\&quot;\n                  to=\&quot;#default-link2\&quot;\n                  // Prevent the default onClick functionality for example purposes\n                  onClick={(ev: any) =&gt; ev.preventDefault()}\n                &gt;\n                  Link\n                &lt;/DropdownItem&gt;\n                &lt;DropdownItem value={2} isDisabled key=\&quot;disabled action\&quot;&gt;\n                  Disabled Action\n                &lt;/DropdownItem&gt;\n                &lt;DropdownItem value={3} isDisabled key=\&quot;disabled link\&quot; to=\&quot;#default-link4\&quot;&gt;\n                  Disabled Link\n                &lt;/DropdownItem&gt;\n              &lt;/DropdownList&gt;\n            &lt;/Dropdown&gt;\n          &lt;/div&gt;\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-796" data-pf-content="true" class="pf-v6-c-content--h3">With help</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-817" data-pf-content="true" class="pf-v6-c-content--p">To help simplify and explain complex models, add a help <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-797" data-pf-content="true" class="pf-v6-c-content--a">popover</a>. Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.</p>
-<astro-island uid="19hb8N" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from &#39;@patternfly/react-core&#39;;\nimport HelpIcon from &#39;@patternfly/react-icons/dist/esm/icons/help-icon&#39;;\n\nexport const ModalWithHelp: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show with help modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant=\&quot;small\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;with-help-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-with-help\&quot;\n      &gt;\n        &lt;ModalHeader\n          title=\&quot;With help modal\&quot;\n          labelId=\&quot;with-help-modal-title\&quot;\n          help={\n            &lt;Popover\n              headerContent={&lt;div&gt;Help Popover&lt;/div&gt;}\n              bodyContent={\n                &lt;div&gt;\n                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla\n                  turpis.\n                &lt;/div&gt;\n              }\n              footerContent=\&quot;Popover Footer\&quot;\n            &gt;\n              &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;Help\&quot; icon={&lt;HelpIcon /&gt;} /&gt;\n            &lt;/Popover&gt;\n          }\n        /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-with-help\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="19hb8N" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from &#39;@patternfly/react-core&#39;;\nimport HelpIcon from &#39;@patternfly/react-icons/dist/esm/icons/help-icon&#39;;\n\nexport const ModalWithHelp: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show with help modal\n      &lt;/Button&gt;\n      &lt;Modal\n        variant=\&quot;small\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;with-help-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-with-help\&quot;\n      &gt;\n        &lt;ModalHeader\n          title=\&quot;With help modal\&quot;\n          labelId=\&quot;with-help-modal-title\&quot;\n          help={\n            &lt;Popover\n              headerContent={&lt;div&gt;Help Popover&lt;/div&gt;}\n              bodyContent={\n                &lt;div&gt;\n                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla\n                  turpis.\n                &lt;/div&gt;\n              }\n              footerContent=\&quot;Popover Footer\&quot;\n            &gt;\n              &lt;Button variant=\&quot;plain\&quot; aria-label=\&quot;Help\&quot; icon={&lt;HelpIcon /&gt;} /&gt;\n            &lt;/Popover&gt;\n          }\n        /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-with-help\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-798" data-pf-content="true" class="pf-v6-c-content--h3">With form</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-818" data-pf-content="true" class="pf-v6-c-content--p">To collect user input within a modal, you can add a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-799" data-pf-content="true" class="pf-v6-c-content--a">form</a>.</p>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-813" data-pf-content="true" class="pf-v6-c-content--p">To enable form submission from a button in the modal’s footer (outside of the <code>&lt;Form&gt;</code>), set the button’s <code>form</code> property equal to the form’s id.</p>
-<astro-island uid="1Nie4S" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Button,\n  Form,\n  FormGroup,\n  FormGroupLabelHelp,\n  Modal,\n  ModalBody,\n  ModalFooter,\n  ModalHeader,\n  ModalVariant,\n  Popover,\n  TextInput\n} from &#39;@patternfly/react-core&#39;;\n\nexport const ModalWithForm: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setModalOpen] = useState(false);\n  const [nameValue, setNameValue] = useState(&#39;&#39;);\n  const [emailValue, setEmailValue] = useState(&#39;&#39;);\n  const [addressValue, setAddressValue] = useState(&#39;&#39;);\n  const nameLabelHelpRef = useRef(null);\n  const emailLabelHelpRef = useRef(null);\n  const addressLabelHelpRef = useRef(null);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setModalOpen(!isModalOpen);\n  };\n\n  const handleNameInputChange = (_event, value: string) =&gt; {\n    setNameValue(value);\n  };\n\n  const handleEmailInputChange = (_event, value: string) =&gt; {\n    setEmailValue(value);\n  };\n  const handleAddressInputChange = (_event, value: string) =&gt; {\n    setAddressValue(value);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show modal with form\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;form-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-description-form\&quot;\n      &gt;\n        &lt;ModalHeader\n          title=\&quot;Create account\&quot;\n          description=\&quot;Enter your personal information below to create an account.\&quot;\n          descriptorId=\&quot;modal-box-description-form\&quot;\n          labelId=\&quot;form-modal-title\&quot;\n        /&gt;\n        &lt;ModalBody&gt;\n          &lt;Form id=\&quot;modal-with-form-form\&quot;&gt;\n            &lt;FormGroup\n              label=\&quot;Name\&quot;\n              labelHelp={\n                &lt;Popover\n                  triggerRef={nameLabelHelpRef}\n                  headerContent={\n                    &lt;div&gt;\n                      The\n                      &lt;a href=\&quot;https://schema.org/name\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        name\n                      &lt;/a&gt;\n                      of a\n                      &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        Person\n                      &lt;/a&gt;\n                    &lt;/div&gt;\n                  }\n                  bodyContent={\n                    &lt;div&gt;\n                      Often composed of\n                      &lt;a href=\&quot;https://schema.org/givenName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        givenName\n                      &lt;/a&gt;\n                      and\n                      &lt;a href=\&quot;https://schema.org/familyName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        familyName\n                      &lt;/a&gt;\n                      .\n                    &lt;/div&gt;\n                  }\n                &gt;\n                  &lt;FormGroupLabelHelp ref={nameLabelHelpRef} aria-label=\&quot;More info for name field\&quot; /&gt;\n                &lt;/Popover&gt;\n              }\n              isRequired\n              fieldId=\&quot;modal-with-form-form-name\&quot;\n            &gt;\n              &lt;TextInput\n                isRequired\n                type=\&quot;email\&quot;\n                id=\&quot;modal-with-form-form-name\&quot;\n                name=\&quot;modal-with-form-form-name\&quot;\n                value={nameValue}\n                onChange={handleNameInputChange}\n              /&gt;\n            &lt;/FormGroup&gt;\n            &lt;FormGroup\n              label=\&quot;E-mail\&quot;\n              labelHelp={\n                &lt;Popover\n                  triggerRef={emailLabelHelpRef}\n                  headerContent={\n                    &lt;div&gt;\n                      The\n                      &lt;a href=\&quot;https://schema.org/email\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        e-mail\n                      &lt;/a&gt;\n                      of a\n                      &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        person\n                      &lt;/a&gt;\n                    &lt;/div&gt;\n                  }\n                  bodyContent={\n                    &lt;div&gt;\n                      Valid\n                      &lt;a href=\&quot;https://schema.org/email\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        e-mail\n                      &lt;/a&gt;\n                      address.\n                    &lt;/div&gt;\n                  }\n                &gt;\n                  &lt;FormGroupLabelHelp ref={emailLabelHelpRef} aria-label=\&quot;More info for e-mail field\&quot; /&gt;\n                &lt;/Popover&gt;\n              }\n              isRequired\n              fieldId=\&quot;modal-with-form-form-email\&quot;\n            &gt;\n              &lt;TextInput\n                isRequired\n                type=\&quot;email\&quot;\n                id=\&quot;modal-with-form-form-email\&quot;\n                name=\&quot;modal-with-form-form-email\&quot;\n                value={emailValue}\n                onChange={handleEmailInputChange}\n              /&gt;\n            &lt;/FormGroup&gt;\n            &lt;FormGroup\n              label=\&quot;Address\&quot;\n              labelHelp={\n                &lt;Popover\n                  triggerRef={addressLabelHelpRef}\n                  headerContent={\n                    &lt;div&gt;\n                      The\n                      &lt;a href=\&quot;https://schema.org/address\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        address\n                      &lt;/a&gt;\n                      of a\n                      &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        person\n                      &lt;/a&gt;\n                    &lt;/div&gt;\n                  }\n                  bodyContent={\n                    &lt;div&gt;\n                      Valid\n                      &lt;a href=\&quot;https://schema.org/PostalAddress\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        postal address.\n                      &lt;/a&gt;\n                    &lt;/div&gt;\n                  }\n                &gt;\n                  &lt;FormGroupLabelHelp ref={addressLabelHelpRef} aria-label=\&quot;More info for address field\&quot; /&gt;\n                &lt;/Popover&gt;\n              }\n              isRequired\n              fieldId=\&quot;modal-with-form-form-address\&quot;\n            &gt;\n              &lt;TextInput\n                isRequired\n                type=\&quot;email\&quot;\n                id=\&quot;modal-with-form-form-address\&quot;\n                name=\&quot;modal-with-form-form-address\&quot;\n                value={addressValue}\n                onChange={handleAddressInputChange}\n              /&gt;\n            &lt;/FormGroup&gt;\n          &lt;/Form&gt;\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;create\&quot; variant=\&quot;primary\&quot; form=\&quot;modal-with-form-form\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="1Nie4S" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useRef, useState } from &#39;react&#39;;\nimport {\n  Button,\n  Form,\n  FormGroup,\n  FormGroupLabelHelp,\n  Modal,\n  ModalBody,\n  ModalFooter,\n  ModalHeader,\n  ModalVariant,\n  Popover,\n  TextInput\n} from &#39;@patternfly/react-core&#39;;\n\nexport const ModalWithForm: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setModalOpen] = useState(false);\n  const [nameValue, setNameValue] = useState(&#39;&#39;);\n  const [emailValue, setEmailValue] = useState(&#39;&#39;);\n  const [addressValue, setAddressValue] = useState(&#39;&#39;);\n  const nameLabelHelpRef = useRef(null);\n  const emailLabelHelpRef = useRef(null);\n  const addressLabelHelpRef = useRef(null);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setModalOpen(!isModalOpen);\n  };\n\n  const handleNameInputChange = (_event, value: string) =&gt; {\n    setNameValue(value);\n  };\n\n  const handleEmailInputChange = (_event, value: string) =&gt; {\n    setEmailValue(value);\n  };\n  const handleAddressInputChange = (_event, value: string) =&gt; {\n    setAddressValue(value);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n        Show modal with form\n      &lt;/Button&gt;\n      &lt;Modal\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;form-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-description-form\&quot;\n      &gt;\n        &lt;ModalHeader\n          title=\&quot;Create account\&quot;\n          description=\&quot;Enter your personal information below to create an account.\&quot;\n          descriptorId=\&quot;modal-box-description-form\&quot;\n          labelId=\&quot;form-modal-title\&quot;\n        /&gt;\n        &lt;ModalBody&gt;\n          &lt;Form id=\&quot;modal-with-form-form\&quot;&gt;\n            &lt;FormGroup\n              label=\&quot;Name\&quot;\n              labelHelp={\n                &lt;Popover\n                  triggerRef={nameLabelHelpRef}\n                  headerContent={\n                    &lt;div&gt;\n                      The\n                      &lt;a href=\&quot;https://schema.org/name\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        name\n                      &lt;/a&gt;\n                      of a\n                      &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        Person\n                      &lt;/a&gt;\n                    &lt;/div&gt;\n                  }\n                  bodyContent={\n                    &lt;div&gt;\n                      Often composed of\n                      &lt;a href=\&quot;https://schema.org/givenName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        givenName\n                      &lt;/a&gt;\n                      and\n                      &lt;a href=\&quot;https://schema.org/familyName\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        familyName\n                      &lt;/a&gt;\n                      .\n                    &lt;/div&gt;\n                  }\n                &gt;\n                  &lt;FormGroupLabelHelp ref={nameLabelHelpRef} aria-label=\&quot;More info for name field\&quot; /&gt;\n                &lt;/Popover&gt;\n              }\n              isRequired\n              fieldId=\&quot;modal-with-form-form-name\&quot;\n            &gt;\n              &lt;TextInput\n                isRequired\n                type=\&quot;email\&quot;\n                id=\&quot;modal-with-form-form-name\&quot;\n                name=\&quot;modal-with-form-form-name\&quot;\n                value={nameValue}\n                onChange={handleNameInputChange}\n              /&gt;\n            &lt;/FormGroup&gt;\n            &lt;FormGroup\n              label=\&quot;E-mail\&quot;\n              labelHelp={\n                &lt;Popover\n                  triggerRef={emailLabelHelpRef}\n                  headerContent={\n                    &lt;div&gt;\n                      The\n                      &lt;a href=\&quot;https://schema.org/email\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        e-mail\n                      &lt;/a&gt;\n                      of a\n                      &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        person\n                      &lt;/a&gt;\n                    &lt;/div&gt;\n                  }\n                  bodyContent={\n                    &lt;div&gt;\n                      Valid\n                      &lt;a href=\&quot;https://schema.org/email\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        e-mail\n                      &lt;/a&gt;\n                      address.\n                    &lt;/div&gt;\n                  }\n                &gt;\n                  &lt;FormGroupLabelHelp ref={emailLabelHelpRef} aria-label=\&quot;More info for e-mail field\&quot; /&gt;\n                &lt;/Popover&gt;\n              }\n              isRequired\n              fieldId=\&quot;modal-with-form-form-email\&quot;\n            &gt;\n              &lt;TextInput\n                isRequired\n                type=\&quot;email\&quot;\n                id=\&quot;modal-with-form-form-email\&quot;\n                name=\&quot;modal-with-form-form-email\&quot;\n                value={emailValue}\n                onChange={handleEmailInputChange}\n              /&gt;\n            &lt;/FormGroup&gt;\n            &lt;FormGroup\n              label=\&quot;Address\&quot;\n              labelHelp={\n                &lt;Popover\n                  triggerRef={addressLabelHelpRef}\n                  headerContent={\n                    &lt;div&gt;\n                      The\n                      &lt;a href=\&quot;https://schema.org/address\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        address\n                      &lt;/a&gt;\n                      of a\n                      &lt;a href=\&quot;https://schema.org/Person\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        person\n                      &lt;/a&gt;\n                    &lt;/div&gt;\n                  }\n                  bodyContent={\n                    &lt;div&gt;\n                      Valid\n                      &lt;a href=\&quot;https://schema.org/PostalAddress\&quot; target=\&quot;_blank\&quot; rel=\&quot;noopener noreferrer\&quot;&gt;\n                        postal address.\n                      &lt;/a&gt;\n                    &lt;/div&gt;\n                  }\n                &gt;\n                  &lt;FormGroupLabelHelp ref={addressLabelHelpRef} aria-label=\&quot;More info for address field\&quot; /&gt;\n                &lt;/Popover&gt;\n              }\n              isRequired\n              fieldId=\&quot;modal-with-form-form-address\&quot;\n            &gt;\n              &lt;TextInput\n                isRequired\n                type=\&quot;email\&quot;\n                id=\&quot;modal-with-form-form-address\&quot;\n                name=\&quot;modal-with-form-form-address\&quot;\n                value={addressValue}\n                onChange={handleAddressInputChange}\n              /&gt;\n            &lt;/FormGroup&gt;\n          &lt;/Form&gt;\n        &lt;/ModalBody&gt;\n        &lt;ModalFooter&gt;\n          &lt;Button key=\&quot;create\&quot; variant=\&quot;primary\&quot; form=\&quot;modal-with-form-form\&quot; onClick={handleModalToggle}&gt;\n            Confirm\n          &lt;/Button&gt;\n          &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n            Cancel\n          &lt;/Button&gt;\n        &lt;/ModalFooter&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-800" data-pf-content="true" class="pf-v6-c-content--h3">Custom focus</h3>
 <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-814" data-pf-content="true" class="pf-v6-c-content--p">To customize which element inside the modal receives focus when initially opened, use the <code>elementToFocus</code> property`.</p>
-<astro-island uid="pkew3" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalCustomFocus: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle} ouiaId=\&quot;ShowBasicModal\&quot;&gt;\n        Show modal with custom focus\n      &lt;/Button&gt;\n      &lt;Modal\n        elementToFocus=\&quot;#modal-custom-focus-confirm-button\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;custom-focus-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-custom-focus\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Modal with custom focus\&quot; labelId=\&quot;custom-focus-modal-title\&quot; /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-custom-focus\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n          &lt;ModalFooter&gt;\n            &lt;Button id=\&quot;modal-custom-focus-confirm-button\&quot; key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n              Confirm\n            &lt;/Button&gt;\n            &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n              Cancel\n            &lt;/Button&gt;\n          &lt;/ModalFooter&gt;\n        &lt;/ModalBody&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z7z6k0" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Modal&quot;],[0,&quot;ModalBody&quot;],[0,&quot;ModalHeader&quot;],[0,&quot;ModalFooter&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/modal/react/&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-777" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
+<astro-island uid="pkew3" component-url="/_astro/LiveExample.C43dqXje.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from &#39;@patternfly/react-core&#39;;\n\nexport const ModalCustomFocus: React.FunctionComponent = () =&gt; {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) =&gt; {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    &lt;Fragment&gt;\n      &lt;Button variant=\&quot;primary\&quot; onClick={handleModalToggle} ouiaId=\&quot;ShowBasicModal\&quot;&gt;\n        Show modal with custom focus\n      &lt;/Button&gt;\n      &lt;Modal\n        elementToFocus=\&quot;#modal-custom-focus-confirm-button\&quot;\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\&quot;custom-focus-modal-title\&quot;\n        aria-describedby=\&quot;modal-box-body-custom-focus\&quot;\n      &gt;\n        &lt;ModalHeader title=\&quot;Modal with custom focus\&quot; labelId=\&quot;custom-focus-modal-title\&quot; /&gt;\n        &lt;ModalBody id=\&quot;modal-box-body-custom-focus\&quot;&gt;\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n          &lt;ModalFooter&gt;\n            &lt;Button id=\&quot;modal-custom-focus-confirm-button\&quot; key=\&quot;confirm\&quot; variant=\&quot;primary\&quot; onClick={handleModalToggle}&gt;\n              Confirm\n            &lt;/Button&gt;\n            &lt;Button key=\&quot;cancel\&quot; variant=\&quot;link\&quot; onClick={handleModalToggle}&gt;\n              Cancel\n            &lt;/Button&gt;\n          &lt;/ModalFooter&gt;\n        &lt;/ModalBody&gt;\n      &lt;/Modal&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="Z7z6k0" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Modal&quot;],[0,&quot;ModalBody&quot;],[0,&quot;ModalHeader&quot;],[0,&quot;ModalFooter&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/modal/react/&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-777" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
 CSS variables
 </h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="DQSP6" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,false],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-modal-box&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div></div></div></div> </div></section>   </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>