@patternfly/react-core 4.242.4 → 4.242.5

package/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.242.5](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.242.4...@patternfly/react-core@4.242.5) (2022-09-26)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## [4.242.4](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@4.242.3...@patternfly/react-core@4.242.4) (2022-09-23)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/umd/react-core.min.css

@@ -19474,6 +19474,45 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-switch__toggle--before--BoxShadow: none;
 }
 
+.pf-c-tab-content {
+  --pf-c-tab-content__body--PaddingTop: 0;
+  --pf-c-tab-content__body--PaddingRight: 0;
+  --pf-c-tab-content__body--PaddingBottom: 0;
+  --pf-c-tab-content__body--PaddingLeft: 0;
+  --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
+  --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
+  --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
+  --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
+  --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
+  --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
+  --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
+}
+
+@media screen and (min-width: 1200px) {
+  .pf-c-tab-content {
+    --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
+    --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
+    --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
+    --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
+  }
+}
+.pf-c-tab-content.pf-m-light-300 {
+  background-color: var(--pf-c-tab-content--m-light-300);
+}
+
+.pf-c-tab-content__body {
+  padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
+}
+
+.pf-c-tab-content__body.pf-m-padding {
+  --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
+  --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
+  --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
+  --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
+}
+
 .pf-c-tabs {
   --pf-c-tabs--inset: 0;
   --pf-c-tabs--Width: auto;
@@ -20444,45 +20483,6 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tabs--m-color-scheme--light-300__link--disabled--BackgroundColor: var(--pf-global--disabled-color--200);
 }
 
-.pf-c-tab-content {
-  --pf-c-tab-content__body--PaddingTop: 0;
-  --pf-c-tab-content__body--PaddingRight: 0;
-  --pf-c-tab-content__body--PaddingBottom: 0;
-  --pf-c-tab-content__body--PaddingLeft: 0;
-  --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-global--spacer--md);
-  --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-global--spacer--md);
-  --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-global--spacer--md);
-  --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-tab-content__body--m-padding--xl--PaddingTop: var(--pf-global--spacer--lg);
-  --pf-c-tab-content__body--m-padding--xl--PaddingRight: var(--pf-global--spacer--lg);
-  --pf-c-tab-content__body--m-padding--xl--PaddingBottom: var(--pf-global--spacer--lg);
-  --pf-c-tab-content__body--m-padding--xl--PaddingLeft: var(--pf-global--spacer--lg);
-  --pf-c-tab-content--m-light-300: var(--pf-global--BackgroundColor--light-300);
-}
-
-@media screen and (min-width: 1200px) {
-  .pf-c-tab-content {
-    --pf-c-tab-content__body--m-padding--PaddingTop: var(--pf-c-tab-content__body--m-padding--xl--PaddingTop);
-    --pf-c-tab-content__body--m-padding--PaddingRight: var(--pf-c-tab-content__body--m-padding--xl--PaddingRight);
-    --pf-c-tab-content__body--m-padding--PaddingBottom: var(--pf-c-tab-content__body--m-padding--xl--PaddingBottom);
-    --pf-c-tab-content__body--m-padding--PaddingLeft: var(--pf-c-tab-content__body--m-padding--xl--PaddingLeft);
-  }
-}
-.pf-c-tab-content.pf-m-light-300 {
-  background-color: var(--pf-c-tab-content--m-light-300);
-}
-
-.pf-c-tab-content__body {
-  padding: var(--pf-c-tab-content__body--PaddingTop) var(--pf-c-tab-content__body--PaddingRight) var(--pf-c-tab-content__body--PaddingBottom) var(--pf-c-tab-content__body--PaddingLeft);
-}
-
-.pf-c-tab-content__body.pf-m-padding {
-  --pf-c-tab-content__body--PaddingTop: var(--pf-c-tab-content__body--m-padding--PaddingTop);
-  --pf-c-tab-content__body--PaddingRight: var(--pf-c-tab-content__body--m-padding--PaddingRight);
-  --pf-c-tab-content__body--PaddingBottom: var(--pf-c-tab-content__body--m-padding--PaddingBottom);
-  --pf-c-tab-content__body--PaddingLeft: var(--pf-c-tab-content__body--m-padding--PaddingLeft);
-}
-
 .pf-c-content {
   --pf-c-content--MarginBottom: var(--pf-global--spacer--md);
   --pf-c-content--LineHeight: var(--pf-global--LineHeight--md);
@@ -20925,6 +20925,109 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-tile--m-disabled__body--Color: var(--pf-global--disabled-color--300);
 }
 
