@patternfly/react-core 4.230.1 → 4.231.0

package/dist/umd/react-core.css

@@ -13427,6 +13427,16 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
 }
 
+.pf-l-bullseye {
+  --pf-l-bullseye--Padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--pf-l-bullseye--Padding);
+  margin: 0;
+}
+
 .pf-c-nav {
   --pf-c-nav--Transition: var(--pf-global--Transition);
   --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -14480,16 +14490,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-nav__item--item__link--after--Top: 0;
 }
 
-.pf-l-bullseye {
-  --pf-l-bullseye--Padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: var(--pf-l-bullseye--Padding);
-  margin: 0;
-}
-
 .pf-c-notification-badge {
   --pf-c-notification-badge--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-notification-badge--PaddingRight: var(--pf-global--spacer--md);
@@ -26037,6 +26037,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;
@@ -27251,75 +27320,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;

package/dist/umd/react-core.js

@@ -16039,7 +16039,7 @@
             this.displayName = 'MenuToggleBase';
         }
         render() {
-            const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, variant, innerRef, onClick, 'aria-label': ariaLabel } = _a, otherProps = __rest$1(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "isFullWidth", "variant", "innerRef", "onClick", 'aria-label']);
+            const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, splitButtonOptions, variant, innerRef, onClick, 'aria-label': ariaLabel } = _a, otherProps = __rest$1(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "isFullWidth", "splitButtonOptions", "variant", "innerRef", "onClick", 'aria-label']);
             const isPlain = variant === 'plain';
             const isPlainText = variant === 'plainText';
             const isTypeahead = variant === 'typeahead';
@@ -16048,14 +16048,20 @@
                     React__namespace.createElement(CaretDownIcon$1, { "aria-hidden": true }))));
             const content = (React__namespace.createElement(React__namespace.Fragment, null,
                 icon && React__namespace.createElement("span", { className: css(styles$x.menuToggleIcon) }, icon),
-                isTypeahead ? children : React__namespace.createElement("span", { className: "pf-c-menu-toggle__text" }, children),
+                isTypeahead ? children : React__namespace.createElement("span", { className: css(styles$x.menuToggleText) }, children),
                 badge && React__namespace.createElement("span", { className: css(styles$x.menuToggleCount) }, badge),
                 isTypeahead ? (React__namespace.createElement("button", { type: "button", className: css(styles$x.menuToggleButton), "aria-expanded": isExpanded, onClick: onClick, "aria-label": "Menu toggle" }, toggleControls)) : (toggleControls)));
-            const componentProps = Object.assign(Object.assign({ className: css(styles$x.menuToggle, isExpanded && styles$x.modifiers.expanded, variant === 'primary' && styles$x.modifiers.primary, (isPlain || isPlainText) && styles$x.modifiers.plain, isPlainText && styles$x.modifiers.text, isFullHeight && styles$x.modifiers.fullHeight, isTypeahead && styles$x.modifiers.typeahead, isFullWidth && styles$x.modifiers.fullWidth, className), children: isPlain ? children : content }, (isDisabled && { disabled: true })), otherProps);
+            const commonStyles = css(styles$x.menuToggle, isExpanded && styles$x.modifiers.expanded, variant === 'primary' && styles$x.modifiers.primary, variant === 'secondary' && styles$x.modifiers.secondary, (isPlain || isPlainText) && styles$x.modifiers.plain, isPlainText && styles$x.modifiers.text, isFullHeight && styles$x.modifiers.fullHeight, isFullWidth && styles$x.modifiers.fullWidth, isDisabled && styles$x.modifiers.disabled, className);
+            const componentProps = Object.assign(Object.assign({ children: isPlain ? children : content }, (isDisabled && { disabled: true })), otherProps);
             if (isTypeahead) {
-                return React__namespace.createElement("div", Object.assign({ ref: innerRef }, componentProps));
+                return React__namespace.createElement("div", Object.assign({ ref: innerRef, className: css(commonStyles) }, componentProps));
             }
