@patternfly/react-core 4.222.16 → 4.223.1

package/CHANGELOG.md

@@ -3,6 +3,33 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 4.223.1 (2022-06-23)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
+# 4.223.0 (2022-06-22)
+
+
+### Features
+
+* **Table:** add nested sticky header support ([#7595](https://github.com/patternfly/patternfly-react/issues/7595)) ([3888a0b](https://github.com/patternfly/patternfly-react/commit/3888a0bdf5e4e964d2d8d936c5d81f7813d8ec0c))
+
+
+
+
+
+## 4.222.17 (2022-06-22)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+
+
+
+
 ## 4.222.16 (2022-06-22)
 
 **Note:** Version bump only for package @patternfly/react-core

package/dist/esm/components/Masthead/MastheadToggle.js

@@ -4,7 +4,7 @@ import styles from '@patternfly/react-styles/css/components/Masthead/masthead';
 import { css } from '@patternfly/react-styles';
 export const MastheadToggle = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(styles.mastheadToggle, className) }, props), children));
+    return (React.createElement("span", Object.assign({ className: css(styles.mastheadToggle, className) }, props), children));
 };
 MastheadToggle.displayName = 'MastheadToggle';
 //# sourceMappingURL=MastheadToggle.js.map

package/dist/esm/components/Masthead/MastheadToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"MastheadToggle.js","sourceRoot":"","sources":["../../../../src/components/Masthead/MastheadToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,2DAA2D,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAS/C,MAAM,CAAC,MAAM,cAAc,GAAiD,CAAC,EAIvD,EAAE,EAAE;QAJmD,EAC3E,QAAQ,EACR,SAAS,OAEW,EADjB,KAAK,cAHmE,yBAI5E,CADS;IACiB,OAAA,CACzB,2CAAK,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,IAAM,KAAK,GAC7D,QAAQ,CACL,CACP,CAAA;CAAA,CAAC;AACF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"MastheadToggle.js","sourceRoot":"","sources":["../../../../src/components/Masthead/MastheadToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,2DAA2D,CAAC;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAS/C,MAAM,CAAC,MAAM,cAAc,GAAiD,CAAC,EAIvD,EAAE,EAAE;QAJmD,EAC3E,QAAQ,EACR,SAAS,OAEW,EADjB,KAAK,cAHmE,yBAI5E,CADS;IACiB,OAAA,CACzB,4CAAM,SAAS,EAAE,GAAG,CAAC,MAAM,CAAC,cAAc,EAAE,SAAS,CAAC,IAAM,KAAK,GAC9D,QAAQ,CACJ,CACR,CAAA;CAAA,CAAC;AACF,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/dist/esm/components/Page/PageSidebar.js

@@ -12,7 +12,7 @@ export const PageSidebar = (_a) => {
     return (React.createElement(PageContextConsumer, null, ({ isManagedSidebar, isNavOpen: managedIsNavOpen }) => {
         const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
         return (React.createElement("div", Object.assign({ id: "page-sidebar", className: css(styles.pageSidebar, theme === 'light' && styles.modifiers.light, navOpen && styles.modifiers.expanded, !navOpen && styles.modifiers.collapsed, className), "aria-hidden": !navOpen }, props),
-            React.createElement("div", { className: "pf-topology-side-bar__body" },
+            React.createElement("div", { className: styles.pageSidebarBody },
                 React.createElement(PageSidebarContext.Provider, { value: { isNavOpen: navOpen } }, nav))));
     }));
 };

package/dist/esm/components/Page/PageSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../../../src/components/Page/PageSidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,mDAAmD,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAqB7C,MAAM,CAAC,MAAM,0BAA0B,GAA4B;IACjE,SAAS,EAAE,IAAI;CAChB,CAAC;AACF,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAmC,0BAA0B,CAAC,CAAC;AAEpH,MAAM,CAAC,MAAM,WAAW,GAA8C,CAAC,EAMpD,EAAE,EAAE;QANgD,EACrE,SAAS,GAAG,EAAE,EACd,GAAG,EACH,SAAS,GAAG,IAAI,EAChB,KAAK,GAAG,MAAM,OAEG,EADd,KAAK,cAL6D,0CAMtE,CADS;IACc,OAAA,CACtB,oBAAC,mBAAmB,QACjB,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,gBAAgB,EAAoB,EAAE,EAAE;QACvE,MAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;QAEhE,OAAO,CACL,2CACE,EAAE,EAAC,cAAc,EACjB,SAAS,EAAE,GAAG,CACZ,MAAM,CAAC,WAAW,EAClB,KAAK,KAAK,OAAO,IAAI,MAAM,CAAC,SAAS,CAAC,KAAK,EAC3C,OAAO,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,EACpC,CAAC,OAAO,IAAI,MAAM,CAAC,SAAS,CAAC,SAAS,EACtC,SAAS,CACV,iBACY,CAAC,OAAO,IACjB,KAAK;YAET,6BAAK,SAAS,EAAC,4BAA4B;gBACzC,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,IAAG,GAAG,CAA+B,CAC3F,CACF,CACP,CAAC;IACJ,CAAC,CACmB,CACvB,CAAA;CAAA,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
+{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../../../src/components/Page/PageSidebar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,mDAAmD,CAAC;AACvE,OAAO,EAAE,GAAG,EAAE,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,mBAAmB,EAAE,MAAM,QAAQ,CAAC;AAqB7C,MAAM,CAAC,MAAM,0BAA0B,GAA4B;IACjE,SAAS,EAAE,IAAI;CAChB,CAAC;AACF,MAAM,CAAC,MAAM,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAmC,0BAA0B,CAAC,CAAC;AAEpH,MAAM,CAAC,MAAM,WAAW,GAA8C,CAAC,EAMpD,EAAE,EAAE;QANgD,EACrE,SAAS,GAAG,EAAE,EACd,GAAG,EACH,SAAS,GAAG,IAAI,EAChB,KAAK,GAAG,MAAM,OAEG,EADd,KAAK,cAL6D,0CAMtE,CADS;IACc,OAAA,CACtB,oBAAC,mBAAmB,QACjB,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,gBAAgB,EAAoB,EAAE,EAAE;QACvE,MAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;QAEhE,OAAO,CACL,2CACE,EAAE,EAAC,cAAc,EACjB,SAAS,EAAE,GAAG,CACZ,MAAM,CAAC,WAAW,EAClB,KAAK,KAAK,OAAO,IAAI,MAAM,CAAC,SAAS,CAAC,KAAK,EAC3C,OAAO,IAAI,MAAM,CAAC,SAAS,CAAC,QAAQ,EACpC,CAAC,OAAO,IAAI,MAAM,CAAC,SAAS,CAAC,SAAS,EACtC,SAAS,CACV,iBACY,CAAC,OAAO,IACjB,KAAK;YAET,6BAAK,SAAS,EAAE,MAAM,CAAC,eAAe;gBACpC,oBAAC,kBAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,IAAG,GAAG,CAA+B,CAC3F,CACF,CACP,CAAC;IACJ,CAAC,CACmB,CACvB,CAAA;CAAA,CAAC;AACF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/js/components/Masthead/MastheadToggle.js

@@ -7,7 +7,7 @@ const masthead_1 = tslib_1.__importDefault(require("@patternfly/react-styles/css
 const react_styles_1 = require("@patternfly/react-styles");
 const MastheadToggle = (_a) => {
     var { children, className } = _a, props = tslib_1.__rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: react_styles_1.css(masthead_1.default.mastheadToggle, className) }, props), children));
+    return (React.createElement("span", Object.assign({ className: react_styles_1.css(masthead_1.default.mastheadToggle, className) }, props), children));
 };
 exports.MastheadToggle = MastheadToggle;
 exports.MastheadToggle.displayName = 'MastheadToggle';

package/dist/js/components/Masthead/MastheadToggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"MastheadToggle.js","sourceRoot":"","sources":["../../../../src/components/Masthead/MastheadToggle.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,iHAA+E;AAC/E,2DAA+C;AASxC,MAAM,cAAc,GAAiD,CAAC,EAIvD,EAAE,EAAE;QAJmD,EAC3E,QAAQ,EACR,SAAS,OAEW,EADjB,KAAK,sBAHmE,yBAI5E,CADS;IACiB,OAAA,CACzB,2CAAK,SAAS,EAAE,kBAAG,CAAC,kBAAM,CAAC,cAAc,EAAE,SAAS,CAAC,IAAM,KAAK,GAC7D,QAAQ,CACL,CACP,CAAA;CAAA,CAAC;AARW,QAAA,cAAc,kBAQzB;AACF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}
+{"version":3,"file":"MastheadToggle.js","sourceRoot":"","sources":["../../../../src/components/Masthead/MastheadToggle.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,iHAA+E;AAC/E,2DAA+C;AASxC,MAAM,cAAc,GAAiD,CAAC,EAIvD,EAAE,EAAE;QAJmD,EAC3E,QAAQ,EACR,SAAS,OAEW,EADjB,KAAK,sBAHmE,yBAI5E,CADS;IACiB,OAAA,CACzB,4CAAM,SAAS,EAAE,kBAAG,CAAC,kBAAM,CAAC,cAAc,EAAE,SAAS,CAAC,IAAM,KAAK,GAC9D,QAAQ,CACJ,CACR,CAAA;CAAA,CAAC;AARW,QAAA,cAAc,kBAQzB;AACF,sBAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/dist/js/components/Page/PageSidebar.js

@@ -15,7 +15,7 @@ const PageSidebar = (_a) => {
     return (React.createElement(Page_1.PageContextConsumer, null, ({ isManagedSidebar, isNavOpen: managedIsNavOpen }) => {
         const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
         return (React.createElement("div", Object.assign({ id: "page-sidebar", className: react_styles_1.css(page_1.default.pageSidebar, theme === 'light' && page_1.default.modifiers.light, navOpen && page_1.default.modifiers.expanded, !navOpen && page_1.default.modifiers.collapsed, className), "aria-hidden": !navOpen }, props),
-            React.createElement("div", { className: "pf-topology-side-bar__body" },
+            React.createElement("div", { className: page_1.default.pageSidebarBody },
                 React.createElement(exports.PageSidebarContext.Provider, { value: { isNavOpen: navOpen } }, nav))));
     }));
 };

package/dist/js/components/Page/PageSidebar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../../../src/components/Page/PageSidebar.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,qGAAuE;AACvE,2DAA+C;AAC/C,iCAA6C;AAqBhC,QAAA,0BAA0B,GAA4B;IACjE,SAAS,EAAE,IAAI;CAChB,CAAC;AACW,QAAA,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAmC,kCAA0B,CAAC,CAAC;AAE7G,MAAM,WAAW,GAA8C,CAAC,EAMpD,EAAE,EAAE;QANgD,EACrE,SAAS,GAAG,EAAE,EACd,GAAG,EACH,SAAS,GAAG,IAAI,EAChB,KAAK,GAAG,MAAM,OAEG,EADd,KAAK,sBAL6D,0CAMtE,CADS;IACc,OAAA,CACtB,oBAAC,0BAAmB,QACjB,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,gBAAgB,EAAoB,EAAE,EAAE;QACvE,MAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;QAEhE,OAAO,CACL,2CACE,EAAE,EAAC,cAAc,EACjB,SAAS,EAAE,kBAAG,CACZ,cAAM,CAAC,WAAW,EAClB,KAAK,KAAK,OAAO,IAAI,cAAM,CAAC,SAAS,CAAC,KAAK,EAC3C,OAAO,IAAI,cAAM,CAAC,SAAS,CAAC,QAAQ,EACpC,CAAC,OAAO,IAAI,cAAM,CAAC,SAAS,CAAC,SAAS,EACtC,SAAS,CACV,iBACY,CAAC,OAAO,IACjB,KAAK;YAET,6BAAK,SAAS,EAAC,4BAA4B;gBACzC,oBAAC,0BAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,IAAG,GAAG,CAA+B,CAC3F,CACF,CACP,CAAC;IACJ,CAAC,CACmB,CACvB,CAAA;CAAA,CAAC;AA/BW,QAAA,WAAW,eA+BtB;AACF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
+{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../../../src/components/Page/PageSidebar.tsx"],"names":[],"mappings":";;;;AAAA,qDAA+B;AAC/B,qGAAuE;AACvE,2DAA+C;AAC/C,iCAA6C;AAqBhC,QAAA,0BAA0B,GAA4B;IACjE,SAAS,EAAE,IAAI;CAChB,CAAC;AACW,QAAA,kBAAkB,GAAG,KAAK,CAAC,aAAa,CAAmC,kCAA0B,CAAC,CAAC;AAE7G,MAAM,WAAW,GAA8C,CAAC,EAMpD,EAAE,EAAE;QANgD,EACrE,SAAS,GAAG,EAAE,EACd,GAAG,EACH,SAAS,GAAG,IAAI,EAChB,KAAK,GAAG,MAAM,OAEG,EADd,KAAK,sBAL6D,0CAMtE,CADS;IACc,OAAA,CACtB,oBAAC,0BAAmB,QACjB,CAAC,EAAE,gBAAgB,EAAE,SAAS,EAAE,gBAAgB,EAAoB,EAAE,EAAE;QACvE,MAAM,OAAO,GAAG,gBAAgB,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,SAAS,CAAC;QAEhE,OAAO,CACL,2CACE,EAAE,EAAC,cAAc,EACjB,SAAS,EAAE,kBAAG,CACZ,cAAM,CAAC,WAAW,EAClB,KAAK,KAAK,OAAO,IAAI,cAAM,CAAC,SAAS,CAAC,KAAK,EAC3C,OAAO,IAAI,cAAM,CAAC,SAAS,CAAC,QAAQ,EACpC,CAAC,OAAO,IAAI,cAAM,CAAC,SAAS,CAAC,SAAS,EACtC,SAAS,CACV,iBACY,CAAC,OAAO,IACjB,KAAK;YAET,6BAAK,SAAS,EAAE,cAAM,CAAC,eAAe;gBACpC,oBAAC,0BAAkB,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,IAAG,GAAG,CAA+B,CAC3F,CACF,CACP,CAAC;IACJ,CAAC,CACmB,CACvB,CAAA;CAAA,CAAC;AA/BW,QAAA,WAAW,eA+BtB;AACF,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/umd/react-core.css

@@ -1817,6 +1817,10 @@ textarea.pf-c-form-control {
   --pf-global--BackgroundColor--100: #1b1d21;
 }
 
+:where(.pf-theme-dark) .pf-c-banner .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
+
 :where(.pf-theme-dark) .pf-c-banner .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
@@ -3194,7 +3198,8 @@ button.pf-c-breadcrumb__link {
   font-weight: var(--pf-global--FontWeight--normal);
 }
 
-:where(.pf-theme-dark) .pf-c-card {
+:where(.pf-theme-dark) .pf-c-card,
+:where(.pf-theme-dark) .pf-c-card.pf-m-non-selectable-raised {
   --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
   --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
@@ -11089,6 +11094,11 @@ ul.pf-c-list {
   --pf-global--BackgroundColor--100: #1b1d21;
 }
 
+:where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
+:where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
+
 :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
 :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
@@ -11282,14 +11292,10 @@ ul.pf-c-list {
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
+  .pf-c-masthead {
     --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
   }
 }
-.pf-c-page:where(.pf-m-breakpoint-xl) .pf-c-masthead {
-  --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
-}
-
 .pf-c-masthead.pf-m-light {
   color: var(--pf-global--Color--100);
   --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
@@ -11839,6 +11845,10 @@ ul.pf-c-list {
   --pf-global--BackgroundColor--100: #1b1d21;
 }
 
+:where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
+
 :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
@@ -12633,6 +12643,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-menu-toggle__controls--MarginLeft: auto;
+  --pf-c-menu-toggle__controls--MarginRight: 0;
   --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
   --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -12673,10 +12685,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
   --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
+  --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
+  --pf-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
   position: relative;
   display: inline-flex;
@@ -12832,14 +12842,20 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   height: 100%;
 }
 
+.pf-c-menu-toggle.pf-m-typeahead {
+  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-c-menu-toggle--m-typeahead__controls--MarginRight);
+  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-c-menu-toggle--m-typeahead__controls--MarginLeft);
+  align-items: stretch;
+  padding: 0;
+}
+
 .pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
   --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
+  --pf-c-text-input-group__utilities--MarginRight: 0;
   flex: 1;
-  margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
 }
 
 .pf-c-menu-toggle.pf-m-split-button {
-  --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
   padding: 0;
 }
 
@@ -12968,16 +12984,13 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 }
 
 .pf-c-menu-toggle__button {
+  --pf-c-menu-toggle__controls--PaddingLeft: 0;
+  --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
+  --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
   color: inherit;
   border: 0;
 }
 
-.pf-c-menu-toggle__button .pf-c-menu-toggle__controls {
-  padding-left: 0;
-  margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
-  margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
-}
-
 .pf-c-menu-toggle__icon {
   display: inline-flex;
   align-self: center;
@@ -13001,7 +13014,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 
 .pf-c-menu-toggle__controls {
   padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
-  margin-left: auto;
+  margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
+  margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
 }
 
 .pf-c-menu-toggle__toggle-icon {
@@ -16231,6 +16245,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-global--BackgroundColor--100: #1b1d21;
 }
 
+:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card,
+:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card,
+:where(.pf-theme-dark) .pf-c-page__header .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
+
 :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button,
 :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button,
 :where(.pf-theme-dark) .pf-c-page__header .pf-c-button {
@@ -23669,6 +23689,10 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-global--BackgroundColor--100: #1b1d21;
 }
 
+:where(.pf-theme-dark) .pf-c-wizard__header .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
+
 :where(.pf-theme-dark) .pf-c-wizard__header .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
@@ -27790,6 +27814,10 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-global--BackgroundColor--100: #1b1d21;
 }
 
+:where(.pf-theme-dark) .pf-c-about-modal-box .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
+
 :where(.pf-theme-dark) .pf-c-about-modal-box .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);

package/dist/umd/react-core.js

@@ -14997,7 +14997,6 @@
         "light_200": "pf-m-light-200",
         "light": "pf-m-light",
         "resizeObserver": "pf-m-resize-observer",
-        "breakpointXl": "pf-m-breakpoint-xl",
         "fullHeight": "pf-m-full-height",
         "horizontal": "pf-m-horizontal",
         "displayStack": "pf-m-display-stack",
@@ -15349,7 +15348,7 @@
 
     const MastheadToggle = (_a) => {
         var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$A.mastheadToggle, className) }, props), children));