+.pf-c-timestamp {
+  --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
+  --pf-c-timestamp--Color: var(--pf-global--Color--200);
+  --pf-c-timestamp--OutlineOffset: 0.1875rem;
+  --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
+  --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
+  --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
+  --pf-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
+  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
+  --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
+  --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
+  --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
+  --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
+  display: inline-block;
+  font-size: var(--pf-c-timestamp--FontSize);
+  color: var(--pf-c-timestamp--Color);
+  outline-offset: var(--pf-c-timestamp--OutlineOffset);
+}
+
+.pf-c-timestamp.pf-m-help-text {
+  cursor: pointer;
+  text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
+  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
+  text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
+  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
+  text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
+}
+
+.pf-c-timestamp.pf-m-help-text:hover {
+  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
+  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
+}
+
+.pf-c-timestamp.pf-m-help-text:focus {
+  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
+  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
+}
+
+.pf-c-title {
+  --pf-c-title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
+  --pf-c-title--m-4xl--LineHeight: var(--pf-global--LineHeight--sm);
+  --pf-c-title--m-4xl--FontSize: var(--pf-global--FontSize--4xl);
+  --pf-c-title--m-4xl--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-title--m-3xl--LineHeight: var(--pf-global--LineHeight--sm);
+  --pf-c-title--m-3xl--FontSize: var(--pf-global--FontSize--3xl);
+  --pf-c-title--m-3xl--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);
+  --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);
+  --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);
+  --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);
+  --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);
+  --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal);
+  font-family: var(--pf-c-title--FontFamily);
+  word-break: break-word;
+}
+
+.pf-c-title.pf-m-4xl {
+  font-size: var(--pf-c-title--m-4xl--FontSize);
+  font-weight: var(--pf-c-title--m-4xl--FontWeight);
+  line-height: var(--pf-c-title--m-4xl--LineHeight);
+}
+
+.pf-c-title.pf-m-3xl {
+  font-size: var(--pf-c-title--m-3xl--FontSize);
+  font-weight: var(--pf-c-title--m-3xl--FontWeight);
+  line-height: var(--pf-c-title--m-3xl--LineHeight);
+}
+
+.pf-c-title.pf-m-2xl {
+  font-size: var(--pf-c-title--m-2xl--FontSize);
+  font-weight: var(--pf-c-title--m-2xl--FontWeight);
+  line-height: var(--pf-c-title--m-2xl--LineHeight);
+}
+
+.pf-c-title.pf-m-xl {
+  font-size: var(--pf-c-title--m-xl--FontSize);
+  font-weight: var(--pf-c-title--m-xl--FontWeight);
+  line-height: var(--pf-c-title--m-xl--LineHeight);
+}
+
+.pf-c-title.pf-m-lg {
+  font-size: var(--pf-c-title--m-lg--FontSize);
+  font-weight: var(--pf-c-title--m-lg--FontWeight);
+  line-height: var(--pf-c-title--m-lg--LineHeight);
+}
+
+.pf-c-title.pf-m-md {
+  font-size: var(--pf-c-title--m-md--FontSize);
+  font-weight: var(--pf-c-title--m-md--FontWeight);
+  line-height: var(--pf-c-title--m-md--LineHeight);
+}
+
+.pf-m-overpass-font .pf-c-title {
+  --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--semi-bold);
+  --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--semi-bold);
+}
+
 .pf-c-toggle-group {
   --pf-c-toggle-group__button--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-toggle-group__button--PaddingRight: var(--pf-global--spacer--md);
@@ -21045,71 +21148,6 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-toggle-group__button--m-selected--BackgroundColor: var(--pf-global--primary-color--300);
 }
 
