@patternfly/react-styles 4.55.0 → 4.55.1

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.55.1 (2022-04-19)
+
+**Note:** Version bump only for package @patternfly/react-styles
+
+
+
+
+
 # 4.55.0 (2022-04-18)
 
 

package/css/components/Divider/divider.css

@@ -63,42 +63,58 @@
 }
 
 .pf-c-divider {
-  --pf-c-divider--Height: var(--pf-global--BorderWidth--sm);
+  --pf-c-divider--BorderWidth--base: var(--pf-global--BorderWidth--sm);
+  --pf-c-divider--BorderColor--base: var(--pf-c-divider--BackgroundColor);
+  --pf-c-divider--Height: var(--pf-c-divider--BorderWidth--base);
   --pf-c-divider--BackgroundColor: var(--pf-global--BorderColor--100);
-  --pf-c-divider--after--Height: var(--pf-c-divider--Height);
-  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BackgroundColor);
-  --pf-c-divider--Display: flex;
+  --pf-c-divider--after--BackgroundColor: var(--pf-c-divider--BorderColor--base);
   --pf-c-divider--after--FlexBasis: 100%;
   --pf-c-divider--after--Inset: 0%;
   --pf-c-divider--m-vertical--after--FlexBasis: 100%;
-  --pf-c-divider--m-vertical--after--Width: var(--pf-global--BorderWidth--sm);
+  --pf-c-divider--m-horizontal--Display: flex;
+  --pf-c-divider--m-horizontal--FlexDirection: row;
+  --pf-c-divider--m-horizontal--after--Height: var(--pf-c-divider--Height);
+  --pf-c-divider--m-horizontal--after--Width: auto;
+  --pf-c-divider--m-vertical--Display: inline-flex;
+  --pf-c-divider--m-vertical--FlexDirection: column;
+  --pf-c-divider--m-vertical--after--Height: auto;
+  --pf-c-divider--m-vertical--after--Width: var(--pf-c-divider--BorderWidth--base);
   --pf-hidden-visible--visible--Display: var(--pf-c-divider--Display);
+  --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+  width: 100%;
+  height: auto;
+  display: var(--pf-c-divider--Display);
+  flex-direction: var(--pf-c-divider--FlexDirection);
   align-items: center;
   align-self: stretch;
   flex-shrink: 0;
   justify-content: center;