+        return (React__namespace.createElement("span", Object.assign({ className: css(styles$A.mastheadToggle, className) }, props), children));
     };
     MastheadToggle.displayName = 'MastheadToggle';
 
@@ -16680,7 +16679,7 @@
         return (React__namespace.createElement(PageContextConsumer, null, ({ isManagedSidebar, isNavOpen: managedIsNavOpen }) => {
             const navOpen = isManagedSidebar ? managedIsNavOpen : isNavOpen;
             return (React__namespace.createElement("div", Object.assign({ id: "page-sidebar", className: css(styles$z.pageSidebar, theme === 'light' && styles$z.modifiers.light, navOpen && styles$z.modifiers.expanded, !navOpen && styles$z.modifiers.collapsed, className), "aria-hidden": !navOpen }, props),
-                React__namespace.createElement("div", { className: "pf-topology-side-bar__body" },
+                React__namespace.createElement("div", { className: styles$z.pageSidebarBody },
                     React__namespace.createElement(PageSidebarContext.Provider, { value: { isNavOpen: navOpen } }, nav))));
         }));
     };

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

@@ -1817,6 +1817,10 @@ textarea.pf-c-form-control {
   --pf-global--BackgroundColor--100: #1b1d21;
 }
 
+:where(.pf-theme-dark) .pf-c-banner .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
+
 :where(.pf-theme-dark) .pf-c-banner .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