-.pf-c-title {
-  --pf-c-title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
-  --pf-c-title--m-4xl--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-title--m-4xl--FontSize: var(--pf-global--FontSize--4xl);
-  --pf-c-title--m-4xl--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-title--m-3xl--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-title--m-3xl--FontSize: var(--pf-global--FontSize--3xl);
-  --pf-c-title--m-3xl--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-title--m-2xl--LineHeight: var(--pf-global--LineHeight--sm);
-  --pf-c-title--m-2xl--FontSize: var(--pf-global--FontSize--2xl);
-  --pf-c-title--m-2xl--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-title--m-xl--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-title--m-xl--FontSize: var(--pf-global--FontSize--xl);
-  --pf-c-title--m-xl--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-title--m-lg--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-title--m-lg--FontSize: var(--pf-global--FontSize--lg);
-  --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--normal);
-  --pf-c-title--m-md--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-title--m-md--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--normal);
-  font-family: var(--pf-c-title--FontFamily);
-  word-break: break-word;
-}
-
-.pf-c-title.pf-m-4xl {
-  font-size: var(--pf-c-title--m-4xl--FontSize);
-  font-weight: var(--pf-c-title--m-4xl--FontWeight);
-  line-height: var(--pf-c-title--m-4xl--LineHeight);
-}
-
-.pf-c-title.pf-m-3xl {
-  font-size: var(--pf-c-title--m-3xl--FontSize);
-  font-weight: var(--pf-c-title--m-3xl--FontWeight);
-  line-height: var(--pf-c-title--m-3xl--LineHeight);
-}
-
-.pf-c-title.pf-m-2xl {
-  font-size: var(--pf-c-title--m-2xl--FontSize);
-  font-weight: var(--pf-c-title--m-2xl--FontWeight);
-  line-height: var(--pf-c-title--m-2xl--LineHeight);
-}
-
-.pf-c-title.pf-m-xl {
-  font-size: var(--pf-c-title--m-xl--FontSize);
-  font-weight: var(--pf-c-title--m-xl--FontWeight);
-  line-height: var(--pf-c-title--m-xl--LineHeight);
-}
-
-.pf-c-title.pf-m-lg {
-  font-size: var(--pf-c-title--m-lg--FontSize);
-  font-weight: var(--pf-c-title--m-lg--FontWeight);
-  line-height: var(--pf-c-title--m-lg--LineHeight);
-}
-
-.pf-c-title.pf-m-md {
-  font-size: var(--pf-c-title--m-md--FontSize);
-  font-weight: var(--pf-c-title--m-md--FontWeight);
-  line-height: var(--pf-c-title--m-md--LineHeight);
-}
-
-.pf-m-overpass-font .pf-c-title {
-  --pf-c-title--m-md--FontWeight: var(--pf-global--FontWeight--semi-bold);
-  --pf-c-title--m-lg--FontWeight: var(--pf-global--FontWeight--semi-bold);
-}
-
 .pf-c-toolbar__content-section, .pf-c-toolbar__content, .pf-c-toolbar__item, .pf-c-toolbar__group {
   --pf-hidden-visible--visible--Visibility: visible;
   --pf-hidden-visible--hidden--Display: none;
@@ -22491,44 +22529,6 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-c-toolbar--spacer: 0;
 }
 