-            return (React__namespace.createElement("button", Object.assign({ className: css(styles$x.menuToggle, isExpanded && styles$x.modifiers.expanded, variant === 'primary' && styles$x.modifiers.primary, variant === 'secondary' && styles$x.modifiers.secondary, (isPlain || isPlainText) && styles$x.modifiers.plain, isPlainText && styles$x.modifiers.text, isFullHeight && styles$x.modifiers.fullHeight, isFullWidth && styles$x.modifiers.fullWidth, className), ref: innerRef, type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, onClick: onClick }, componentProps)));
+            if (splitButtonOptions) {
+                return (React__namespace.createElement("div", { className: css(commonStyles, styles$x.modifiers.splitButton, (splitButtonOptions === null || splitButtonOptions === void 0 ? void 0 : splitButtonOptions.variant) === 'action' && styles$x.modifiers.action) }, splitButtonOptions === null || splitButtonOptions === void 0 ? void 0 :
+                    splitButtonOptions.items,
+                    React__namespace.createElement("button", Object.assign({ className: css(styles$x.menuToggleButton), type: "button", "aria-expanded": isExpanded, "aria-label": ariaLabel, disabled: isDisabled }, otherProps), toggleControls)));
+            }
+            return (React__namespace.createElement("button", Object.assign({ className: css(commonStyles), type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, ref: innerRef, disabled: isDisabled, onClick: onClick }, componentProps)));
         }
     }
     MenuToggleBase.defaultProps = {
@@ -16063,12 +16069,62 @@
         isExpanded: false,
         isDisabled: false,
         isFullWidth: false,
-        isFullHeight: false,
-        variant: 'default'
+        isFullHeight: false
     };
     const MenuToggle = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(MenuToggleBase, Object.assign({ innerRef: ref }, props))));
     MenuToggle.displayName = 'MenuToggle';
 