@@ -3194,7 +3198,8 @@ button.pf-c-breadcrumb__link {
   font-weight: var(--pf-global--FontWeight--normal);
 }
 
-:where(.pf-theme-dark) .pf-c-card {
+:where(.pf-theme-dark) .pf-c-card,
+:where(.pf-theme-dark) .pf-c-card.pf-m-non-selectable-raised {
   --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--md);
   --pf-c-card--m-hoverable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
   --pf-c-card--m-selectable-raised--hover--BoxShadow: var(--pf-global--BoxShadow--lg);
@@ -11089,6 +11094,11 @@ ul.pf-c-list {
   --pf-global--BackgroundColor--100: #1b1d21;
 }
 
+:where(.pf-theme-dark) .pf-c-login__header .pf-c-card,
+:where(.pf-theme-dark) .pf-c-login__footer .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
+
 :where(.pf-theme-dark) .pf-c-login__header .pf-c-button,
 :where(.pf-theme-dark) .pf-c-login__footer .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
@@ -11282,14 +11292,10 @@ ul.pf-c-list {
   }
 }
 @media screen and (min-width: 1200px) {
-  .pf-c-page:where(:not(.pf-m-resize-observer)) .pf-c-masthead {
+  .pf-c-masthead {
     --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
   }
 }
-.pf-c-page:where(.pf-m-breakpoint-xl) .pf-c-masthead {
-  --pf-c-masthead--inset: var(--pf-c-masthead--xl--inset);
-}
-
 .pf-c-masthead.pf-m-light {
   color: var(--pf-global--Color--100);
   --pf-c-masthead--BackgroundColor: var(--pf-c-masthead--m-light--BackgroundColor);
@@ -11839,6 +11845,10 @@ ul.pf-c-list {
   --pf-global--BackgroundColor--100: #1b1d21;
 }
 
+:where(.pf-theme-dark) .pf-c-masthead .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
+
 :where(.pf-theme-dark) .pf-c-masthead .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
@@ -12633,6 +12643,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-menu-toggle__icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__count--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__controls--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-menu-toggle__controls--MarginLeft: auto;
+  --pf-c-menu-toggle__controls--MarginRight: 0;
   --pf-c-menu-toggle__toggle-icon--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--m-plain__toggle-icon--Color: var(--pf-global--Color--200);
   --pf-c-menu-toggle--m-plain--hover__toggle-icon--Color: var(--pf-global--Color--100);
@@ -12673,10 +12685,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-menu-toggle--m-split-button--m-action--m-secondary--child--BorderLeftColor: var(--pf-global--primary-color--100);
   --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-global--spacer--sm);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop: calc(var(--pf-c-menu-toggle--PaddingTop) * -1);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight: calc(var(--pf-c-menu-toggle--PaddingRight) * -1);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom: calc(var(--pf-c-menu-toggle--PaddingBottom) * -1);
-  --pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft: calc(var(--pf-c-menu-toggle--PaddingLeft) * -1);
+  --pf-c-menu-toggle--m-typeahead__controls--MarginRight: var(--pf-global--spacer--md);
+  --pf-c-menu-toggle--m-typeahead__controls--MarginLeft: var(--pf-global--spacer--sm);
   --pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight: var(--pf-global--spacer--sm);
   position: relative;
   display: inline-flex;
@@ -12832,14 +12842,20 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   height: 100%;
 }
 