-.pf-c-timestamp {
-  --pf-c-timestamp--FontSize: var(--pf-global--FontSize--sm);
-  --pf-c-timestamp--Color: var(--pf-global--Color--200);
-  --pf-c-timestamp--OutlineOffset: 0.1875rem;
-  --pf-c-timestamp--m-help-text--TextDecorationLine: underline;
-  --pf-c-timestamp--m-help-text--TextDecorationStyle: dashed;
-  --pf-c-timestamp--m-help-text--TextDecorationThickness: var(--pf-global--BorderWidth--sm);
-  --pf-c-timestamp--m-help-text--TextUnderlineOffset: 0.25rem;
-  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-global--BorderColor--200);
-  --pf-c-timestamp--m-help-text--hover--Color: var(--pf-global--Color--100);
-  --pf-c-timestamp--m-help-text--focus--Color: var(--pf-global--Color--100);
-  --pf-c-timestamp--m-help-text--hover--TextDecorationColor: var(--pf-global--Color--100);
-  --pf-c-timestamp--m-help-text--focus--TextDecorationColor: var(--pf-global--Color--100);
-  display: inline-block;
-  font-size: var(--pf-c-timestamp--FontSize);
-  color: var(--pf-c-timestamp--Color);
-  outline-offset: var(--pf-c-timestamp--OutlineOffset);
-}
-
-.pf-c-timestamp.pf-m-help-text {
-  cursor: pointer;
-  text-decoration-line: var(--pf-c-timestamp--m-help-text--TextDecorationLine);
-  text-decoration-style: var(--pf-c-timestamp--m-help-text--TextDecorationStyle);
-  text-decoration-thickness: var(--pf-c-timestamp--m-help-text--TextDecorationThickness);
-  text-underline-offset: var(--pf-c-timestamp--m-help-text--TextUnderlineOffset);
-  text-decoration-color: var(--pf-c-timestamp--m-help-text--TextDecorationColor);
-}
-
-.pf-c-timestamp.pf-m-help-text:hover {
-  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--hover--Color);
-  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--hover--TextDecorationColor);
-}
-
-.pf-c-timestamp.pf-m-help-text:focus {
-  --pf-c-timestamp--Color: var(--pf-c-timestamp--m-help-text--focus--Color);
-  --pf-c-timestamp--m-help-text--TextDecorationColor: var(--pf-c-timestamp--m-help-text--focus--TextDecorationColor);
-}
-
 .pf-c-tooltip {
   --pf-c-tooltip--MaxWidth: 18.75rem;
   --pf-c-tooltip--BoxShadow: var(--pf-global--BoxShadow--md);
@@ -26194,6 +26194,75 @@ label.pf-c-tree-view__node-text {
     --pf-l-flex--spacer: var(--pf-l-flex--spacer--4xl);
   }
 }
