@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.41

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.3","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.40","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.3","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.40","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.3","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.40","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.4",
+  "version": "6.5.0-prerelease.41",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,22 +46,22 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.2",
-    "@patternfly/react-styles": "^6.5.0-prerelease.2",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.2",
-    "focus-trap": "7.6.4",
+    "@patternfly/react-icons": "^6.5.0-prerelease.17",
+    "@patternfly/react-styles": "^6.5.0-prerelease.14",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.13",
+    "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.12",
+    "@patternfly/patternfly": "6.5.0-prerelease.55",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
-    "fs-extra": "^11.3.0"
+    "fs-extra": "^11.3.3"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "912729437db337b5e576adbe8d06bdf2bc04b189"
+  "gitHead": "4e03cd7da10407b9cefaa7dffee6904669dc56c4"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -6,7 +6,7 @@ import { AboutModalBoxBrand } from './AboutModalBoxBrand';
 import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
 import { Modal, ModalVariant } from '../Modal';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 
 export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the about modal */
@@ -56,6 +56,8 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
   disableFocusTrap,
   ...props
 }: AboutModalProps) => {
+  const ariaLabelledBy = useSSRSafeId('pf-about-modal-title-');
+
   if (brandImageSrc && !brandImageAlt) {
     // eslint-disable-next-line no-console
     console.error(
@@ -73,35 +75,29 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
     return null;
   }
   return (
-    <GenerateId prefix="pf-about-modal-title-">
-      {(ariaLabelledBy) => (
-        <Modal
-          isOpen={isOpen}
-          variant={ModalVariant.large}
-          {...(productName && { 'aria-labelledby': ariaLabelledBy })}
-          aria-label={ariaLabel}
-          onEscapePress={onClose}
-          appendTo={appendTo}
-          disableFocusTrap={disableFocusTrap}
-        >
-          <AboutModalBox
-            style={
-              backgroundImageSrc
-                ? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties)
-                : {}
-            }
-            className={css(className)}
-          >
-            <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
-            <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
-            {productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
-            <AboutModalBoxContent trademark={trademark} hasNoContentContainer={hasNoContentContainer} {...props}>
-              {children}
-            </AboutModalBoxContent>
-          </AboutModalBox>
-        </Modal>
-      )}
-    </GenerateId>
+    <Modal
+      isOpen={isOpen}
+      variant={ModalVariant.large}
+      {...(productName && { 'aria-labelledby': ariaLabelledBy })}
+      aria-label={ariaLabel}
+      onEscapePress={onClose}
+      appendTo={appendTo}
+      disableFocusTrap={disableFocusTrap}
+    >
+      <AboutModalBox
+        style={
+          backgroundImageSrc ? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties) : {}
+        }
+        className={css(className)}
+      >
+        <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
+        <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
+        {productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
+        <AboutModalBoxContent trademark={trademark} hasNoContentContainer={hasNoContentContainer} {...props}>
+          {children}
+        </AboutModalBoxContent>
+      </AboutModalBox>
+    </Modal>
   );
 };
 AboutModal.displayName = 'AboutModal';

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
     <button
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-1"
+      data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -22,12 +22,24 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 352 512"
           width="1em"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 352 512"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+            />
+          </svg>
         </svg>
       </span>
     </button>
@@ -43,7 +55,7 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
     <button
       aria-label="Klose Daylok"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-3"
+      data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -57,12 +69,24 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 352 512"
           width="1em"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 352 512"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+            />
+          </svg>
         </svg>
       </span>
     </button>
@@ -78,7 +102,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
     <button
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-2"
+      data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -92,12 +116,24 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 352 512"
           width="1em"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 352 512"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+            />
+          </svg>
         </svg>
       </span>
     </button>

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`AboutModalBoxHeader Test 1`] = `
   >
     <h1
       class="pf-v6-c-title pf-m-4xl"
-      data-ouia-component-id="OUIA-Generated-Title-1"
+      data-ouia-component-id="OUIA-Generated-Title-:r0:"
       data-ouia-component-type="PF6/Title"
       data-ouia-safe="true"
       id="id"

package/src/components/Accordion/AccordionToggle.tsx

@@ -4,8 +4,10 @@ import styles from '@patternfly/react-styles/css/components/Accordion/accordion'
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { AccordionContext, AccordionItemContext } from './AccordionContext';
 
-export interface AccordionToggleProps
-  extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+export interface AccordionToggleProps extends React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> {
   /** Content rendered inside the Accordion toggle  */
   children?: React.ReactNode;
   /** Additional classes added to the Accordion Toggle  */

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
   <button
     aria-label="Close some label alert: test title"
     class="pf-v6-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-1"
+    data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"
@@ -19,12 +19,24 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 352 512"
         width="1em"
       >
-        <path
-          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 352 512"
+        >
+          <path
+            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+          />
+        </svg>
       </svg>
     </span>
   </button>

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <button
     class="pf-v6-c-button pf-m-link pf-m-inline ''"
-    data-ouia-component-id="OUIA-Generated-Button-link-1"
+    data-ouia-component-id="OUIA-Generated-Button-link-:r0:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap

@@ -11,12 +11,24 @@ exports[`AlertIcon should match snapshot (auto-generated) 1`] = `
       fill="currentColor"
       height="1em"
       role="img"
-      viewBox="0 0 512 512"
       width="1em"
     >