+.pf-c-menu-toggle.pf-m-typeahead {
+  --pf-c-menu-toggle__button__controls--MarginRight: var(--pf-c-menu-toggle--m-typeahead__controls--MarginRight);
+  --pf-c-menu-toggle__button__controls--MarginLeft: var(--pf-c-menu-toggle--m-typeahead__controls--MarginLeft);
+  align-items: stretch;
+  padding: 0;
+}
+
 .pf-c-menu-toggle.pf-m-typeahead .pf-c-text-input-group {
   --pf-c-text-input-group__utilities--c-button--PaddingRight: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group__utilities--c-button--PaddingRight);
+  --pf-c-text-input-group__utilities--MarginRight: 0;
   flex: 1;
-  margin: var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginTop) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginRight) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginBottom) var(--pf-c-menu-toggle--m-typeahead--c-text-input-group--MarginLeft);
 }
 
 .pf-c-menu-toggle.pf-m-split-button {
-  --pf-c-menu-toggle__toggle-icon--MarginRight: 0;
   padding: 0;
 }
 
@@ -12968,16 +12984,13 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 }
 
 .pf-c-menu-toggle__button {
+  --pf-c-menu-toggle__controls--PaddingLeft: 0;
+  --pf-c-menu-toggle__controls--MarginRight: var(--pf-c-menu-toggle__button__controls--MarginRight);
+  --pf-c-menu-toggle__controls--MarginLeft: var(--pf-c-menu-toggle__button__controls--MarginLeft);
   color: inherit;
   border: 0;
 }
 