+.pf-l-gallery {
+  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
+  --pf-l-gallery--GridTemplateColumns--min: 250px;
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--max: 1fr;
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
+  --pf-l-gallery--GridTemplateRows: auto;
+  display: grid;
+  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
+  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
+  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
+  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
+}
+
+.pf-l-gallery.pf-m-gutter {
+  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
+}
+
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
+  }
+}
+@media (min-width: 768px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-l-gallery {
+    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
+  }
+}
 .pf-l-grid {
   --pf-l-grid--m-gutter--GridGap: var(--pf-global--gutter);
   --pf-l-grid__item--GridColumnStart: auto;
@@ -27408,75 +27477,6 @@ label.pf-c-tree-view__node-text {
   grid-gap: var(--pf-l-grid--m-gutter--GridGap);
 }
 
-.pf-l-gallery {
-  --pf-l-gallery--m-gutter--GridGap: var(--pf-global--gutter);
-  --pf-l-gallery--GridTemplateColumns--min: 250px;
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--max: 1fr;
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-  --pf-l-gallery--GridTemplateColumns: repeat(auto-fill, minmax(var(--pf-l-gallery--GridTemplateColumns--minmax--min), var(--pf-l-gallery--GridTemplateColumns--minmax--max)));
-  --pf-l-gallery--GridTemplateRows: auto;
-  display: grid;
-  grid-template-columns: var(--pf-l-gallery--GridTemplateColumns);
-  grid-template-rows: var(--pf-l-gallery--GridTemplateRows);
-  --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min);
-  --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max);
-}
-
-.pf-l-gallery.pf-m-gutter {
-  grid-gap: var(--pf-l-gallery--m-gutter--GridGap);
-}
-
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--min: var(--pf-l-gallery--GridTemplateColumns--min-on-2xl, var(--pf-l-gallery--GridTemplateColumns--min-on-xl, var(--pf-l-gallery--GridTemplateColumns--min-on-lg, var(--pf-l-gallery--GridTemplateColumns--min-on-md, var(--pf-l-gallery--GridTemplateColumns--min-on-sm, var(--pf-l-gallery--GridTemplateColumns--min))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max));
-  }
-}
-@media (min-width: 768px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-l-gallery {
-    --pf-l-gallery--GridTemplateColumns--minmax--max: var(--pf-l-gallery--GridTemplateColumns--max-on-2xl, var(--pf-l-gallery--GridTemplateColumns--max-on-xl, var(--pf-l-gallery--GridTemplateColumns--max-on-lg, var(--pf-l-gallery--GridTemplateColumns--max-on-md, var(--pf-l-gallery--GridTemplateColumns--max-on-sm, var(--pf-l-gallery--GridTemplateColumns--max))))));
-  }
-}
 .pf-l-level {
   --pf-l-level--m-gutter--MarginRight: var(--pf-global--gutter);
   display: flex;
@@ -27508,21 +27508,6 @@ label.pf-c-tree-view__node-text {
   margin-right: var(--pf-l-split--m-gutter--MarginRight);
 }
 
-.pf-l-stack {
-  --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
-.pf-l-stack__item.pf-m-fill {
-  flex-grow: 1;
-}
-
-.pf-l-stack.pf-m-gutter > *:not(:last-child) {
-  margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
-}
-
 .pf-c-alert-group {
   --pf-c-alert-group__item--MarginTop: var(--pf-global--spacer--sm);
   --pf-c-alert-group--m-toast--Top: var(--pf-global--spacer--2xl);
@@ -27583,6 +27568,21 @@ label.pf-c-tree-view__node-text {
   --pf-c-alert-group__overflow-button--BoxShadow: var(--pf-c-alert-group__overflow-button--active--BoxShadow);
 }
 
+.pf-l-stack {
+  --pf-l-stack--m-gutter--MarginBottom: var(--pf-global--gutter);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.pf-l-stack__item.pf-m-fill {
+  flex-grow: 1;
+}
+
+.pf-l-stack.pf-m-gutter > *:not(:last-child) {
+  margin-bottom: var(--pf-l-stack--m-gutter--MarginBottom);
+}
+
 .pf-c-about-modal-box {
   --pf-global--Color--100: var(--pf-global--Color--light-100);
   --pf-global--Color--200: var(--pf-global--Color--light-200);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.242.4",
+  "version": "4.242.5",
   "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",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "9c5cb016c12b1b532b590285d6607b0c21778960"
+  "gitHead": "a28a80621479fd846257e29d126489f18269cc0f"
 }

package/src/components/Tile/examples/Tile.md

@@ -11,125 +11,34 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 
 ## Examples
 
-Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/documentation/react/demos/tiledemo).
+Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).
 
 ### Basic
 
-```js
-import React from 'react';
-import { Tile } from '@patternfly/react-core';
-
-<div role="listbox" aria-label="Basic tiles">
-  <Tile title="Default" isSelected={false} />
-  <Tile title="Selected" isSelected />
-  <Tile title="Disabled" isDisabled isSelected={false} />
-</div>;
+```ts file="./TileBasic.tsx"
 ```
 
 ### With subtext
 
-```js
-import React from 'react';
-import { Tile } from '@patternfly/react-core';
-
-<div role="listbox" aria-label="Tiles with subtext">
-  <Tile title="Default" isSelected={false}>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Selected" isSelected>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Disabled" isDisabled isSelected={false}>
-    Subtext goes here
-  </Tile>
-</div>;
+```ts file="./TileWithSubtext.tsx"
 ```
 
 ### With icon
 
-```js
-import React from 'react';
-import { Tile } from '@patternfly/react-core';
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
-
-<div role="listbox" aria-label="Tiles with icon">
-  <Tile title="Default" icon={<PlusIcon />} isSelected={false}>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Selected" icon={<PlusIcon />} isSelected>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Disabled" icon={<PlusIcon />} isDisabled isSelected={false}>
-    Subtext goes here
-  </Tile>
-</div>;
+```ts file="./TileWithIcon.tsx"
 ```
 
 ### Stacked
 
-```js
-import React from 'react';
-import { Tile } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-<div role="listbox" aria-label="Stacked tiles">
-  <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
-    Subtext goes here
-  </Tile>
-</div>;
+```ts file="./TileStacked.tsx"
 ```
 
 ### Stacked with large icons
 
-```js
-import React from 'react';
-import { Tile } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-<div role="listbox" aria-label="Stacked tiles with large icons">
-  <Tile title="Default" icon={<BellIcon />} isStacked isDisplayLarge isSelected={false}>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Selected" icon={<BellIcon />} isStacked isDisplayLarge isSelected>
-    Subtext goes here
-  </Tile>{' '}
-  <Tile title="Disabled" icon={<BellIcon />} isStacked isDisplayLarge isDisabled isSelected={false}>
-    Subtext goes here
-  </Tile>
-</div>;
+```ts file="./TileStackedWithLargeIcons.tsx"
 ```
 
 ### With extra content
 
-```js
-import React from 'react';
-import { Tile, Flex } from '@patternfly/react-core';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-
-<div role="listbox" aria-label="Tiles with extra content">
-  <Flex>
-    <Flex flex={{ default: 'flex_1' }}>
-      <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
-        This is really really long subtext that goes on for so long that it has to wrap to the next line. This is really
-        really long subtext that goes on for so long that it has to wrap to the next line.
-      </Tile>
-    </Flex>
-    <Flex flex={{ default: 'flex_1' }}>
-      <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
-        This is really really long subtext that goes on for so long that it has to wrap to the next line.
-      </Tile>
-    </Flex>
-    <Flex flex={{ default: 'flex_1' }}>
-      <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
-        Subtext goes here
-      </Tile>
-    </Flex>
-  </Flex>
-</div>;
+```ts file="./TileWithExtraContent.tsx"
 ```

package/src/components/Tile/examples/TileBasic.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { Tile } from '@patternfly/react-core';
+
+export const TileBasic: React.FunctionComponent = () => (
+  <div role="listbox" aria-label="Basic tiles">
+    <Tile title="Default" isSelected={false} />
+    <Tile title="Selected" isSelected />
+    <Tile title="Disabled" isDisabled isSelected={false} />
+  </div>
+);

package/src/components/Tile/examples/TileStacked.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Tile } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const TileStacked: React.FunctionComponent = () => (
+  <div role="listbox" aria-label="Stacked tiles">
+    <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
+      Subtext goes here
+    </Tile>
+  </div>
+);

package/src/components/Tile/examples/TileStackedWithLargeIcons.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Tile } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const TileStackedWithLargeIcons: React.FunctionComponent = () => (
+  <div role="listbox" aria-label="Stacked tiles with large icons">
+    <Tile title="Default" icon={<BellIcon />} isStacked isDisplayLarge isSelected={false}>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Selected" icon={<BellIcon />} isStacked isDisplayLarge isSelected>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Disabled" icon={<BellIcon />} isStacked isDisplayLarge isDisabled isSelected={false}>
+      Subtext goes here
+    </Tile>
+  </div>
+);