-      <path
-        d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
-      />
+      <svg
+        class="pf-v6-icon-default"
+        viewBox="0 0 512 512"
+      >
+        <path
+          d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+        />
+      </svg>
+      <svg
+        class="pf-v6-icon-rh-ui"
+        viewBox="0 0 32 32"
+      >
+        <path
+          d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm7.707-17.707a.999.999 0 0 1 0 1.414l-8.646 8.646c-.292.292-.676.438-1.061.438s-.768-.146-1.061-.438l-4.646-4.646a.999.999 0 1 1 1.414-1.414L14 19.586l8.293-8.293a.999.999 0 0 1 1.414 0Z"
+        />
+      </svg>
     </svg>
   </div>
 </DocumentFragment>

package/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -28,12 +28,24 @@ exports[`Matches the snapshot 1`] = `
       fill="currentColor"
       height="1em"
       role="img"
-      viewBox="0 0 352 512"
       width="1em"
     >
-      <path
-        d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-      />
+      <svg
+        class="pf-v6-icon-default"
+        viewBox="0 0 352 512"
+      >
+        <path
+          d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+        />
+      </svg>
+      <svg
+        class="pf-v6-icon-rh-ui"
+        viewBox="0 0 32 32"
+      >
+        <path
+          d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+        />
+      </svg>
     </svg>
   </div>
 </DocumentFragment>

package/src/components/Alert/examples/AlertAsyncLiveRegion.tsx

@@ -42,13 +42,7 @@ export const AsyncLiveRegionAlert: React.FunctionComponent = () => {
           text="Async alerts on"
           buttonId="async-alerts-on"
           isSelected={isActive}
-          onChange={() => setIsActive(true)}
-        />
-        <ToggleGroupItem
-          text="Async alerts off"
-          buttonId="async-alerts-off"
-          isSelected={!isActive}
-          onChange={() => setIsActive(false)}
+          onChange={() => setIsActive(!isActive)}
         />
       </ToggleGroup>
       <AlertGroup hasAnimations isLiveRegion>

package/src/components/Avatar/Avatar.tsx

@@ -1,8 +1,10 @@
 import styles from '@patternfly/react-styles/css/components/Avatar/avatar';
 import { css } from '@patternfly/react-styles';
 
-export interface AvatarProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+export interface AvatarProps extends React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> {
   /** Additional classes added to the avatar. */
   className?: string;
   /** Attribute that specifies the URL of the image for the avatar. */

package/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snap

@@ -31,12 +31,24 @@ exports[`Matches the snapshot 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 320 512"
         width="1em"
       >
-        <path
-          d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 320 512"
+        >
+          <path
+            d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M29 22a.997.997 0 0 1-.707-.293L16 9.414 3.707 21.707a.999.999 0 1 1-1.414-1.414L14.939 7.646a1.501 1.501 0 0 1 2.121 0l12.646 12.646a.999.999 0 0 1-.707 1.707Z"
+          />
+        </svg>
       </svg>
     </div>
   </div>

package/src/components/Brand/Brand.tsx

@@ -4,8 +4,10 @@ import { setBreakpointCssVars } from '../../helpers';
 import cssBrandHeight from '@patternfly/react-tokens/dist/esm/c_brand_Height';
 import cssBrandWidth from '@patternfly/react-tokens/dist/esm/c_brand_Width';
 
-export interface BrandProps
-  extends React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement> {
+export interface BrandProps extends React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+> {
   /** Transforms the Brand into a <picture> element from an <img> element. Container for <source> child elements. */
   children?: React.ReactNode;
   /** Additional classes added to the either type of Brand. */

package/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Breadcrumb component should render breadcrumb with aria-label 1`] = `
   <nav
     aria-label="custom label"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-3"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r2:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -22,7 +22,7 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-4"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r3:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -53,12 +53,24 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 256 512"
             width="1em"
           >
-            <path
-              d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-            />
+            <svg
+              class="pf-v6-icon-default"
+              viewBox="0 0 256 512"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              />
+            </svg>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+              />
+            </svg>
           </svg>
         </span>
         <a
@@ -78,7 +90,7 @@ exports[`Breadcrumb component should render breadcrumb with className 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb className"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-2"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r1:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >
@@ -95,7 +107,7 @@ exports[`Breadcrumb component should render default breadcrumb 1`] = `
   <nav
     aria-label="Breadcrumb"
     class="pf-v6-c-breadcrumb"
-    data-ouia-component-id="OUIA-Generated-Breadcrumb-1"
+    data-ouia-component-id="OUIA-Generated-Breadcrumb-:r0:"
     data-ouia-component-type="PF6/Breadcrumb"
     data-ouia-safe="true"
   >

package/src/components/Button/__tests__/__snapshots__/Button.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`Renders basic button 1`] = `
   <button
     aria-label="basic button"
     class="pf-v6-c-button pf-m-primary"
-    data-ouia-component-id="OUIA-Generated-Button-primary-67"
+    data-ouia-component-id="OUIA-Generated-Button-primary-:r30:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/CalendarMonth/CalendarMonth.tsx

@@ -8,7 +8,7 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico
 import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
-import { getUniqueId } from '../../helpers/util';
+import { useSSRSafeId } from '../../helpers';
 import { isValidDate } from '../../helpers/datetimeUtils';
 
 export enum Weekday {
@@ -170,7 +170,7 @@ export const CalendarMonth = ({
 
   const [hoveredDate, setHoveredDate] = useState<Date>(undefined);
   const focusRef = useRef<HTMLButtonElement>(undefined);
-  const [hiddenMonthId] = useState(getUniqueId('hidden-month-span'));
+  const hiddenMonthId = useSSRSafeId('hidden-month-span');
   const [shouldFocus, setShouldFocus] = useState(false);
 
   const isValidated = (date: Date) => validators.every((validator) => validator(date));