-  width: 100%;
   border: 0;
 }
 .pf-c-divider::after {
-  flex-basis: calc(var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2));
+  flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+}
+.pf-c-divider::after {
   align-self: stretch;
+  width: var(--pf-c-divider--after--Width);
   height: var(--pf-c-divider--after--Height);
   content: "";
   background-color: var(--pf-c-divider--after--BackgroundColor);
   justify-self: center;
 }
 .pf-c-divider.pf-m-vertical {
-  display: inline-flex;
-  flex-direction: column;
+  --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+  --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+  --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+  --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
   width: auto;
   height: inherit;
-  min-height: 100%;
-  max-height: 100%;
 }
 .pf-c-divider.pf-m-vertical::after {
-  flex-basis: calc(var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset));
-  width: var(--pf-c-divider--m-vertical--after--Width);
+  flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
 }
 .pf-c-divider.pf-m-inset-none {
   --pf-c-divider--after--Inset: 0%;
@@ -124,6 +140,32 @@
 .pf-c-divider.pf-m-inset-3xl {
   --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
 }
+@media (min-width: 576px) {
+  .pf-c-divider.pf-m-horizontal-on-sm {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+  .pf-c-divider.pf-m-horizontal-on-sm::after {
+    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-divider.pf-m-vertical-on-sm {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+  .pf-c-divider.pf-m-vertical-on-sm::after {
+    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+  }
+}
 @media (min-width: 576px) {
   .pf-c-divider.pf-m-inset-none-on-sm {
     --pf-c-divider--after--Inset: 0%;
@@ -150,6 +192,32 @@
     --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
   }
 }
+@media (min-width: 768px) {
+  .pf-c-divider.pf-m-horizontal-on-md {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+  .pf-c-divider.pf-m-horizontal-on-md::after {
+    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-divider.pf-m-vertical-on-md {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+  .pf-c-divider.pf-m-vertical-on-md::after {
+    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+  }
+}
 @media (min-width: 768px) {
   .pf-c-divider.pf-m-inset-none-on-md {
     --pf-c-divider--after--Inset: 0%;
@@ -176,6 +244,32 @@
     --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
   }
 }
+@media (min-width: 992px) {
+  .pf-c-divider.pf-m-horizontal-on-lg {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+  .pf-c-divider.pf-m-horizontal-on-lg::after {
+    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-divider.pf-m-vertical-on-lg {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+  .pf-c-divider.pf-m-vertical-on-lg::after {
+    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+  }
+}
 @media (min-width: 992px) {
   .pf-c-divider.pf-m-inset-none-on-lg {
     --pf-c-divider--after--Inset: 0%;
@@ -202,6 +296,32 @@
     --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
   }
 }
+@media (min-width: 1200px) {
+  .pf-c-divider.pf-m-horizontal-on-xl {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+  .pf-c-divider.pf-m-horizontal-on-xl::after {
+    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-divider.pf-m-vertical-on-xl {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+  .pf-c-divider.pf-m-vertical-on-xl::after {
+    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+  }
+}
 @media (min-width: 1200px) {
   .pf-c-divider.pf-m-inset-none-on-xl {
     --pf-c-divider--after--Inset: 0%;
@@ -228,6 +348,32 @@
     --pf-c-divider--after--Inset: var(--pf-global--spacer--3xl);
   }
 }
+@media (min-width: 1450px) {
+  .pf-c-divider.pf-m-horizontal-on-2xl {
+    --pf-c-divider--Display: var(--pf-c-divider--m-horizontal--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-horizontal--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-horizontal--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-horizontal--after--Height);
+    width: 100%;
+    height: auto;
+  }
+  .pf-c-divider.pf-m-horizontal-on-2xl::after {
+    flex-basis: calc( var(--pf-c-divider--after--FlexBasis) - calc(var(--pf-c-divider--after--Inset) * 2) );
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-divider.pf-m-vertical-on-2xl {
+    --pf-c-divider--Display: var(--pf-c-divider--m-vertical--Display);
+    --pf-c-divider--FlexDirection: var(--pf-c-divider--m-vertical--FlexDirection);
+    --pf-c-divider--after--Width: var(--pf-c-divider--m-vertical--after--Width);
+    --pf-c-divider--after--Height: var(--pf-c-divider--m-vertical--after--Height);
+    width: auto;
+    height: inherit;
+  }
+  .pf-c-divider.pf-m-vertical-on-2xl::after {
+    flex-basis: calc( var(--pf-c-divider--m-vertical--after--FlexBasis) - var(--pf-c-divider--after--Inset) );
+  }
+}
 @media (min-width: 1450px) {
   .pf-c-divider.pf-m-inset-none-on-2xl {
     --pf-c-divider--after--Inset: 0%;

package/css/components/Divider/divider.d.ts

@@ -22,6 +22,8 @@ declare const _default: {
     "insetXl": "pf-m-inset-xl",
     "inset_2xl": "pf-m-inset-2xl",
     "inset_3xl": "pf-m-inset-3xl",
+    "horizontalOnSm": "pf-m-horizontal-on-sm",
+    "verticalOnSm": "pf-m-vertical-on-sm",
     "insetNoneOnSm": "pf-m-inset-none-on-sm",
     "insetXsOnSm": "pf-m-inset-xs-on-sm",
     "insetSmOnSm": "pf-m-inset-sm-on-sm",
@@ -30,6 +32,8 @@ declare const _default: {
     "insetXlOnSm": "pf-m-inset-xl-on-sm",
     "inset_2xlOnSm": "pf-m-inset-2xl-on-sm",
     "inset_3xlOnSm": "pf-m-inset-3xl-on-sm",
+    "horizontalOnMd": "pf-m-horizontal-on-md",
+    "verticalOnMd": "pf-m-vertical-on-md",
     "insetNoneOnMd": "pf-m-inset-none-on-md",
     "insetXsOnMd": "pf-m-inset-xs-on-md",
     "insetSmOnMd": "pf-m-inset-sm-on-md",
@@ -38,6 +42,8 @@ declare const _default: {
     "insetXlOnMd": "pf-m-inset-xl-on-md",
     "inset_2xlOnMd": "pf-m-inset-2xl-on-md",
     "inset_3xlOnMd": "pf-m-inset-3xl-on-md",
+    "horizontalOnLg": "pf-m-horizontal-on-lg",
+    "verticalOnLg": "pf-m-vertical-on-lg",
     "insetNoneOnLg": "pf-m-inset-none-on-lg",
     "insetXsOnLg": "pf-m-inset-xs-on-lg",
     "insetSmOnLg": "pf-m-inset-sm-on-lg",
@@ -46,6 +52,8 @@ declare const _default: {
     "insetXlOnLg": "pf-m-inset-xl-on-lg",
     "inset_2xlOnLg": "pf-m-inset-2xl-on-lg",
     "inset_3xlOnLg": "pf-m-inset-3xl-on-lg",
+    "horizontalOnXl": "pf-m-horizontal-on-xl",
+    "verticalOnXl": "pf-m-vertical-on-xl",
     "insetNoneOnXl": "pf-m-inset-none-on-xl",
     "insetXsOnXl": "pf-m-inset-xs-on-xl",
     "insetSmOnXl": "pf-m-inset-sm-on-xl",
@@ -54,6 +62,8 @@ declare const _default: {
     "insetXlOnXl": "pf-m-inset-xl-on-xl",
     "inset_2xlOnXl": "pf-m-inset-2xl-on-xl",
     "inset_3xlOnXl": "pf-m-inset-3xl-on-xl",
+    "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
+    "verticalOn_2xl": "pf-m-vertical-on-2xl",
     "insetNoneOn_2xl": "pf-m-inset-none-on-2xl",
     "insetXsOn_2xl": "pf-m-inset-xs-on-2xl",
     "insetSmOn_2xl": "pf-m-inset-sm-on-2xl",

package/css/components/Divider/divider.js

@@ -24,6 +24,8 @@ exports.default = {
     "insetXl": "pf-m-inset-xl",
     "inset_2xl": "pf-m-inset-2xl",
     "inset_3xl": "pf-m-inset-3xl",
+    "horizontalOnSm": "pf-m-horizontal-on-sm",
+    "verticalOnSm": "pf-m-vertical-on-sm",
     "insetNoneOnSm": "pf-m-inset-none-on-sm",
     "insetXsOnSm": "pf-m-inset-xs-on-sm",
     "insetSmOnSm": "pf-m-inset-sm-on-sm",
@@ -32,6 +34,8 @@ exports.default = {
     "insetXlOnSm": "pf-m-inset-xl-on-sm",
     "inset_2xlOnSm": "pf-m-inset-2xl-on-sm",
     "inset_3xlOnSm": "pf-m-inset-3xl-on-sm",
+    "horizontalOnMd": "pf-m-horizontal-on-md",
+    "verticalOnMd": "pf-m-vertical-on-md",
     "insetNoneOnMd": "pf-m-inset-none-on-md",
     "insetXsOnMd": "pf-m-inset-xs-on-md",
     "insetSmOnMd": "pf-m-inset-sm-on-md",
@@ -40,6 +44,8 @@ exports.default = {
     "insetXlOnMd": "pf-m-inset-xl-on-md",
     "inset_2xlOnMd": "pf-m-inset-2xl-on-md",
     "inset_3xlOnMd": "pf-m-inset-3xl-on-md",
+    "horizontalOnLg": "pf-m-horizontal-on-lg",
+    "verticalOnLg": "pf-m-vertical-on-lg",
     "insetNoneOnLg": "pf-m-inset-none-on-lg",
     "insetXsOnLg": "pf-m-inset-xs-on-lg",
     "insetSmOnLg": "pf-m-inset-sm-on-lg",
@@ -48,6 +54,8 @@ exports.default = {
     "insetXlOnLg": "pf-m-inset-xl-on-lg",
     "inset_2xlOnLg": "pf-m-inset-2xl-on-lg",
     "inset_3xlOnLg": "pf-m-inset-3xl-on-lg",
+    "horizontalOnXl": "pf-m-horizontal-on-xl",
+    "verticalOnXl": "pf-m-vertical-on-xl",
     "insetNoneOnXl": "pf-m-inset-none-on-xl",
     "insetXsOnXl": "pf-m-inset-xs-on-xl",
     "insetSmOnXl": "pf-m-inset-sm-on-xl",
@@ -56,6 +64,8 @@ exports.default = {
     "insetXlOnXl": "pf-m-inset-xl-on-xl",
     "inset_2xlOnXl": "pf-m-inset-2xl-on-xl",
     "inset_3xlOnXl": "pf-m-inset-3xl-on-xl",
+    "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
+    "verticalOn_2xl": "pf-m-vertical-on-2xl",
     "insetNoneOn_2xl": "pf-m-inset-none-on-2xl",
     "insetXsOn_2xl": "pf-m-inset-xs-on-2xl",
     "insetSmOn_2xl": "pf-m-inset-sm-on-2xl",

package/css/components/Divider/divider.mjs

@@ -22,6 +22,8 @@ export default {
     "insetXl": "pf-m-inset-xl",
     "inset_2xl": "pf-m-inset-2xl",
     "inset_3xl": "pf-m-inset-3xl",
+    "horizontalOnSm": "pf-m-horizontal-on-sm",
+    "verticalOnSm": "pf-m-vertical-on-sm",
     "insetNoneOnSm": "pf-m-inset-none-on-sm",
     "insetXsOnSm": "pf-m-inset-xs-on-sm",
     "insetSmOnSm": "pf-m-inset-sm-on-sm",
@@ -30,6 +32,8 @@ export default {
     "insetXlOnSm": "pf-m-inset-xl-on-sm",
     "inset_2xlOnSm": "pf-m-inset-2xl-on-sm",
     "inset_3xlOnSm": "pf-m-inset-3xl-on-sm",
+    "horizontalOnMd": "pf-m-horizontal-on-md",
+    "verticalOnMd": "pf-m-vertical-on-md",
     "insetNoneOnMd": "pf-m-inset-none-on-md",
     "insetXsOnMd": "pf-m-inset-xs-on-md",
     "insetSmOnMd": "pf-m-inset-sm-on-md",
@@ -38,6 +42,8 @@ export default {
     "insetXlOnMd": "pf-m-inset-xl-on-md",
     "inset_2xlOnMd": "pf-m-inset-2xl-on-md",
     "inset_3xlOnMd": "pf-m-inset-3xl-on-md",
+    "horizontalOnLg": "pf-m-horizontal-on-lg",
+    "verticalOnLg": "pf-m-vertical-on-lg",
     "insetNoneOnLg": "pf-m-inset-none-on-lg",
     "insetXsOnLg": "pf-m-inset-xs-on-lg",
     "insetSmOnLg": "pf-m-inset-sm-on-lg",
@@ -46,6 +52,8 @@ export default {
     "insetXlOnLg": "pf-m-inset-xl-on-lg",
     "inset_2xlOnLg": "pf-m-inset-2xl-on-lg",
     "inset_3xlOnLg": "pf-m-inset-3xl-on-lg",
+    "horizontalOnXl": "pf-m-horizontal-on-xl",
+    "verticalOnXl": "pf-m-vertical-on-xl",
     "insetNoneOnXl": "pf-m-inset-none-on-xl",
     "insetXsOnXl": "pf-m-inset-xs-on-xl",
     "insetSmOnXl": "pf-m-inset-sm-on-xl",
@@ -54,6 +62,8 @@ export default {
     "insetXlOnXl": "pf-m-inset-xl-on-xl",
     "inset_2xlOnXl": "pf-m-inset-2xl-on-xl",
     "inset_3xlOnXl": "pf-m-inset-3xl-on-xl",
+    "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
+    "verticalOn_2xl": "pf-m-vertical-on-2xl",
     "insetNoneOn_2xl": "pf-m-inset-none-on-2xl",
     "insetXsOn_2xl": "pf-m-inset-xs-on-2xl",
     "insetSmOn_2xl": "pf-m-inset-sm-on-2xl",

package/css/components/Page/page.css

@@ -211,6 +211,7 @@
   --pf-c-page__main-wizard--BackgroundColor: var(--pf-global--BackgroundColor--light-100);
   --pf-c-page__main-wizard--BorderTopColor: var(--pf-global--BorderColor--100);
   --pf-c-page__main-wizard--BorderTopWidth: var(--pf-global--BorderWidth--sm);
+  --pf-c-page__main-wizard--m-light-200--BackgroundColor: var(--pf-global--BackgroundColor--200);
   display: grid;
   height: 100%;
   grid-template-columns: 1fr;
@@ -740,6 +741,9 @@
 .pf-c-page__main-wizard:first-child {
   --pf-c-page__main-wizard--BorderTopWidth: 0;
 }
+.pf-c-page__main-wizard.pf-m-light-200 {
+  --pf-c-page__main-wizard--BackgroundColor: var(--pf-c-page__main-wizard--m-light-200--BackgroundColor);
+}
 
 .pf-c-page__main-wizard .pf-c-page__main-body {
   min-height: 0;

package/css/components/Page/page.d.ts

@@ -49,7 +49,8 @@ declare const _default: {
     "paddingOnXl": "pf-m-padding-on-xl",
     "noPaddingOnXl": "pf-m-no-padding-on-xl",
     "paddingOn_2xl": "pf-m-padding-on-2xl",
-    "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
+    "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
+    "light_200": "pf-m-light-200"
   },
   "nav": "pf-c-nav",
   "notificationBadge": "pf-c-notification-badge",

package/css/components/Page/page.js

@@ -51,7 +51,8 @@ exports.default = {
     "paddingOnXl": "pf-m-padding-on-xl",
     "noPaddingOnXl": "pf-m-no-padding-on-xl",
     "paddingOn_2xl": "pf-m-padding-on-2xl",
-    "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
+    "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
+    "light_200": "pf-m-light-200"
   },
   "nav": "pf-c-nav",
   "notificationBadge": "pf-c-notification-badge",

package/css/components/Page/page.mjs

@@ -49,7 +49,8 @@ export default {
     "paddingOnXl": "pf-m-padding-on-xl",
     "noPaddingOnXl": "pf-m-no-padding-on-xl",
     "paddingOn_2xl": "pf-m-padding-on-2xl",
-    "noPaddingOn_2xl": "pf-m-no-padding-on-2xl"
+    "noPaddingOn_2xl": "pf-m-no-padding-on-2xl",
+    "light_200": "pf-m-light-200"
   },
   "nav": "pf-c-nav",
   "notificationBadge": "pf-c-notification-badge",

package/css/components/Wizard/wizard.css

@@ -206,7 +206,7 @@
   flex: 1 1 var(--pf-c-modal-box--c-wizard--FlexBasis);
   min-height: 0;
 }
-.pf-c-wizard > *:not(.pf-c-wizard__outer-wrap) {
+.pf-c-wizard > :not(.pf-c-wizard__outer-wrap):not(.pf-c-drawer) {
   flex-shrink: 0;
 }
 .pf-c-wizard.pf-m-finished {

package/css/components/Wizard/wizard.d.ts

@@ -2,6 +2,7 @@ import './wizard.css';
 declare const _default: {
   "button": "pf-c-button",
   "card": "pf-c-card",
+  "drawer": "pf-c-drawer",
   "modalBox": "pf-c-modal-box",
   "modifiers": {
     "finished": "pf-m-finished",

package/css/components/Wizard/wizard.js

@@ -4,6 +4,7 @@ require('./wizard.css');
 exports.default = {
   "button": "pf-c-button",
   "card": "pf-c-card",
+  "drawer": "pf-c-drawer",
   "modalBox": "pf-c-modal-box",
   "modifiers": {
     "finished": "pf-m-finished",

package/css/components/Wizard/wizard.mjs

@@ -2,6 +2,7 @@ import('./wizard.css');
 export default {
   "button": "pf-c-button",
   "card": "pf-c-card",
+  "drawer": "pf-c-drawer",
   "modalBox": "pf-c-modal-box",
   "modifiers": {
     "finished": "pf-m-finished",

package/css/docs/components/Divider/examples/Divider.css

@@ -1,7 +1,13 @@
-#ws-core-c-divider-vertical .ws-preview-html,
-#ws-core-c-divider-vertical-inset-medium .ws-preview-html,
-#ws-core-c-divider-vertical-md-inset-no-inset-on-md-lg-inset-on-lg-sm-inset-on-xl .ws-preview-html {
-  height: 3rem;
-  display: flex;
+[id*="ws-core-c-divider-vertical"],
+[id*="ws-core-c-divider-horizontal"] .ws-preview-html {
   align-items: center;
 }
+
+[id*="ws-core-c-divider-vertical"],
+#ws-core-c-divider-horizontal-on-lg {
+  height: 4rem;
+}
+
+[id*="ws-core-c-divider"] .ws-preview-html {
+  height: 100%;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "4.55.0",
+  "version": "4.55.1",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -19,7 +19,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.190.0",
+    "@patternfly/patternfly": "4.192.0",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^6.0.1",
@@ -29,5 +29,5 @@
     "typescript": "^4.0.0"
   },
   "license": "MIT",
-  "gitHead": "aad64697166a03d35c3e711df51f25ec0d517623"
+  "gitHead": "4d73b9030cf92b075c46a0eeab561d47070bec50"
 }