package/src/components/Tile/examples/TileWithExtraContent.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Tile, Flex } from '@patternfly/react-core';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+
+export const TileWithExtraContent: React.FunctionComponent = () => (
+  <div role="listbox" aria-label="Tiles with extra content">
+    <Flex>
+      <Flex flex={{ default: 'flex_1' }}>
+        <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
+          This is really really long subtext that goes on for so long that it has to wrap to the next line. This is
+          really really long subtext that goes on for so long that it has to wrap to the next line.
+        </Tile>
+      </Flex>
+      <Flex flex={{ default: 'flex_1' }}>
+        <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
+          This is really really long subtext that goes on for so long that it has to wrap to the next line.
+        </Tile>
+      </Flex>
+      <Flex flex={{ default: 'flex_1' }}>
+        <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
+          Subtext goes here
+        </Tile>
+      </Flex>
+    </Flex>
+  </div>
+);

package/src/components/Tile/examples/TileWithIcon.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Tile } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const TileWithIcon: React.FunctionComponent = () => (
+  <div role="listbox" aria-label="Tiles with icon">
+    <Tile title="Default" icon={<PlusIcon />} isSelected={false}>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Selected" icon={<PlusIcon />} isSelected>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Disabled" icon={<PlusIcon />} isDisabled isSelected={false}>
+      Subtext goes here
+    </Tile>
+  </div>
+);