-.pf-c-menu-toggle__button .pf-c-menu-toggle__controls {
-  padding-left: 0;
-  margin-right: var(--pf-c-menu-toggle__button__controls--MarginRight);
-  margin-left: var(--pf-c-menu-toggle__button__controls--MarginLeft);
-}
-
 .pf-c-menu-toggle__icon {
   display: inline-flex;
   align-self: center;
@@ -13001,7 +13014,8 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
 
 .pf-c-menu-toggle__controls {
   padding-left: var(--pf-c-menu-toggle__controls--PaddingLeft);
-  margin-left: auto;
+  margin-right: var(--pf-c-menu-toggle__controls--MarginRight);
+  margin-left: var(--pf-c-menu-toggle__controls--MarginLeft);
 }
 
 .pf-c-menu-toggle__toggle-icon {
@@ -16231,6 +16245,12 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-global--BackgroundColor--100: #1b1d21;
 }
 
+:where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-card,
+:where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-card,
+:where(.pf-theme-dark) .pf-c-page__header .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
+
 :where(.pf-theme-dark) .pf-c-page__sidebar-body.pf-m-menu .pf-c-context-selector .pf-c-button,
 :where(.pf-theme-dark) .pf-c-page__main-section[class*=pf-m-dark-] .pf-c-button,
 :where(.pf-theme-dark) .pf-c-page__header .pf-c-button {
@@ -23669,6 +23689,10 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-global--BackgroundColor--100: #1b1d21;
 }
 
+:where(.pf-theme-dark) .pf-c-wizard__header .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
+
 :where(.pf-theme-dark) .pf-c-wizard__header .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);
@@ -27790,6 +27814,10 @@ svg.pf-c-spinner.pf-m-xl {
   --pf-global--BackgroundColor--100: #1b1d21;
 }
 
+:where(.pf-theme-dark) .pf-c-about-modal-box .pf-c-card {
+  --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
+}
+
 :where(.pf-theme-dark) .pf-c-about-modal-box .pf-c-button {
   --pf-c-button--m-primary--Color: var(--pf-global--Color--light-100);
   --pf-c-button--m-primary--hover--Color: var(--pf-global--Color--light-100);