@patternfly/patternfly-doc-core 1.9.1 → 1.10.0

package/cli/convertToMDX.ts

@@ -1,32 +1,87 @@
-import { readFile, writeFile } from 'fs/promises'
+import { readFile, writeFile, unlink } from 'fs/promises'
 import { glob } from 'glob'
+import path from 'path'
 
-export async function convertToMDX(globPath: string) {
-  const files = await glob(globPath)
+function handleTsExamples(content: string): string {
+  //regex link: https://regexr.com/8f0bu
+  const ExampleBlockRegex = /```[tj]s file=['"]\.?\/?(\w*)\.(\w*)['"]\s*\n```/g
+
+  //the first capture group is the example file name without the extension or path, the second is the extension
+  const replacementString = `\nimport $1 from "./$1.$2?raw"\n\n<LiveExample src={$1} />`
+  return content.replace(ExampleBlockRegex, replacementString)
+}
+
+async function handleHTMLExamples(
+  content: string,
+  fileDir: string,
+): Promise<string> {
+  const htmlCodeFenceRegex = /```html\n([\s\S]*?)\n```/g
+  const matches = Array.from(content.matchAll(htmlCodeFenceRegex))
 
-  files.forEach(async (file) => {
-    const fileContent = await readFile(file, 'utf-8')
+  const replacements = await Promise.all(
+    matches.map(async (match, index) => {
+      const htmlContent = match[1]
+      const exampleName = `Example${index + 1}`
+      const htmlFilePath = path.join(fileDir, `${exampleName}.html`)
 
-    //regex link: https://regexr.com/8f0er
-    const importRegex = /(?<!```no[lL]ive\n)import {?[\w\s,\n]*}?.*\n/g
+      await writeFile(htmlFilePath, htmlContent)
 
-    //removes all top level imports from the md file that the old docs framework used to determine what imports are needed
-    const withoutImports = fileContent.replace(importRegex, '')
+      return {
+        original: match[0],
+        replacement: `\nimport ${exampleName} from './${exampleName}.html?raw'\n\n<LiveExample html={${exampleName}} />`,
+      }
+    }),
+  )
 
-    //regex link: https://regexr.com/8f0bu
-    const ExampleBlockRegex =
-      /```[tj]s file=['"]\.?\/?(\w*)\.(\w*)['"]\s*\n```/g
+  return replacements.reduce(
+    (result, { original, replacement }) =>
+      result.replace(original, replacement),
+    content,
+  )
+}
 
-    //the first capture group is the example file name without the extension or path, the second is the extension
-    const replacementString = `\nimport $1 from "./$1.$2?raw"\n\n<LiveExample src={$1} />`
-    const examplesConvertedToMDX = withoutImports.replace(
-      ExampleBlockRegex,
-      replacementString,
-    )
+function removeNoLiveTags(content: string): string {
+  return content.replace(/```no[lL]ive/g, '```')
+}
 
-    //we want to strip the nolive/noLive tags from codeblocks as that was custom to the old docs framework
-    const noLiveRemoved = examplesConvertedToMDX.replace(/```no[lL]ive/g, '```')
+function removeExistingImports(content: string): string {
+  // Remove imports that don't end in .css
+  const importRegex = /^import {?[\w\s,\n]*}? from ['"](?!.*\.css['"])[^'"]*['"]\n/gm
+  return content.replace(importRegex, '')
+}
 
-    await writeFile(file + 'x', noLiveRemoved)
-  })
+function convertCommentsToMDX(content: string): string {
+  return content.replace(
+    /<!--([\s\S]*?)-->/g,
+    (_, comment) => `{/*${comment}*/}`,
+  )
+}
+
+async function processFile(file: string): Promise<void> {
+  const fileContent = await readFile(file, 'utf-8')
+  const fileDir = path.dirname(file)
+
+  const transformations = [
+    removeNoLiveTags,
+    removeExistingImports,
+    (content: string) => handleHTMLExamples(content, fileDir),
+    handleTsExamples,
+    convertCommentsToMDX,
+  ]
+
+  const processedContent = await transformations.reduce(
+    async (contentPromise, transform) => {
+      const content = await contentPromise
+      return transform(content)
+    },
+    Promise.resolve(fileContent),
+  )
+
+  await writeFile(file + 'x', processedContent)
+  await unlink(file)
+}
+
+export async function convertToMDX(globPath: string): Promise<void> {
+  const files = await glob(globPath)
+  await Promise.all(files.map(processFile))
 }

package/dist/cli/convertToMDX.js

@@ -1,20 +1,57 @@
-import { readFile, writeFile } from 'fs/promises';
+import { readFile, writeFile, unlink } from 'fs/promises';
 import { glob } from 'glob';
+import path from 'path';
+function handleTsExamples(content) {
+    //regex link: https://regexr.com/8f0bu
+    const ExampleBlockRegex = /```[tj]s file=['"]\.?\/?(\w*)\.(\w*)['"]\s*\n```/g;
+    //the first capture group is the example file name without the extension or path, the second is the extension
+    const replacementString = `\nimport $1 from "./$1.$2?raw"\n\n<LiveExample src={$1} />`;
+    return content.replace(ExampleBlockRegex, replacementString);
+}
+async function handleHTMLExamples(content, fileDir) {
+    const htmlCodeFenceRegex = /```html\n([\s\S]*?)\n```/g;
+    const matches = Array.from(content.matchAll(htmlCodeFenceRegex));
+    const replacements = await Promise.all(matches.map(async (match, index) => {
+        const htmlContent = match[1];
+        const exampleName = `Example${index + 1}`;
+        const htmlFilePath = path.join(fileDir, `${exampleName}.html`);
+        await writeFile(htmlFilePath, htmlContent);
+        return {
+            original: match[0],
+            replacement: `\nimport ${exampleName} from './${exampleName}.html?raw'\n\n<LiveExample html={${exampleName}} />`,
+        };
+    }));
+    return replacements.reduce((result, { original, replacement }) => result.replace(original, replacement), content);
+}
+function removeNoLiveTags(content) {
+    return content.replace(/```no[lL]ive/g, '```');
+}
+function removeExistingImports(content) {
+    // Remove imports that don't end in .css
+    const importRegex = /^import {?[\w\s,\n]*}? from ['"](?!.*\.css['"])[^'"]*['"]\n/gm;
+    return content.replace(importRegex, '');
+}
+function convertCommentsToMDX(content) {
+    return content.replace(/<!--([\s\S]*?)-->/g, (_, comment) => `{/*${comment}*/}`);
+}
+async function processFile(file) {
+    const fileContent = await readFile(file, 'utf-8');
+    const fileDir = path.dirname(file);
+    const transformations = [
+        removeNoLiveTags,
+        removeExistingImports,
+        (content) => handleHTMLExamples(content, fileDir),
+        handleTsExamples,
+        convertCommentsToMDX,
+    ];
+    const processedContent = await transformations.reduce(async (contentPromise, transform) => {
+        const content = await contentPromise;
+        return transform(content);
+    }, Promise.resolve(fileContent));
+    await writeFile(file + 'x', processedContent);
+    await unlink(file);
+}
 export async function convertToMDX(globPath) {
     const files = await glob(globPath);
-    files.forEach(async (file) => {
-        const fileContent = await readFile(file, 'utf-8');
-        //regex link: https://regexr.com/8f0er
-        const importRegex = /(?<!```no[lL]ive\n)import {?[\w\s,\n]*}?.*\n/g;
-        //removes all top level imports from the md file that the old docs framework used to determine what imports are needed
-        const withoutImports = fileContent.replace(importRegex, '');
-        //regex link: https://regexr.com/8f0bu
-        const ExampleBlockRegex = /```[tj]s file=['"]\.?\/?(\w*)\.(\w*)['"]\s*\n```/g;
-        //the first capture group is the example file name without the extension or path, the second is the extension
-        const replacementString = `\nimport $1 from "./$1.$2?raw"\n\n<LiveExample src={$1} />`;
-        const examplesConvertedToMDX = withoutImports.replace(ExampleBlockRegex, replacementString);
-        //we want to strip the nolive/noLive tags from codeblocks as that was custom to the old docs framework
-        const noLiveRemoved = examplesConvertedToMDX.replace(/```no[lL]ive/g, '```');
-        await writeFile(file + 'x', noLiveRemoved);
-    });
+    await Promise.all(files.map(processFile));
 }

package/dist/client/_astro/{LiveExample.DZkxbJA_.js → LiveExample.DjPiO80i.js}

@@ -256,4 +256,4 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
       monaco.config({ paths: { vs: '...' } })
 
     For more please check the link https://github.com/suren-atoyan/monaco-loader#config
-  `},oo=SG2(OG2)(LH),PG2={config:BG2},HG2=function(){for(var t=arguments.length,o=new Array(t),c=0;c<t;c++)o[c]=arguments[c];return function(l){return o.reduceRight(function(r,i){return i(r)},l)}};function BH(a,t){return Object.keys(t).forEach(function(o){t[o]instanceof Object&&a[o]&&Object.assign(t[o],BH(a[o],t[o]))}),Q4(Q4({},a),t)}var EG2={type:"cancelation",msg:"operation is manually canceled"};function ka(a){var t=!1,o=new Promise(function(c,l){a.then(function(r){return t?l(EG2):c(r)}),a.catch(l)});return o.cancel=function(){return t=!0},o}var VG2=wG2.create({config:yG2,isInitialized:!1,resolve:null,reject:null,monaco:null}),MH=lG2(VG2,2),p6=MH[0],sa=MH[1];function TG2(a){var t=PG2.config(a),o=t.monaco,c=cG2(t,["monaco"]);sa(function(l){return{config:BH(l.config,c),monaco:o}})}function AG2(){var a=p6(function(t){var o=t.monaco,c=t.isInitialized,l=t.resolve;return{monaco:o,isInitialized:c,resolve:l}});if(!a.isInitialized){if(sa({isInitialized:!0}),a.monaco)return a.resolve(a.monaco),ka(wa);if(window.monaco&&window.monaco.editor)return OH(window.monaco),a.resolve(window.monaco),ka(wa);HG2(FG2,WG2)(NG2)}return ka(wa)}function FG2(a){return document.body.appendChild(a)}function jG2(a){var t=document.createElement("script");return a&&(t.src=a),t}function WG2(a){var t=p6(function(c){var l=c.config,r=c.reject;return{config:l,reject:r}}),o=jG2("".concat(t.config.paths.vs,"/loader.js"));return o.onload=function(){return a()},o.onerror=t.reject,o}function NG2(){var a=p6(function(o){var c=o.config,l=o.resolve,r=o.reject;return{config:c,resolve:l,reject:r}}),t=window.require;t.config(a.config),t(["vs/editor/editor.main"],function(o){OH(o),a.resolve(o)},function(o){a.reject(o)})}function OH(a){p6().monaco||sa({monaco:a})}function DG2(){return p6(function(a){var t=a.monaco;return t})}var wa=new Promise(function(a,t){return sa({resolve:a,reject:t})}),PH={config:TG2,init:AG2,__getMonacoInstance:DG2},RG2={wrapper:{display:"flex",position:"relative",textAlign:"initial"},fullWidth:{width:"100%"},hide:{display:"none"}},ya=RG2,GG2={container:{display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"}},ZG2=GG2;function UG2({children:a}){return i2.createElement("div",{style:ZG2.container},a)}var qG2=UG2,XG2=qG2;function $G2({width:a,height:t,isEditorReady:o,loading:c,_ref:l,className:r,wrapperProps:i}){return i2.createElement("section",{style:{...ya.wrapper,width:a,height:t},...i},!o&&i2.createElement(XG2,null,c),i2.createElement("div",{ref:l,style:{...ya.fullWidth,...!o&&ya.hide},className:r}))}var KG2=$G2,HH=m.memo(KG2);function YG2(a){m.useEffect(a,[])}var EH=YG2;function JG2(a,t,o=!0){let c=m.useRef(!0);m.useEffect(c.current||!o?()=>{c.current=!1}:a,t)}var r2=JG2;function De(){}function ie(a,t,o,c){return QG2(a,c)||eZ2(a,t,o,c)}function QG2(a,t){return a.editor.getModel(VH(a,t))}function eZ2(a,t,o,c){return a.editor.createModel(t,o,c?VH(a,c):void 0)}function VH(a,t){return a.Uri.parse(t)}function aZ2({original:a,modified:t,language:o,originalLanguage:c,modifiedLanguage:l,originalModelPath:r,modifiedModelPath:i,keepCurrentOriginalModel:s=!1,keepCurrentModifiedModel:p=!1,theme:v="light",loading:d="Loading...",options:f={},height:g="100%",width:h="100%",className:u,wrapperProps:x={},beforeMount:C=De,onMount:z=De}){let[w,I]=m.useState(!1),[k,S]=m.useState(!0),T=m.useRef(null),P=m.useRef(null),V=m.useRef(null),L=m.useRef(z),M=m.useRef(C),y=m.useRef(!1);EH(()=>{let E=PH.init();return E.then(F=>(P.current=F)&&S(!1)).catch(F=>F?.type!=="cancelation"&&console.error("Monaco initialization: error:",F)),()=>T.current?O():E.cancel()}),r2(()=>{if(T.current&&P.current){let E=T.current.getOriginalEditor(),F=ie(P.current,a||"",c||o||"text",r||"");F!==E.getModel()&&E.setModel(F)}},[r],w),r2(()=>{if(T.current&&P.current){let E=T.current.getModifiedEditor(),F=ie(P.current,t||"",l||o||"text",i||"");F!==E.getModel()&&E.setModel(F)}},[i],w),r2(()=>{let E=T.current.getModifiedEditor();E.getOption(P.current.editor.EditorOption.readOnly)?E.setValue(t||""):t!==E.getValue()&&(E.executeEdits("",[{range:E.getModel().getFullModelRange(),text:t||"",forceMoveMarkers:!0}]),E.pushUndoStop())},[t],w),r2(()=>{T.current?.getModel()?.original.setValue(a||"")},[a],w),r2(()=>{let{original:E,modified:F}=T.current.getModel();P.current.editor.setModelLanguage(E,c||o||"text"),P.current.editor.setModelLanguage(F,l||o||"text")},[o,c,l],w),r2(()=>{P.current?.editor.setTheme(v)},[v],w),r2(()=>{T.current?.updateOptions(f)},[f],w);let B=m.useCallback(()=>{if(!P.current)return;M.current(P.current);let E=ie(P.current,a||"",c||o||"text",r||""),F=ie(P.current,t||"",l||o||"text",i||"");T.current?.setModel({original:E,modified:F})},[o,t,l,a,c,r,i]),A=m.useCallback(()=>{!y.current&&V.current&&(T.current=P.current.editor.createDiffEditor(V.current,{automaticLayout:!0,...f}),B(),P.current?.editor.setTheme(v),I(!0),y.current=!0)},[f,v,B]);m.useEffect(()=>{w&&L.current(T.current,P.current)},[w]),m.useEffect(()=>{!k&&!w&&A()},[k,w,A]);function O(){let E=T.current?.getModel();s||E?.original?.dispose(),p||E?.modified?.dispose(),T.current?.dispose()}return i2.createElement(HH,{width:h,height:g,isEditorReady:w,loading:d,_ref:V,className:u,wrapperProps:x})}var tZ2=aZ2;m.memo(tZ2);function oZ2(a){let t=m.useRef();return m.useEffect(()=>{t.current=a},[a]),t.current}var nZ2=oZ2,z6=new Map;function cZ2({defaultValue:a,defaultLanguage:t,defaultPath:o,value:c,language:l,path:r,theme:i="light",line:s,loading:p="Loading...",options:v={},overrideServices:d={},saveViewState:f=!0,keepCurrentModel:g=!1,width:h="100%",height:u="100%",className:x,wrapperProps:C={},beforeMount:z=De,onMount:w=De,onChange:I,onValidate:k=De}){let[S,T]=m.useState(!1),[P,V]=m.useState(!0),L=m.useRef(null),M=m.useRef(null),y=m.useRef(null),B=m.useRef(w),A=m.useRef(z),O=m.useRef(),E=m.useRef(c),F=nZ2(r),X=m.useRef(!1),N=m.useRef(!1);EH(()=>{let q=PH.init();return q.then($=>(L.current=$)&&V(!1)).catch($=>$?.type!=="cancelation"&&console.error("Monaco initialization: error:",$)),()=>M.current?U():q.cancel()}),r2(()=>{let q=ie(L.current,a||c||"",t||l||"",r||o||"");q!==M.current?.getModel()&&(f&&z6.set(F,M.current?.saveViewState()),M.current?.setModel(q),f&&M.current?.restoreViewState(z6.get(r)))},[r],S),r2(()=>{M.current?.updateOptions(v)},[v],S),r2(()=>{!M.current||c===void 0||(M.current.getOption(L.current.editor.EditorOption.readOnly)?M.current.setValue(c):c!==M.current.getValue()&&(N.current=!0,M.current.executeEdits("",[{range:M.current.getModel().getFullModelRange(),text:c,forceMoveMarkers:!0}]),M.current.pushUndoStop(),N.current=!1))},[c],S),r2(()=>{let q=M.current?.getModel();q&&l&&L.current?.editor.setModelLanguage(q,l)},[l],S),r2(()=>{s!==void 0&&M.current?.revealLine(s)},[s],S),r2(()=>{L.current?.editor.setTheme(i)},[i],S);let R=m.useCallback(()=>{if(!(!y.current||!L.current)&&!X.current){A.current(L.current);let q=r||o,$=ie(L.current,c||a||"",t||l||"",q||"");M.current=L.current?.editor.create(y.current,{model:$,automaticLayout:!0,...v},d),f&&M.current.restoreViewState(z6.get(q)),L.current.editor.setTheme(i),s!==void 0&&M.current.revealLine(s),T(!0),X.current=!0}},[a,t,o,c,l,r,v,d,f,i,s]);m.useEffect(()=>{S&&B.current(M.current,L.current)},[S]),m.useEffect(()=>{!P&&!S&&R()},[P,S,R]),E.current=c,m.useEffect(()=>{S&&I&&(O.current?.dispose(),O.current=M.current?.onDidChangeModelContent(q=>{N.current||I(M.current.getValue(),q)}))},[S,I]),m.useEffect(()=>{if(S){let q=L.current.editor.onDidChangeMarkers($=>{let J=M.current.getModel()?.uri;if(J&&$.find(a1=>a1.path===J.path)){let a1=L.current.editor.getModelMarkers({resource:J});k?.(a1)}});return()=>{q?.dispose()}}return()=>{}},[S,k]);function U(){O.current?.dispose(),g?f&&z6.set(r,M.current.saveViewState()):M.current.getModel()?.dispose(),M.current.dispose()}return i2.createElement(HH,{width:h,height:u,isEditorReady:S,loading:p,_ref:y,className:x,wrapperProps:C})}var lZ2=cZ2,rZ2=m.memo(lZ2),iZ2=rZ2;const TH=m.createContext(null),W2=a=>{var{icon:t,className:o,"aria-label":c,onClick:l=()=>{},isVisible:r=!0,tooltipProps:i={}}=a,s=b(a,["icon","className","aria-label","onClick","isVisible","tooltipProps"]);const p=m.useContext(TH),v=d=>{l(p.code,d)};return r?n.jsx(G1,Object.assign({},i,{children:n.jsx(Y,Object.assign({className:o,onClick:v,variant:"plain","aria-label":c},s,{icon:t}))})):null};W2.displayName="CodeEditorControl";var o2;(function(a){a.abap="abap",a.aes="aes",a.apex="apex",a.azcli="azcli",a.bat="bat",a.bicep="bicep",a.c="c",a.cameligo="cameligo",a.clojure="clojure",a.coffeescript="coffeescript",a.cpp="cpp",a.csharp="csharp",a.csp="csp",a.css="css",a.dart="dart",a.dockerfile="dockerfile",a.ecl="ecl",a.elixir="elixir",a.fsharp="fsharp",a.go="go",a.graphql="graphql",a.handlebars="handlebars",a.hcl="hcl",a.html="html",a.ini="ini",a.java="java",a.javascript="javascript",a.json="json",a.julia="julia",a.kotlin="kotlin",a.less="less",a.lexon="lexon",a.liquid="liquid",a.lua="lua",a.m3="m3",a.markdown="markdown",a.mips="mips",a.msdax="msdax",a.mysql="mysql",a["objective-c"]="objective-c",a.pascal="pascal",a.pascaligo="pascaligo",a.perl="perl",a.pgsql="pgsql",a.php="php",a.plaintext="plaintext",a.postiats="postiats",a.powerquery="powerquery",a.powershell="powershell",a.pug="pug",a.python="python",a.r="r",a.razor="razor",a.redis="redis",a.redshift="redshift",a.restructuredtext="restructuredtext",a.ruby="ruby",a.rust="rust",a.sb="sb",a.scala="scala",a.scheme="scheme",a.scss="scss",a.shell="shell",a.sol="sol",a.sql="sql",a.st="st",a.swift="swift",a.systemverilog="systemverilog",a.tcl="tcl",a.twig="twig",a.typescript="typescript",a.vb="vb",a.verilog="verilog",a.xml="xml",a.yaml="yaml"})(o2||(o2={}));const sZ2=a=>{switch(a){case o2.shell:return"sh";case o2.ruby:return"rb";case o2.perl:return"pl";case o2.python:return"py";case o2.mysql:return"sql";case o2.javascript:return"js";case o2.typescript:return"ts";case o2.markdown:return"md";case o2.plaintext:return"txt";default:return a.toString()}},_Z2=(a,t)=>{const o=document.createElement("a");o.href=URL.createObjectURL(new Blob([a],{type:"text"})),o.download=t,o.click()},AH=({className:a="",code:t="",copyButtonAriaLabel:o="Copy code to clipboard",copyButtonSuccessTooltipText:c="Content added to clipboard",copyButtonToolTipText:l="Copy to clipboard",customControls:r=null,downloadButtonAriaLabel:i="Download code",downloadButtonToolTipText:s="Download",downloadFileName:p=Date.now().toString(),editorProps:v,emptyState:d="",emptyStateBody:f="Drag and drop a file or upload one.",emptyStateButton:g="Browse",emptyStateLink:h="Start from scratch",emptyStateTitle:u="Start editing",headerMainContent:x="",height:C,isCopyEnabled:z=!1,isDarkTheme:w=!1,isDownloadEnabled:I=!1,isFullHeight:k=!1,isHeaderPlain:S=!1,isLanguageLabelVisible:T=!1,isLineNumbersVisible:P=!0,isMinimapVisible:V=!1,isReadOnly:L=!1,isUploadEnabled:M=!1,language:y=o2.plaintext,loading:B="",onChange:A=()=>{},onCodeChange:O=()=>{},onDownload:E=_Z2,onEditorDidMount:F=()=>{},options:X={},overrideServices:N={},shortcutsPopoverButtonText:R="View Shortcuts",shortcutsPopoverProps:U={bodyContent:"","aria-label":"Keyboard Shortcuts"},showEditor:q=!0,toolTipCopyExitDelay:$=1600,toolTipDelay:J=300,toolTipMaxWidth:a1="100px",toolTipPosition:o1="top",uploadButtonAriaLabel:s1="Upload code",uploadButtonToolTipText:I1="Upload",width:m1=""})=>{const[u1,k1]=m.useState(t),[w1,v1]=m.useState(!1),[C1,x1]=m.useState(!0),[b1,B1]=m.useState(!1),i1=m.useRef(null),e1=m.useRef(null),G=m.useRef(null),W=m.useRef(()=>{}),H=()=>{var _1,y1,W1;const d2=(_1=i1.current)===null||_1===void 0?void 0:_1.getContentHeight(),Ee=(y1=i1.current)===null||y1===void 0?void 0:y1.getLayoutInfo();(W1=i1.current)===null||W1===void 0||W1.layout({width:Ee.width,height:d2})},Z=(_1,y1)=>{C==="sizeToFit"&&H(),A&&A(_1,y1),k1(_1),O(_1)},D=()=>{i1.current&&(i1.current.layout({width:0,height:0}),i1.current.layout())},j=_1=>{var y1;e1.current===document.activeElement&&(_1.key==="ArrowDown"||_1.key===" ")&&((y1=i1.current)===null||y1===void 0||y1.focus(),_1.preventDefault())};m.useEffect(()=>k1(t),[t]),m.useEffect(()=>(document.addEventListener("keydown",j),W.current=G2(G.current,D,!0),D(),()=>{document.removeEventListener("keydown",j),W.current()}),[]);const K=(_1,y1)=>{_1.addCommand(y1.KeyMod.Shift|y1.KeyCode.Tab,()=>e1.current.focus()),Array.from(document.getElementsByClassName("monaco-editor")).forEach(W1=>W1.removeAttribute("role")),F(_1,y1),i1.current=_1,C==="sizeToFit"&&H()},n1=_1=>{k1(_1),O(_1)},p1=()=>v1(!0),z1=()=>v1(!1),Z1=_1=>new Promise((y1,W1)=>{const d2=new FileReader;d2.onload=()=>y1(d2.result),d2.onerror=()=>W1(d2.error),d2.readAsText(_1)}),K1=_1=>{if(_1.length>0){const y1=_1[0];n1(""),p1(),Z1(y1).then(W1=>{z1(),x1(!1),n1(W1)}).catch(W1=>{console.error("error",W1),z1(),n1("")})}},k2=_1=>{_1.length>0&&console.error("There was an error accepting that dropped file")},C2=()=>{navigator.clipboard.writeText(u1),B1(!0)},l2=Object.assign({scrollBeyondLastLine:C!=="sizeToFit",readOnly:L,cursorStyle:"line",lineNumbers:P?"on":"off",tabIndex:-1,minimap:{enabled:V}},X),P2={position:o1,exitDelay:J,entryDelay:J,maxWidth:a1,trigger:"mouseenter focus"},He=(z||I)&&(!C1||!!u1)||M||r||x||!!U.bodyContent;return n.jsx(ea,{multiple:!1,onDropAccepted:K1,onDropRejected:k2,children:({getRootProps:_1,getInputProps:y1,isDragActive:W1,open:d2})=>{const Ee=n.jsx("input",Object.assign({},y1(),{hidden:!0})),FH=d||(M?n.jsxs(T6,{variant:ue.sm,titleText:u,icon:Ne,headingLevel:"h4",children:[n.jsx(Ft,{children:f}),!L&&n.jsxs(A6,{children:[n.jsx(We,{children:n.jsx(Y,{variant:"primary",onClick:d2,children:g})}),n.jsx(We,{children:n.jsx(Y,{variant:"link",onClick:()=>x1(!1),children:h})})]})]}):n.jsx(T6,{variant:ue.sm,titleText:u,icon:Ne,headingLevel:"h4",children:!L&&n.jsx(A6,{children:n.jsx(We,{children:n.jsx(Y,{variant:"primary",onClick:()=>x1(!1),children:h})})})})),jH=n.jsxs(n.Fragment,{children:[n.jsx("div",{className:_(T1.codeEditorControls),children:n.jsxs(TH.Provider,{value:{code:u1},children:[z&&(!C1||!!u1)&&n.jsx(W2,{icon:n.jsx(K6,{}),"aria-label":o,tooltipProps:Object.assign(Object.assign({},P2),{"aria-live":"polite",content:n.jsx("div",{children:b1?c:l}),exitDelay:b1?$:J,onTooltipHidden:()=>B1(!1)}),onClick:C2}),M&&n.jsx(W2,{icon:n.jsx(lO,{}),"aria-label":s1,tooltipProps:Object.assign({content:n.jsx("div",{children:I1})},P2),onClick:d2}),I&&(!C1||!!u1)&&n.jsx(W2,{icon:n.jsx(ks,{}),"aria-label":i,tooltipProps:Object.assign({content:n.jsx("div",{children:s})},P2),onClick:()=>{E(u1,`${p}.${sZ2(y)}`)}}),r&&r]})}),x&&n.jsx("div",{className:_(T1.codeEditorHeaderMain),children:x}),!!U.bodyContent&&n.jsx("div",{className:`${T1.codeEditor}__keyboard-shortcuts`,children:n.jsx(tt,Object.assign({},U,{children:n.jsx(Y,{variant:H1.link,icon:n.jsx(Lo,{}),children:R})}))})]}),C4=n.jsxs("div",{className:_(T1.codeEditorHeader,S&&T1.modifiers.plain),children:[He&&n.jsx("div",{className:_(T1.codeEditorHeaderContent),children:jH}),T&&n.jsxs("div",{className:_(T1.codeEditorTab),children:[n.jsx("span",{className:_(T1.codeEditorTabIcon),children:n.jsx(Ne,{})}),n.jsx("span",{className:_(T1.codeEditorTabText),children:y.toUpperCase()})]})]}),x4=n.jsx("div",{className:_(T1.codeEditorCode),ref:e1,tabIndex:0,dir:"ltr",children:n.jsx(iZ2,Object.assign({height:C==="100%"?void 0:C,width:m1,language:y,value:u1,options:l2,overrideServices:N,onChange:Z,onMount:K,loading:B,theme:w?"vs-dark":"vs-light"},v))});return n.jsx("div",{className:_(T1.codeEditor,L&&T1.modifiers.readOnly,(C==="100%"?!0:k)&&T1.modifiers.fullHeight,a),ref:G,children:(M||d)&&!u1?n.jsxs("div",Object.assign({},_1({onClick:WH=>WH.stopPropagation()}),{className:_(T1.codeEditorContainer,w1&&V2.modifiers.loading),children:[C4,n.jsx("div",{className:_(T1.codeEditorMain,W1&&T1.modifiers.dragHover),children:(C1||d)&&!u1?n.jsxs("div",{className:_(T1.codeEditorUpload),children:[Ee,FH]}):n.jsxs(n.Fragment,{children:[Ee,x4]})})]})):n.jsxs(n.Fragment,{children:[C4,q&&n.jsxs("div",{className:_(T1.codeEditorMain),children:[Ee,x4]})]})})}})};AH.displayName="CodeEditor";const dZ2=a=>{navigator.clipboard.writeText(a)},no=window,ne=(a,t,o,c)=>{c||=0,no?.gtag&&no?.gtag("event",a,{event_category:t,event_label:o,...c>=0&&{value:c}})};function vZ2(a){return a==="js"?o2.javascript:a==="ts"?o2.typescript:a}const mZ2=({fullscreenLink:a,codeBoxParams:t,lang:o,isFullscreen:c,originalCode:l,code:r,setCode:i,exampleTitle:s})=>{const[p,v]=i2.useState(!1),[d,f]=i2.useState(!1),g="Copy code to clipboard",h=`Toggle ${o.toUpperCase()} code`,u="Open example in CodeSandbox",x="Open example in new window",C="Convert example from Typescript to JavaScript",z="Undo all changes",w=`Copy ${s} example code to clipboard`,I=`Toggle ${o.toUpperCase()} code in ${s} example`,k=`Open ${s} example in CodeSandbox`,S=`Open ${s} example in new window`,T=`Convert ${s} example from Typescript to JavaScript`,P=`Undo all changes to ${s}`,V={className:"ws-code-editor-control"},L={exitDelay:300,maxWidth:"var(--ws-code-editor--tooltip--MaxWidth)"},M=()=>{dZ2(r),f(!0)},y=n.jsxs(i2.Fragment,{children:[n.jsx(W2,{icon:n.jsxs(i2.Fragment,{children:[n.jsx(Ne,{})," "+o.toUpperCase()]}),onClick:()=>{v(!p),ne("code_editor_control_click","click_event","TOGGLE_CODE",p?0:1)},tooltipProps:{content:h,...L},"aria-label":I,"aria-expanded":p,...V}),n.jsx(G1,{content:n.jsx("div",{children:d?"Code copied":g}),maxWidth:V?.maxWidth,exitDelay:d?300:1600,onTooltipHidden:()=>f(!1),children:n.jsx(Y,{onClick:()=>{M(),ne("code_editor_control_click","click_event","COPY_CODE")},variant:"plain","aria-label":w,className:V.className,children:n.jsx(K6,{})})}),t&&n.jsxs(Ja,{"aria-label":`${k} form`,action:"https://codesandbox.io/api/v1/sandboxes/define",method:"POST",target:"_blank",style:{display:"inline-block"},children:[n.jsx(G1,{content:u,maxWidth:V.maxWidth,children:n.jsx(Y,{"aria-label":k,variant:"plain",type:"submit",onClick:()=>{ne("code_editor_control_click","click_event","CODESANDBOX_LINK")},className:V.className,children:n.jsx(pi,{})})}),n.jsx("input",{type:"hidden",name:"parameters",value:t})]}),a&&n.jsx(W2,{component:"a",icon:n.jsx(Mo,{}),href:a,target:"_blank",rel:"noopener noreferrer","aria-label":S,tooltipProps:{content:x,...L},onClick:()=>{ne("code_editor_control_click","click_event","FULLSCREEN_LINK")},...V}),p&&o==="ts"&&n.jsx(W2,{icon:n.jsxs(i2.Fragment,{children:["TS ",n.jsx(o4,{})," JS"]}),"aria-label":T,tooltipProps:{content:C,...L},onClick:()=>{i(ho.convertToJSX(r).code),ne("code_editor_control_click","click_event","TS_TO_JS")},...V}),r!==l&&n.jsx(W2,{icon:n.jsx(Kk,{}),"aria-label":P,tooltipProps:{content:z,...L},onClick:()=>{i(l),ne("code_editor_control_click","click_event","RESET_CODE")},...V})]}),B=(A,O)=>{O.languages.typescript.typescriptDefaults.setCompilerOptions({jsx:!0,...O.languages.typescript.typescriptDefaults.getCompilerOptions()}),O.languages.typescript.typescriptDefaults.setDiagnosticsOptions({noSemanticValidation:!0,noSyntaxValidation:!0,noSuggestionDiagnostics:!0,onlyVisible:!0})};return n.jsx(AH,{customControls:y,showEditor:p,language:vZ2(o),height:"400px",code:r,onChange:A=>i(A),onEditorDidMount:B,isReadOnly:c,className:`${p?"ws-example-code-expanded ":""}ws-code-editor`,isHeaderPlain:!0})};function pZ2({error:a}){return n.jsxs("div",{role:"alert",children:[n.jsx("p",{children:"Something went wrong:"}),n.jsx("pre",{style:{color:"red"},children:a.message})]})}function fZ2(a){const t={...fW,...Ni1,styles:Di1,...tG2,useState:m.useState,Fragment:m.Fragment,useRef:m.useRef,useEffect:m.useEffect,createRef:m.createRef,useReducer:m.useReducer},{code:o}=ho.convertToReactComponent(a),c=Object.keys(t),l=Object.values(t),i=new Function("React",...c,o)(i2,...l);return n.jsx(i,{})}const HZ2=({src:a})=>{const[t,o]=m.useState(a),c=fZ2(t);return n.jsxs(uW,{fallbackRender:pZ2,children:[c,n.jsx(mZ2,{originalCode:a,code:t,setCode:o,lang:"ts",isFullscreen:!1})]})};export{HZ2 as LiveExample};
+  `},oo=SG2(OG2)(LH),PG2={config:BG2},HG2=function(){for(var t=arguments.length,o=new Array(t),c=0;c<t;c++)o[c]=arguments[c];return function(l){return o.reduceRight(function(r,i){return i(r)},l)}};function BH(a,t){return Object.keys(t).forEach(function(o){t[o]instanceof Object&&a[o]&&Object.assign(t[o],BH(a[o],t[o]))}),Q4(Q4({},a),t)}var EG2={type:"cancelation",msg:"operation is manually canceled"};function ka(a){var t=!1,o=new Promise(function(c,l){a.then(function(r){return t?l(EG2):c(r)}),a.catch(l)});return o.cancel=function(){return t=!0},o}var VG2=wG2.create({config:yG2,isInitialized:!1,resolve:null,reject:null,monaco:null}),MH=lG2(VG2,2),p6=MH[0],sa=MH[1];function TG2(a){var t=PG2.config(a),o=t.monaco,c=cG2(t,["monaco"]);sa(function(l){return{config:BH(l.config,c),monaco:o}})}function AG2(){var a=p6(function(t){var o=t.monaco,c=t.isInitialized,l=t.resolve;return{monaco:o,isInitialized:c,resolve:l}});if(!a.isInitialized){if(sa({isInitialized:!0}),a.monaco)return a.resolve(a.monaco),ka(wa);if(window.monaco&&window.monaco.editor)return OH(window.monaco),a.resolve(window.monaco),ka(wa);HG2(FG2,WG2)(NG2)}return ka(wa)}function FG2(a){return document.body.appendChild(a)}function jG2(a){var t=document.createElement("script");return a&&(t.src=a),t}function WG2(a){var t=p6(function(c){var l=c.config,r=c.reject;return{config:l,reject:r}}),o=jG2("".concat(t.config.paths.vs,"/loader.js"));return o.onload=function(){return a()},o.onerror=t.reject,o}function NG2(){var a=p6(function(o){var c=o.config,l=o.resolve,r=o.reject;return{config:c,resolve:l,reject:r}}),t=window.require;t.config(a.config),t(["vs/editor/editor.main"],function(o){OH(o),a.resolve(o)},function(o){a.reject(o)})}function OH(a){p6().monaco||sa({monaco:a})}function DG2(){return p6(function(a){var t=a.monaco;return t})}var wa=new Promise(function(a,t){return sa({resolve:a,reject:t})}),PH={config:TG2,init:AG2,__getMonacoInstance:DG2},RG2={wrapper:{display:"flex",position:"relative",textAlign:"initial"},fullWidth:{width:"100%"},hide:{display:"none"}},ya=RG2,GG2={container:{display:"flex",height:"100%",width:"100%",justifyContent:"center",alignItems:"center"}},ZG2=GG2;function UG2({children:a}){return i2.createElement("div",{style:ZG2.container},a)}var qG2=UG2,XG2=qG2;function $G2({width:a,height:t,isEditorReady:o,loading:c,_ref:l,className:r,wrapperProps:i}){return i2.createElement("section",{style:{...ya.wrapper,width:a,height:t},...i},!o&&i2.createElement(XG2,null,c),i2.createElement("div",{ref:l,style:{...ya.fullWidth,...!o&&ya.hide},className:r}))}var KG2=$G2,HH=m.memo(KG2);function YG2(a){m.useEffect(a,[])}var EH=YG2;function JG2(a,t,o=!0){let c=m.useRef(!0);m.useEffect(c.current||!o?()=>{c.current=!1}:a,t)}var r2=JG2;function De(){}function ie(a,t,o,c){return QG2(a,c)||eZ2(a,t,o,c)}function QG2(a,t){return a.editor.getModel(VH(a,t))}function eZ2(a,t,o,c){return a.editor.createModel(t,o,c?VH(a,c):void 0)}function VH(a,t){return a.Uri.parse(t)}function aZ2({original:a,modified:t,language:o,originalLanguage:c,modifiedLanguage:l,originalModelPath:r,modifiedModelPath:i,keepCurrentOriginalModel:s=!1,keepCurrentModifiedModel:p=!1,theme:v="light",loading:d="Loading...",options:f={},height:g="100%",width:h="100%",className:u,wrapperProps:x={},beforeMount:C=De,onMount:z=De}){let[w,I]=m.useState(!1),[k,S]=m.useState(!0),T=m.useRef(null),P=m.useRef(null),V=m.useRef(null),L=m.useRef(z),M=m.useRef(C),y=m.useRef(!1);EH(()=>{let E=PH.init();return E.then(F=>(P.current=F)&&S(!1)).catch(F=>F?.type!=="cancelation"&&console.error("Monaco initialization: error:",F)),()=>T.current?O():E.cancel()}),r2(()=>{if(T.current&&P.current){let E=T.current.getOriginalEditor(),F=ie(P.current,a||"",c||o||"text",r||"");F!==E.getModel()&&E.setModel(F)}},[r],w),r2(()=>{if(T.current&&P.current){let E=T.current.getModifiedEditor(),F=ie(P.current,t||"",l||o||"text",i||"");F!==E.getModel()&&E.setModel(F)}},[i],w),r2(()=>{let E=T.current.getModifiedEditor();E.getOption(P.current.editor.EditorOption.readOnly)?E.setValue(t||""):t!==E.getValue()&&(E.executeEdits("",[{range:E.getModel().getFullModelRange(),text:t||"",forceMoveMarkers:!0}]),E.pushUndoStop())},[t],w),r2(()=>{T.current?.getModel()?.original.setValue(a||"")},[a],w),r2(()=>{let{original:E,modified:F}=T.current.getModel();P.current.editor.setModelLanguage(E,c||o||"text"),P.current.editor.setModelLanguage(F,l||o||"text")},[o,c,l],w),r2(()=>{P.current?.editor.setTheme(v)},[v],w),r2(()=>{T.current?.updateOptions(f)},[f],w);let B=m.useCallback(()=>{if(!P.current)return;M.current(P.current);let E=ie(P.current,a||"",c||o||"text",r||""),F=ie(P.current,t||"",l||o||"text",i||"");T.current?.setModel({original:E,modified:F})},[o,t,l,a,c,r,i]),A=m.useCallback(()=>{!y.current&&V.current&&(T.current=P.current.editor.createDiffEditor(V.current,{automaticLayout:!0,...f}),B(),P.current?.editor.setTheme(v),I(!0),y.current=!0)},[f,v,B]);m.useEffect(()=>{w&&L.current(T.current,P.current)},[w]),m.useEffect(()=>{!k&&!w&&A()},[k,w,A]);function O(){let E=T.current?.getModel();s||E?.original?.dispose(),p||E?.modified?.dispose(),T.current?.dispose()}return i2.createElement(HH,{width:h,height:g,isEditorReady:w,loading:d,_ref:V,className:u,wrapperProps:x})}var tZ2=aZ2;m.memo(tZ2);function oZ2(a){let t=m.useRef();return m.useEffect(()=>{t.current=a},[a]),t.current}var nZ2=oZ2,z6=new Map;function cZ2({defaultValue:a,defaultLanguage:t,defaultPath:o,value:c,language:l,path:r,theme:i="light",line:s,loading:p="Loading...",options:v={},overrideServices:d={},saveViewState:f=!0,keepCurrentModel:g=!1,width:h="100%",height:u="100%",className:x,wrapperProps:C={},beforeMount:z=De,onMount:w=De,onChange:I,onValidate:k=De}){let[S,T]=m.useState(!1),[P,V]=m.useState(!0),L=m.useRef(null),M=m.useRef(null),y=m.useRef(null),B=m.useRef(w),A=m.useRef(z),O=m.useRef(),E=m.useRef(c),F=nZ2(r),X=m.useRef(!1),N=m.useRef(!1);EH(()=>{let q=PH.init();return q.then($=>(L.current=$)&&V(!1)).catch($=>$?.type!=="cancelation"&&console.error("Monaco initialization: error:",$)),()=>M.current?U():q.cancel()}),r2(()=>{let q=ie(L.current,a||c||"",t||l||"",r||o||"");q!==M.current?.getModel()&&(f&&z6.set(F,M.current?.saveViewState()),M.current?.setModel(q),f&&M.current?.restoreViewState(z6.get(r)))},[r],S),r2(()=>{M.current?.updateOptions(v)},[v],S),r2(()=>{!M.current||c===void 0||(M.current.getOption(L.current.editor.EditorOption.readOnly)?M.current.setValue(c):c!==M.current.getValue()&&(N.current=!0,M.current.executeEdits("",[{range:M.current.getModel().getFullModelRange(),text:c,forceMoveMarkers:!0}]),M.current.pushUndoStop(),N.current=!1))},[c],S),r2(()=>{let q=M.current?.getModel();q&&l&&L.current?.editor.setModelLanguage(q,l)},[l],S),r2(()=>{s!==void 0&&M.current?.revealLine(s)},[s],S),r2(()=>{L.current?.editor.setTheme(i)},[i],S);let R=m.useCallback(()=>{if(!(!y.current||!L.current)&&!X.current){A.current(L.current);let q=r||o,$=ie(L.current,c||a||"",t||l||"",q||"");M.current=L.current?.editor.create(y.current,{model:$,automaticLayout:!0,...v},d),f&&M.current.restoreViewState(z6.get(q)),L.current.editor.setTheme(i),s!==void 0&&M.current.revealLine(s),T(!0),X.current=!0}},[a,t,o,c,l,r,v,d,f,i,s]);m.useEffect(()=>{S&&B.current(M.current,L.current)},[S]),m.useEffect(()=>{!P&&!S&&R()},[P,S,R]),E.current=c,m.useEffect(()=>{S&&I&&(O.current?.dispose(),O.current=M.current?.onDidChangeModelContent(q=>{N.current||I(M.current.getValue(),q)}))},[S,I]),m.useEffect(()=>{if(S){let q=L.current.editor.onDidChangeMarkers($=>{let J=M.current.getModel()?.uri;if(J&&$.find(a1=>a1.path===J.path)){let a1=L.current.editor.getModelMarkers({resource:J});k?.(a1)}});return()=>{q?.dispose()}}return()=>{}},[S,k]);function U(){O.current?.dispose(),g?f&&z6.set(r,M.current.saveViewState()):M.current.getModel()?.dispose(),M.current.dispose()}return i2.createElement(HH,{width:h,height:u,isEditorReady:S,loading:p,_ref:y,className:x,wrapperProps:C})}var lZ2=cZ2,rZ2=m.memo(lZ2),iZ2=rZ2;const TH=m.createContext(null),W2=a=>{var{icon:t,className:o,"aria-label":c,onClick:l=()=>{},isVisible:r=!0,tooltipProps:i={}}=a,s=b(a,["icon","className","aria-label","onClick","isVisible","tooltipProps"]);const p=m.useContext(TH),v=d=>{l(p.code,d)};return r?n.jsx(G1,Object.assign({},i,{children:n.jsx(Y,Object.assign({className:o,onClick:v,variant:"plain","aria-label":c},s,{icon:t}))})):null};W2.displayName="CodeEditorControl";var o2;(function(a){a.abap="abap",a.aes="aes",a.apex="apex",a.azcli="azcli",a.bat="bat",a.bicep="bicep",a.c="c",a.cameligo="cameligo",a.clojure="clojure",a.coffeescript="coffeescript",a.cpp="cpp",a.csharp="csharp",a.csp="csp",a.css="css",a.dart="dart",a.dockerfile="dockerfile",a.ecl="ecl",a.elixir="elixir",a.fsharp="fsharp",a.go="go",a.graphql="graphql",a.handlebars="handlebars",a.hcl="hcl",a.html="html",a.ini="ini",a.java="java",a.javascript="javascript",a.json="json",a.julia="julia",a.kotlin="kotlin",a.less="less",a.lexon="lexon",a.liquid="liquid",a.lua="lua",a.m3="m3",a.markdown="markdown",a.mips="mips",a.msdax="msdax",a.mysql="mysql",a["objective-c"]="objective-c",a.pascal="pascal",a.pascaligo="pascaligo",a.perl="perl",a.pgsql="pgsql",a.php="php",a.plaintext="plaintext",a.postiats="postiats",a.powerquery="powerquery",a.powershell="powershell",a.pug="pug",a.python="python",a.r="r",a.razor="razor",a.redis="redis",a.redshift="redshift",a.restructuredtext="restructuredtext",a.ruby="ruby",a.rust="rust",a.sb="sb",a.scala="scala",a.scheme="scheme",a.scss="scss",a.shell="shell",a.sol="sol",a.sql="sql",a.st="st",a.swift="swift",a.systemverilog="systemverilog",a.tcl="tcl",a.twig="twig",a.typescript="typescript",a.vb="vb",a.verilog="verilog",a.xml="xml",a.yaml="yaml"})(o2||(o2={}));const sZ2=a=>{switch(a){case o2.shell:return"sh";case o2.ruby:return"rb";case o2.perl:return"pl";case o2.python:return"py";case o2.mysql:return"sql";case o2.javascript:return"js";case o2.typescript:return"ts";case o2.markdown:return"md";case o2.plaintext:return"txt";default:return a.toString()}},_Z2=(a,t)=>{const o=document.createElement("a");o.href=URL.createObjectURL(new Blob([a],{type:"text"})),o.download=t,o.click()},AH=({className:a="",code:t="",copyButtonAriaLabel:o="Copy code to clipboard",copyButtonSuccessTooltipText:c="Content added to clipboard",copyButtonToolTipText:l="Copy to clipboard",customControls:r=null,downloadButtonAriaLabel:i="Download code",downloadButtonToolTipText:s="Download",downloadFileName:p=Date.now().toString(),editorProps:v,emptyState:d="",emptyStateBody:f="Drag and drop a file or upload one.",emptyStateButton:g="Browse",emptyStateLink:h="Start from scratch",emptyStateTitle:u="Start editing",headerMainContent:x="",height:C,isCopyEnabled:z=!1,isDarkTheme:w=!1,isDownloadEnabled:I=!1,isFullHeight:k=!1,isHeaderPlain:S=!1,isLanguageLabelVisible:T=!1,isLineNumbersVisible:P=!0,isMinimapVisible:V=!1,isReadOnly:L=!1,isUploadEnabled:M=!1,language:y=o2.plaintext,loading:B="",onChange:A=()=>{},onCodeChange:O=()=>{},onDownload:E=_Z2,onEditorDidMount:F=()=>{},options:X={},overrideServices:N={},shortcutsPopoverButtonText:R="View Shortcuts",shortcutsPopoverProps:U={bodyContent:"","aria-label":"Keyboard Shortcuts"},showEditor:q=!0,toolTipCopyExitDelay:$=1600,toolTipDelay:J=300,toolTipMaxWidth:a1="100px",toolTipPosition:o1="top",uploadButtonAriaLabel:s1="Upload code",uploadButtonToolTipText:I1="Upload",width:m1=""})=>{const[u1,k1]=m.useState(t),[w1,v1]=m.useState(!1),[C1,x1]=m.useState(!0),[b1,B1]=m.useState(!1),i1=m.useRef(null),e1=m.useRef(null),G=m.useRef(null),W=m.useRef(()=>{}),H=()=>{var _1,y1,W1;const d2=(_1=i1.current)===null||_1===void 0?void 0:_1.getContentHeight(),Ee=(y1=i1.current)===null||y1===void 0?void 0:y1.getLayoutInfo();(W1=i1.current)===null||W1===void 0||W1.layout({width:Ee.width,height:d2})},Z=(_1,y1)=>{C==="sizeToFit"&&H(),A&&A(_1,y1),k1(_1),O(_1)},D=()=>{i1.current&&(i1.current.layout({width:0,height:0}),i1.current.layout())},j=_1=>{var y1;e1.current===document.activeElement&&(_1.key==="ArrowDown"||_1.key===" ")&&((y1=i1.current)===null||y1===void 0||y1.focus(),_1.preventDefault())};m.useEffect(()=>k1(t),[t]),m.useEffect(()=>(document.addEventListener("keydown",j),W.current=G2(G.current,D,!0),D(),()=>{document.removeEventListener("keydown",j),W.current()}),[]);const K=(_1,y1)=>{_1.addCommand(y1.KeyMod.Shift|y1.KeyCode.Tab,()=>e1.current.focus()),Array.from(document.getElementsByClassName("monaco-editor")).forEach(W1=>W1.removeAttribute("role")),F(_1,y1),i1.current=_1,C==="sizeToFit"&&H()},n1=_1=>{k1(_1),O(_1)},p1=()=>v1(!0),z1=()=>v1(!1),Z1=_1=>new Promise((y1,W1)=>{const d2=new FileReader;d2.onload=()=>y1(d2.result),d2.onerror=()=>W1(d2.error),d2.readAsText(_1)}),K1=_1=>{if(_1.length>0){const y1=_1[0];n1(""),p1(),Z1(y1).then(W1=>{z1(),x1(!1),n1(W1)}).catch(W1=>{console.error("error",W1),z1(),n1("")})}},k2=_1=>{_1.length>0&&console.error("There was an error accepting that dropped file")},C2=()=>{navigator.clipboard.writeText(u1),B1(!0)},l2=Object.assign({scrollBeyondLastLine:C!=="sizeToFit",readOnly:L,cursorStyle:"line",lineNumbers:P?"on":"off",tabIndex:-1,minimap:{enabled:V}},X),P2={position:o1,exitDelay:J,entryDelay:J,maxWidth:a1,trigger:"mouseenter focus"},He=(z||I)&&(!C1||!!u1)||M||r||x||!!U.bodyContent;return n.jsx(ea,{multiple:!1,onDropAccepted:K1,onDropRejected:k2,children:({getRootProps:_1,getInputProps:y1,isDragActive:W1,open:d2})=>{const Ee=n.jsx("input",Object.assign({},y1(),{hidden:!0})),FH=d||(M?n.jsxs(T6,{variant:ue.sm,titleText:u,icon:Ne,headingLevel:"h4",children:[n.jsx(Ft,{children:f}),!L&&n.jsxs(A6,{children:[n.jsx(We,{children:n.jsx(Y,{variant:"primary",onClick:d2,children:g})}),n.jsx(We,{children:n.jsx(Y,{variant:"link",onClick:()=>x1(!1),children:h})})]})]}):n.jsx(T6,{variant:ue.sm,titleText:u,icon:Ne,headingLevel:"h4",children:!L&&n.jsx(A6,{children:n.jsx(We,{children:n.jsx(Y,{variant:"primary",onClick:()=>x1(!1),children:h})})})})),jH=n.jsxs(n.Fragment,{children:[n.jsx("div",{className:_(T1.codeEditorControls),children:n.jsxs(TH.Provider,{value:{code:u1},children:[z&&(!C1||!!u1)&&n.jsx(W2,{icon:n.jsx(K6,{}),"aria-label":o,tooltipProps:Object.assign(Object.assign({},P2),{"aria-live":"polite",content:n.jsx("div",{children:b1?c:l}),exitDelay:b1?$:J,onTooltipHidden:()=>B1(!1)}),onClick:C2}),M&&n.jsx(W2,{icon:n.jsx(lO,{}),"aria-label":s1,tooltipProps:Object.assign({content:n.jsx("div",{children:I1})},P2),onClick:d2}),I&&(!C1||!!u1)&&n.jsx(W2,{icon:n.jsx(ks,{}),"aria-label":i,tooltipProps:Object.assign({content:n.jsx("div",{children:s})},P2),onClick:()=>{E(u1,`${p}.${sZ2(y)}`)}}),r&&r]})}),x&&n.jsx("div",{className:_(T1.codeEditorHeaderMain),children:x}),!!U.bodyContent&&n.jsx("div",{className:`${T1.codeEditor}__keyboard-shortcuts`,children:n.jsx(tt,Object.assign({},U,{children:n.jsx(Y,{variant:H1.link,icon:n.jsx(Lo,{}),children:R})}))})]}),C4=n.jsxs("div",{className:_(T1.codeEditorHeader,S&&T1.modifiers.plain),children:[He&&n.jsx("div",{className:_(T1.codeEditorHeaderContent),children:jH}),T&&n.jsxs("div",{className:_(T1.codeEditorTab),children:[n.jsx("span",{className:_(T1.codeEditorTabIcon),children:n.jsx(Ne,{})}),n.jsx("span",{className:_(T1.codeEditorTabText),children:y.toUpperCase()})]})]}),x4=n.jsx("div",{className:_(T1.codeEditorCode),ref:e1,tabIndex:0,dir:"ltr",children:n.jsx(iZ2,Object.assign({height:C==="100%"?void 0:C,width:m1,language:y,value:u1,options:l2,overrideServices:N,onChange:Z,onMount:K,loading:B,theme:w?"vs-dark":"vs-light"},v))});return n.jsx("div",{className:_(T1.codeEditor,L&&T1.modifiers.readOnly,(C==="100%"?!0:k)&&T1.modifiers.fullHeight,a),ref:G,children:(M||d)&&!u1?n.jsxs("div",Object.assign({},_1({onClick:WH=>WH.stopPropagation()}),{className:_(T1.codeEditorContainer,w1&&V2.modifiers.loading),children:[C4,n.jsx("div",{className:_(T1.codeEditorMain,W1&&T1.modifiers.dragHover),children:(C1||d)&&!u1?n.jsxs("div",{className:_(T1.codeEditorUpload),children:[Ee,FH]}):n.jsxs(n.Fragment,{children:[Ee,x4]})})]})):n.jsxs(n.Fragment,{children:[C4,q&&n.jsxs("div",{className:_(T1.codeEditorMain),children:[Ee,x4]})]})})}})};AH.displayName="CodeEditor";const dZ2=a=>{navigator.clipboard.writeText(a)},no=window,ne=(a,t,o,c)=>{c||=0,no?.gtag&&no?.gtag("event",a,{event_category:t,event_label:o,...c>=0&&{value:c}})};function vZ2(a){return a==="js"?o2.javascript:a==="ts"?o2.typescript:a}const mZ2=({fullscreenLink:a,codeBoxParams:t,lang:o,isFullscreen:c,originalCode:l,code:r,setCode:i,exampleTitle:s})=>{const[p,v]=i2.useState(!1),[d,f]=i2.useState(!1),g="Copy code to clipboard",h=`Toggle ${o.toUpperCase()} code`,u="Open example in CodeSandbox",x="Open example in new window",C="Convert example from Typescript to JavaScript",z="Undo all changes",w=`Copy ${s} example code to clipboard`,I=`Toggle ${o.toUpperCase()} code in ${s} example`,k=`Open ${s} example in CodeSandbox`,S=`Open ${s} example in new window`,T=`Convert ${s} example from Typescript to JavaScript`,P=`Undo all changes to ${s}`,V={className:"ws-code-editor-control"},L={exitDelay:300,maxWidth:"var(--ws-code-editor--tooltip--MaxWidth)"},M=()=>{dZ2(r),f(!0)},y=n.jsxs(i2.Fragment,{children:[n.jsx(W2,{icon:n.jsxs(i2.Fragment,{children:[n.jsx(Ne,{})," "+o.toUpperCase()]}),onClick:()=>{v(!p),ne("code_editor_control_click","click_event","TOGGLE_CODE",p?0:1)},tooltipProps:{content:h,...L},"aria-label":I,"aria-expanded":p,...V}),n.jsx(G1,{content:n.jsx("div",{children:d?"Code copied":g}),maxWidth:V?.maxWidth,exitDelay:d?300:1600,onTooltipHidden:()=>f(!1),children:n.jsx(Y,{onClick:()=>{M(),ne("code_editor_control_click","click_event","COPY_CODE")},variant:"plain","aria-label":w,className:V.className,children:n.jsx(K6,{})})}),t&&n.jsxs(Ja,{"aria-label":`${k} form`,action:"https://codesandbox.io/api/v1/sandboxes/define",method:"POST",target:"_blank",style:{display:"inline-block"},children:[n.jsx(G1,{content:u,maxWidth:V.maxWidth,children:n.jsx(Y,{"aria-label":k,variant:"plain",type:"submit",onClick:()=>{ne("code_editor_control_click","click_event","CODESANDBOX_LINK")},className:V.className,children:n.jsx(pi,{})})}),n.jsx("input",{type:"hidden",name:"parameters",value:t})]}),a&&n.jsx(W2,{component:"a",icon:n.jsx(Mo,{}),href:a,target:"_blank",rel:"noopener noreferrer","aria-label":S,tooltipProps:{content:x,...L},onClick:()=>{ne("code_editor_control_click","click_event","FULLSCREEN_LINK")},...V}),p&&o==="ts"&&n.jsx(W2,{icon:n.jsxs(i2.Fragment,{children:["TS ",n.jsx(o4,{})," JS"]}),"aria-label":T,tooltipProps:{content:C,...L},onClick:()=>{i(ho.convertToJSX(r).code),ne("code_editor_control_click","click_event","TS_TO_JS")},...V}),r!==l&&n.jsx(W2,{icon:n.jsx(Kk,{}),"aria-label":P,tooltipProps:{content:z,...L},onClick:()=>{i(l),ne("code_editor_control_click","click_event","RESET_CODE")},...V})]}),B=(A,O)=>{O.languages.typescript.typescriptDefaults.setCompilerOptions({jsx:!0,...O.languages.typescript.typescriptDefaults.getCompilerOptions()}),O.languages.typescript.typescriptDefaults.setDiagnosticsOptions({noSemanticValidation:!0,noSyntaxValidation:!0,noSuggestionDiagnostics:!0,onlyVisible:!0})};return n.jsx(AH,{customControls:y,showEditor:p,language:vZ2(o),height:"400px",code:r,onChange:A=>i(A),onEditorDidMount:B,isReadOnly:c,className:`${p?"ws-example-code-expanded ":""}ws-code-editor`,isHeaderPlain:!0})};function pZ2({error:a}){return n.jsxs("div",{role:"alert",children:[n.jsx("p",{children:"Something went wrong:"}),n.jsx("pre",{style:{color:"red"},children:a.message})]})}function fZ2(a){const t={...fW,...Ni1,styles:Di1,...tG2,useState:m.useState,Fragment:m.Fragment,useRef:m.useRef,useEffect:m.useEffect,createRef:m.createRef,useReducer:m.useReducer},{code:o}=ho.convertToReactComponent(a),c=Object.keys(t),l=Object.values(t),i=new Function("React",...c,o)(i2,...l);return n.jsx(i,{})}const HZ2=({src:a,html:t,isFullscreenPreview:o})=>{const c=a||t||"",[l,r]=m.useState(c);let i=null,s="ts";return t?(i=n.jsx("div",{className:`ws-preview-html ${o&&"pf-v6-u-h-100"}`,dangerouslySetInnerHTML:{__html:l}}),s="html"):(i=fZ2(l),s="ts"),n.jsxs(uW,{fallbackRender:pZ2,children:[i,n.jsx(mZ2,{originalCode:c,code:l,setCode:r,lang:s,isFullscreen:!1})]})};export{HZ2 as LiveExample};

package/dist/client/components/accordion/index.html

@@ -45,22 +45,22 @@
 			[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="1vDTlV" prefix="r1" component-url="/_astro/PageToggle.CMZ3C1v1.js" component-export="PageToggle" renderer-url="/_astro/client.zs76E0tG.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-16"><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="9Vlka" prefix="r3" component-url="/_astro/Toolbar.CroDQcyv.js" component-export="Toolbar" renderer-url="/_astro/client.zs76E0tG.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-6"><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-17"><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-18"><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-6"><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="1EjclH" component-url="/_astro/Navigation.kbLxctIo.js" component-export="Navigation" renderer-url="/_astro/client.zs76E0tG.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;contribute&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Contribute&quot;],&quot;section&quot;:[0,&quot;get-started&quot;],&quot;sortValue&quot;:[0]}]}]]],[1,[[0,{&quot;id&quot;:[0,&quot;typography&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Typography&quot;],&quot;section&quot;:[0,&quot;design-foundations&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;usage-and-behavior&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Usage and behavior&quot;],&quot;section&quot;:[0,&quot;design-foundations&quot;],&quot;sortValue&quot;:[0]}]}]]],[1,[[0,{&quot;id&quot;:[0,&quot;allcomponents&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;All components&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0,1]}]}],[0,{&quot;id&quot;:[0,&quot;examples/accordion/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body">    <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item pf-m-current"> <a class="pf-v6-c-tabs__link" href="/components/accordion/react"> React </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-7" 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-8" data-pf-content="true" class="pf-v6-c-content--h3">Definition list</h3>
 
-<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();;(()=>{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="euaeb" component-url="/_astro/LiveExample.DZkxbJA_.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Accordion, AccordionItem, AccordionContent, AccordionToggle } from &#39;@patternfly/react-core&#39;;\n\nexport const AccordionDefinitionList: React.FunctionComponent = () =&gt; {\n  const [expanded, setExpanded] = useState(&#39;def-list-toggle2&#39;);\n\n  const onToggle = (id: string) =&gt; {\n    if (id === expanded) {\n      setExpanded(&#39;&#39;);\n    } else {\n      setExpanded(id);\n    }\n  };\n\n  return (\n    &lt;Accordion asDefinitionList&gt;\n      &lt;AccordionItem isExpanded={expanded === &#39;def-list-toggle1&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;def-list-toggle1&#39;);\n          }}\n          id=\&quot;def-list-toggle1\&quot;\n        &gt;\n          Item one\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;def-list-expand1\&quot;&gt;\n          &lt;p&gt;\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n            dolore magna aliqua.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;def-list-toggle2&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;def-list-toggle2&#39;);\n          }}\n          id=\&quot;def-list-toggle2\&quot;\n        &gt;\n          Item two\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;def-list-expand2\&quot;&gt;\n          &lt;p&gt;\n            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam\n            ultrices, faucibus erat id, maximus nunc.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;def-list-toggle3&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;def-list-toggle3&#39;);\n          }}\n          id=\&quot;def-list-toggle3\&quot;\n        &gt;\n          Item three\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;def-list-expand3\&quot;&gt;\n          &lt;p&gt;Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.&lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;def-list-toggle4&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;def-list-toggle4&#39;);\n          }}\n          id=\&quot;def-list-toggle4\&quot;\n        &gt;\n          Item four\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;def-list-expand4\&quot;&gt;\n          &lt;p&gt;\n            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero\n            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis\n            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;def-list-toggle5&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;def-list-toggle5&#39;);\n          }}\n          id=\&quot;def-list-toggle5\&quot;\n        &gt;\n          Item five\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;def-list-expand5\&quot;&gt;\n          &lt;p&gt;Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.&lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n    &lt;/Accordion&gt;\n  );\n};&quot;]}" 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"));})();;(()=>{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="ZjlBn0" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Accordion, AccordionItem, AccordionContent, AccordionToggle } from &#39;@patternfly/react-core&#39;;\n\nexport const AccordionDefinitionList: React.FunctionComponent = () =&gt; {\n  const [expanded, setExpanded] = useState(&#39;def-list-toggle2&#39;);\n\n  const onToggle = (id: string) =&gt; {\n    if (id === expanded) {\n      setExpanded(&#39;&#39;);\n    } else {\n      setExpanded(id);\n    }\n  };\n\n  return (\n    &lt;Accordion asDefinitionList&gt;\n      &lt;AccordionItem isExpanded={expanded === &#39;def-list-toggle1&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;def-list-toggle1&#39;);\n          }}\n          id=\&quot;def-list-toggle1\&quot;\n        &gt;\n          Item one\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;def-list-expand1\&quot;&gt;\n          &lt;p&gt;\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et\n            dolore magna aliqua.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;def-list-toggle2&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;def-list-toggle2&#39;);\n          }}\n          id=\&quot;def-list-toggle2\&quot;\n        &gt;\n          Item two\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;def-list-expand2\&quot;&gt;\n          &lt;p&gt;\n            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent nec dictum lorem. Aliquam id diam\n            ultrices, faucibus erat id, maximus nunc.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;def-list-toggle3&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;def-list-toggle3&#39;);\n          }}\n          id=\&quot;def-list-toggle3\&quot;\n        &gt;\n          Item three\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;def-list-expand3\&quot;&gt;\n          &lt;p&gt;Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci quis ultricies tempus.&lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;def-list-toggle4&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;def-list-toggle4&#39;);\n          }}\n          id=\&quot;def-list-toggle4\&quot;\n        &gt;\n          Item four\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;def-list-expand4\&quot;&gt;\n          &lt;p&gt;\n            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit efficitur. Aliquam lacinia ligula pharetra,\n            sagittis ex ut, pellentesque diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere\n            cubilia Curae; Vestibulum ultricies nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur\n            ridiculus mus. Mauris et velit neque. Donec ultricies condimentum mauris, pellentesque imperdiet libero\n            convallis convallis. Aliquam erat volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh, quis\n            dapibus nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;def-list-toggle5&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;def-list-toggle5&#39;);\n          }}\n          id=\&quot;def-list-toggle5\&quot;\n        &gt;\n          Item five\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;def-list-expand5\&quot;&gt;\n          &lt;p&gt;Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis blandit.&lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n    &lt;/Accordion&gt;\n  );\n};&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-9" data-pf-content="true" class="pf-v6-c-content--h3">Single expand behavior</h3>
 
-<astro-island uid="1lSyYA" component-url="/_astro/LiveExample.DZkxbJA_.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionContent,\n  AccordionToggle,\n} from &#39;@patternfly/react-core&#39;\n\nexport const AccordionSingleExpandBehavior: React.FunctionComponent = () =&gt; {\n  const [expanded, setExpanded] = useState(&#39;ex-toggle2&#39;)\n\n  const onToggle = (id: string) =&gt; {\n    if (id === expanded) {\n      setExpanded(&#39;&#39;)\n    } else {\n      setExpanded(id)\n    }\n  }\n\n  return (\n    &lt;Accordion asDefinitionList={false}&gt;\n      &lt;AccordionItem isExpanded={expanded === &#39;ex-toggle1&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;ex-toggle1&#39;)\n          }}\n          id=\&quot;ex-toggle1\&quot;\n        &gt;\n          Item one\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;ex-expand1\&quot;&gt;\n          &lt;p&gt;\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;ex-toggle2&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;ex-toggle2&#39;)\n          }}\n          id=\&quot;ex-toggle2\&quot;\n        &gt;\n          Item two\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;ex-expand2\&quot;&gt;\n          &lt;p&gt;\n            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n            nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n            maximus nunc.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;ex-toggle3&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;ex-toggle3&#39;)\n          }}\n          id=\&quot;ex-toggle3\&quot;\n        &gt;\n          Item three\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;ex-expand3\&quot;&gt;\n          &lt;p&gt;\n            Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci\n            quis ultricies tempus.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;ex-toggle4&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;ex-toggle4&#39;)\n          }}\n          id=\&quot;ex-toggle4\&quot;\n        &gt;\n          Item four\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;ex-expand4\&quot;&gt;\n          &lt;p&gt;\n            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n            efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n            pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n            luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla\n            nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et\n            magnis dis parturient montes, nascetur ridiculus mus. Mauris et\n            velit neque. Donec ultricies condimentum mauris, pellentesque\n            imperdiet libero convallis convallis. Aliquam erat volutpat. Donec\n            rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus\n            nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;ex-toggle5&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;ex-toggle5&#39;)\n          }}\n          id=\&quot;ex-toggle5\&quot;\n        &gt;\n          Item five\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;ex-expand5\&quot;&gt;\n          &lt;p&gt;\n            Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis\n            blandit.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n    &lt;/Accordion&gt;\n  )\n}\n&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="Z1nWbRt" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionContent,\n  AccordionToggle,\n} from &#39;@patternfly/react-core&#39;\n\nexport const AccordionSingleExpandBehavior: React.FunctionComponent = () =&gt; {\n  const [expanded, setExpanded] = useState(&#39;ex-toggle2&#39;)\n\n  const onToggle = (id: string) =&gt; {\n    if (id === expanded) {\n      setExpanded(&#39;&#39;)\n    } else {\n      setExpanded(id)\n    }\n  }\n\n  return (\n    &lt;Accordion asDefinitionList={false}&gt;\n      &lt;AccordionItem isExpanded={expanded === &#39;ex-toggle1&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;ex-toggle1&#39;)\n          }}\n          id=\&quot;ex-toggle1\&quot;\n        &gt;\n          Item one\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;ex-expand1\&quot;&gt;\n          &lt;p&gt;\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;ex-toggle2&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;ex-toggle2&#39;)\n          }}\n          id=\&quot;ex-toggle2\&quot;\n        &gt;\n          Item two\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;ex-expand2\&quot;&gt;\n          &lt;p&gt;\n            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n            nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n            maximus nunc.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;ex-toggle3&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;ex-toggle3&#39;)\n          }}\n          id=\&quot;ex-toggle3\&quot;\n        &gt;\n          Item three\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;ex-expand3\&quot;&gt;\n          &lt;p&gt;\n            Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci\n            quis ultricies tempus.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;ex-toggle4&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;ex-toggle4&#39;)\n          }}\n          id=\&quot;ex-toggle4\&quot;\n        &gt;\n          Item four\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;ex-expand4\&quot;&gt;\n          &lt;p&gt;\n            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n            efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n            pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n            luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla\n            nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et\n            magnis dis parturient montes, nascetur ridiculus mus. Mauris et\n            velit neque. Donec ultricies condimentum mauris, pellentesque\n            imperdiet libero convallis convallis. Aliquam erat volutpat. Donec\n            rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus\n            nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;ex-toggle5&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;ex-toggle5&#39;)\n          }}\n          id=\&quot;ex-toggle5\&quot;\n        &gt;\n          Item five\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;ex-expand5\&quot;&gt;\n          &lt;p&gt;\n            Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis\n            blandit.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n    &lt;/Accordion&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-10" data-pf-content="true" class="pf-v6-c-content--h3">Fixed with multiple expand behavior</h3>
 
-<astro-island uid="eAQS6" component-url="/_astro/LiveExample.DZkxbJA_.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionContent,\n  AccordionToggle,\n} from &#39;@patternfly/react-core&#39;\n\nexport const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =\n  () =&gt; {\n    const [expanded, setExpanded] = useState([&#39;ex2-toggle4&#39;])\n\n    const toggle = (id: string) =&gt; {\n      const index = expanded.indexOf(id)\n      const newExpanded: string[] =\n        index &gt;= 0\n          ? [\n              ...expanded.slice(0, index),\n              ...expanded.slice(index + 1, expanded.length),\n            ]\n          : [...expanded, id]\n      setExpanded(newExpanded)\n    }\n\n    return (\n      &lt;Accordion asDefinitionList={false}&gt;\n        &lt;AccordionItem isExpanded={expanded.includes(&#39;ex2-toggle1&#39;)}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; toggle(&#39;ex2-toggle1&#39;)}\n            id=\&quot;ex2-toggle1\&quot;\n          &gt;\n            Item one\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;ex2-expand1\&quot; isFixed&gt;\n            &lt;p&gt;\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n              eiusmod tempor incididunt ut labore et dolore magna aliqua.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n        &lt;AccordionItem isExpanded={expanded.includes(&#39;ex2-toggle2&#39;)}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; toggle(&#39;ex2-toggle2&#39;)}\n            id=\&quot;ex2-toggle2\&quot;\n          &gt;\n            Item two\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;ex2-expand2\&quot; isFixed&gt;\n            &lt;p&gt;\n              Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n              nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n              maximus nunc.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n        &lt;AccordionItem isExpanded={expanded.includes(&#39;ex2-toggle3&#39;)}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; toggle(&#39;ex2-toggle3&#39;)}\n            id=\&quot;ex2-toggle3\&quot;\n          &gt;\n            Item three\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;ex2-expand3\&quot; isFixed&gt;\n            &lt;p&gt;\n              Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue\n              orci quis ultricies tempus.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n        &lt;AccordionItem isExpanded={expanded.includes(&#39;ex2-toggle4&#39;)}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; toggle(&#39;ex2-toggle4&#39;)}\n            id=\&quot;ex2-toggle4\&quot;\n          &gt;\n            Item four\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent\n            aria-labelledby=\&quot;ex2-toggle4\&quot;\n            id=\&quot;ex2-expand4\&quot;\n            isFixed\n          &gt;\n            &lt;p&gt;\n              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n              efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n              pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n              luctus et ultrices posuere cubilia Curae; Vestibulum ultricies\n              nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend\n              non quis tortor. Morbi tempus ornare tempus. Orci varius natoque\n              penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n              Mauris et velit neque. Donec ultricies condimentum mauris,\n              pellentesque imperdiet libero convallis convallis. Aliquam erat\n              volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,\n              quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor\n              eros.\n            &lt;/p&gt;\n            &lt;p&gt;\n              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n              efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n              pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n              luctus et ultrices posuere cubilia Curae; Vestibulum ultricies\n              nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend\n              non quis tortor. Morbi tempus ornare tempus. Orci varius natoque\n              penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n              Mauris et velit neque. Donec ultricies condimentum mauris,\n              pellentesque imperdiet libero convallis convallis. Aliquam erat\n              volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,\n              quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor\n              eros.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n        &lt;AccordionItem isExpanded={expanded.includes(&#39;ex2-toggle5&#39;)}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; toggle(&#39;ex2-toggle5&#39;)}\n            id=\&quot;ex2-toggle5\&quot;\n          &gt;\n            Item five\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;ex2-expand5\&quot; isFixed&gt;\n            &lt;p&gt;\n              Vivamus finibus dictum ex id ultrices. Mauris dictum neque a\n              iaculis blandit.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n      &lt;/Accordion&gt;\n    )\n  }\n&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="Z1b7wOW" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionContent,\n  AccordionToggle,\n} from &#39;@patternfly/react-core&#39;\n\nexport const AccordionFixedWithMultipleExpandBehavior: React.FunctionComponent =\n  () =&gt; {\n    const [expanded, setExpanded] = useState([&#39;ex2-toggle4&#39;])\n\n    const toggle = (id: string) =&gt; {\n      const index = expanded.indexOf(id)\n      const newExpanded: string[] =\n        index &gt;= 0\n          ? [\n              ...expanded.slice(0, index),\n              ...expanded.slice(index + 1, expanded.length),\n            ]\n          : [...expanded, id]\n      setExpanded(newExpanded)\n    }\n\n    return (\n      &lt;Accordion asDefinitionList={false}&gt;\n        &lt;AccordionItem isExpanded={expanded.includes(&#39;ex2-toggle1&#39;)}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; toggle(&#39;ex2-toggle1&#39;)}\n            id=\&quot;ex2-toggle1\&quot;\n          &gt;\n            Item one\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;ex2-expand1\&quot; isFixed&gt;\n            &lt;p&gt;\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n              eiusmod tempor incididunt ut labore et dolore magna aliqua.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n        &lt;AccordionItem isExpanded={expanded.includes(&#39;ex2-toggle2&#39;)}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; toggle(&#39;ex2-toggle2&#39;)}\n            id=\&quot;ex2-toggle2\&quot;\n          &gt;\n            Item two\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;ex2-expand2\&quot; isFixed&gt;\n            &lt;p&gt;\n              Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n              nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n              maximus nunc.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n        &lt;AccordionItem isExpanded={expanded.includes(&#39;ex2-toggle3&#39;)}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; toggle(&#39;ex2-toggle3&#39;)}\n            id=\&quot;ex2-toggle3\&quot;\n          &gt;\n            Item three\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;ex2-expand3\&quot; isFixed&gt;\n            &lt;p&gt;\n              Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue\n              orci quis ultricies tempus.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n        &lt;AccordionItem isExpanded={expanded.includes(&#39;ex2-toggle4&#39;)}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; toggle(&#39;ex2-toggle4&#39;)}\n            id=\&quot;ex2-toggle4\&quot;\n          &gt;\n            Item four\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent\n            aria-labelledby=\&quot;ex2-toggle4\&quot;\n            id=\&quot;ex2-expand4\&quot;\n            isFixed\n          &gt;\n            &lt;p&gt;\n              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n              efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n              pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n              luctus et ultrices posuere cubilia Curae; Vestibulum ultricies\n              nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend\n              non quis tortor. Morbi tempus ornare tempus. Orci varius natoque\n              penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n              Mauris et velit neque. Donec ultricies condimentum mauris,\n              pellentesque imperdiet libero convallis convallis. Aliquam erat\n              volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,\n              quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor\n              eros.\n            &lt;/p&gt;\n            &lt;p&gt;\n              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n              efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n              pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n              luctus et ultrices posuere cubilia Curae; Vestibulum ultricies\n              nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend\n              non quis tortor. Morbi tempus ornare tempus. Orci varius natoque\n              penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n              Mauris et velit neque. Donec ultricies condimentum mauris,\n              pellentesque imperdiet libero convallis convallis. Aliquam erat\n              volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,\n              quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor\n              eros.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n        &lt;AccordionItem isExpanded={expanded.includes(&#39;ex2-toggle5&#39;)}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; toggle(&#39;ex2-toggle5&#39;)}\n            id=\&quot;ex2-toggle5\&quot;\n          &gt;\n            Item five\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;ex2-expand5\&quot; isFixed&gt;\n            &lt;p&gt;\n              Vivamus finibus dictum ex id ultrices. Mauris dictum neque a\n              iaculis blandit.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n      &lt;/Accordion&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-11" data-pf-content="true" class="pf-v6-c-content--h3">Bordered</h3>
 
-<astro-island uid="ZOqv9R" component-url="/_astro/LiveExample.DZkxbJA_.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionContent,\n  AccordionToggle,\n  AccordionExpandableContentBody,\n  Button,\n  Checkbox,\n} from &#39;@patternfly/react-core&#39;\nimport ArrowRightIcon from &#39;@patternfly/react-icons/dist/esm/icons/arrow-right-icon&#39;\n\nexport const AccordionBordered: React.FunctionComponent = () =&gt; {\n  const [expanded, setExpanded] = useState(&#39;bordered-toggle4&#39;)\n  const [isDisplayLarge, setIsDisplayLarge] = useState(false)\n\n  const displaySize = isDisplayLarge ? &#39;lg&#39; : &#39;default&#39;\n  const onToggle = (id: string) =&gt; {\n    if (id === expanded) {\n      setExpanded(&#39;&#39;)\n    } else {\n      setExpanded(id)\n    }\n  }\n\n  return (\n    &lt;&gt;\n      &lt;Accordion isBordered displaySize={displaySize}&gt;\n        &lt;AccordionItem isExpanded={expanded === &#39;bordered-toggle1&#39;}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; {\n              onToggle(&#39;bordered-toggle1&#39;)\n            }}\n            id=\&quot;bordered-toggle1\&quot;\n          &gt;\n            Item one\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;bordered-expand1\&quot;&gt;\n            &lt;p&gt;\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n              eiusmod tempor incididunt ut labore et dolore magna aliqua.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n\n        &lt;AccordionItem isExpanded={expanded === &#39;bordered-toggle2&#39;}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; {\n              onToggle(&#39;bordered-toggle2&#39;)\n            }}\n            id=\&quot;bordered-toggle2\&quot;\n          &gt;\n            Item two\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;bordered-expand2\&quot;&gt;\n            &lt;p&gt;\n              Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n              nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n              maximus nunc.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n\n        &lt;AccordionItem isExpanded={expanded === &#39;bordered-toggle3&#39;}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; {\n              onToggle(&#39;bordered-toggle3&#39;)\n            }}\n            id=\&quot;bordered-toggle3\&quot;\n          &gt;\n            Item three\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;bordered-expand3\&quot;&gt;\n            &lt;p&gt;\n              Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue\n              orci quis ultricies tempus.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n\n        &lt;AccordionItem isExpanded={expanded === &#39;bordered-toggle4&#39;}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; {\n              onToggle(&#39;bordered-toggle4&#39;)\n            }}\n            id=\&quot;bordered-toggle4\&quot;\n          &gt;\n            Item four\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;bordered-expand4\&quot; isCustomContent&gt;\n            &lt;AccordionExpandableContentBody&gt;\n              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n              efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n              pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n              luctus et ultrices posuere cubilia Curae; Vestibulum ultricies\n              nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend\n              non quis tortor. Morbi tempus ornare tempus. Orci varius natoque\n              penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n              Mauris et velit neque. Donec ultricies condimentum mauris,\n              pellentesque imperdiet libero convallis convallis. Aliquam erat\n              volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,\n              quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor\n              eros.\n            &lt;/AccordionExpandableContentBody&gt;\n            &lt;AccordionExpandableContentBody&gt;\n              &lt;Button variant=\&quot;link\&quot; size=\&quot;lg\&quot; isInline&gt;\n                Call to action &lt;ArrowRightIcon /&gt;\n              &lt;/Button&gt;\n            &lt;/AccordionExpandableContentBody&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n        &lt;AccordionItem isExpanded={expanded === &#39;bordered-toggle5&#39;}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; {\n              onToggle(&#39;bordered-toggle5&#39;)\n            }}\n            id=\&quot;bordered-toggle5\&quot;\n          &gt;\n            Item five\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;bordered-expand5\&quot;&gt;\n            &lt;p&gt;\n              Vivamus finibus dictum ex id ultrices. Mauris dictum neque a\n              iaculis blandit.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n      &lt;/Accordion&gt;\n      &lt;div style={{ marginTop: &#39;30px&#39; }}&gt;\n        &lt;Checkbox\n          label=\&quot;Display size large\&quot;\n          isChecked={isDisplayLarge}\n          onChange={(_event, checked) =&gt; setIsDisplayLarge(checked)}\n          aria-label=\&quot;show display large variation checkbox\&quot;\n          id=\&quot;toggle-display-lg\&quot;\n          name=\&quot;toggle-display-lg\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/&gt;\n  )\n}\n&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<astro-island uid="2rpo6E" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionContent,\n  AccordionToggle,\n  AccordionExpandableContentBody,\n  Button,\n  Checkbox,\n} from &#39;@patternfly/react-core&#39;\nimport ArrowRightIcon from &#39;@patternfly/react-icons/dist/esm/icons/arrow-right-icon&#39;\n\nexport const AccordionBordered: React.FunctionComponent = () =&gt; {\n  const [expanded, setExpanded] = useState(&#39;bordered-toggle4&#39;)\n  const [isDisplayLarge, setIsDisplayLarge] = useState(false)\n\n  const displaySize = isDisplayLarge ? &#39;lg&#39; : &#39;default&#39;\n  const onToggle = (id: string) =&gt; {\n    if (id === expanded) {\n      setExpanded(&#39;&#39;)\n    } else {\n      setExpanded(id)\n    }\n  }\n\n  return (\n    &lt;&gt;\n      &lt;Accordion isBordered displaySize={displaySize}&gt;\n        &lt;AccordionItem isExpanded={expanded === &#39;bordered-toggle1&#39;}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; {\n              onToggle(&#39;bordered-toggle1&#39;)\n            }}\n            id=\&quot;bordered-toggle1\&quot;\n          &gt;\n            Item one\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;bordered-expand1\&quot;&gt;\n            &lt;p&gt;\n              Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n              eiusmod tempor incididunt ut labore et dolore magna aliqua.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n\n        &lt;AccordionItem isExpanded={expanded === &#39;bordered-toggle2&#39;}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; {\n              onToggle(&#39;bordered-toggle2&#39;)\n            }}\n            id=\&quot;bordered-toggle2\&quot;\n          &gt;\n            Item two\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;bordered-expand2\&quot;&gt;\n            &lt;p&gt;\n              Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n              nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n              maximus nunc.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n\n        &lt;AccordionItem isExpanded={expanded === &#39;bordered-toggle3&#39;}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; {\n              onToggle(&#39;bordered-toggle3&#39;)\n            }}\n            id=\&quot;bordered-toggle3\&quot;\n          &gt;\n            Item three\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;bordered-expand3\&quot;&gt;\n            &lt;p&gt;\n              Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue\n              orci quis ultricies tempus.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n\n        &lt;AccordionItem isExpanded={expanded === &#39;bordered-toggle4&#39;}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; {\n              onToggle(&#39;bordered-toggle4&#39;)\n            }}\n            id=\&quot;bordered-toggle4\&quot;\n          &gt;\n            Item four\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;bordered-expand4\&quot; isCustomContent&gt;\n            &lt;AccordionExpandableContentBody&gt;\n              Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n              efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n              pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n              luctus et ultrices posuere cubilia Curae; Vestibulum ultricies\n              nulla nibh. Etiam vel dui fermentum ligula ullamcorper eleifend\n              non quis tortor. Morbi tempus ornare tempus. Orci varius natoque\n              penatibus et magnis dis parturient montes, nascetur ridiculus mus.\n              Mauris et velit neque. Donec ultricies condimentum mauris,\n              pellentesque imperdiet libero convallis convallis. Aliquam erat\n              volutpat. Donec rutrum semper tempus. Proin dictum imperdiet nibh,\n              quis dapibus nulla. Integer sed tincidunt lectus, sit amet auctor\n              eros.\n            &lt;/AccordionExpandableContentBody&gt;\n            &lt;AccordionExpandableContentBody&gt;\n              &lt;Button variant=\&quot;link\&quot; size=\&quot;lg\&quot; isInline&gt;\n                Call to action &lt;ArrowRightIcon /&gt;\n              &lt;/Button&gt;\n            &lt;/AccordionExpandableContentBody&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n        &lt;AccordionItem isExpanded={expanded === &#39;bordered-toggle5&#39;}&gt;\n          &lt;AccordionToggle\n            onClick={() =&gt; {\n              onToggle(&#39;bordered-toggle5&#39;)\n            }}\n            id=\&quot;bordered-toggle5\&quot;\n          &gt;\n            Item five\n          &lt;/AccordionToggle&gt;\n          &lt;AccordionContent id=\&quot;bordered-expand5\&quot;&gt;\n            &lt;p&gt;\n              Vivamus finibus dictum ex id ultrices. Mauris dictum neque a\n              iaculis blandit.\n            &lt;/p&gt;\n          &lt;/AccordionContent&gt;\n        &lt;/AccordionItem&gt;\n      &lt;/Accordion&gt;\n      &lt;div style={{ marginTop: &#39;30px&#39; }}&gt;\n        &lt;Checkbox\n          label=\&quot;Display size large\&quot;\n          isChecked={isDisplayLarge}\n          onChange={(_event, checked) =&gt; setIsDisplayLarge(checked)}\n          aria-label=\&quot;show display large variation checkbox\&quot;\n          id=\&quot;toggle-display-lg\&quot;\n          name=\&quot;toggle-display-lg\&quot;\n        /&gt;\n      &lt;/div&gt;\n    &lt;/&gt;\n  )\n}\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
 <h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-12" data-pf-content="true" class="pf-v6-c-content--h3">Toggle icon at start</h3>
 
-<astro-island uid="Z14PzbN" component-url="/_astro/LiveExample.DZkxbJA_.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionContent,\n  AccordionToggle,\n} from &#39;@patternfly/react-core&#39;\n\nexport const AccordionToggleIconAtStart: React.FunctionComponent = () =&gt; {\n  const [expanded, setExpanded] = useState(&#39;start-toggle-toggle2&#39;)\n\n  const onToggle = (id: string) =&gt; {\n    if (id === expanded) {\n      setExpanded(&#39;&#39;)\n    } else {\n      setExpanded(id)\n    }\n  }\n\n  return (\n    &lt;Accordion togglePosition=\&quot;start\&quot;&gt;\n      &lt;AccordionItem isExpanded={expanded === &#39;start-toggle-toggle1&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;start-toggle-toggle1&#39;)\n          }}\n          id=\&quot;start-toggle-toggle1\&quot;\n        &gt;\n          Item one\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;start-toggle-expand1\&quot;&gt;\n          &lt;p&gt;\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;start-toggle-toggle2&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;start-toggle-toggle2&#39;)\n          }}\n          id=\&quot;start-toggle-toggle2\&quot;\n        &gt;\n          Item two\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;start-toggle-expand2\&quot;&gt;\n          &lt;p&gt;\n            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n            nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n            maximus nunc.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;start-toggle-toggle3&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;start-toggle-toggle3&#39;)\n          }}\n          id=\&quot;start-toggle-toggle3\&quot;\n        &gt;\n          Item three\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;start-toggle-expand3\&quot;&gt;\n          &lt;p&gt;\n            Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci\n            quis ultricies tempus.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;start-toggle-toggle4&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;start-toggle-toggle4&#39;)\n          }}\n          id=\&quot;start-toggle-toggle4\&quot;\n        &gt;\n          Item four\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;start-toggle-expand4\&quot;&gt;\n          &lt;p&gt;\n            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n            efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n            pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n            luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla\n            nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et\n            magnis dis parturient montes, nascetur ridiculus mus. Mauris et\n            velit neque. Donec ultricies condimentum mauris, pellentesque\n            imperdiet libero convallis convallis. Aliquam erat volutpat. Donec\n            rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus\n            nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;start-toggle-toggle5&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;start-toggle-toggle5&#39;)\n          }}\n          id=\&quot;start-toggle-toggle5\&quot;\n        &gt;\n          Item five\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;start-toggle-expand5\&quot;&gt;\n          &lt;p&gt;\n            Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis\n            blandit.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n    &lt;/Accordion&gt;\n  )\n}\n&quot;]}" 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"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=55317D16700CC008E9827CD1S6ZIQxQDUACFUyABh4kwFz5mX1g8OYjciWraWu2FQF%2F0wXUbO4MzF%2FM32tzGK4RAToLMcQW1nTLjSUNiHgDoZHQAnrMCvg79Ul31AvyWMU42hg4cj0QgVSakrfVUHmqHPhxFihBDsNLdqUcgj2zM6h3klXBcFPGj%2FYv3c4xPlCHfJ%2BEQqZQ%3D&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="0ce474bd-2e0f-4c43-9d50-d7da50976af0">
-let script = document.querySelector('script[data-island-id="0ce474bd-2e0f-4c43-9d50-d7da50976af0"]');
+<astro-island uid="ZRwOxm" component-url="/_astro/LiveExample.DjPiO80i.js" component-export="LiveExample" renderer-url="/_astro/client.zs76E0tG.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;\nimport {\n  Accordion,\n  AccordionItem,\n  AccordionContent,\n  AccordionToggle,\n} from &#39;@patternfly/react-core&#39;\n\nexport const AccordionToggleIconAtStart: React.FunctionComponent = () =&gt; {\n  const [expanded, setExpanded] = useState(&#39;start-toggle-toggle2&#39;)\n\n  const onToggle = (id: string) =&gt; {\n    if (id === expanded) {\n      setExpanded(&#39;&#39;)\n    } else {\n      setExpanded(id)\n    }\n  }\n\n  return (\n    &lt;Accordion togglePosition=\&quot;start\&quot;&gt;\n      &lt;AccordionItem isExpanded={expanded === &#39;start-toggle-toggle1&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;start-toggle-toggle1&#39;)\n          }}\n          id=\&quot;start-toggle-toggle1\&quot;\n        &gt;\n          Item one\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;start-toggle-expand1\&quot;&gt;\n          &lt;p&gt;\n            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do\n            eiusmod tempor incididunt ut labore et dolore magna aliqua.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;start-toggle-toggle2&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;start-toggle-toggle2&#39;)\n          }}\n          id=\&quot;start-toggle-toggle2\&quot;\n        &gt;\n          Item two\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;start-toggle-expand2\&quot;&gt;\n          &lt;p&gt;\n            Vivamus et tortor sed arcu congue vehicula eget et diam. Praesent\n            nec dictum lorem. Aliquam id diam ultrices, faucibus erat id,\n            maximus nunc.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;start-toggle-toggle3&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;start-toggle-toggle3&#39;)\n          }}\n          id=\&quot;start-toggle-toggle3\&quot;\n        &gt;\n          Item three\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;start-toggle-expand3\&quot;&gt;\n          &lt;p&gt;\n            Morbi vitae urna quis nunc convallis hendrerit. Aliquam congue orci\n            quis ultricies tempus.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;start-toggle-toggle4&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;start-toggle-toggle4&#39;)\n          }}\n          id=\&quot;start-toggle-toggle4\&quot;\n        &gt;\n          Item four\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;start-toggle-expand4\&quot;&gt;\n          &lt;p&gt;\n            Donec vel posuere orci. Phasellus quis tortor a ex hendrerit\n            efficitur. Aliquam lacinia ligula pharetra, sagittis ex ut,\n            pellentesque diam. Vestibulum ante ipsum primis in faucibus orci\n            luctus et ultrices posuere cubilia Curae; Vestibulum ultricies nulla\n            nibh. Etiam vel dui fermentum ligula ullamcorper eleifend non quis\n            tortor. Morbi tempus ornare tempus. Orci varius natoque penatibus et\n            magnis dis parturient montes, nascetur ridiculus mus. Mauris et\n            velit neque. Donec ultricies condimentum mauris, pellentesque\n            imperdiet libero convallis convallis. Aliquam erat volutpat. Donec\n            rutrum semper tempus. Proin dictum imperdiet nibh, quis dapibus\n            nulla. Integer sed tincidunt lectus, sit amet auctor eros.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n\n      &lt;AccordionItem isExpanded={expanded === &#39;start-toggle-toggle5&#39;}&gt;\n        &lt;AccordionToggle\n          onClick={() =&gt; {\n            onToggle(&#39;start-toggle-toggle5&#39;)\n          }}\n          id=\&quot;start-toggle-toggle5\&quot;\n        &gt;\n          Item five\n        &lt;/AccordionToggle&gt;\n        &lt;AccordionContent id=\&quot;start-toggle-expand5\&quot;&gt;\n          &lt;p&gt;\n            Vivamus finibus dictum ex id ultrices. Mauris dictum neque a iaculis\n            blandit.\n          &lt;/p&gt;\n        &lt;/AccordionContent&gt;\n      &lt;/AccordionItem&gt;\n    &lt;/Accordion&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"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=AB50A3274CA43FE73553E203iVvFUhsZaPsDb%2BEu3rX06l71iIIReSj4VAVlRJh9t%2Bbi7SpiJKC3Y1RWRG8csO8l%2Bq9Am2SJiVPmK0HLbG1XRxYxjZM5Fs839cmrs2MOxGjBpoO7ncou%2B%2F4rEjNug4y7lYCteriJ7UwSu0CLyO%2FEsINbkdaeFhGDzxWSRh3GsveJIXZewKo%3D&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="e7c31e16-328c-493c-ac7d-2f279d776fb4">
+let script = document.querySelector('script[data-island-id="e7c31e16-328c-493c-ac7d-2f279d776fb4"]');
 
-let response = await fetch('/_server-islands/PropsTables?e=default&p=55317D16700CC008E9827CD1S6ZIQxQDUACFUyABh4kwFz5mX1g8OYjciWraWu2FQF%2F0wXUbO4MzF%2FM32tzGK4RAToLMcQW1nTLjSUNiHgDoZHQAnrMCvg79Ul31AvyWMU42hg4cj0QgVSakrfVUHmqHPhxFihBDsNLdqUcgj2zM6h3klXBcFPGj%2FYv3c4xPlCHfJ%2BEQqZQ%3D&s=%7B%7D');
+let response = await fetch('/_server-islands/PropsTables?e=default&p=AB50A3274CA43FE73553E203iVvFUhsZaPsDb%2BEu3rX06l71iIIReSj4VAVlRJh9t%2Bbi7SpiJKC3Y1RWRG8csO8l%2Bq9Am2SJiVPmK0HLbG1XRxYxjZM5Fs839cmrs2MOxGjBpoO7ncou%2B%2F4rEjNug4y7lYCteriJ7UwSu0CLyO%2FEsINbkdaeFhGDzxWSRh3GsveJIXZewKo%3D&s=%7B%7D');
 
 if (script) {
 	if(
@@ -82,10 +82,10 @@ if (script) {
 	}
 	script.remove();
 }
-</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=115DDA9E828B6AE467B90193vxhvviFdg5vRKt223NmHU6ev6XbjKi%2FtPCjO7SFPmnPiwhqIoWsy7zSbpCUdjuXbRjsf&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="a287cd9f-a83a-4569-a184-53bc49174d88">
-let script = document.querySelector('script[data-island-id="a287cd9f-a83a-4569-a184-53bc49174d88"]');
+</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=1A0F169A7DB20E97A9F19EFDSIxQ0hnJjcRfCh0fA%2B79Ym3%2B02%2FmI%2Bys5z5IhmGSt21cXgdGb%2F0FN7ORKFGSH21UgQNw&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="efd726cd-280f-407d-8877-2070c19ba5a2">
+let script = document.querySelector('script[data-island-id="efd726cd-280f-407d-8877-2070c19ba5a2"]');
 
-let response = await fetch('/_server-islands/CSSTable?e=default&p=115DDA9E828B6AE467B90193vxhvviFdg5vRKt223NmHU6ev6XbjKi%2FtPCjO7SFPmnPiwhqIoWsy7zSbpCUdjuXbRjsf&s=%7B%7D');
+let response = await fetch('/_server-islands/CSSTable?e=default&p=1A0F169A7DB20E97A9F19EFDSIxQ0hnJjcRfCh0fA%2B79Ym3%2B02%2FmI%2Bys5z5IhmGSt21cXgdGb%2F0FN7ORKFGSH21UgQNw&s=%7B%7D');
 
 if (script) {
 	if(