package/src/components/Tile/examples/TileWithSubtext.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Tile } from '@patternfly/react-core';
+
+export const TileWithSubtext: React.FunctionComponent = () => (
+  <div role="listbox" aria-label="Tiles with subtext">
+    <Tile title="Default" isSelected={false}>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Selected" isSelected>
+      Subtext goes here
+    </Tile>{' '}
+    <Tile title="Disabled" isDisabled isSelected={false}>
+      Subtext goes here
+    </Tile>
+  </div>
+);

package/src/demos/TileDemo.md

@@ -27,10 +27,10 @@ const TileSingleSelect: React.FunctionComponent = () => {
 
   return (
     <div role="listbox" aria-label="Single selection tiles">
-      <Tile title="Tile 1" id="single-select-tile-1" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-1'} />
-      <Tile title="Tile 2" id="single-select-tile-2" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-2'} />
-      <Tile title="Tile 3" id="single-select-tile-3" isDisabled isSelected={selectedId === 'tile-3'} />
-      <Tile title="Tile 4" id="single-select-tile-4" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'tile-4'} />
+      <Tile title="Tile 1" id="single-select-tile-1" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'single-select-tile-1'} />
+      <Tile title="Tile 2" id="single-select-tile-2" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'single-select-tile-2'} />
+      <Tile title="Tile 3" id="single-select-tile-3" isDisabled isSelected={selectedId === 'single-select-tile-3'} />
+      <Tile title="Tile 4" id="single-select-tile-4" onClick={onSelect} onKeyDown={onKeyDown} isSelected={selectedId === 'single-select-tile-4'} />
     </div>
   );
 };
@@ -71,14 +71,14 @@ const TileMultiSelect: React.FunctionComponent = () => {
         id="multiselect-tile-1"
         onClick={onSelect}
         onKeyDown={onKeyDown}
-        isSelected={selectedIds.includes('tile-1')}
+        isSelected={selectedIds.includes('multiselect-tile-1')}
       />
       <Tile
         title="Tile 2"
         id="multiselect-tile-2"
         onClick={onSelect}
         onKeyDown={onKeyDown}
-        isSelected={selectedIds.includes('tile-2')}
+        isSelected={selectedIds.includes('multiselect-tile-2')}
       />
       <Tile title="Tile 3" id="multiselect-tile-3" isDisabled />
       <Tile
@@ -86,7 +86,7 @@ const TileMultiSelect: React.FunctionComponent = () => {
         id="multiselect-tile-4"
         onClick={onSelect}
         onKeyDown={onKeyDown}
-        isSelected={selectedIds.includes('tile-4')}
+        isSelected={selectedIds.includes('multiselect-tile-4')}
       />
     </div>
   );