+    class MenuToggleAction extends React__namespace.Component {
+        render() {
+            const _a = this.props, { id, className, onClick, isDisabled, children } = _a, props = __rest$1(_a, ["id", "className", "onClick", "isDisabled", "children"]);
+            return (React__namespace.createElement("button", Object.assign({ id: id, className: css(styles$x.menuToggleButton, className), onClick: onClick, type: "button", disabled: isDisabled }, props), children));
+        }
+    }
+    MenuToggleAction.displayName = 'MenuToggleAction';
+    MenuToggleAction.defaultProps = {
+        className: '',
+        isDisabled: false,
+        onClick: () => { }
+    };
+
+    class MenuToggleCheckbox extends React__namespace.Component {
+        constructor(props) {
+            super(props);
+            this.handleChange = (event) => {
+                this.props.onChange(event.target.checked, event);
+            };
+            this.calculateChecked = () => {
+                const { isChecked, defaultChecked } = this.props;
+                if (isChecked === null) {
+                    // return false here and the indeterminate state will be set to true through the ref
+                    return false;
+                }
+                else if (isChecked !== undefined) {
+                    return isChecked;
+                }
+                return defaultChecked;
+            };
+            this.state = {
+                ouiaStateId: getDefaultOUIAId(MenuToggleCheckbox.displayName)
+            };
+        }
+        render() {
+            const _a = this.props, { className, isValid, isDisabled, isChecked, children, ouiaId, ouiaSafe, 
+            /* eslint-disable @typescript-eslint/no-unused-vars */
+            onChange, defaultChecked, id } = _a, props = __rest$1(_a, ["className", "isValid", "isDisabled", "isChecked", "children", "ouiaId", "ouiaSafe", "onChange", "defaultChecked", "id"]);
+            const text = children && (React__namespace.createElement("span", { className: css(styles$X.checkLabel, className), "aria-hidden": "true", id: id }, children));
+            return (React__namespace.createElement("label", { className: css(styles$X.check, !children && styles$X.modifiers.standalone, className), htmlFor: id },
+                React__namespace.createElement("input", Object.assign({ className: css(styles$X.checkInput) }, (this.calculateChecked() !== undefined && { onChange: this.handleChange }), { name: id, type: "checkbox", ref: elem => elem && (elem.indeterminate = isChecked === null), "aria-invalid": !isValid, disabled: isDisabled }, (defaultChecked !== undefined ? { defaultChecked } : { checked: isChecked }), getOUIAProps(MenuToggleCheckbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props)),
+                text));
+        }
+    }
+    MenuToggleCheckbox.displayName = 'MenuToggleCheckbox';
+    MenuToggleCheckbox.defaultProps = {
+        isValid: true,
+        isDisabled: false,
+        onChange: () => undefined
+    };
+
     Promise.resolve().then(function () { return modalBox; });
     var modalStyles = {
       "button": "pf-c-button",
@@ -23232,7 +23288,9 @@
     exports.MenuItemAction = MenuItemAction;
     exports.MenuList = MenuList;
     exports.MenuToggle = MenuToggle;
+    exports.MenuToggleAction = MenuToggleAction;
     exports.MenuToggleBase = MenuToggleBase;
+    exports.MenuToggleCheckbox = MenuToggleCheckbox;
     exports.Modal = Modal;
     exports.ModalBox = ModalBox;
     exports.ModalBoxBody = ModalBoxBody;

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

@@ -1843,70 +1843,6 @@ textarea.pf-c-form-control {
   color: var(--pf-global--palette--black-900);
 }
 
-.pf-c-brand {
-  --pf-c-brand--Width: auto;
-  --pf-c-brand--Height: auto;
-  width: var(--pf-c-brand--Width--base);
-  height: var(--pf-c-brand--Height--base);
-  --pf-c-brand--Width--base: var(--pf-c-brand--Width);
-  --pf-c-brand--Height--base: var(--pf-c-brand--Height);
-}
-
-@media (min-width: 576px) {
-  .pf-c-brand {
-    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width));
-  }
-}
-@media (min-width: 768px) {
-  .pf-c-brand {
-    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-c-brand {
-    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-c-brand {
-    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-c-brand {
-    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-2xl, var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))))));
-  }
-}
-@media (min-width: 576px) {
-  .pf-c-brand {
-    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height));
-  }
-}
-@media (min-width: 768px) {
-  .pf-c-brand {
-    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)));
-  }
-}
-@media (min-width: 992px) {
-  .pf-c-brand {
-    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))));
-  }
-}
-@media (min-width: 1200px) {
-  .pf-c-brand {
-    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)))));
-  }
-}
-@media (min-width: 1450px) {
-  .pf-c-brand {
-    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-2xl, var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))))));
-  }
-}
-.pf-c-brand.pf-m-picture {
-  display: inline-flex;
-  max-width: 100%;
-}
-
 .pf-c-breadcrumb {
   --pf-c-breadcrumb__item--FontSize: var(--pf-global--FontSize--sm);
   --pf-c-breadcrumb__item--LineHeight: var(--pf-global--LineHeight--sm);
@@ -2836,6 +2772,70 @@ button.pf-c-breadcrumb__link {
   --pf-c-calendar-month__date--BackgroundColor: var(--pf-global--primary-color--300);
 }
 
+.pf-c-brand {
+  --pf-c-brand--Width: auto;
+  --pf-c-brand--Height: auto;
+  width: var(--pf-c-brand--Width--base);
+  height: var(--pf-c-brand--Height--base);
+  --pf-c-brand--Width--base: var(--pf-c-brand--Width);
+  --pf-c-brand--Height--base: var(--pf-c-brand--Height);
+}
+
+@media (min-width: 576px) {
+  .pf-c-brand {
+    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-brand {
+    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-brand {
+    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-brand {
+    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-brand {
+    --pf-c-brand--Width--base: var(--pf-c-brand--Width-on-2xl, var(--pf-c-brand--Width-on-xl, var(--pf-c-brand--Width-on-lg, var(--pf-c-brand--Width-on-md, var(--pf-c-brand--Width-on-sm, var(--pf-c-brand--Width))))));
+  }
+}
+@media (min-width: 576px) {
+  .pf-c-brand {
+    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height));
+  }
+}
+@media (min-width: 768px) {
+  .pf-c-brand {
+    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)));
+  }
+}
+@media (min-width: 992px) {
+  .pf-c-brand {
+    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))));
+  }
+}
+@media (min-width: 1200px) {
+  .pf-c-brand {
+    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height)))));
+  }
+}
+@media (min-width: 1450px) {
+  .pf-c-brand {
+    --pf-c-brand--Height--base: var(--pf-c-brand--Height-on-2xl, var(--pf-c-brand--Height-on-xl, var(--pf-c-brand--Height-on-lg, var(--pf-c-brand--Height-on-md, var(--pf-c-brand--Height-on-sm, var(--pf-c-brand--Height))))));
+  }
+}
+.pf-c-brand.pf-m-picture {
+  display: inline-flex;
+  max-width: 100%;
+}
+
 .pf-c-card {
   --pf-c-card--BackgroundColor: var(--pf-global--BackgroundColor--100);
   --pf-c-card--BoxShadow: var(--pf-global--BoxShadow--sm);
@@ -13427,6 +13427,16 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   color: var(--pf-c-multiple-file-upload__status-item-progress-size--Color);
 }
 
+.pf-l-bullseye {
+  --pf-l-bullseye--Padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  padding: var(--pf-l-bullseye--Padding);
+  margin: 0;
+}
+
 .pf-c-nav {
   --pf-c-nav--Transition: var(--pf-global--Transition);
   --pf-c-nav--m-light__item--before--BorderColor: var(--pf-global--BorderColor--300);
@@ -14480,16 +14490,6 @@ label.pf-c-menu__item:where(:not([disabled], .pf-m-disabled)) {
   --pf-c-nav__item--item__link--after--Top: 0;
 }
 
-.pf-l-bullseye {
-  --pf-l-bullseye--Padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  padding: var(--pf-l-bullseye--Padding);
-  margin: 0;
-}
-
 .pf-c-notification-badge {
   --pf-c-notification-badge--PaddingTop: var(--pf-global--spacer--form-element);
   --pf-c-notification-badge--PaddingRight: var(--pf-global--spacer--md);