@patternfly/quickstarts 6.0.0-alpha.2 → 6.0.0-alpha.3

package/dist/quickstarts-full.es.js

@@ -66,7 +66,7 @@ function css(...args) {
     return classes.join(' ');
 }
 
-var styles$r = {
+var styles$v = {
   "content": "pf-v6-c-content",
   "contentA": "pf-v6-c-content--a",
   "contentBlockquote": "pf-v6-c-content--blockquote",
@@ -93,7 +93,7 @@ var styles$r = {
   }
 };
 
-var styles$q = {
+var styles$u = {
   "modifiers": {
     "4xl": "pf-m-4xl",
     "3xl": "pf-m-3xl",
@@ -113,61 +113,61 @@ var styles$q = {
 
 const global_breakpoint_sm = {
   "name": "--pf-t--global--breakpoint--sm",
-  "value": "576px",
+  "value": "36rem",
   "var": "var(--pf-t--global--breakpoint--sm)"
 };
 
 const global_breakpoint_md = {
   "name": "--pf-t--global--breakpoint--md",
-  "value": "768px",
+  "value": "48rem",
   "var": "var(--pf-t--global--breakpoint--md)"
 };
 
 const global_breakpoint_lg = {
   "name": "--pf-t--global--breakpoint--lg",
-  "value": "992px",
+  "value": "62rem",
   "var": "var(--pf-t--global--breakpoint--lg)"
 };
 
 const global_breakpoint_xl = {
   "name": "--pf-t--global--breakpoint--xl",
-  "value": "1200px",
+  "value": "75rem",
   "var": "var(--pf-t--global--breakpoint--xl)"
 };
 
 const global_breakpoint_2xl = {
   "name": "--pf-t--global--breakpoint--2xl",
-  "value": "1450px",
+  "value": "90.625rem",
   "var": "var(--pf-t--global--breakpoint--2xl)"
 };
 
 const global_breakpoint_height_sm = {
   "name": "--pf-t--global--breakpoint--height--sm",
-  "value": "0px",
+  "value": "0rem",
   "var": "var(--pf-t--global--breakpoint--height--sm)"
 };
 
 const global_breakpoint_height_md = {
   "name": "--pf-t--global--breakpoint--height--md",
-  "value": "640px",
+  "value": "40rem",
   "var": "var(--pf-t--global--breakpoint--height--md)"
 };
 
 const global_breakpoint_height_lg = {
   "name": "--pf-t--global--breakpoint--height--lg",
-  "value": "768px",
+  "value": "48rem",
   "var": "var(--pf-t--global--breakpoint--height--lg)"
 };
 
 const global_breakpoint_height_xl = {
   "name": "--pf-t--global--breakpoint--height--xl",
-  "value": "960px",
+  "value": "60rem",
   "var": "var(--pf-t--global--breakpoint--height--xl)"
 };
 
 const global_breakpoint_height_2xl = {
   "name": "--pf-t--global--breakpoint--height--2xl",
-  "value": "1280px",
+  "value": "80rem",
   "var": "var(--pf-t--global--breakpoint--height--2xl)"
 };
 
@@ -620,18 +620,18 @@ const KeyTypes = {
     ArrowRight: 'ArrowRight'
 };
 const globalWidthBreakpoints = {
-    sm: parseInt(global_breakpoint_sm.value),
-    md: parseInt(global_breakpoint_md.value),
-    lg: parseInt(global_breakpoint_lg.value),
-    xl: parseInt(global_breakpoint_xl.value),
-    '2xl': parseInt(global_breakpoint_2xl.value)
+    sm: parseInt(global_breakpoint_sm.value) * 16,
+    md: parseInt(global_breakpoint_md.value) * 16,
+    lg: parseInt(global_breakpoint_lg.value) * 16,
+    xl: parseInt(global_breakpoint_xl.value) * 16,
+    '2xl': parseInt(global_breakpoint_2xl.value) * 16
 };
 const globalHeightBreakpoints = {
-    sm: parseInt(global_breakpoint_height_sm.value),
-    md: parseInt(global_breakpoint_height_md.value),
-    lg: parseInt(global_breakpoint_height_lg.value),
-    xl: parseInt(global_breakpoint_height_xl.value),
-    '2xl': parseInt(global_breakpoint_height_2xl.value)
+    sm: parseInt(global_breakpoint_height_sm.value) * 16,
+    md: parseInt(global_breakpoint_height_md.value) * 16,
+    lg: parseInt(global_breakpoint_height_lg.value) * 16,
+    xl: parseInt(global_breakpoint_height_xl.value) * 16,
+    '2xl': parseInt(global_breakpoint_height_2xl.value) * 16
 };
 const statusIcons$2 = {
     success: CheckCircleIcon$1,
@@ -4239,7 +4239,7 @@ const hash = {
 };
 const getOppositePlacement = (placement) => placement.replace(/left|right|bottom|top|top-start|top-end|bottom-start|bottom-end|right-start|right-end|left-start|left-end/g, (matched) => hash[matched]);
 const getOpacityTransition = (animationDuration) => `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;
-const Popper = ({ trigger, popper, direction = 'down', position = 'start', placement, width, minWidth = 'trigger', maxWidth, appendTo = 'inline', zIndex = 9999, isVisible = true, positionModifiers, distance = 0, onMouseEnter, onMouseLeave, onFocus, onBlur, onDocumentClick, onTriggerClick, onTriggerEnter, onPopperClick, onPopperMouseEnter, onPopperMouseLeave, onDocumentKeyDown, enableFlip = true, flipBehavior = 'flip', triggerRef, popperRef, animationDuration = 0, entryDelay = 0, exitDelay = 0, onHidden = () => { }, onHide = () => { }, onMount = () => { }, onShow = () => { }, onShown = () => { }, preventOverflow = false }) => {
+const Popper = ({ trigger, popper, direction = 'down', position = 'start', placement, width, minWidth = 'trigger', maxWidth, appendTo = () => document.body, zIndex = 9999, isVisible = true, positionModifiers, distance = 0, onMouseEnter, onMouseLeave, onFocus, onBlur, onDocumentClick, onTriggerClick, onTriggerEnter, onPopperClick, onPopperMouseEnter, onPopperMouseLeave, onDocumentKeyDown, enableFlip = true, flipBehavior = 'flip', triggerRef, popperRef, animationDuration = 0, entryDelay = 0, exitDelay = 0, onHidden = () => { }, onHide = () => { }, onMount = () => { }, onShow = () => { }, onShown = () => { }, preventOverflow = false }) => {
     var _a;
     const [triggerElement, setTriggerElement] = React.useState(null);
     const [refElement, setRefElement] = React.useState(null);
@@ -4804,7 +4804,7 @@ var TitleSizes;
 const Title = (_a) => {
     var { className = '', children = '', headingLevel: HeadingLevel, size, ouiaId, ouiaSafe = true } = _a, props = __rest$1(_a, ["className", "children", "headingLevel", "size", "ouiaId", "ouiaSafe"]);
     const ouiaProps = useOUIAProps(Title.displayName, ouiaId, ouiaSafe);
-    return (React.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css(styles$q.title, size ? styles$q.modifiers[size] : styles$q.modifiers[HeadingLevel], className) }), children));
+    return (React.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css(styles$u.title, size ? styles$u.modifiers[size] : styles$u.modifiers[HeadingLevel], className) }), children));
 };
 Title.displayName = 'Title';
 
@@ -4843,7 +4843,7 @@ var buttonStyles = {
   "spinner": "pf-v6-c-spinner"
 };
 
-var styles$p = {
+var styles$t = {
   "modifiers": {
     "inline": "pf-m-inline",
     "sm": "pf-m-sm",
@@ -4857,7 +4857,7 @@ var styles$p = {
 
 const c_spinner_diameter = {
   "name": "--pf-v6-c-spinner--diameter",
-  "value": "1em",
+  "value": "3.5rem",
   "var": "var(--pf-v6-c-spinner--diameter)"
 };
 
@@ -4872,23 +4872,24 @@ const Spinner = (_a) => {
     var { 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', diameter, isInline = false, 'aria-label': ariaLabel, 'aria-labelledBy': ariaLabelledBy } = _a, props = __rest$1(_a, ["className", "size", 'aria-valuetext', "diameter", "isInline", 'aria-label', 'aria-labelledBy']);
-    return (React.createElement("svg", Object.assign({ className: css(styles$p.spinner, isInline ? styles$p.modifiers.inline : styles$p.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText, viewBox: "0 0 100 100" }, (diameter && { style: { [c_spinner_diameter.name]: diameter } }), (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy }), (!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' }), props),
-        React.createElement("circle", { className: styles$p.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })));
+    return (React.createElement("svg", Object.assign({ className: css(styles$t.spinner, isInline ? styles$t.modifiers.inline : styles$t.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText, viewBox: "0 0 100 100" }, (diameter && { style: { [c_spinner_diameter.name]: diameter } }), (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy }), (!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' }), props),
+        React.createElement("circle", { className: styles$t.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })));
 };
 Spinner.displayName = 'Spinner';
 
-var styles$o = {
+var styles$s = {
   "badge": "pf-v6-c-badge",
   "badgeToggleIcon": "pf-v6-c-badge__toggle-icon",
   "modifiers": {
     "read": "pf-m-read",
-    "unread": "pf-m-unread"
+    "unread": "pf-m-unread",
+    "disabled": "pf-m-disabled"
   }
 };
 
 const Badge = (_a) => {
-    var { isRead = false, className = '', children = '', screenReaderText } = _a, props = __rest$1(_a, ["isRead", "className", "children", "screenReaderText"]);
-    return (React.createElement("span", Object.assign({}, props, { className: css(styles$o.badge, (isRead ? styles$o.modifiers.read : styles$o.modifiers.unread), className) }),
+    var { isRead = false, isDisabled = false, className = '', children = '', screenReaderText } = _a, props = __rest$1(_a, ["isRead", "isDisabled", "className", "children", "screenReaderText"]);
+    return (React.createElement("span", Object.assign({}, props, { className: css(styles$s.badge, (isRead ? styles$s.modifiers.read : styles$s.modifiers.unread), isDisabled && styles$s.modifiers.disabled, className) }),
         children,
         screenReaderText && React.createElement("span", { className: "pf-v6-screen-reader" }, screenReaderText)));
 };
@@ -4947,12 +4948,11 @@ const ButtonBase = (_a) => {
     return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isAriaDisabled || (!isButtonElement && isDisabled), "aria-label": ariaLabel, className: css(buttonStyles.button, buttonStyles.modifiers[variant], isBlock && buttonStyles.modifiers.block, isDisabled && !isButtonElement && buttonStyles.modifiers.disabled, isAriaDisabled && buttonStyles.modifiers.ariaDisabled, isClicked && buttonStyles.modifiers.clicked, isInline && variant === ButtonVariant.link && buttonStyles.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && buttonStyles.modifiers.danger, isLoading !== null && variant !== ButtonVariant.plain && buttonStyles.modifiers.progress, isLoading && buttonStyles.modifiers.inProgress, hasNoPadding && variant === ButtonVariant.plain && buttonStyles.modifiers.noPadding, variant === ButtonVariant.stateful && buttonStyles.modifiers[state], size === ButtonSize.sm && buttonStyles.modifiers.small, size === ButtonSize.lg && buttonStyles.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : role, ref: innerRef }, ouiaProps),
         isLoading && (React.createElement("span", { className: css(buttonStyles.buttonProgress) },
             React.createElement(Spinner, { size: spinnerSize.md, isInline: isInline, "aria-valuetext": spinnerAriaValueText, "aria-label": spinnerAriaLabel, "aria-labelledby": spinnerAriaLabelledBy }))),
-        variant === ButtonVariant.plain && children === null && icon ? icon : null,
-        variant !== ButtonVariant.plain && icon && (iconPosition === 'start' || iconPosition === 'left') && (React.createElement("span", { className: css(buttonStyles.buttonIcon, buttonStyles.modifiers.start) }, icon)),
-        children,
-        variant !== ButtonVariant.plain && icon && (iconPosition === 'end' || iconPosition === 'right') && (React.createElement("span", { className: css(buttonStyles.buttonIcon, buttonStyles.modifiers.end) }, icon)),
+        icon && (iconPosition === 'start' || iconPosition === 'left') && (React.createElement("span", { className: css(buttonStyles.buttonIcon, buttonStyles.modifiers.start) }, icon)),
+        children && React.createElement("span", { className: css('pf-v6-c-button__text') }, children),
+        icon && (iconPosition === 'end' || iconPosition === 'right') && (React.createElement("span", { className: css(buttonStyles.buttonIcon, buttonStyles.modifiers.end) }, icon)),
         countOptions && (React.createElement("span", { className: css(buttonStyles.buttonCount, countOptions.className) },
-            React.createElement(Badge, { isRead: countOptions.isRead }, countOptions.count)))));
+            React.createElement(Badge, { isRead: countOptions.isRead, isDisabled: isDisabled }, countOptions.count)))));
 };
 const Button = React.forwardRef((props, ref) => (React.createElement(ButtonBase, Object.assign({ innerRef: ref }, props))));
 Button.displayName = 'Button';
@@ -4968,12 +4968,12 @@ const TimesIconConfig = {
 
 const TimesIcon = createIcon(TimesIconConfig);
 
-var styles$n = {
+var styles$r = {
   "backdrop": "pf-v6-c-backdrop",
   "backdropOpen": "pf-v6-c-backdrop__open"
 };
 
-var modalStyles = {
+var styles$q = {
   "button": "pf-v6-c-button",
   "modalBox": "pf-v6-c-modal-box",
   "modalBoxBody": "pf-v6-c-modal-box__body",
@@ -5000,33 +5000,32 @@ var modalStyles = {
   }
 };
 
-var styles$m = {
+var styles$p = {
   "bullseye": "pf-v6-l-bullseye"
 };
 
 const Backdrop = (_a) => {
     var { children = null, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({}, props, { className: css(styles$n.backdrop, className) }), children));
+    return (React.createElement("div", Object.assign({}, props, { className: css(styles$r.backdrop, className) }), children));
 };
 Backdrop.displayName = 'Backdrop';
 
 const ModalBoxBody = (_a) => {
     var { children = null, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({}, props, { className: css(modalStyles.modalBoxBody, className) }), children));
+    return (React.createElement("div", Object.assign({}, props, { className: css(styles$q.modalBoxBody, className) }), children));
 };
 ModalBoxBody.displayName = 'ModalBoxBody';
 
 const ModalBoxCloseButton = (_a) => {
     var { className, onClose = () => undefined, 'aria-label': ariaLabel = 'Close', ouiaId } = _a, props = __rest$1(_a, ["className", "onClose", 'aria-label', "ouiaId"]);
-    return (React.createElement("div", { className: css(modalStyles.modalBoxClose, className) },
-        React.createElement(Button, Object.assign({ variant: "plain", onClick: (event) => onClose(event), "aria-label": ariaLabel }, (ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` }), props),
-            React.createElement(TimesIcon, null))));
+    return (React.createElement("div", { className: css(styles$q.modalBoxClose, className) },
+        React.createElement(Button, Object.assign({ variant: "plain", onClick: (event) => onClose(event), "aria-label": ariaLabel }, (ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` }), props, { icon: React.createElement(TimesIcon, null) }))));
 };
 ModalBoxCloseButton.displayName = 'ModalBoxCloseButton';
 
 const c_modal_box_m_align_top_spacer = {
   "name": "--pf-v6-c-modal-box--m-align-top--spacer",
-  "value": "8px",
+  "value": "0.5rem",
   "var": "var(--pf-v6-c-modal-box--m-align-top--spacer)"
 };
 
@@ -5036,33 +5035,33 @@ const ModalBox = (_a) => {
         style = style || {};
         style[c_modal_box_m_align_top_spacer.name] = positionOffset;
     }
-    return (React.createElement("div", Object.assign({}, props, { role: "dialog", "aria-label": ariaLabel || null, "aria-labelledby": ariaLabelledby || null, "aria-describedby": ariaDescribedby, "aria-modal": "true", className: css(modalStyles.modalBox, className, position === 'top' && modalStyles.modifiers.alignTop, variant === 'large' && modalStyles.modifiers.lg, variant === 'small' && modalStyles.modifiers.sm, variant === 'medium' && modalStyles.modifiers.md), style: style }), children));
+    return (React.createElement("div", Object.assign({}, props, { role: "dialog", "aria-label": ariaLabel || null, "aria-labelledby": ariaLabelledby || null, "aria-describedby": ariaDescribedby, "aria-modal": "true", className: css(styles$q.modalBox, className, position === 'top' && styles$q.modifiers.alignTop, variant === 'large' && styles$q.modifiers.lg, variant === 'small' && styles$q.modifiers.sm, variant === 'medium' && styles$q.modifiers.md), style: style }), children));
 };
 ModalBox.displayName = 'ModalBox';
 
 const ModalBoxFooter = (_a) => {
     var { children = null, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-    return (React.createElement("footer", Object.assign({}, props, { className: css(modalStyles.modalBoxFooter, className) }), children));
+    return (React.createElement("footer", Object.assign({}, props, { className: css(styles$q.modalBoxFooter, className) }), children));
 };
 ModalBoxFooter.displayName = 'ModalBoxFooter';
 
 const ModalBoxDescription = (_a) => {
     var { children = null, className = '', id = '' } = _a, props = __rest$1(_a, ["children", "className", "id"]);
-    return (React.createElement("div", Object.assign({}, props, { id: id, className: css(modalStyles.modalBoxDescription, className) }), children));
+    return (React.createElement("div", Object.assign({}, props, { id: id, className: css(styles$q.modalBoxDescription, className) }), children));
 };
 ModalBoxDescription.displayName = 'ModalBoxDescription';
 
 const ModalBoxHeader = (_a) => {
     var { children = null, className = '', help = null } = _a, props = __rest$1(_a, ["children", "className", "help"]);
-    return (React.createElement("header", Object.assign({ className: css(modalStyles.modalBoxHeader, help && modalStyles.modifiers.help, className) }, props),
+    return (React.createElement("header", Object.assign({ className: css(styles$q.modalBoxHeader, help && styles$q.modifiers.help, className) }, props),
         help && (React.createElement(React.Fragment, null,
-            React.createElement("div", { className: css(modalStyles.modalBoxHeaderMain) }, children),
-            React.createElement("div", { className: `${modalStyles.modalBoxHeader}-help` }, help))),
+            React.createElement("div", { className: css(styles$q.modalBoxHeaderMain) }, children),
+            React.createElement("div", { className: `${styles$q.modalBoxHeader}-help` }, help))),
         !help && children));
 };
 ModalBoxHeader.displayName = 'ModalBoxHeader';
 
-var styles$l = {
+var styles$o = {
   "modifiers": {
     "top": "pf-m-top",
     "topLeft": "pf-m-top-left",
@@ -5085,13 +5084,13 @@ var styles$l = {
 
 const TooltipContent = (_a) => {
     var { className, children, isLeftAligned } = _a, props = __rest$1(_a, ["className", "children", "isLeftAligned"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$l.tooltipContent, isLeftAligned && styles$l.modifiers.textAlignLeft, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$o.tooltipContent, isLeftAligned && styles$o.modifiers.textAlignLeft, className) }, props), children));
 };
 TooltipContent.displayName = 'TooltipContent';
 
 const TooltipArrow = (_a) => {
     var { className } = _a, props = __rest$1(_a, ["className"]);
-    return React.createElement("div", Object.assign({ className: css(styles$l.tooltipArrow, className) }, props));
+    return React.createElement("div", Object.assign({ className: css(styles$o.tooltipArrow, className) }, props));
 };
 TooltipArrow.displayName = 'TooltipArrow';
 
@@ -5161,21 +5160,21 @@ const Tooltip = (_a) => {
         setVisible(false);
     };
     const positionModifiers = {
-        top: styles$l.modifiers.top,
-        bottom: styles$l.modifiers.bottom,
-        left: styles$l.modifiers.left,
-        right: styles$l.modifiers.right,
-        'top-start': styles$l.modifiers.topLeft,
-        'top-end': styles$l.modifiers.topRight,
-        'bottom-start': styles$l.modifiers.bottomLeft,
-        'bottom-end': styles$l.modifiers.bottomRight,
-        'left-start': styles$l.modifiers.leftTop,
-        'left-end': styles$l.modifiers.leftBottom,
-        'right-start': styles$l.modifiers.rightTop,
-        'right-end': styles$l.modifiers.rightBottom
+        top: styles$o.modifiers.top,
+        bottom: styles$o.modifiers.bottom,
+        left: styles$o.modifiers.left,
+        right: styles$o.modifiers.right,
+        'top-start': styles$o.modifiers.topLeft,
+        'top-end': styles$o.modifiers.topRight,
+        'bottom-start': styles$o.modifiers.bottomLeft,
+        'bottom-end': styles$o.modifiers.bottomRight,
+        'left-start': styles$o.modifiers.leftTop,
+        'left-end': styles$o.modifiers.leftBottom,
+        'right-start': styles$o.modifiers.rightTop,
+        'right-end': styles$o.modifiers.rightBottom
     };
     const hasCustomMaxWidth = maxWidth !== c_tooltip_MaxWidth.value;
-    const content = (React.createElement("div", Object.assign({ "aria-live": ariaLive, className: css(styles$l.tooltip, className), role: "tooltip", id: id, style: {
+    const content = (React.createElement("div", Object.assign({ "aria-live": ariaLive, className: css(styles$o.tooltip, className), role: "tooltip", id: id, style: {
             maxWidth: hasCustomMaxWidth ? maxWidth : null
         }, ref: popperRef }, rest),
         React.createElement(TooltipArrow, null),
@@ -5223,10 +5222,10 @@ const ModalBoxTitle = (_a) => {
     useIsomorphicLayoutEffect(() => {
         setHasTooltip(h1.current && h1.current.offsetWidth < h1.current.scrollWidth);
     }, []);
-    const content = (React.createElement("h1", Object.assign({ id: id, ref: h1, className: css(modalStyles.modalBoxTitle, titleIconVariant && modalStyles.modifiers.icon, className) }, props),
-        titleIconVariant && (React.createElement("span", { className: css(modalStyles.modalBoxTitleIcon) }, isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : React.createElement(CustomIcon, null))),
+    const content = (React.createElement("h1", Object.assign({ id: id, ref: h1, className: css(styles$q.modalBoxTitle, titleIconVariant && styles$q.modifiers.icon, className) }, props),
+        titleIconVariant && (React.createElement("span", { className: css(styles$q.modalBoxTitleIcon) }, isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : React.createElement(CustomIcon, null))),
         label && React.createElement("span", { className: "pf-v6-screen-reader" }, label),
-        React.createElement("span", { className: css(modalStyles.modalBoxTitleText) }, title)));
+        React.createElement("span", { className: css(styles$q.modalBoxTitleText) }, title)));
     return hasTooltip ? React.createElement(Tooltip, { content: title }, content) : content;
 };
 ModalBoxTitle.displayName = 'ModalBoxTitle';
@@ -5260,7 +5259,7 @@ const ModalContent = (_a) => {
         }
         return idRefList.join(' ');
     };
-    const modalBox = (React.createElement(ModalBox, Object.assign({ id: boxId, className: css(className, isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant]), variant: variant, position: position, positionOffset: positionOffset, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyFormatted(), "aria-describedby": ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId) }, getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe), { style: Object.assign(Object.assign({}, (width && { '--pf-v6-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` })), (maxWidth && {
+    const modalBox = (React.createElement(ModalBox, Object.assign({ id: boxId, className: css(className, isVariantIcon(titleIconVariant) && styles$q.modifiers[titleIconVariant]), variant: variant, position: position, positionOffset: positionOffset, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyFormatted(), "aria-describedby": ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId) }, getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe), { style: Object.assign(Object.assign({}, (width && { '--pf-v6-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` })), (maxWidth && {
             '--pf-v6-c-modal-box--MaxWidth': typeof maxWidth !== 'number' ? maxWidth : `${maxWidth}px`
         })) }),
         showClose && React.createElement(ModalBoxCloseButton, { onClose: (event) => onClose(event), ouiaId: ouiaId }),
@@ -5274,7 +5273,7 @@ const ModalContent = (_a) => {
                 // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
                 // We want to prevent this in case false is ever passed in.
                 initialFocus: elementToFocus || undefined
-            }, className: css(styles$m.bullseye) }, modalBox)));
+            }, className: css(styles$p.bullseye) }, modalBox)));
 };
 ModalContent.displayName = 'ModalContent';
 
@@ -5334,12 +5333,12 @@ class Modal$1 extends React.Component {
         target.appendChild(container);
         target.addEventListener('keydown', this.handleEscKeyClick, false);
         if (this.props.isOpen) {
-            target.classList.add(css(styles$n.backdropOpen));
+            target.classList.add(css(styles$r.backdropOpen));
         }
         else {
-            target.classList.remove(css(styles$n.backdropOpen));
+            target.classList.remove(css(styles$r.backdropOpen));
         }
-        if (this.isEmpty(title) && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
+        if (!title && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
             // eslint-disable-next-line no-console
             console.error('Modal: Specify at least one of: title, aria-label, aria-labelledby.');
         }
@@ -5352,11 +5351,11 @@ class Modal$1 extends React.Component {
         const { appendTo } = this.props;
         const target = this.getElement(appendTo);
         if (this.props.isOpen) {
-            target.classList.add(css(styles$n.backdropOpen));
+            target.classList.add(css(styles$r.backdropOpen));
             this.toggleSiblingsFromScreenReaders(true);
         }
         else {
-            target.classList.remove(css(styles$n.backdropOpen));
+            target.classList.remove(css(styles$r.backdropOpen));
             this.toggleSiblingsFromScreenReaders(false);
         }
     }
@@ -5367,7 +5366,7 @@ class Modal$1 extends React.Component {
             target.removeChild(this.state.container);
         }
         target.removeEventListener('keydown', this.handleEscKeyClick, false);
-        target.classList.remove(css(styles$n.backdropOpen));
+        target.classList.remove(css(styles$r.backdropOpen));
         this.toggleSiblingsFromScreenReaders(false);
     }
     render() {
@@ -5405,7 +5404,7 @@ Modal$1.defaultProps = {
     position: 'default'
 };
 
-var styles$k = {
+var styles$n = {
   "accordion": "pf-v6-c-accordion",
   "accordionExpandableContent": "pf-v6-c-accordion__expandable-content",
   "accordionExpandableContentBody": "pf-v6-c-accordion__expandable-content-body",
@@ -5429,7 +5428,7 @@ const AccordionItemContext = React.createContext({});
 const Accordion = (_a) => {
     var { children = null, className = '', 'aria-label': ariaLabel, headingLevel = 'h3', asDefinitionList = true, isBordered = false, displaySize = 'default', togglePosition = 'end' } = _a, props = __rest$1(_a, ["children", "className", 'aria-label', "headingLevel", "asDefinitionList", "isBordered", "displaySize", "togglePosition"]);
     const AccordionList = asDefinitionList ? 'dl' : 'div';
-    return (React.createElement(AccordionList, Object.assign({ className: css(styles$k.accordion, isBordered && styles$k.modifiers.bordered, togglePosition === 'start' && styles$k.modifiers.toggleStart, displaySize === 'lg' && styles$k.modifiers.displayLg, className), "aria-label": ariaLabel }, (!asDefinitionList && ariaLabel && { role: 'region' }), props),
+    return (React.createElement(AccordionList, Object.assign({ className: css(styles$n.accordion, isBordered && styles$n.modifiers.bordered, togglePosition === 'start' && styles$n.modifiers.toggleStart, displaySize === 'lg' && styles$n.modifiers.displayLg, className), "aria-label": ariaLabel }, (!asDefinitionList && ariaLabel && { role: 'region' }), props),
         React.createElement(AccordionContext.Provider, { value: {
                 ContentContainer: asDefinitionList ? 'dd' : 'div',
                 ToggleContainer: asDefinitionList ? 'dt' : headingLevel,
@@ -5438,11 +5437,14 @@ const Accordion = (_a) => {
 };
 Accordion.displayName = 'Accordion';
 
-const AccordionExpandableContentBody = ({ children = null }) => React.createElement("div", { className: css(styles$k.accordionExpandableContentBody) }, children);
+const AccordionExpandableContentBody = (_a) => {
+    var { children = null } = _a, props = __rest$1(_a, ["children"]);
+    return (React.createElement("div", Object.assign({ className: css(styles$n.accordionExpandableContentBody) }, props), children));
+};
 AccordionExpandableContentBody.displayName = 'AccordionExpandableContentBody';
 
 const AccordionContent = (_a) => {
-    var { className = '', children = null, id = '', isFixed = false, isCustomContent = false, 'aria-label': ariaLabel = '', 'aria-labelledby': ariaLabelledby, component } = _a, props = __rest$1(_a, ["className", "children", "id", "isFixed", "isCustomContent", 'aria-label', 'aria-labelledby', "component"]);
+    var { className = '', children = null, id = '', isFixed = false, isCustomContent = false, 'aria-label': ariaLabel = '', 'aria-labelledby': ariaLabelledby, component, contentBodyProps } = _a, props = __rest$1(_a, ["className", "children", "id", "isFixed", "isCustomContent", 'aria-label', 'aria-labelledby', "component", "contentBodyProps"]);
     const [hasScrollbar, setHasScrollbar] = React.useState(false);
     const containerRef = React.useRef(null);
     const { isExpanded } = React.useContext(AccordionItemContext);
@@ -5457,15 +5459,18 @@ const AccordionContent = (_a) => {
     }, [containerRef, isFixed, isExpanded]);
     return (React.createElement(AccordionContext.Consumer, null, ({ ContentContainer }) => {
         const Container = component || ContentContainer;
-        return (React.createElement(Container, Object.assign({ ref: containerRef, id: id, className: css(styles$k.accordionExpandableContent, isFixed && styles$k.modifiers.fixed, className), hidden: !isExpanded }, (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledby && { 'aria-labelledby': ariaLabelledby }), (hasScrollbar && { tabIndex: 0 }), (hasScrollbar && Container === 'div' && { role: 'region' }), props), isCustomContent ? children : React.createElement(AccordionExpandableContentBody, null, children)));
+        return (React.createElement(Container, Object.assign({ ref: containerRef, id: id, className: css(styles$n.accordionExpandableContent, isFixed && styles$n.modifiers.fixed, className), hidden: !isExpanded }, (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledby && { 'aria-labelledby': ariaLabelledby }), (hasScrollbar && { tabIndex: 0 }), (hasScrollbar && Container === 'div' && { role: 'region' }), props), isCustomContent ? (children) : (React.createElement(AccordionExpandableContentBody, Object.assign({}, contentBodyProps), children))));
     }));
 };
 AccordionContent.displayName = 'AccordionContent';
 
-const AccordionItem = ({ children = null, className, isExpanded: isExpandedProp = false }) => (React.createElement(AccordionItemContext.Provider, { value: {
-        isExpanded: isExpandedProp
-    } },
-    React.createElement("div", { className: css(styles$k.accordionItem, isExpandedProp && styles$k.modifiers.expanded, className) }, children)));
+const AccordionItem = (_a) => {
+    var { children = null, className, isExpanded: isExpandedProp = false } = _a, props = __rest$1(_a, ["children", "className", "isExpanded"]);
+    return (React.createElement(AccordionItemContext.Provider, { value: {
+            isExpanded: isExpandedProp
+        } },
+        React.createElement("div", Object.assign({ className: css(styles$n.accordionItem, isExpandedProp && styles$n.modifiers.expanded, className) }, props), children)));
+};
 AccordionItem.displayName = 'AccordionItem';
 
 const AngleRightIconConfig = {
@@ -5481,22 +5486,48 @@ const AngleRightIcon = createIcon(AngleRightIconConfig);
 
 const AccordionToggle = (_a) => {
     var { className = '', id, children = null, component } = _a, props = __rest$1(_a, ["className", "id", "children", "component"]);
-    const renderToggleIcon = () => (React.createElement("span", { className: css(styles$k.accordionToggleIcon) },
+    const renderToggleIcon = () => (React.createElement("span", { className: css(styles$n.accordionToggleIcon) },
         React.createElement(AngleRightIcon, null)));
     const { isExpanded } = React.useContext(AccordionItemContext);
     return (React.createElement(AccordionContext.Consumer, null, ({ ToggleContainer, togglePosition }) => {
         const Container = component || ToggleContainer;
         const isToggleStartPositioned = togglePosition === 'start';
         return (React.createElement(Container, null,
-            React.createElement("button", Object.assign({ id: id, className: css(styles$k.accordionToggle, isExpanded && styles$k.modifiers.expanded, className), "aria-expanded": isExpanded, type: "button" }, props),
+            React.createElement("button", Object.assign({ id: id, className: css(styles$n.accordionToggle, isExpanded && styles$n.modifiers.expanded, className), "aria-expanded": isExpanded, type: "button" }, props),
                 isToggleStartPositioned && renderToggleIcon(),
-                React.createElement("span", { className: css(styles$k.accordionToggleText) }, children),
+                React.createElement("span", { className: css(styles$n.accordionToggleText) }, children),
                 !isToggleStartPositioned && renderToggleIcon())));
     }));
 };
 AccordionToggle.displayName = 'AccordionToggle';
 
-var styles$j = {
+var styles$m = {
+  "actionList": "pf-v6-c-action-list",
+  "actionListGroup": "pf-v6-c-action-list__group",
+  "modifiers": {
+    "icons": "pf-m-icons"
+  }
+};
+
+const ActionList = (_a) => {
+    var { children, isIconList, className } = _a, props = __rest$1(_a, ["children", "isIconList", "className"]);
+    return (React.createElement("div", Object.assign({ className: css(styles$m.actionList, isIconList && styles$m.modifiers.icons, className) }, props), children));
+};
+ActionList.displayName = 'ActionList';
+
+const ActionListGroup = (_a) => {
+    var { children, className, isIconGroup } = _a, props = __rest$1(_a, ["children", "className", "isIconGroup"]);
+    return (React.createElement("div", Object.assign({ className: css(styles$m.actionListGroup, isIconGroup && styles$m.modifiers.icons, className) }, props), children));
+};
+ActionListGroup.displayName = 'ActionListGroup';
+
+const ActionListItem = (_a) => {
+    var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
+    return (React.createElement("div", Object.assign({ className: css(`${styles$m.actionList}__item`, className) }, props), children));
+};
+ActionListItem.displayName = 'ActionListItem';
+
+var styles$l = {
   "alert": "pf-v6-c-alert",
   "alertAction": "pf-v6-c-alert__action",
   "alertActionGroup": "pf-v6-c-alert__action-group",
@@ -5531,7 +5562,7 @@ const variantIcons = {
 const AlertIcon = (_a) => {
     var { variant, customIcon, className = '' } = _a, props = __rest$1(_a, ["variant", "customIcon", "className"]);
     const Icon = variantIcons[variant];
-    return Icon ? (React.createElement("div", Object.assign({}, props, { className: css(styles$j.alertIcon, className) }), customIcon || React.createElement(Icon, null))) : null;
+    return Icon ? (React.createElement("div", Object.assign({}, props, { className: css(styles$l.alertIcon, className) }), customIcon || React.createElement(Icon, null))) : null;
 };
 
 const AlertContext = React.createContext(null);
@@ -5545,9 +5576,8 @@ const c_alert__title_max_lines = {
 const AlertToggleExpandButton = (_a) => {
     var { 'aria-label': ariaLabel = '', variantLabel, onToggleExpand, isExpanded = false } = _a, props = __rest$1(_a, ['aria-label', "variantLabel", "onToggleExpand", "isExpanded"]);
     const { title, variantLabel: alertVariantLabel } = React.useContext(AlertContext);
-    return (React.createElement(Button, Object.assign({ variant: ButtonVariant.plain, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": ariaLabel === '' ? `Toggle ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel }, props),
-        React.createElement("span", { className: css(styles$j.alertToggleIcon) },
-            React.createElement(AngleRightIcon, { "aria-hidden": "true" }))));
+    return (React.createElement(Button, Object.assign({ variant: ButtonVariant.plain, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": ariaLabel === '' ? `Toggle ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel }, props, { icon: React.createElement("span", { className: css(styles$l.alertToggleIcon) },
+            React.createElement(AngleRightIcon, { "aria-hidden": "true" })) })));
 };
 AlertToggleExpandButton.displayName = 'AlertToggleExpandButton';
 
@@ -5631,20 +5661,20 @@ const Alert = (_a) => {
     if (dismissed) {
         return null;
     }
-    const Title = (React.createElement(TitleComponent, Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css(styles$j.alertTitle, truncateTitle && styles$j.modifiers.truncate) }), getHeadingContent));
-    return (React.createElement("div", Object.assign({ ref: divRef, className: css(styles$j.alert, isInline && styles$j.modifiers.inline, isPlain && styles$j.modifiers.plain, isExpandable && styles$j.modifiers.expandable, isExpanded && styles$j.modifiers.expanded, styles$j.modifiers[variant], className) }, ouiaProps, (isLiveRegion && {
+    const Title = (React.createElement(TitleComponent, Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css(styles$l.alertTitle, truncateTitle && styles$l.modifiers.truncate) }), getHeadingContent));
+    return (React.createElement("div", Object.assign({ ref: divRef, className: css(styles$l.alert, isInline && styles$l.modifiers.inline, isPlain && styles$l.modifiers.plain, isExpandable && styles$l.modifiers.expandable, isExpanded && styles$l.modifiers.expanded, styles$l.modifiers[variant], className) }, ouiaProps, (isLiveRegion && {
         'aria-live': 'polite',
         'aria-atomic': 'false'
     }), { onMouseEnter: myOnMouseEnter, onMouseLeave: myOnMouseLeave, id: id }, props),
         isExpandable && (React.createElement(AlertContext.Provider, { value: { title, variantLabel } },
-            React.createElement("div", { className: css(styles$j.alertToggle) },
+            React.createElement("div", { className: css(styles$l.alertToggle) },
                 React.createElement(AlertToggleExpandButton, { isExpanded: isExpanded, onToggleExpand: onToggleExpand, "aria-label": toggleAriaLabel })))),
         React.createElement(AlertIcon, { variant: variant, customIcon: customIcon }),
         isTooltipVisible ? (React.createElement(Tooltip, { content: getHeadingContent, position: tooltipPosition }, Title)) : (Title),
         actionClose && (React.createElement(AlertContext.Provider, { value: { title, variantLabel } },
-            React.createElement("div", { className: css(styles$j.alertAction) }, actionClose))),
-        children && (!isExpandable || (isExpandable && isExpanded)) && (React.createElement("div", { className: css(styles$j.alertDescription) }, children)),
-        actionLinks && React.createElement("div", { className: css(styles$j.alertActionGroup) }, actionLinks)));
+            React.createElement("div", { className: css(styles$l.alertAction) }, actionClose))),
+        children && (!isExpandable || (isExpandable && isExpanded)) && (React.createElement("div", { className: css(styles$l.alertDescription) }, children)),
+        actionLinks && React.createElement("div", { className: css(styles$l.alertActionGroup) }, actionLinks)));
 };
 Alert.displayName = 'Alert';
 
@@ -5668,13 +5698,12 @@ var breadcrumbStyles = {
   "breadcrumbLink": "pf-v6-c-breadcrumb__link",
   "breadcrumbList": "pf-v6-c-breadcrumb__list",
   "dirRtl": "pf-v6-m-dir-rtl",
-  "menuToggle": "pf-v6-c-menu-toggle",
   "modifiers": {
     "current": "pf-m-current"
   }
 };
 
-var formStyles$1 = {
+var formStyles = {
   "formControl": "pf-v6-c-form-control",
   "formControlIcon": "pf-v6-c-form-control__icon",
   "formControlToggleIcon": "pf-v6-c-form-control__toggle-icon",
@@ -5704,7 +5733,7 @@ const statusIcons$1 = {
 const FormControlIcon = (_a) => {
     var { status, customIcon, className } = _a, props = __rest$1(_a, ["status", "customIcon", "className"]);
     const StatusIcon = status && statusIcons$1[status];
-    return (React.createElement("span", Object.assign({ className: css(formStyles$1.formControlIcon, status && formStyles$1.modifiers.status, className) }, props), customIcon || React.createElement(StatusIcon, null)));
+    return (React.createElement("span", Object.assign({ className: css(formStyles.formControlIcon, status && formStyles.modifiers.status, className) }, props), customIcon || React.createElement(StatusIcon, null)));
 };
 
 var TextInputTypes;
@@ -5793,9 +5822,9 @@ class TextInputBase extends React.Component {
         const ariaExpandedProps = expandedProps
             ? { 'aria-expanded': expandedProps === null || expandedProps === void 0 ? void 0 : expandedProps.isExpanded, 'aria-controls': expandedProps === null || expandedProps === void 0 ? void 0 : expandedProps.ariaControls, role: 'combobox' }
             : {};
-        return (React.createElement("span", { className: css(formStyles$1.formControl, readOnlyVariant && formStyles$1.modifiers.readonly, readOnlyVariant === 'plain' && formStyles$1.modifiers.plain, isDisabled && formStyles$1.modifiers.disabled, (isExpanded || (expandedProps === null || expandedProps === void 0 ? void 0 : expandedProps.isExpanded)) && formStyles$1.modifiers.expanded, customIcon && formStyles$1.modifiers.icon, hasStatusIcon && formStyles$1.modifiers[validated], className) },
+        return (React.createElement("span", { className: css(formStyles.formControl, readOnlyVariant && formStyles.modifiers.readonly, readOnlyVariant === 'plain' && formStyles.modifiers.plain, isDisabled && formStyles.modifiers.disabled, (isExpanded || (expandedProps === null || expandedProps === void 0 ? void 0 : expandedProps.isExpanded)) && formStyles.modifiers.expanded, customIcon && formStyles.modifiers.icon, hasStatusIcon && formStyles.modifiers[validated], className) },
             React.createElement("input", Object.assign({}, props, { onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange, type: type, value: this.sanitizeInputValue(value), "aria-invalid": props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error }, ariaExpandedProps, { required: isRequired, disabled: isDisabled, readOnly: !!readOnlyVariant || readOnly, ref: innerRef || this.inputRef, placeholder: placeholder }, getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))),
-            (customIcon || hasStatusIcon) && (React.createElement("span", { className: css(formStyles$1.formControlUtilities) },
+            (customIcon || hasStatusIcon) && (React.createElement("span", { className: css(formStyles.formControlUtilities) },
                 customIcon && React.createElement(FormControlIcon, { customIcon: customIcon }),
                 hasStatusIcon && React.createElement(FormControlIcon, { status: validated })))));
     }
@@ -6167,7 +6196,7 @@ const CheckIconConfig = {
 
 const CheckIcon = createIcon(CheckIconConfig);
 
-var styles$i = {
+var styles$k = {
   "check": "pf-v6-c-check",
   "checkBody": "pf-v6-c-check__body",
   "checkDescription": "pf-v6-c-check__description",
@@ -6208,22 +6237,22 @@ class Checkbox extends React.Component {
         if ([false, true].includes(defaultChecked)) {
             checkedProps.defaultChecked = defaultChecked;
         }
-        const inputRendered = (React.createElement("input", Object.assign({}, props, { className: css(styles$i.checkInput, inputClassName), type: "checkbox", onChange: this.handleChange, "aria-invalid": !isValid, "aria-label": ariaLabel, disabled: isDisabled, required: isRequired, ref: (elem) => elem && (elem.indeterminate = isChecked === null) }, checkedProps, getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
+        const inputRendered = (React.createElement("input", Object.assign({}, props, { className: css(styles$k.checkInput, inputClassName), type: "checkbox", onChange: this.handleChange, "aria-invalid": !isValid, "aria-label": ariaLabel, disabled: isDisabled, required: isRequired, ref: (elem) => elem && (elem.indeterminate = isChecked === null) }, checkedProps, getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
         const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
         const Label = wrapWithLabel ? 'span' : 'label';
-        const labelRendered = label ? (React.createElement(Label, { className: css(styles$i.checkLabel, isDisabled && styles$i.modifiers.disabled), htmlFor: !wrapWithLabel ? props.id : undefined },
+        const labelRendered = label ? (React.createElement(Label, { className: css(styles$k.checkLabel, isDisabled && styles$k.modifiers.disabled), htmlFor: !wrapWithLabel ? props.id : undefined },
             label,
-            isRequired && (React.createElement("span", { className: css(styles$i.checkLabelRequired), "aria-hidden": "true" }, ASTERISK)))) : null;
+            isRequired && (React.createElement("span", { className: css(styles$k.checkLabelRequired), "aria-hidden": "true" }, ASTERISK)))) : null;
         const Component = component !== null && component !== void 0 ? component : (wrapWithLabel ? 'label' : 'div');
         checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
-        return (React.createElement(Component, { className: css(styles$i.check, !label && styles$i.modifiers.standalone, className), htmlFor: wrapWithLabel ? props.id : undefined },
+        return (React.createElement(Component, { className: css(styles$k.check, !label && styles$k.modifiers.standalone, className), htmlFor: wrapWithLabel ? props.id : undefined },
             labelPosition === 'start' ? (React.createElement(React.Fragment, null,
                 labelRendered,
                 inputRendered)) : (React.createElement(React.Fragment, null,
                 inputRendered,
                 labelRendered)),
-            description && React.createElement("span", { className: css(styles$i.checkDescription) }, description),
-            body && React.createElement("span", { className: css(styles$i.checkBody) }, body)));
+            description && React.createElement("span", { className: css(styles$k.checkDescription) }, description),
+            body && React.createElement("span", { className: css(styles$k.checkBody) }, body)));
     }
 }
 Checkbox.displayName = 'Checkbox';
@@ -6259,7 +6288,7 @@ const MenuItemActionBase = (_a) => {
             onActionClick && onActionClick(event, itemId, actionId);
         };
         return (React.createElement("div", Object.assign({ className: css(menuStyles.menuItemAction, isFavorited !== null && 'pf-m-favorite', isFavorited && menuStyles.modifiers.favorited, className) }, props),
-            React.createElement(Button, { "aria-label": ariaLabel, onClick: onClickButton, ref: innerRef, role: "menuitem", variant: "plain", tabIndex: -1, isDisabled: isDisabled || isDisabledContext }, icon === 'favorites' || isFavorited !== null ? React.createElement(StarIcon, { "aria-hidden": true }) : icon)));
+            React.createElement(Button, { "aria-label": ariaLabel, onClick: onClickButton, ref: innerRef, role: "menuitem", variant: "plain", tabIndex: -1, isDisabled: isDisabled || isDisabledContext, icon: icon === 'favorites' || isFavorited !== null ? React.createElement(StarIcon, { "aria-hidden": true }) : icon })));
     }))));
 };
 const MenuItemAction = React.forwardRef((props, ref) => (React.createElement(MenuItemActionBase, Object.assign({}, props, { innerRef: ref }))));
@@ -6576,7 +6605,7 @@ const SelectOptionBase = (_a) => {
 const SelectOption = React__default.forwardRef((props, ref) => (React__default.createElement(SelectOptionBase, Object.assign({}, props, { innerRef: ref }))));
 SelectOption.displayName = 'SelectOption';
 
-var styles$h = {
+var styles$j = {
   "button": "pf-v6-c-button",
   "check": "pf-v6-c-check",
   "checkInput": "pf-v6-c-check__input",
@@ -6595,7 +6624,6 @@ var styles$h = {
     "fullWidth": "pf-m-full-width",
     "plain": "pf-m-plain",
     "expanded": "pf-m-expanded",
-    "active": "pf-m-active",
     "disabled": "pf-m-disabled",
     "small": "pf-m-small",
     "success": "pf-m-success",
@@ -6603,7 +6631,8 @@ var styles$h = {
     "danger": "pf-m-danger",
     "splitButton": "pf-m-split-button",
     "action": "pf-m-action",
-    "typeahead": "pf-m-typeahead"
+    "typeahead": "pf-m-typeahead",
+    "text": "pf-m-text"
   },
   "textInputGroup": "pf-v6-c-text-input-group"
 };
@@ -6629,12 +6658,16 @@ class MenuToggleBase extends React.Component {
     constructor() {
         super(...arguments);
         this.displayName = 'MenuToggleBase';
+        this.state = {
+            ouiaStateId: getDefaultOUIAId(MenuToggle.displayName, this.props.variant)
+        };
     }
     render() {
-        const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, splitButtonOptions, variant, status, statusIcon, innerRef, onClick, 'aria-label': ariaLabel } = _a, otherProps = __rest$1(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "isFullWidth", "splitButtonOptions", "variant", "status", "statusIcon", "innerRef", "onClick", 'aria-label']);
+        const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, splitButtonOptions, variant, status, statusIcon, innerRef, onClick, 'aria-label': ariaLabel, ouiaId, ouiaSafe } = _a, otherProps = __rest$1(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "isFullWidth", "splitButtonOptions", "variant", "status", "statusIcon", "innerRef", "onClick", 'aria-label', "ouiaId", "ouiaSafe"]);
         const isPlain = variant === 'plain';
         const isPlainText = variant === 'plainText';
         const isTypeahead = variant === 'typeahead';
+        const ouiaProps = getOUIAProps(MenuToggle.displayName, ouiaId !== null && ouiaId !== void 0 ? ouiaId : this.state.ouiaStateId, ouiaSafe);
         let _statusIcon = statusIcon;
         if (!statusIcon) {
             switch (status) {
@@ -6649,28 +6682,28 @@ class MenuToggleBase extends React.Component {
                     break;
             }
         }
-        const toggleControls = (React.createElement("span", { className: css(styles$h.menuToggleControls) },
-            status !== undefined && React.createElement("span", { className: css(styles$h.menuToggleStatusIcon) }, _statusIcon),
-            React.createElement("span", { className: css(styles$h.menuToggleToggleIcon) },
+        const toggleControls = (React.createElement("span", { className: css(styles$j.menuToggleControls) },
+            status !== undefined && React.createElement("span", { className: css(styles$j.menuToggleStatusIcon) }, _statusIcon),
+            React.createElement("span", { className: css(styles$j.menuToggleToggleIcon) },
                 React.createElement(CaretDownIcon, { "aria-hidden": true }))));
         const content = (React.createElement(React.Fragment, null,
-            icon && React.createElement("span", { className: css(styles$h.menuToggleIcon) }, icon),
-            isTypeahead ? children : children && React.createElement("span", { className: css(styles$h.menuToggleText) }, children),
-            React.isValidElement(badge) && React.createElement("span", { className: css(styles$h.menuToggleCount) }, badge),
-            isTypeahead ? (React.createElement("button", { type: "button", className: css(styles$h.menuToggleButton), "aria-expanded": isExpanded, onClick: onClick, "aria-label": ariaLabel || 'Menu toggle', tabIndex: -1 }, toggleControls)) : (!isPlain && toggleControls)));
-        const commonStyles = css(styles$h.menuToggle, isExpanded && styles$h.modifiers.expanded, variant === 'primary' && styles$h.modifiers.primary, variant === 'secondary' && styles$h.modifiers.secondary, status && styles$h.modifiers[status], (isPlain || isPlainText) && styles$h.modifiers.plain, isPlainText && 'pf-m-text', isFullHeight && styles$h.modifiers.fullHeight, isFullWidth && styles$h.modifiers.fullWidth, isDisabled && styles$h.modifiers.disabled, className);
+            icon && React.createElement("span", { className: css(styles$j.menuToggleIcon) }, icon),
+            isTypeahead ? children : children && React.createElement("span", { className: css(styles$j.menuToggleText) }, children),
+            React.isValidElement(badge) && React.createElement("span", { className: css(styles$j.menuToggleCount) }, badge),
+            isTypeahead ? (React.createElement("button", Object.assign({ type: "button", className: css(styles$j.menuToggleButton), "aria-expanded": isExpanded, onClick: onClick, "aria-label": ariaLabel || 'Menu toggle', tabIndex: -1 }, ouiaProps), toggleControls)) : (!isPlain && toggleControls)));
+        const commonStyles = css(styles$j.menuToggle, isExpanded && styles$j.modifiers.expanded, variant === 'primary' && styles$j.modifiers.primary, variant === 'secondary' && styles$j.modifiers.secondary, status && styles$j.modifiers[status], (isPlain || isPlainText) && styles$j.modifiers.plain, isPlainText && 'pf-m-text', isFullHeight && styles$j.modifiers.fullHeight, isFullWidth && styles$j.modifiers.fullWidth, isDisabled && styles$j.modifiers.disabled, className);
         const componentProps = Object.assign(Object.assign({ children: content }, (isDisabled && { disabled: true })), otherProps);
         if (isTypeahead) {
-            return (React.createElement("div", Object.assign({ ref: innerRef, className: css(commonStyles, styles$h.modifiers.typeahead) }, componentProps)));
+            return (React.createElement("div", Object.assign({ ref: innerRef, className: css(commonStyles, styles$j.modifiers.typeahead) }, componentProps)));
         }
         if (splitButtonOptions) {
-            return (React.createElement("div", { ref: innerRef, className: css(commonStyles, styles$h.modifiers.splitButton, (splitButtonOptions === null || splitButtonOptions === void 0 ? void 0 : splitButtonOptions.variant) === 'action' && styles$h.modifiers.action) }, splitButtonOptions === null || splitButtonOptions === void 0 ? void 0 :
+            return (React.createElement("div", { ref: innerRef, className: css(commonStyles, styles$j.modifiers.splitButton, (splitButtonOptions === null || splitButtonOptions === void 0 ? void 0 : splitButtonOptions.variant) === 'action' && styles$j.modifiers.action) }, splitButtonOptions === null || splitButtonOptions === void 0 ? void 0 :
                 splitButtonOptions.items,
-                React.createElement("button", Object.assign({ className: css(styles$h.menuToggleButton), type: "button", "aria-expanded": isExpanded, "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick }, (children && { style: { display: 'flex', paddingLeft: 'var(--pf-v5-global--spacer--sm)' } }), otherProps),
-                    children && React.createElement("span", { className: css(styles$h.menuToggleText) }, children),
+                React.createElement("button", Object.assign({ className: css(styles$j.menuToggleButton, children && styles$j.modifiers.text), type: "button", "aria-expanded": isExpanded, "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick }, otherProps, ouiaProps),
+                    children && React.createElement("span", { className: css(styles$j.menuToggleText) }, children),
                     toggleControls)));
         }
-        return (React.createElement("button", Object.assign({ className: css(commonStyles), type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, ref: innerRef, disabled: isDisabled, onClick: onClick }, componentProps)));
+        return (React.createElement("button", Object.assign({ className: css(commonStyles), type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, ref: innerRef, disabled: isDisabled, onClick: onClick }, componentProps, ouiaProps)));
     }
 }
 MenuToggleBase.defaultProps = {
@@ -6678,12 +6711,13 @@ MenuToggleBase.defaultProps = {
     isExpanded: false,
     isDisabled: false,
     isFullWidth: false,
-    isFullHeight: false
+    isFullHeight: false,
+    ouiaSafe: true
 };
 const MenuToggle = React.forwardRef((props, ref) => (React.createElement(MenuToggleBase, Object.assign({ innerRef: ref }, props))));
 MenuToggle.displayName = 'MenuToggle';
 
-var styles$g = {
+var styles$i = {
   "inputGroup": "pf-v6-c-input-group",
   "inputGroupItem": "pf-v6-c-input-group__item",
   "inputGroupText": "pf-v6-c-input-group__text",
@@ -6699,7 +6733,7 @@ const InputGroupBase = (_a) => {
     var { className, children, innerRef } = _a, props = __rest$1(_a, ["className", "children", "innerRef"]);
     const ref = React.useRef(null);
     const inputGroupRef = innerRef || ref;
-    return (React.createElement("div", Object.assign({ ref: inputGroupRef, className: css(styles$g.inputGroup, className) }, props), children));
+    return (React.createElement("div", Object.assign({ ref: inputGroupRef, className: css(styles$i.inputGroup, className) }, props), children));
 };
 InputGroupBase.displayName = 'InputGroupBase';
 const InputGroup = React.forwardRef((props, ref) => (React.createElement(InputGroupBase, Object.assign({ innerRef: ref }, props))));
@@ -6707,11 +6741,12 @@ InputGroup.displayName = 'InputGroup';
 
 const InputGroupItem = (_a) => {
     var { className, children, isFill = false, isBox = false, isPlain, isDisabled } = _a, props = __rest$1(_a, ["className", "children", "isFill", "isBox", "isPlain", "isDisabled"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$g.inputGroupItem, isFill && styles$g.modifiers.fill, isBox && styles$g.modifiers.box, isPlain && styles$g.modifiers.plain, isDisabled && styles$g.modifiers.disabled, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$i.inputGroupItem, isFill && styles$i.modifiers.fill, isBox && styles$i.modifiers.box, isPlain && styles$i.modifiers.plain, isDisabled && styles$i.modifiers.disabled, className) }, props), children));
 };
 InputGroupItem.displayName = 'InputGroupItem';
 
-var styles$f = {
+var styles$h = {
+  "button": "pf-v6-c-button",
   "card": "pf-v6-c-card",
   "cardActions": "pf-v6-c-card__actions",
   "cardBody": "pf-v6-c-card__body",
@@ -6771,13 +6806,13 @@ const Card = (_a) => {
     }
     const getSelectableModifiers = () => {
         if (isSelectable && isClickable) {
-            return css(styles$f.modifiers.selectable, styles$f.modifiers.clickable, (isSelected || isClicked) && styles$f.modifiers.current);
+            return css(styles$h.modifiers.selectable, styles$h.modifiers.clickable, (isSelected || isClicked) && styles$h.modifiers.current);
         }
         if (isSelectable) {
-            return css(styles$f.modifiers.selectable, isSelected && styles$f.modifiers.selected);
+            return css(styles$h.modifiers.selectable, isSelected && styles$h.modifiers.selected);
         }
         if (isClickable) {
-            return css(styles$f.modifiers.clickable, isClicked && styles$f.modifiers.current);
+            return css(styles$h.modifiers.clickable, isClicked && styles$h.modifiers.current);
         }
         return '';
     };
@@ -6790,21 +6825,21 @@ const Card = (_a) => {
             isClicked,
             isDisabled
         } },
-        React.createElement(Component, Object.assign({ id: id, className: css(styles$f.card, isCompact && styles$f.modifiers.compact, isExpanded && styles$f.modifiers.expanded, isLarge && styles$f.modifiers.displayLg, isFullHeight && styles$f.modifiers.fullHeight, isPlain && styles$f.modifiers.plain, variant === 'secondary' && styles$f.modifiers.secondary, getSelectableModifiers(), isDisabled && styles$f.modifiers.disabled, className) }, props, ouiaProps), children)));
+        React.createElement(Component, Object.assign({ id: id, className: css(styles$h.card, isCompact && styles$h.modifiers.compact, isExpanded && styles$h.modifiers.expanded, isLarge && styles$h.modifiers.displayLg, isFullHeight && styles$h.modifiers.fullHeight, isPlain && styles$h.modifiers.plain, variant === 'secondary' && styles$h.modifiers.secondary, getSelectableModifiers(), isDisabled && styles$h.modifiers.disabled, className) }, props, ouiaProps), children)));
 };
 Card.displayName = 'Card';
 
 const CardBody = (_a) => {
     var { children, className, component = 'div', isFilled = true } = _a, props = __rest$1(_a, ["children", "className", "component", "isFilled"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(styles$f.cardBody, !isFilled && styles$f.modifiers.noFill, className) }, props), children));
+    return (React.createElement(Component, Object.assign({ className: css(styles$h.cardBody, !isFilled && styles$h.modifiers.noFill, className) }, props), children));
 };
 CardBody.displayName = 'CardBody';
 
 const CardFooter = (_a) => {
     var { children, className, component = 'div' } = _a, props = __rest$1(_a, ["children", "className", "component"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(styles$f.cardFooter, className) }, props), children));
+    return (React.createElement(Component, Object.assign({ className: css(styles$h.cardFooter, className) }, props), children));
 };
 CardFooter.displayName = 'CardFooter';
 
@@ -6813,30 +6848,30 @@ const CardTitle = (_a) => {
     const { cardId } = React.useContext(CardContext);
     const Component = component;
     const titleId = cardId ? `${cardId}-title` : '';
-    return (React.createElement("div", { className: css(styles$f.cardTitle) },
-        React.createElement(Component, Object.assign({ className: css(styles$f.cardTitleText, className), id: titleId || undefined }, props), children)));
+    return (React.createElement("div", { className: css(styles$h.cardTitle) },
+        React.createElement(Component, Object.assign({ className: css(styles$h.cardTitleText, className), id: titleId || undefined }, props), children)));
 };
 CardTitle.displayName = 'CardTitle';
 
 const CardHeaderMain = (_a) => {
     var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$f.cardHeaderMain, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$h.cardHeaderMain, className) }, props), children));
 };
 CardHeaderMain.displayName = 'CardHeaderMain';
 
 const CardActions = (_a) => {
     var { children, className, hasNoOffset = false } = _a, props = __rest$1(_a, ["children", "className", "hasNoOffset"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$f.cardActions, hasNoOffset && styles$f.modifiers.noOffset, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$h.cardActions, hasNoOffset && styles$h.modifiers.noOffset, className) }, props), children));
 };
 CardActions.displayName = 'CardActions';
 
 const CardSelectableActions = (_a) => {
     var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$f.cardSelectableActions, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$h.cardSelectableActions, className) }, props), children));
 };
 CardSelectableActions.displayName = 'CardSelectableActions';
 
-var styles$e = {
+var styles$g = {
   "modifiers": {
     "standalone": "pf-m-standalone",
     "disabled": "pf-m-disabled"
@@ -6870,19 +6905,19 @@ class Radio extends React.Component {
             // eslint-disable-next-line no-console
             console.error('Radio:', 'id is required to make input accessible');
         }
-        const inputRendered = (React.createElement("input", Object.assign({}, props, { className: css(styles$e.radioInput, inputClassName), type: "radio", onChange: this.handleChange, "aria-invalid": !isValid, disabled: isDisabled, checked: checked || isChecked }, (checked === undefined && { defaultChecked }), (!label && { 'aria-label': ariaLabel }), getOUIAProps(Radio.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
+        const inputRendered = (React.createElement("input", Object.assign({}, props, { className: css(styles$g.radioInput, inputClassName), type: "radio", onChange: this.handleChange, "aria-invalid": !isValid, disabled: isDisabled, checked: checked || isChecked }, (checked === undefined && { defaultChecked }), (!label && { 'aria-label': ariaLabel }), getOUIAProps(Radio.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
         const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
         const Label = wrapWithLabel ? 'span' : 'label';
-        const labelRendered = label ? (React.createElement(Label, { className: css(styles$e.radioLabel, isDisabled && styles$e.modifiers.disabled), htmlFor: !wrapWithLabel ? props.id : undefined }, label)) : null;
+        const labelRendered = label ? (React.createElement(Label, { className: css(styles$g.radioLabel, isDisabled && styles$g.modifiers.disabled), htmlFor: !wrapWithLabel ? props.id : undefined }, label)) : null;
         const Component = component !== null && component !== void 0 ? component : (wrapWithLabel ? 'label' : 'div');
-        return (React.createElement(Component, { className: css(styles$e.radio, !label && styles$e.modifiers.standalone, className), htmlFor: wrapWithLabel ? props.id : undefined },
+        return (React.createElement(Component, { className: css(styles$g.radio, !label && styles$g.modifiers.standalone, className), htmlFor: wrapWithLabel ? props.id : undefined },
             labelPosition === 'start' ? (React.createElement(React.Fragment, null,
                 labelRendered,
                 inputRendered)) : (React.createElement(React.Fragment, null,
                 inputRendered,
                 labelRendered)),
-            description && React.createElement("span", { className: css(styles$e.radioDescription) }, description),
-            body && React.createElement("span", { className: css(styles$e.radioBody) }, body)));
+            description && React.createElement("span", { className: css(styles$g.radioDescription) }, description),
+            body && React.createElement("span", { className: css(styles$g.radioBody) }, body)));
     }
 }
 Radio.displayName = 'Radio';
@@ -6896,12 +6931,11 @@ Radio.defaultProps = {
 const CardHeader = (_a) => {
     var { children, className, actions, selectableActions, id, onExpand, toggleButtonProps, isToggleRightAligned } = _a, props = __rest$1(_a, ["children", "className", "actions", "selectableActions", "id", "onExpand", "toggleButtonProps", "isToggleRightAligned"]);
     return (React.createElement(CardContext.Consumer, null, ({ cardId, isClickable, isSelectable, isSelected, isClicked, isDisabled: isCardDisabled }) => {
-        const cardHeaderToggle = (React.createElement("div", { className: css(styles$f.cardHeaderToggle) },
+        const cardHeaderToggle = (React.createElement("div", { className: css(styles$h.cardHeaderToggle) },
             React.createElement(Button, Object.assign({ variant: "plain", type: "button", onClick: (evt) => {
                     onExpand(evt, cardId);
-                } }, toggleButtonProps),
-                React.createElement("span", { className: css(styles$f.cardHeaderToggleIcon) },
-                    React.createElement(AngleRightIcon, { "aria-hidden": "true" })))));
+                } }, toggleButtonProps, { icon: React.createElement("span", { className: css(styles$h.cardHeaderToggleIcon) },
+                    React.createElement(AngleRightIcon, { "aria-hidden": "true" })) }))));
         const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
         if ((actions === null || actions === void 0 ? void 0 : actions.actions) && isClickableOrSelectableOnly) {
             // eslint-disable-next-line no-console
@@ -6936,7 +6970,7 @@ const CardHeader = (_a) => {
             }
             return baseProps;
         };
-        return (React.createElement("div", Object.assign({ className: css(styles$f.cardHeader, isToggleRightAligned && styles$f.modifiers.toggleRight, className), id: id }, props),
+        return (React.createElement("div", Object.assign({ className: css(styles$h.cardHeader, isToggleRightAligned && styles$h.modifiers.toggleRight, className), id: id }, props),
             onExpand && !isToggleRightAligned && cardHeaderToggle,
             (actions || (selectableActions && (isClickable || isSelectable))) && (React.createElement(CardActions, { className: actions === null || actions === void 0 ? void 0 : actions.className, hasNoOffset: (actions === null || actions === void 0 ? void 0 : actions.hasNoOffset) || (selectableActions === null || selectableActions === void 0 ? void 0 : selectableActions.hasNoOffset) }, actions === null || actions === void 0 ? void 0 :
                 actions.actions,
@@ -6947,7 +6981,7 @@ const CardHeader = (_a) => {
 };
 CardHeader.displayName = 'CardHeader';
 
-var styles$d = {
+var styles$f = {
   "codeBlock": "pf-v6-c-code-block",
   "codeBlockActions": "pf-v6-c-code-block__actions",
   "codeBlockCode": "pf-v6-c-code-block__code",
@@ -6958,14 +6992,66 @@ var styles$d = {
 
 const CodeBlock = (_a) => {
     var { children = null, className, actions = null } = _a, props = __rest$1(_a, ["children", "className", "actions"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$d.codeBlock, className) }, props),
-        actions && (React.createElement("div", { className: css(styles$d.codeBlockHeader) },
-            React.createElement("div", { className: css(styles$d.codeBlockActions) }, actions))),
-        React.createElement("div", { className: css(styles$d.codeBlockContent) }, children)));
+    return (React.createElement("div", Object.assign({ className: css(styles$f.codeBlock, className) }, props),
+        actions && (React.createElement("div", { className: css(styles$f.codeBlockHeader) },
+            React.createElement("div", { className: css(styles$f.codeBlockActions) }, actions))),
+        React.createElement("div", { className: css(styles$f.codeBlockContent) }, children)));
 };
 CodeBlock.displayName = 'CodeBlock';
 
-var styles$c = {
+var ContentVariants;
+(function (ContentVariants) {
+    ContentVariants["h1"] = "h1";
+    ContentVariants["h2"] = "h2";
+    ContentVariants["h3"] = "h3";
+    ContentVariants["h4"] = "h4";
+    ContentVariants["h5"] = "h5";
+    ContentVariants["h6"] = "h6";
+    ContentVariants["p"] = "p";
+    ContentVariants["a"] = "a";
+    ContentVariants["small"] = "small";
+    ContentVariants["blockquote"] = "blockquote";
+    ContentVariants["pre"] = "pre";
+    ContentVariants["hr"] = "hr";
+    ContentVariants["ul"] = "ul";
+    ContentVariants["ol"] = "ol";
+    ContentVariants["dl"] = "dl";
+    ContentVariants["li"] = "li";
+    ContentVariants["dt"] = "dt";
+    ContentVariants["dd"] = "dd";
+})(ContentVariants || (ContentVariants = {}));
+const componentStyles = {
+    div: styles$v.content,
+    h1: styles$v.contentH1,
+    h2: styles$v.contentH2,
+    h3: styles$v.contentH3,
+    h4: styles$v.contentH4,
+    h5: styles$v.contentH5,
+    h6: styles$v.contentH6,
+    p: styles$v.contentP,
+    a: styles$v.contentA,
+    small: styles$v.contentSmall,
+    blockquote: styles$v.contentBlockquote,
+    pre: styles$v.contentPre,
+    hr: styles$v.contentHr,
+    ul: styles$v.contentUl,
+    ol: styles$v.contentOl,
+    dl: styles$v.contentDl,
+    li: styles$v.contentLi,
+    dt: styles$v.contentDt,
+    dd: styles$v.contentDd
+};
+const Content = (_a) => {
+    var { children, className = '', component, isPlainList = false, isVisitedLink = false, ouiaId, ouiaSafe = true } = _a, props = __rest$1(_a, ["children", "className", "component", "isPlainList", "isVisitedLink", "ouiaId", "ouiaSafe"]);
+    const wrappingComponent = component !== null && component !== void 0 ? component : 'div';
+    const Component = wrappingComponent;
+    const ouiaProps = useOUIAProps(Content.displayName, ouiaId, ouiaSafe);
+    const isList = ['ul', 'ol', 'dl'].includes(wrappingComponent);
+    return (React.createElement(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css(componentStyles[wrappingComponent], isList && isPlainList && styles$v.modifiers.plain, isVisitedLink && styles$v.modifiers.visited, className) }), children));
+};
+Content.displayName = 'Content';
+
+var styles$e = {
   "modifiers": {
     "noPadding": "pf-m-no-padding",
     "widthAuto": "pf-m-width-auto",
@@ -7003,33 +7089,33 @@ const PopoverContext = React.createContext({});
 
 const PopoverContent = (_a) => {
     var { className = null, children } = _a, props = __rest$1(_a, ["className", "children"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$c.popoverContent, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$e.popoverContent, className) }, props), children));
 };
 PopoverContent.displayName = 'PopoverContent';
 
 const PopoverBody = (_a) => {
     var { children, id, className } = _a, props = __rest$1(_a, ["children", "id", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$c.popoverBody, className), id: id }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$e.popoverBody, className), id: id }, props), children));
 };
 PopoverBody.displayName = 'PopoverBody';
 
 const PopoverHeaderIcon = (_a) => {
     var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
-    return (React.createElement("span", Object.assign({ className: css(styles$c.popoverTitleIcon, className) }, props), children));
+    return (React.createElement("span", Object.assign({ className: css(styles$e.popoverTitleIcon, className) }, props), children));
 };
 PopoverHeaderIcon.displayName = 'PopoverHeaderIcon';
 
 const PopoverHeaderText = (_a) => {
     var { children, className, headingLevel } = _a, props = __rest$1(_a, ["children", "className", "headingLevel"]);
     const HeadingLevel = headingLevel;
-    return (React.createElement(HeadingLevel, Object.assign({ className: css(styles$c.popoverTitleText, className) }, props), children));
+    return (React.createElement(HeadingLevel, Object.assign({ className: css(styles$e.popoverTitleText, className) }, props), children));
 };
 PopoverHeaderText.displayName = 'PopoverHeaderText';
 
 const PopoverHeader = (_a) => {
     var { children, icon, className, titleHeadingLevel = 'h6', alertSeverityVariant, id, alertSeverityScreenReaderText } = _a, props = __rest$1(_a, ["children", "icon", "className", "titleHeadingLevel", "alertSeverityVariant", "id", "alertSeverityScreenReaderText"]);
-    return (React.createElement("header", Object.assign({ className: css(styles$c.popoverHeader, className) }, props),
-        React.createElement("div", { className: css(styles$c.popoverTitle), id: id },
+    return (React.createElement("header", Object.assign({ className: css(styles$e.popoverHeader, className) }, props),
+        React.createElement("div", { className: css(styles$e.popoverTitle), id: id },
             icon && React.createElement(PopoverHeaderIcon, null, icon),
             React.createElement(PopoverHeaderText, { headingLevel: titleHeadingLevel },
                 alertSeverityVariant && alertSeverityScreenReaderText && (React.createElement("span", { className: "pf-v6-screen-reader" }, alertSeverityScreenReaderText)),
@@ -7039,21 +7125,20 @@ PopoverHeader.displayName = 'PopoverHeader';
 
 const PopoverFooter = (_a) => {
     var { children, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-    return (React.createElement("footer", Object.assign({ className: css(styles$c.popoverFooter, className) }, props), children));
+    return (React.createElement("footer", Object.assign({ className: css(styles$e.popoverFooter, className) }, props), children));
 };
 PopoverFooter.displayName = 'PopoverFooter';
 
 const PopoverCloseButton = (_a) => {
     var { onClose = () => undefined } = _a, props = __rest$1(_a, ["onClose"]);
-    return (React.createElement("div", { className: css(styles$c.popoverClose) },
-        React.createElement(Button, Object.assign({ onClick: onClose, variant: "plain", "aria-label": true }, props, { style: { pointerEvents: 'auto' } }),
-            React.createElement(TimesIcon, null))));
+    return (React.createElement("div", { className: css(styles$e.popoverClose) },
+        React.createElement(Button, Object.assign({ onClick: onClose, variant: "plain", "aria-label": true }, props, { style: { pointerEvents: 'auto' }, icon: React.createElement(TimesIcon, null) }))));
 };
 PopoverCloseButton.displayName = 'PopoverCloseButton';
 
 const PopoverArrow = (_a) => {
     var { className = '' } = _a, props = __rest$1(_a, ["className"]);
-    return React.createElement("div", Object.assign({ className: css(styles$c.popoverArrow, className) }, props));
+    return React.createElement("div", Object.assign({ className: css(styles$e.popoverArrow, className) }, props));
 };
 PopoverArrow.displayName = 'PopoverArrow';
 
@@ -7086,11 +7171,11 @@ var PopoverPosition;
     PopoverPosition["rightEnd"] = "right-end";
 })(PopoverPosition || (PopoverPosition = {}));
 const alertStyle = {
-    custom: styles$c.modifiers.custom,
-    info: styles$c.modifiers.info,
-    success: styles$c.modifiers.success,
-    warning: styles$c.modifiers.warning,
-    danger: styles$c.modifiers.danger
+    custom: styles$e.modifiers.custom,
+    info: styles$e.modifiers.info,
+    success: styles$e.modifiers.success,
+    warning: styles$e.modifiers.warning,
+    danger: styles$e.modifiers.danger
 };
 const Popover = (_a) => {
     var { children, position = 'top', enableFlip = true, className = '', isVisible = null, shouldClose = () => null, shouldOpen = () => null, 'aria-label': ariaLabel = '', bodyContent, headerContent = null, headerComponent = 'h6', headerIcon = null, alertSeverityVariant, alertSeverityScreenReaderText, footerContent = null, appendTo = () => document.body, hideOnOutsideClick = true, onHide = () => null, onHidden = () => null, onShow = () => null, onShown = () => null, onMount = () => null, zIndex = 9999, triggerAction = 'click', minWidth = c_popover_MinWidth && c_popover_MinWidth.value, maxWidth = c_popover_MaxWidth && c_popover_MaxWidth.value, closeBtnAriaLabel = 'Close', showClose = true, distance = 25, flipBehavior = [
@@ -7137,18 +7222,18 @@ const Popover = (_a) => {
         setVisible(false);
     };
     const positionModifiers = {
-        top: styles$c.modifiers.top,
-        bottom: styles$c.modifiers.bottom,
-        left: styles$c.modifiers.left,
-        right: styles$c.modifiers.right,
-        'top-start': styles$c.modifiers.topLeft,
-        'top-end': styles$c.modifiers.topRight,
-        'bottom-start': styles$c.modifiers.bottomLeft,
-        'bottom-end': styles$c.modifiers.bottomRight,
-        'left-start': styles$c.modifiers.leftTop,
-        'left-end': styles$c.modifiers.leftBottom,
-        'right-start': styles$c.modifiers.rightTop,
-        'right-end': styles$c.modifiers.rightBottom
+        top: styles$e.modifiers.top,
+        bottom: styles$e.modifiers.bottom,
+        left: styles$e.modifiers.left,
+        right: styles$e.modifiers.right,
+        'top-start': styles$e.modifiers.topLeft,
+        'top-end': styles$e.modifiers.topRight,
+        'bottom-start': styles$e.modifiers.bottomLeft,
+        'bottom-end': styles$e.modifiers.bottomRight,
+        'left-start': styles$e.modifiers.leftTop,
+        'left-end': styles$e.modifiers.leftBottom,
+        'right-start': styles$e.modifiers.rightTop,
+        'right-end': styles$e.modifiers.rightBottom
     };
     const hasCustomMinWidth = minWidth !== c_popover_MinWidth.value;
     const hasCustomMaxWidth = maxWidth !== c_popover_MaxWidth.value;
@@ -7268,7 +7353,7 @@ const Popover = (_a) => {
                 }
                 return node;
             }
-        }, preventScrollOnDeactivate: true, className: css(styles$c.popover, alertSeverityVariant && alertStyle[alertSeverityVariant], hasNoPadding && styles$c.modifiers.noPadding, hasAutoWidth && styles$c.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
+        }, preventScrollOnDeactivate: true, className: css(styles$e.popover, alertSeverityVariant && alertStyle[alertSeverityVariant], hasNoPadding && styles$e.modifiers.noPadding, hasAutoWidth && styles$e.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
             minWidth: hasCustomMinWidth ? minWidth : null,
             maxWidth: hasCustomMaxWidth ? maxWidth : null
         } }, rest),
@@ -7373,7 +7458,7 @@ const Divider = (_a) => {
 };
 Divider.displayName = 'Divider';
 
-var styles$b = {
+var styles$d = {
   "dirRtl": "pf-v6-m-dir-rtl",
   "drawer": "pf-v6-c-drawer",
   "drawerActions": "pf-v6-c-drawer__actions",
@@ -7457,7 +7542,7 @@ const Drawer = (_a) => {
     const drawerRef = React.useRef();
     const drawerContentRef = React.useRef();
     return (React.createElement(DrawerContext.Provider, { value: { isExpanded, isStatic, onExpand, position, drawerRef, drawerContentRef, isInline } },
-        React.createElement("div", Object.assign({ className: css(styles$b.drawer, isExpanded && styles$b.modifiers.expanded, isInline && styles$b.modifiers.inline, isStatic && styles$b.modifiers.static, (position === 'left' || position === 'start') && styles$b.modifiers.panelLeft, position === 'bottom' && styles$b.modifiers.panelBottom, className), ref: drawerRef }, props), children)));
+        React.createElement("div", Object.assign({ className: css(styles$d.drawer, isExpanded && styles$d.modifiers.expanded, isInline && styles$d.modifiers.inline, isStatic && styles$d.modifiers.static, (position === 'left' || position === 'start') && styles$d.modifiers.panelLeft, position === 'bottom' && styles$d.modifiers.panelBottom, className), ref: drawerRef }, props), children)));
 };
 Drawer.displayName = 'Drawer';
 
@@ -7465,7 +7550,7 @@ const DrawerActions = (_a) => {
     var { 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', children } = _a, props = __rest$1(_a, ["className", "children"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$b.drawerActions, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$d.drawerActions, className) }, props), children));
 };
 DrawerActions.displayName = 'DrawerActions';
 
@@ -7473,7 +7558,7 @@ const DrawerCloseButton = (_a) => {
     var { 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', onClose = () => undefined, 'aria-label': ariaLabel = 'Close drawer panel' } = _a, props = __rest$1(_a, ["className", "onClose", 'aria-label']);
-    return (React.createElement("div", Object.assign({ className: css(styles$b.drawerClose, className) }, props),
+    return (React.createElement("div", Object.assign({ className: css(styles$d.drawerClose, className) }, props),
         React.createElement(Button, { variant: "plain", onClick: onClose, "aria-label": ariaLabel },
             React.createElement(TimesIcon, null))));
 };
@@ -7483,7 +7568,7 @@ const DrawerMain = (_a) => {
     var { 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', children } = _a, props = __rest$1(_a, ["className", "children"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$b.drawerMain, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$d.drawerMain, className) }, props), children));
 };
 DrawerMain.displayName = 'DrawerMain';
 
@@ -7497,7 +7582,7 @@ const DrawerContent = (_a) => {
     var { className, children, panelContent, colorVariant = DrawerContentColorVariant.default } = _a, props = __rest$1(_a, ["className", "children", "panelContent", "colorVariant"]);
     const { drawerContentRef } = React.useContext(DrawerContext);
     return (React.createElement(DrawerMain, null,
-        React.createElement("div", Object.assign({ className: css(styles$b.drawerContent, colorVariant === DrawerContentColorVariant.primary && styles$b.modifiers.primary, colorVariant === DrawerContentColorVariant.secondary && styles$b.modifiers.secondary, className), ref: drawerContentRef }, props), children),
+        React.createElement("div", Object.assign({ className: css(styles$d.drawerContent, colorVariant === DrawerContentColorVariant.primary && styles$d.modifiers.primary, colorVariant === DrawerContentColorVariant.secondary && styles$d.modifiers.secondary, className), ref: drawerContentRef }, props), children),
         panelContent));
 };
 DrawerContent.displayName = 'DrawerContent';
@@ -7506,7 +7591,7 @@ const DrawerContentBody = (_a) => {
     var { 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', children, hasPadding = false } = _a, props = __rest$1(_a, ["className", "children", "hasPadding"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$b.drawerBody, hasPadding && styles$b.modifiers.padding, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$d.drawerBody, hasPadding && styles$d.modifiers.padding, className) }, props), children));
 };
 DrawerContentBody.displayName = 'DrawerContentBody';
 
@@ -7514,7 +7599,7 @@ const DrawerHead = (_a) => {
     var { 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', children } = _a, props = __rest$1(_a, ["className", "children"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$b.drawerHead, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$d.drawerHead, className) }, props), children));
 };
 DrawerHead.displayName = 'DrawerHead';
 
@@ -7522,7 +7607,7 @@ const DrawerPanelBody = (_a) => {
     var { 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', children, hasNoPadding = false } = _a, props = __rest$1(_a, ["className", "children", "hasNoPadding"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$b.drawerBody, hasNoPadding && styles$b.modifiers.noPadding, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$d.drawerBody, hasNoPadding && styles$d.modifiers.noPadding, className) }, props), children));
 };
 DrawerPanelBody.displayName = 'DrawerPanelBody';
 
@@ -7647,7 +7732,7 @@ const DrawerPanelContent = (_a) => {
         e.preventDefault();
         document.addEventListener('mousemove', callbackMouseMove);
         document.addEventListener('mouseup', callbackMouseUp);
-        drawerRef.current.classList.add(css(styles$b.modifiers.resizing));
+        drawerRef.current.classList.add(css(styles$d.modifiers.resizing));
         isResizing = true;
         setInitialVals = true;
     };
@@ -7702,7 +7787,7 @@ const DrawerPanelContent = (_a) => {
         if (!isResizing) {
             return;
         }
-        drawerRef.current.classList.remove(css(styles$b.modifiers.resizing));
+        drawerRef.current.classList.remove(css(styles$d.modifiers.resizing));
         isResizing = false;
         onResize && onResize(e, currWidth, id);
         setInitialVals = true;
@@ -7813,7 +7898,7 @@ const DrawerPanelContent = (_a) => {
                 escapeDeactivates: false
             }
         };
-        return (React.createElement(Component, Object.assign({}, (isValidFocusTrap && focusTrapProps), { id: id || panelId, className: css(styles$b.drawerPanel, isResizable && styles$b.modifiers.resizable, hasNoBorder && styles$b.modifiers.noBorder, formatBreakpointMods(widths, styles$b), colorVariant === DrawerColorVariant.noBackground && styles$b.modifiers.noBackground, colorVariant === DrawerColorVariant.secondary && styles$b.modifiers.secondary, className), onTransitionEnd: (ev) => {
+        return (React.createElement(Component, Object.assign({}, (isValidFocusTrap && focusTrapProps), { id: id || panelId, className: css(styles$d.drawerPanel, isResizable && styles$d.modifiers.resizable, hasNoBorder && styles$d.modifiers.noBorder, formatBreakpointMods(widths, styles$d), colorVariant === DrawerColorVariant.noBackground && styles$d.modifiers.noBackground, colorVariant === DrawerColorVariant.secondary && styles$d.modifiers.secondary, className), onTransitionEnd: (ev) => {
                 if (ev.target === panel.current) {
                     if (!hidden && ev.nativeEvent.propertyName === 'transform') {
                         onExpand(ev);
@@ -7827,15 +7912,15 @@ const DrawerPanelContent = (_a) => {
             style: boundaryCssVars
         }), props, { ref: panel }), isExpandedInternal && (React.createElement(React.Fragment, null,
             isResizable && (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: css(styles$b.drawerSplitter, position !== 'bottom' && styles$b.modifiers.vertical), role: "separator", tabIndex: 0, "aria-orientation": position === 'bottom' ? 'horizontal' : 'vertical', "aria-label": resizeAriaLabel, "aria-valuenow": separatorValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-controls": id || panelId, onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, ref: splitterRef },
-                    React.createElement("div", { className: css(styles$b.drawerSplitterHandle), "aria-hidden": true })),
-                React.createElement("div", { className: css(styles$b.drawerPanelMain) }, children))),
+                React.createElement("div", { className: css(styles$d.drawerSplitter, position !== 'bottom' && styles$d.modifiers.vertical), role: "separator", tabIndex: 0, "aria-orientation": position === 'bottom' ? 'horizontal' : 'vertical', "aria-label": resizeAriaLabel, "aria-valuenow": separatorValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-controls": id || panelId, onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, ref: splitterRef },
+                    React.createElement("div", { className: css(styles$d.drawerSplitterHandle), "aria-hidden": true })),
+                React.createElement("div", { className: css(styles$d.drawerPanelMain) }, children))),
             !isResizable && children))));
     }));
 };
 DrawerPanelContent.displayName = 'DrawerPanelContent';
 
-var styles$a = {
+var styles$c = {
   "icon": "pf-v6-c-icon",
   "iconContent": "pf-v6-c-icon__content",
   "iconProgress": "pf-v6-c-icon__progress",
@@ -7869,9 +7954,9 @@ var styles$a = {
 const Icon = (_a) => {
     var { children, className, progressIcon, size, iconSize, progressIconSize, status, isInline = false, isInProgress = false, defaultProgressArialabel = 'Loading...', shouldMirrorRTL = false } = _a, props = __rest$1(_a, ["children", "className", "progressIcon", "size", "iconSize", "progressIconSize", "status", "isInline", "isInProgress", "defaultProgressArialabel", "shouldMirrorRTL"]);
     const _progressIcon = progressIcon !== null && progressIcon !== void 0 ? progressIcon : React.createElement(Spinner, { diameter: "1em", "aria-label": defaultProgressArialabel });
-    return (React.createElement("span", Object.assign({ className: css(styles$a.icon, isInline && styles$a.modifiers.inline, isInProgress && styles$a.modifiers.inProgress, styles$a.modifiers[size], className) }, props),
-        React.createElement("span", { className: css(styles$a.iconContent, styles$a.modifiers[iconSize], styles$a.modifiers[status], shouldMirrorRTL && 'pf-v6-m-mirror-inline-rtl') }, children),
-        isInProgress && (React.createElement("span", { className: css(styles$a.iconProgress, styles$a.modifiers[progressIconSize], className) }, _progressIcon))));
+    return (React.createElement("span", Object.assign({ className: css(styles$c.icon, isInline && styles$c.modifiers.inline, isInProgress && styles$c.modifiers.inProgress, styles$c.modifiers[size], className) }, props),
+        React.createElement("span", { className: css(styles$c.iconContent, styles$c.modifiers[iconSize], styles$c.modifiers[status], shouldMirrorRTL && 'pf-v6-m-mirror-inline-rtl') }, children),
+        isInProgress && (React.createElement("span", { className: css(styles$c.iconProgress, styles$c.modifiers[progressIconSize], className) }, _progressIcon))));
 };
 Icon.displayName = 'Icon';
 
@@ -7908,7 +7993,7 @@ const ArrowRightIconConfig = {
 
 const ArrowRightIcon$1 = createIcon(ArrowRightIconConfig);
 
-var formStyles = {
+var styles$b = {
   "button": "pf-v6-c-button",
   "dirRtl": "pf-v6-m-dir-rtl",
   "form": "pf-v6-c-form",
@@ -7941,6 +8026,7 @@ var formStyles = {
     "horizontal": "pf-m-horizontal",
     "alignRight": "pf-m-align-right",
     "noPaddingTop": "pf-m-no-padding-top",
+    "info": "pf-m-info",
     "horizontalOnXs": "pf-m-horizontal-on-xs",
     "horizontalOnSm": "pf-m-horizontal-on-sm",
     "horizontalOnMd": "pf-m-horizontal-on-md",
@@ -7949,7 +8035,6 @@ var formStyles = {
     "horizontalOn_2xl": "pf-m-horizontal-on-2xl",
     "limitWidth": "pf-m-limit-width",
     "action": "pf-m-action",
-    "info": "pf-m-info",
     "disabled": "pf-m-disabled",
     "inline": "pf-m-inline",
     "stack": "pf-m-stack",
@@ -7961,10 +8046,10 @@ var formStyles = {
 
 const ActionGroup = (_a) => {
     var { children = null, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-    const customClassName = css(formStyles.formGroup, formStyles.modifiers.action, className);
-    const formActionsComponent = React.createElement("div", { className: css(formStyles.formActions) }, children);
+    const customClassName = css(styles$b.formGroup, styles$b.modifiers.action, className);
+    const formActionsComponent = React.createElement("div", { className: css(styles$b.formActions) }, children);
     return (React.createElement("div", Object.assign({}, props, { className: customClassName }),
-        React.createElement("div", { className: css(formStyles.formGroupControl) }, formActionsComponent)));
+        React.createElement("div", { className: css(styles$b.formGroupControl) }, formActionsComponent)));
 };
 ActionGroup.displayName = 'ActionGroup';
 
@@ -7978,7 +8063,7 @@ const FormBase = (_a) => {
     var { children = null, className = '', isHorizontal = false, isWidthLimited = false, maxWidth = '', innerRef } = _a, props = __rest$1(_a, ["children", "className", "isHorizontal", "isWidthLimited", "maxWidth", "innerRef"]);
     return (React.createElement("form", Object.assign({ noValidate: true }, (maxWidth && {
         style: Object.assign({ [c_form_m_limit_width_MaxWidth.name]: maxWidth }, props.style)
-    }), props, { className: css(formStyles.form, isHorizontal && formStyles.modifiers.horizontal, (isWidthLimited || maxWidth) && formStyles.modifiers.limitWidth, className), ref: innerRef }), children));
+    }), props, { className: css(styles$b.form, isHorizontal && styles$b.modifiers.horizontal, (isWidthLimited || maxWidth) && styles$b.modifiers.limitWidth, className), ref: innerRef }), children));
 };
 const Form = React.forwardRef((props, ref) => React.createElement(FormBase, Object.assign({ innerRef: ref }, props)));
 Form.displayName = 'Form';
@@ -7988,24 +8073,24 @@ const FormGroup = (_a) => {
     const isGroupOrRadioGroup = role === 'group' || role === 'radiogroup';
     const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
     const labelContent = (React.createElement(React.Fragment, null,
-        React.createElement(LabelComponent, Object.assign({ className: css(formStyles.formLabel) }, (!isGroupOrRadioGroup && { htmlFor: fieldId })),
-            React.createElement("span", { className: css(formStyles.formLabelText) }, label),
-            isRequired && (React.createElement("span", { className: css(formStyles.formLabelRequired), "aria-hidden": "true" },
+        React.createElement(LabelComponent, Object.assign({ className: css(styles$b.formLabel) }, (!isGroupOrRadioGroup && { htmlFor: fieldId })),
+            React.createElement("span", { className: css(styles$b.formLabelText) }, label),
+            isRequired && (React.createElement("span", { className: css(styles$b.formLabelRequired), "aria-hidden": "true" },
                 ' ',
                 ASTERISK))),
         React.createElement(React.Fragment, null, "\u00A0\u00A0"),
-        React.isValidElement(labelHelp) && React.createElement("span", { className: formStyles.formGroupLabelHelp }, labelHelp)));
-    return (React.createElement(GenerateId, null, (randomId) => (React.createElement("div", Object.assign({ className: css(formStyles.formGroup, className) }, (role && { role }), (isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` }), props),
-        label && (React.createElement("div", Object.assign({ className: css(formStyles.formGroupLabel, labelInfo && formStyles.modifiers.info, hasNoPaddingTop && formStyles.modifiers.noPaddingTop) }, (isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })),
+        React.isValidElement(labelHelp) && React.createElement("span", { className: styles$b.formGroupLabelHelp }, labelHelp)));
+    return (React.createElement(GenerateId, null, (randomId) => (React.createElement("div", Object.assign({ className: css(styles$b.formGroup, className) }, (role && { role }), (isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` }), props),
+        label && (React.createElement("div", Object.assign({ className: css(styles$b.formGroupLabel, labelInfo && styles$b.modifiers.info, hasNoPaddingTop && styles$b.modifiers.noPaddingTop) }, (isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })),
             labelInfo && (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: css(formStyles.formGroupLabelMain) }, labelContent),
-                React.createElement("div", { className: css(formStyles.formGroupLabelInfo) }, labelInfo))),
+                React.createElement("div", { className: css(styles$b.formGroupLabelMain) }, labelContent),
+                React.createElement("div", { className: css(styles$b.formGroupLabelInfo) }, labelInfo))),
             !labelInfo && labelContent)),
-        React.createElement("div", { className: css(formStyles.formGroupControl, isInline && formStyles.modifiers.inline, isStack && formStyles.modifiers.stack) }, children)))));
+        React.createElement("div", { className: css(styles$b.formGroupControl, isInline && styles$b.modifiers.inline, isStack && styles$b.modifiers.stack) }, children)))));
 };
 FormGroup.displayName = 'FormGroup';
 
-var styles$9 = {
+var styles$a = {
   "modifiers": {
     "bordered": "pf-m-bordered",
     "secondary": "pf-m-secondary",
@@ -8021,7 +8106,7 @@ var styles$9 = {
 
 const PanelBase = (_a) => {
     var { className, children, variant, isScrollable, innerRef } = _a, props = __rest$1(_a, ["className", "children", "variant", "isScrollable", "innerRef"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$9.panel, variant && styles$9.modifiers[variant], isScrollable && styles$9.modifiers.scrollable, className), ref: innerRef }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$a.panel, variant && styles$a.modifiers[variant], isScrollable && styles$a.modifiers.scrollable, className), ref: innerRef }, props), children));
 };
 const Panel = React.forwardRef((props, ref) => (React.createElement(PanelBase, Object.assign({ innerRef: ref }, props))));
 Panel.displayName = 'Panel';
@@ -8034,13 +8119,13 @@ const c_panel__main_MaxHeight = {
 
 const PanelMain = (_a) => {
     var { className, children, maxHeight } = _a, props = __rest$1(_a, ["className", "children", "maxHeight"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$9.panelMain, className), style: { [c_panel__main_MaxHeight.name]: maxHeight } }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$a.panelMain, className), style: { [c_panel__main_MaxHeight.name]: maxHeight } }, props), children));
 };
 PanelMain.displayName = 'PanelMain';
 
 const PanelMainBody = (_a) => {
     var { className, children } = _a, props = __rest$1(_a, ["className", "children"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$9.panelMainBody, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$a.panelMainBody, className) }, props), children));
 };
 PanelMainBody.displayName = 'PanelMainBody';
 
@@ -8157,7 +8242,11 @@ var textInputGroupStyles = {
   "modifiers": {
     "disabled": "pf-m-disabled",
     "plain": "pf-m-plain",
+    "success": "pf-m-success",
+    "warning": "pf-m-warning",
+    "error": "pf-m-error",
     "icon": "pf-m-icon",
+    "status": "pf-m-status",
     "hint": "pf-m-hint"
   },
   "textInputGroup": "pf-v6-c-text-input-group",
@@ -8326,12 +8415,9 @@ const SearchInputBase = (_a) => {
             (renderUtilities || areUtilitiesDisplayed) && (React.createElement(TextInputGroupUtilities, null,
                 resultsCount && React.createElement(Badge, { isRead: true }, resultsCount),
                 !!onNextClick && !!onPreviousClick && (React.createElement("div", { className: textInputGroupStyles.textInputGroupGroup },
-                    React.createElement(Button, { variant: ButtonVariant.plain, "aria-label": previousNavigationButtonAriaLabel, isDisabled: isDisabled || isPreviousNavigationButtonDisabled, onClick: onPreviousClick },
-                        React.createElement(AngleUpIcon, null)),
-                    React.createElement(Button, { variant: ButtonVariant.plain, "aria-label": nextNavigationButtonAriaLabel, isDisabled: isDisabled || isNextNavigationButtonDisabled, onClick: onNextClick },
-                        React.createElement(AngleDownIcon, null)))),
-                !!onClear && !expandableInput && (React.createElement(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled, "aria-label": resetButtonLabel, onClick: onClearInput },
-                    React.createElement(TimesIcon, null)))))));
+                    React.createElement(Button, { variant: ButtonVariant.plain, "aria-label": previousNavigationButtonAriaLabel, isDisabled: isDisabled || isPreviousNavigationButtonDisabled, onClick: onPreviousClick, icon: React.createElement(AngleUpIcon, null) }),
+                    React.createElement(Button, { variant: ButtonVariant.plain, "aria-label": nextNavigationButtonAriaLabel, isDisabled: isDisabled || isNextNavigationButtonDisabled, onClick: onNextClick, icon: React.createElement(AngleDownIcon, null) }))),
+                !!onClear && !expandableInput && (React.createElement(Button, { variant: ButtonVariant.plain, isDisabled: isDisabled, "aria-label": resetButtonLabel, onClick: onClearInput, icon: React.createElement(TimesIcon, null) }))))));
     };
     const expandableToggle = (React.createElement(Button, { variant: ButtonVariant.plain, "aria-label": toggleAriaLabel, "aria-expanded": isExpanded, icon: isExpanded ? React.createElement(TimesIcon, null) : React.createElement(SearchIcon$1, null), onClick: onExpandHandler, ref: searchInputExpandableToggleRef }));
     const buildExpandableSearchInput = (_a = {}) => {
@@ -8354,12 +8440,10 @@ const SearchInputBase = (_a) => {
         return (React.createElement(InputGroup, Object.assign({ ref: triggerRef }, searchInputProps),
             React.createElement(InputGroupItem, { isFill: true }, buildTextInputGroup()),
             (attributes.length > 0 || onToggleAdvancedSearch) && (React.createElement(InputGroupItem, { isPlain: true },
-                React.createElement(Button, { className: isSearchMenuOpen && 'pf-m-expanded', variant: ButtonVariant.control, "aria-label": openMenuButtonAriaLabel, onClick: onToggle, isDisabled: isDisabled, "aria-expanded": isSearchMenuOpen },
-                    React.createElement(CaretDownIcon, null)))),
+                React.createElement(Button, { className: isSearchMenuOpen && 'pf-m-expanded', variant: ButtonVariant.control, "aria-label": openMenuButtonAriaLabel, onClick: onToggle, isDisabled: isDisabled, "aria-expanded": isSearchMenuOpen, icon: React.createElement(CaretDownIcon, null) }))),
             !!onSearch && (React.createElement(InputGroupItem, null,
-                React.createElement(Button, { type: "submit", variant: ButtonVariant.control, "aria-label": submitSearchButtonLabel, onClick: onSearchHandler, isDisabled: isDisabled },
-                    React.createElement(Icon, { shouldMirrorRTL: true },
-                        React.createElement(ArrowRightIcon$1, null))))),
+                React.createElement(Button, { type: "submit", variant: ButtonVariant.control, "aria-label": submitSearchButtonLabel, onClick: onSearchHandler, isDisabled: isDisabled, icon: React.createElement(Icon, { shouldMirrorRTL: true },
+                        React.createElement(ArrowRightIcon$1, null)) }))),
             expandableInput && React.createElement(InputGroupItem, null, expandableToggle)));
     };
     const searchInputProps = Object.assign(Object.assign({}, props), { className: className && css(className), innerRef: searchInputRef });
@@ -8386,7 +8470,7 @@ SearchInputBase.displayName = 'SearchInputBase';
 const SearchInput = React.forwardRef((props, ref) => (React.createElement(SearchInputBase, Object.assign({}, props, { innerRef: ref }))));
 SearchInput.displayName = 'SearchInput';
 
-var styles$8 = {
+var styles$9 = {
   "emptyState": "pf-v6-c-empty-state",
   "emptyStateActions": "pf-v6-c-empty-state__actions",
   "emptyStateBody": "pf-v6-c-empty-state__body",
@@ -8412,7 +8496,7 @@ const isSpinner = (icon) => icon.type === Spinner;
 const EmptyStateIcon = (_a) => {
     var { className, icon: IconComponent } = _a, props = __rest$1(_a, ["className", "icon"]);
     const iconIsSpinner = isSpinner(React.createElement(IconComponent, null));
-    return (React.createElement("div", { className: css(styles$8.emptyStateIcon) },
+    return (React.createElement("div", { className: css(styles$9.emptyStateIcon) },
         React.createElement(IconComponent, Object.assign({ className: className, "aria-hidden": !iconIsSpinner }, props))));
 };
 EmptyStateIcon.displayName = 'EmptyStateIcon';
@@ -8428,10 +8512,10 @@ var EmptyStateHeadingLevel;
 })(EmptyStateHeadingLevel || (EmptyStateHeadingLevel = {}));
 const EmptyStateHeader = (_a) => {
     var { className, titleClassName, titleText, headingLevel: HeadingLevel = EmptyStateHeadingLevel.h1, icon: Icon } = _a, props = __rest$1(_a, ["className", "titleClassName", "titleText", "headingLevel", "icon"]);
-    return (React.createElement("div", Object.assign({ className: css(`${styles$8.emptyState}__header`, className) }, props),
+    return (React.createElement("div", Object.assign({ className: css(`${styles$9.emptyState}__header`, className) }, props),
         Icon && React.createElement(EmptyStateIcon, { icon: Icon }),
-        React.createElement("div", { className: css(`${styles$8.emptyState}__title`) },
-            React.createElement(HeadingLevel, { className: css(styles$8.emptyStateTitleText, titleClassName) }, titleText))));
+        React.createElement("div", { className: css(`${styles$9.emptyState}__title`) },
+            React.createElement(HeadingLevel, { className: css(styles$9.emptyStateTitleText, titleClassName) }, titleText))));
 };
 EmptyStateHeader.displayName = 'EmptyStateHeader';
 
@@ -8455,8 +8539,8 @@ const EmptyState = (_a) => {
     var { children, className, variant = EmptyStateVariant.full, isFullHeight, status, icon: customIcon, titleText, titleClassName, headerClassName, headingLevel } = _a, props = __rest$1(_a, ["children", "className", "variant", "isFullHeight", "status", "icon", "titleText", "titleClassName", "headerClassName", "headingLevel"]);
     const statusIcon = status && statusIcons$2[status];
     const icon = customIcon || statusIcon;
-    return (React.createElement("div", Object.assign({ className: css(styles$8.emptyState, variant !== 'full' && styles$8.modifiers[variant], isFullHeight && styles$8.modifiers.fullHeight, status && styles$8.modifiers[status], className) }, props),
-        React.createElement("div", { className: css(styles$8.emptyStateContent) },
+    return (React.createElement("div", Object.assign({ className: css(styles$9.emptyState, variant !== 'full' && styles$9.modifiers[variant], isFullHeight && styles$9.modifiers.fullHeight, status && styles$9.modifiers[status], className) }, props),
+        React.createElement("div", { className: css(styles$9.emptyStateContent) },
             React.createElement(EmptyStateHeader, { icon: icon, titleText: titleText, titleClassName: titleClassName, className: headerClassName, headingLevel: headingLevel }),
             children)));
 };
@@ -8464,23 +8548,23 @@ EmptyState.displayName = 'EmptyState';
 
 const EmptyStateBody = (_a) => {
     var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$8.emptyStateBody, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$9.emptyStateBody, className) }, props), children));
 };
 EmptyStateBody.displayName = 'EmptyStateBody';
 
 const EmptyStateFooter = (_a) => {
     var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$8.emptyStateFooter, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$9.emptyStateFooter, className) }, props), children));
 };
 EmptyStateFooter.displayName = 'EmptyStateFooter';
 
 const EmptyStateActions = (_a) => {
     var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$8.emptyStateActions, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(styles$9.emptyStateActions, className) }, props), children));
 };
 EmptyStateActions.displayName = 'EmptyStateActions';
 
-var styles$7 = {
+var styles$8 = {
   "dirRtl": "pf-v6-m-dir-rtl",
   "expandableSection": "pf-v6-c-expandable-section",
   "expandableSectionContent": "pf-v6-c-expandable-section__content",
@@ -8531,10 +8615,12 @@ class ExpandableSection extends React.Component {
             }
         };
         this.resize = () => {
-            const { offsetWidth } = this.expandableContentRef.current;
-            if (this.state.previousWidth !== offsetWidth) {
-                this.setState({ previousWidth: offsetWidth });
-                this.checkToggleVisibility();
+            if (this.expandableContentRef.current) {
+                const { offsetWidth } = this.expandableContentRef.current;
+                if (this.state.previousWidth !== offsetWidth) {
+                    this.setState({ previousWidth: offsetWidth });
+                    this.checkToggleVisibility();
+                }
             }
         };
         this.handleResize = debounce$1(this.resize, 250);
@@ -8597,13 +8683,13 @@ class ExpandableSection extends React.Component {
             };
         }
         const computedToggleText = this.calculateToggleText(toggleText, toggleTextExpanded, toggleTextCollapsed, propOrStateIsExpanded);
-        const expandableToggle = !isDetached && (React.createElement("button", { className: css(styles$7.expandableSectionToggle), type: "button", "aria-expanded": propOrStateIsExpanded, "aria-controls": uniqueContentId, id: uniqueToggleId, onClick: (event) => onToggle(event, !propOrStateIsExpanded) },
-            variant !== ExpandableSectionVariant.truncate && (React.createElement("span", { className: css(styles$7.expandableSectionToggleIcon) },
+        const expandableToggle = !isDetached && (React.createElement("button", { className: css(styles$8.expandableSectionToggle), type: "button", "aria-expanded": propOrStateIsExpanded, "aria-controls": uniqueContentId, id: uniqueToggleId, onClick: (event) => onToggle(event, !propOrStateIsExpanded) },
+            variant !== ExpandableSectionVariant.truncate && (React.createElement("span", { className: css(styles$8.expandableSectionToggleIcon) },
                 React.createElement(AngleRightIcon, { "aria-hidden": true }))),
-            React.createElement("span", { className: css(styles$7.expandableSectionToggleText) }, toggleContent || computedToggleText)));
-        return (React.createElement("div", Object.assign({ className: css(styles$7.expandableSection, propOrStateIsExpanded && styles$7.modifiers.expanded, displaySize === 'lg' && styles$7.modifiers.displayLg, isWidthLimited && styles$7.modifiers.limitWidth, isIndented && styles$7.modifiers.indented, variant === ExpandableSectionVariant.truncate && styles$7.modifiers.truncate, className) }, props),
+            React.createElement("span", { className: css(styles$8.expandableSectionToggleText) }, toggleContent || computedToggleText)));
+        return (React.createElement("div", Object.assign({ className: css(styles$8.expandableSection, propOrStateIsExpanded && styles$8.modifiers.expanded, displaySize === 'lg' && styles$8.modifiers.displayLg, isWidthLimited && styles$8.modifiers.limitWidth, isIndented && styles$8.modifiers.indented, variant === ExpandableSectionVariant.truncate && styles$8.modifiers.truncate, className) }, props),
             variant === ExpandableSectionVariant.default && expandableToggle,
-            React.createElement("div", { ref: this.expandableContentRef, className: css(styles$7.expandableSectionContent), hidden: variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded, id: uniqueContentId, "aria-labelledby": uniqueToggleId, role: "region" }, children),
+            React.createElement("div", { ref: this.expandableContentRef, className: css(styles$8.expandableSectionContent), hidden: variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded, id: uniqueContentId, "aria-labelledby": uniqueToggleId, role: "region" }, children),
             variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle));
     }
 }
@@ -8660,9 +8746,9 @@ var labelStyles = {
     "red": "pf-m-red",
     "orange": "pf-m-orange",
     "orangered": "pf-m-orangered",
-    "gold": "pf-m-gold",
+    "yellow": "pf-m-yellow",
     "green": "pf-m-green",
-    "cyan": "pf-m-cyan",
+    "teal": "pf-m-teal",
     "purple": "pf-m-purple",
     "success": "pf-m-success",
     "warning": "pf-m-warning",
@@ -8681,7 +8767,7 @@ var labelStyles = {
   }
 };
 
-var styles$6 = {
+var styles$7 = {
   "button": "pf-v6-c-button",
   "labelGroup": "pf-v6-c-label-group",
   "labelGroupClose": "pf-v6-c-label-group__close",
@@ -8706,13 +8792,13 @@ const c_label__text_MaxWidth = {
 
 const colorStyles = {
     blue: labelStyles.modifiers.blue,
-    cyan: labelStyles.modifiers.cyan,
+    teal: labelStyles.modifiers.teal,
     green: labelStyles.modifiers.green,
     orange: labelStyles.modifiers.orange,
     purple: labelStyles.modifiers.purple,
     red: labelStyles.modifiers.red,
     orangered: labelStyles.modifiers.orangered,
-    gold: labelStyles.modifiers.gold,
+    yellow: labelStyles.modifiers.yellow,
     grey: ''
 };
 const statusIcons = {
@@ -8813,8 +8899,7 @@ const Label = (_a) => {
         }
     };
     const isClickableDisabled = (href || onLabelClick) && isDisabled;
-    const defaultCloseButton = (React.createElement(Button, Object.assign({ type: "button", variant: "plain", hasNoPadding: true, onClick: onClose, "aria-label": closeBtnAriaLabel || `Close ${children}` }, (isClickableDisabled && { isDisabled: true }), closeBtnProps),
-        React.createElement(TimesIcon, null)));
+    const defaultCloseButton = (React.createElement(Button, Object.assign({ type: "button", variant: "plain", hasNoPadding: true, onClick: onClose, "aria-label": closeBtnAriaLabel || `Close ${children}` }, (isClickableDisabled && { isDisabled: true }), closeBtnProps, { icon: React.createElement(TimesIcon, null) })));
     const closeButton = React.createElement("span", { className: css(labelStyles.labelActions) }, closeBtn || defaultCloseButton);
     const textRef = React.createRef();
     // ref to apply tooltip when rendered is used
@@ -8871,14 +8956,14 @@ const Label = (_a) => {
         labelComponentChild = (React.createElement(Tooltip, { content: children, position: tooltipPosition }, labelComponentChild));
     }
     const LabelComponent = (isOverflowLabel ? 'button' : 'span');
-    return (React.createElement(LabelComponent, Object.assign({}, props, { className: css(labelStyles.label, isClickableDisabled && labelStyles.modifiers.disabled, colorStyles[color], variant === 'filled' && labelStyles.modifiers.filled, variant === 'outline' && labelStyles.modifiers.outline, status && labelStyles.modifiers[status], isOverflowLabel && labelStyles.modifiers.overflow, isCompact && labelStyles.modifiers.compact, isEditable && styles$6.modifiers.editable, isEditableActive && labelStyles.modifiers.editableActive, isClickable && labelStyles.modifiers.clickable, isAddLabel && labelStyles.modifiers.add, className), onClick: isOverflowLabel || isAddLabel ? onLabelClick : undefined }),
+    return (React.createElement(LabelComponent, Object.assign({}, props, { className: css(labelStyles.label, isClickableDisabled && labelStyles.modifiers.disabled, colorStyles[color], variant === 'filled' && labelStyles.modifiers.filled, variant === 'outline' && labelStyles.modifiers.outline, status && labelStyles.modifiers[status], isOverflowLabel && labelStyles.modifiers.overflow, isCompact && labelStyles.modifiers.compact, isEditable && styles$7.modifiers.editable, isEditableActive && labelStyles.modifiers.editableActive, isClickable && labelStyles.modifiers.clickable, isAddLabel && labelStyles.modifiers.add, className), onClick: isOverflowLabel || isAddLabel ? onLabelClick : undefined }, (LabelComponent === 'button' && { type: 'button' })),
         !isEditableActive && labelComponentChild,
         !isEditableActive && onClose && closeButton,
         isEditableActive && (React.createElement("input", Object.assign({ className: css(labelStyles.labelContent), type: "text", id: "editable-input", ref: editableInputRef, value: currValue, onChange: updateVal }, editableProps)))));
 };
 Label.displayName = 'Label';
 
-var styles$5 = {
+var styles$6 = {
   "list": "pf-v6-c-list",
   "listItem": "pf-v6-c-list__item",
   "listItemIcon": "pf-v6-c-list__item-icon",
@@ -8909,15 +8994,15 @@ var ListComponent;
 })(ListComponent || (ListComponent = {}));
 const List = (_a) => {
     var { className = '', children = null, variant = null, isBordered = false, isPlain = false, iconSize = 'default', type = OrderType.number, ref = null, component = ListComponent.ul } = _a, props = __rest$1(_a, ["className", "children", "variant", "isBordered", "isPlain", "iconSize", "type", "ref", "component"]);
-    return component === ListComponent.ol ? (React.createElement("ol", Object.assign({ ref: ref, type: type }, (isPlain && { role: 'list' }), props, { className: css(styles$5.list, variant && styles$5.modifiers[variant], isBordered && styles$5.modifiers.bordered, isPlain && styles$5.modifiers.plain, iconSize && iconSize === 'large' && styles$5.modifiers.iconLg, className) }), children)) : (React.createElement("ul", Object.assign({ ref: ref }, (isPlain && { role: 'list' }), props, { className: css(styles$5.list, variant && styles$5.modifiers[variant], isBordered && styles$5.modifiers.bordered, isPlain && styles$5.modifiers.plain, iconSize && iconSize === 'large' && styles$5.modifiers.iconLg, className) }), children));
+    return component === ListComponent.ol ? (React.createElement("ol", Object.assign({ ref: ref, type: type }, (isPlain && { role: 'list' }), props, { className: css(styles$6.list, variant && styles$6.modifiers[variant], isBordered && styles$6.modifiers.bordered, isPlain && styles$6.modifiers.plain, iconSize && iconSize === 'large' && styles$6.modifiers.iconLg, className) }), children)) : (React.createElement("ul", Object.assign({ ref: ref }, (isPlain && { role: 'list' }), props, { className: css(styles$6.list, variant && styles$6.modifiers[variant], isBordered && styles$6.modifiers.bordered, isPlain && styles$6.modifiers.plain, iconSize && iconSize === 'large' && styles$6.modifiers.iconLg, className) }), children));
 };
 List.displayName = 'List';
 
 const ListItem = (_a) => {
     var { icon = null, children = null } = _a, props = __rest$1(_a, ["icon", "children"]);
-    return (React.createElement("li", Object.assign({ className: css(icon && styles$5.listItem) }, props),
-        icon && React.createElement("span", { className: css(styles$5.listItemIcon) }, icon),
-        React.createElement("span", { className: icon && css(`${styles$5.list}__item-text`) }, children)));
+    return (React.createElement("li", Object.assign({ className: css(icon && styles$6.listItem) }, props),
+        icon && React.createElement("span", { className: css(styles$6.listItemIcon) }, icon),
+        React.createElement("span", { className: icon && css(`${styles$6.list}__item-text`) }, children)));
 };
 ListItem.displayName = 'ListItem';
 
@@ -8934,82 +9019,114 @@ const PageContext = React.createContext(pageContextDefaults);
 PageContext.Provider;
 PageContext.Consumer;
 
-var TextVariants;
-(function (TextVariants) {
-    TextVariants["h1"] = "h1";
-    TextVariants["h2"] = "h2";
-    TextVariants["h3"] = "h3";
-    TextVariants["h4"] = "h4";
-    TextVariants["h5"] = "h5";
-    TextVariants["h6"] = "h6";
-    TextVariants["p"] = "p";
-    TextVariants["a"] = "a";
-    TextVariants["small"] = "small";
-    TextVariants["blockquote"] = "blockquote";
-    TextVariants["pre"] = "pre";
-})(TextVariants || (TextVariants = {}));
-const componentStyles$2 = {
-    h1: styles$r.contentH1,
-    h2: styles$r.contentH2,
-    h3: styles$r.contentH3,
-    h4: styles$r.contentH4,
-    h5: styles$r.contentH5,
-    h6: styles$r.contentH6,
-    p: styles$r.contentP,
-    a: styles$r.contentA,
-    small: styles$r.contentSmall,
-    blockquote: styles$r.contentBlockquote,
-    pre: styles$r.contentPre
-};
-const Text = (_a) => {
-    var { children = null, className = '', component = TextVariants.p, isVisitedLink = false, ouiaId, ouiaSafe = true } = _a, props = __rest$1(_a, ["children", "className", "component", "isVisitedLink", "ouiaId", "ouiaSafe"]);
-    const Component = component;
-    const ouiaProps = useOUIAProps(Text.displayName, ouiaId, ouiaSafe);
-    return (React.createElement(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css(isVisitedLink && component === TextVariants.a && styles$r.modifiers.visited, componentStyles$2[component], className) }), children));
-};
-Text.displayName = 'Text';
-
-var TextListVariants;
-(function (TextListVariants) {
-    TextListVariants["ul"] = "ul";
-    TextListVariants["ol"] = "ol";
-    TextListVariants["dl"] = "dl";
-})(TextListVariants || (TextListVariants = {}));
-const componentStyles$1 = {
-    ul: styles$r.contentUl,
-    ol: styles$r.contentOl,
-    dl: styles$r.contentDl
-};
-const TextList = (_a) => {
-    var { children = null, className = '', component = TextListVariants.ul, isPlain = false } = _a, props = __rest$1(_a, ["children", "className", "component", "isPlain"]);
-    const Component = component;
-    return (React.createElement(Component, Object.assign({}, props, { className: css(isPlain && styles$r.modifiers.plain, componentStyles$1[component], className) }), children));
-};
-TextList.displayName = 'TextList';
-
-var TextListItemVariants;
-(function (TextListItemVariants) {
-    TextListItemVariants["li"] = "li";
-    TextListItemVariants["dt"] = "dt";
-    TextListItemVariants["dd"] = "dd";
-})(TextListItemVariants || (TextListItemVariants = {}));
-const componentStyles = {
-    li: styles$r.contentLi,
-    dt: styles$r.contentDt,
-    dd: styles$r.contentDd
-};
-const TextListItem = (_a) => {
-    var { children = null, className = '', component = TextListItemVariants.li } = _a, props = __rest$1(_a, ["children", "className", "component"]);
+var styles$5 = {
+  "dirRtl": "pf-v6-m-dir-rtl",
+  "drawer": "pf-v6-c-drawer",
+  "masthead": "pf-v6-c-masthead",
+  "modifiers": {
+    "expanded": "pf-m-expanded",
+    "collapsed": "pf-m-collapsed",
+    "pageInsets": "pf-m-page-insets",
+    "contextSelector": "pf-m-context-selector",
+    "insetNone": "pf-m-inset-none",
+    "fill": "pf-m-fill",
+    "noFill": "pf-m-no-fill",
+    "limitWidth": "pf-m-limit-width",
+    "alignCenter": "pf-m-align-center",
+    "overflowScroll": "pf-m-overflow-scroll",
+    "shadowBottom": "pf-m-shadow-bottom",
+    "shadowTop": "pf-m-shadow-top",
+    "stickyTop": "pf-m-sticky-top",
+    "stickyBottom": "pf-m-sticky-bottom",
+    "stickyTopOnSmHeight": "pf-m-sticky-top-on-sm-height",
+    "stickyBottomOnSmHeight": "pf-m-sticky-bottom-on-sm-height",
+    "stickyTopOnMdHeight": "pf-m-sticky-top-on-md-height",
+    "stickyBottomOnMdHeight": "pf-m-sticky-bottom-on-md-height",
+    "stickyTopOnLgHeight": "pf-m-sticky-top-on-lg-height",
+    "stickyBottomOnLgHeight": "pf-m-sticky-bottom-on-lg-height",
+    "stickyTopOnXlHeight": "pf-m-sticky-top-on-xl-height",
+    "stickyBottomOnXlHeight": "pf-m-sticky-bottom-on-xl-height",
+    "stickyTopOn_2xlHeight": "pf-m-sticky-top-on-2xl-height",
+    "stickyBottomOn_2xlHeight": "pf-m-sticky-bottom-on-2xl-height",
+    "secondary": "pf-m-secondary",
+    "padding": "pf-m-padding",
+    "noPadding": "pf-m-no-padding",
+    "paddingOnSm": "pf-m-padding-on-sm",
+    "noPaddingOnSm": "pf-m-no-padding-on-sm",
+    "paddingOnMd": "pf-m-padding-on-md",
+    "noPaddingOnMd": "pf-m-no-padding-on-md",
+    "paddingOnLg": "pf-m-padding-on-lg",
+    "noPaddingOnLg": "pf-m-no-padding-on-lg",
+    "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"
+  },
+  "page": "pf-v6-c-page",
+  "pageDrawer": "pf-v6-c-page__drawer",
+  "pageMain": "pf-v6-c-page__main",
+  "pageMainBody": "pf-v6-c-page__main-body",
+  "pageMainBreadcrumb": "pf-v6-c-page__main-breadcrumb",
+  "pageMainContainer": "pf-v6-c-page__main-container",
+  "pageMainDrawer": "pf-v6-c-page__main-drawer",
+  "pageMainGroup": "pf-v6-c-page__main-group",
+  "pageMainSection": "pf-v6-c-page__main-section",
+  "pageMainSubnav": "pf-v6-c-page__main-subnav",
+  "pageMainTabs": "pf-v6-c-page__main-tabs",
+  "pageMainWizard": "pf-v6-c-page__main-wizard",
+  "pageSidebar": "pf-v6-c-page__sidebar",
+  "pageSidebarBody": "pf-v6-c-page__sidebar-body",
+  "pageSidebarHeader": "pf-v6-c-page__sidebar-header",
+  "pageSidebarTitle": "pf-v6-c-page__sidebar-title"
+};
+
+const PageBody = (_a) => {
+    var { className, children } = _a, props = __rest$1(_a, ["className", "children"]);
+    return (React.createElement("div", Object.assign({}, props, { className: css(styles$5.pageMainBody, className) }), children));
+};
+PageBody.displayName = 'PageBody';
+
+var PageSectionVariants;
+(function (PageSectionVariants) {
+    PageSectionVariants["default"] = "default";
+    PageSectionVariants["secondary"] = "secondary";
+})(PageSectionVariants || (PageSectionVariants = {}));
+var PageSectionTypes;
+(function (PageSectionTypes) {
+    PageSectionTypes["default"] = "default";
+    PageSectionTypes["subNav"] = "subnav";
+    PageSectionTypes["breadcrumb"] = "breadcrumb";
+    PageSectionTypes["tabs"] = "tabs";
+    PageSectionTypes["wizard"] = "wizard";
+})(PageSectionTypes || (PageSectionTypes = {}));
+const variantType = {
+    [PageSectionTypes.default]: styles$5.pageMainSection,
+    [PageSectionTypes.subNav]: styles$5.pageMainSubnav,
+    [PageSectionTypes.breadcrumb]: styles$5.pageMainBreadcrumb,
+    [PageSectionTypes.tabs]: styles$5.pageMainTabs,
+    [PageSectionTypes.wizard]: styles$5.pageMainWizard
+};
+const variantStyle = {
+    [PageSectionVariants.default]: '',
+    [PageSectionVariants.secondary]: styles$5.modifiers.secondary
+};
+const PageSection = (_a) => {
+    var { className = '', children, variant = 'default', type = 'default', padding, isFilled, isWidthLimited = false, isCenterAligned = false, stickyOnBreakpoint, hasShadowTop = false, hasShadowBottom = false, hasOverflowScroll = false, 'aria-label': ariaLabel, component = 'section', hasBodyWrapper = true } = _a, props = __rest$1(_a, ["className", "children", "variant", "type", "padding", "isFilled", "isWidthLimited", "isCenterAligned", "stickyOnBreakpoint", "hasShadowTop", "hasShadowBottom", "hasOverflowScroll", 'aria-label', "component", "hasBodyWrapper"]);
+    const { height, getVerticalBreakpoint } = React.useContext(PageContext);
+    React.useEffect(() => {
+        if (hasOverflowScroll && !ariaLabel) {
+            /* eslint-disable no-console */
+            console.warn('PageSection: An accessible aria-label is required when hasOverflowScroll is set to true.');
+        }
+    }, [hasOverflowScroll, ariaLabel]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({}, props, { className: css(componentStyles[component], className) }), children));
+    return (React.createElement(Component, Object.assign({}, props, { className: css(variantType[type], formatBreakpointMods(padding, styles$5), formatBreakpointMods(stickyOnBreakpoint, styles$5, 'sticky-', getVerticalBreakpoint(height), true), type === PageSectionTypes.default && variantStyle[variant], isFilled === false && styles$5.modifiers.noFill, isFilled === true && styles$5.modifiers.fill, isWidthLimited && styles$5.modifiers.limitWidth, isWidthLimited && isCenterAligned && type !== PageSectionTypes.subNav && styles$5.modifiers.alignCenter, hasShadowTop && styles$5.modifiers.shadowTop, hasShadowBottom && styles$5.modifiers.shadowBottom, hasOverflowScroll && styles$5.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), { "aria-label": ariaLabel }), hasBodyWrapper ? React.createElement(PageBody, null, children) : children));
 };
-TextListItem.displayName = 'TextListItem';
+PageSection.displayName = 'PageSection';
 
 var styles$4 = {
   "dirRtl": "pf-v6-m-dir-rtl",
   "modifiers": {
-    "labelGroupContainer": "pf-m-label-group-container",
-    "labelGroup": "pf-m-label-group",
     "hidden": "pf-m-hidden",
     "hiddenOnSm": "pf-m-hidden-on-sm",
     "visibleOnSm": "pf-m-visible-on-sm",
@@ -9024,17 +9141,19 @@ var styles$4 = {
     "sticky": "pf-m-sticky",
     "static": "pf-m-static",
     "fullHeight": "pf-m-full-height",
-    "pageInsets": "pf-m-page-insets",
     "primary": "pf-m-primary",
     "secondary": "pf-m-secondary",
     "noBackground": "pf-m-no-background",
-    "pagination": "pf-m-pagination",
     "expandAll": "pf-m-expand-all",
     "expanded": "pf-m-expanded",
     "label": "pf-m-label",
+    "pagination": "pf-m-pagination",
     "overflowContainer": "pf-m-overflow-container",
-    "iconButtonGroup": "pf-m-icon-button-group",
     "filterGroup": "pf-m-filter-group",
+    "labelGroup": "pf-m-label-group",
+    "actionGroup": "pf-m-action-group",
+    "actionGroupPlain": "pf-m-action-group-plain",
+    "actionGroupInline": "pf-m-action-group-inline",
     "alignStart": "pf-m-align-start",
     "alignCenter": "pf-m-align-center",
     "alignEnd": "pf-m-align-end",
@@ -9071,40 +9190,22 @@ var styles$4 = {
     "gap_4xl": "pf-m-gap-4xl",
     "columnGapNone": "pf-m-column-gap-none",
     "rowGapNone": "pf-m-row-gap-none",
-    "marginInlineStartnone": "pf-m-margin-inline-startnone",
-    "marginInlineEndnone": "pf-m-margin-inline-endnone",
     "columnGapXs": "pf-m-column-gap-xs",
     "rowGapXs": "pf-m-row-gap-xs",
-    "marginInlineStartxs": "pf-m-margin-inline-startxs",
-    "marginInlineEndxs": "pf-m-margin-inline-endxs",
     "columnGapSm": "pf-m-column-gap-sm",
     "rowGapSm": "pf-m-row-gap-sm",
-    "marginInlineStartsm": "pf-m-margin-inline-startsm",
-    "marginInlineEndsm": "pf-m-margin-inline-endsm",
     "columnGapMd": "pf-m-column-gap-md",
     "rowGapMd": "pf-m-row-gap-md",
-    "marginInlineStartmd": "pf-m-margin-inline-startmd",
-    "marginInlineEndmd": "pf-m-margin-inline-endmd",
     "columnGapLg": "pf-m-column-gap-lg",
     "rowGapLg": "pf-m-row-gap-lg",
-    "marginInlineStartlg": "pf-m-margin-inline-startlg",
-    "marginInlineEndlg": "pf-m-margin-inline-endlg",
     "columnGapXl": "pf-m-column-gap-xl",
     "rowGapXl": "pf-m-row-gap-xl",
-    "marginInlineStartxl": "pf-m-margin-inline-startxl",
-    "marginInlineEndxl": "pf-m-margin-inline-endxl",
     "columnGap_2xl": "pf-m-column-gap-2xl",
     "rowGap_2xl": "pf-m-row-gap-2xl",
-    "marginInlineStart2xl": "pf-m-margin-inline-start2xl",
-    "marginInlineEnd2xl": "pf-m-margin-inline-end2xl",
     "columnGap_3xl": "pf-m-column-gap-3xl",
     "rowGap_3xl": "pf-m-row-gap-3xl",
-    "marginInlineStart3xl": "pf-m-margin-inline-start3xl",
-    "marginInlineEnd3xl": "pf-m-margin-inline-end3xl",
     "columnGap_4xl": "pf-m-column-gap-4xl",
     "rowGap_4xl": "pf-m-row-gap-4xl",
-    "marginInlineStart4xl": "pf-m-margin-inline-start4xl",
-    "marginInlineEnd4xl": "pf-m-margin-inline-end4xl",
     "toggleGroup": "pf-m-toggle-group",
     "show": "pf-m-show",
     "hide": "pf-m-hide",
@@ -9144,40 +9245,22 @@ var styles$4 = {
     "gap_4xlOnSm": "pf-m-gap-4xl-on-sm",
     "columnGapNoneOnSm": "pf-m-column-gap-none-on-sm",
     "rowGapNoneOnSm": "pf-m-row-gap-none-on-sm",
-    "marginInlineStartnoneOnSm": "pf-m-margin-inline-startnone-on-sm",
-    "marginInlineEndnoneOnSm": "pf-m-margin-inline-endnone-on-sm",
     "columnGapXsOnSm": "pf-m-column-gap-xs-on-sm",
     "rowGapXsOnSm": "pf-m-row-gap-xs-on-sm",
-    "marginInlineStartxsOnSm": "pf-m-margin-inline-startxs-on-sm",
-    "marginInlineEndxsOnSm": "pf-m-margin-inline-endxs-on-sm",
     "columnGapSmOnSm": "pf-m-column-gap-sm-on-sm",
     "rowGapSmOnSm": "pf-m-row-gap-sm-on-sm",
-    "marginInlineStartsmOnSm": "pf-m-margin-inline-startsm-on-sm",
-    "marginInlineEndsmOnSm": "pf-m-margin-inline-endsm-on-sm",
     "columnGapMdOnSm": "pf-m-column-gap-md-on-sm",
     "rowGapMdOnSm": "pf-m-row-gap-md-on-sm",
-    "marginInlineStartmdOnSm": "pf-m-margin-inline-startmd-on-sm",
-    "marginInlineEndmdOnSm": "pf-m-margin-inline-endmd-on-sm",
     "columnGapLgOnSm": "pf-m-column-gap-lg-on-sm",
     "rowGapLgOnSm": "pf-m-row-gap-lg-on-sm",
-    "marginInlineStartlgOnSm": "pf-m-margin-inline-startlg-on-sm",
-    "marginInlineEndlgOnSm": "pf-m-margin-inline-endlg-on-sm",
     "columnGapXlOnSm": "pf-m-column-gap-xl-on-sm",
     "rowGapXlOnSm": "pf-m-row-gap-xl-on-sm",
-    "marginInlineStartxlOnSm": "pf-m-margin-inline-startxl-on-sm",
-    "marginInlineEndxlOnSm": "pf-m-margin-inline-endxl-on-sm",
     "columnGap_2xlOnSm": "pf-m-column-gap-2xl-on-sm",
     "rowGap_2xlOnSm": "pf-m-row-gap-2xl-on-sm",
-    "marginInlineStart2xlOnSm": "pf-m-margin-inline-start2xl-on-sm",
-    "marginInlineEnd2xlOnSm": "pf-m-margin-inline-end2xl-on-sm",
     "columnGap_3xlOnSm": "pf-m-column-gap-3xl-on-sm",
     "rowGap_3xlOnSm": "pf-m-row-gap-3xl-on-sm",
-    "marginInlineStart3xlOnSm": "pf-m-margin-inline-start3xl-on-sm",
-    "marginInlineEnd3xlOnSm": "pf-m-margin-inline-end3xl-on-sm",
     "columnGap_4xlOnSm": "pf-m-column-gap-4xl-on-sm",
     "rowGap_4xlOnSm": "pf-m-row-gap-4xl-on-sm",
-    "marginInlineStart4xlOnSm": "pf-m-margin-inline-start4xl-on-sm",
-    "marginInlineEnd4xlOnSm": "pf-m-margin-inline-end4xl-on-sm",
     "showOnSm": "pf-m-show-on-sm",
     "hideOnSm": "pf-m-hide-on-sm",
     "alignStartOnMd": "pf-m-align-start-on-md",
@@ -9216,40 +9299,22 @@ var styles$4 = {
     "gap_4xlOnMd": "pf-m-gap-4xl-on-md",
     "columnGapNoneOnMd": "pf-m-column-gap-none-on-md",
     "rowGapNoneOnMd": "pf-m-row-gap-none-on-md",
-    "marginInlineStartnoneOnMd": "pf-m-margin-inline-startnone-on-md",
-    "marginInlineEndnoneOnMd": "pf-m-margin-inline-endnone-on-md",
     "columnGapXsOnMd": "pf-m-column-gap-xs-on-md",
     "rowGapXsOnMd": "pf-m-row-gap-xs-on-md",
-    "marginInlineStartxsOnMd": "pf-m-margin-inline-startxs-on-md",
-    "marginInlineEndxsOnMd": "pf-m-margin-inline-endxs-on-md",
     "columnGapSmOnMd": "pf-m-column-gap-sm-on-md",
     "rowGapSmOnMd": "pf-m-row-gap-sm-on-md",
-    "marginInlineStartsmOnMd": "pf-m-margin-inline-startsm-on-md",
-    "marginInlineEndsmOnMd": "pf-m-margin-inline-endsm-on-md",
     "columnGapMdOnMd": "pf-m-column-gap-md-on-md",
     "rowGapMdOnMd": "pf-m-row-gap-md-on-md",
-    "marginInlineStartmdOnMd": "pf-m-margin-inline-startmd-on-md",
-    "marginInlineEndmdOnMd": "pf-m-margin-inline-endmd-on-md",
     "columnGapLgOnMd": "pf-m-column-gap-lg-on-md",
     "rowGapLgOnMd": "pf-m-row-gap-lg-on-md",
-    "marginInlineStartlgOnMd": "pf-m-margin-inline-startlg-on-md",
-    "marginInlineEndlgOnMd": "pf-m-margin-inline-endlg-on-md",
     "columnGapXlOnMd": "pf-m-column-gap-xl-on-md",
     "rowGapXlOnMd": "pf-m-row-gap-xl-on-md",
-    "marginInlineStartxlOnMd": "pf-m-margin-inline-startxl-on-md",
-    "marginInlineEndxlOnMd": "pf-m-margin-inline-endxl-on-md",
     "columnGap_2xlOnMd": "pf-m-column-gap-2xl-on-md",
     "rowGap_2xlOnMd": "pf-m-row-gap-2xl-on-md",
-    "marginInlineStart2xlOnMd": "pf-m-margin-inline-start2xl-on-md",
-    "marginInlineEnd2xlOnMd": "pf-m-margin-inline-end2xl-on-md",
     "columnGap_3xlOnMd": "pf-m-column-gap-3xl-on-md",
     "rowGap_3xlOnMd": "pf-m-row-gap-3xl-on-md",
-    "marginInlineStart3xlOnMd": "pf-m-margin-inline-start3xl-on-md",
-    "marginInlineEnd3xlOnMd": "pf-m-margin-inline-end3xl-on-md",
     "columnGap_4xlOnMd": "pf-m-column-gap-4xl-on-md",
     "rowGap_4xlOnMd": "pf-m-row-gap-4xl-on-md",
-    "marginInlineStart4xlOnMd": "pf-m-margin-inline-start4xl-on-md",
-    "marginInlineEnd4xlOnMd": "pf-m-margin-inline-end4xl-on-md",
     "showOnMd": "pf-m-show-on-md",
     "hideOnMd": "pf-m-hide-on-md",
     "alignStartOnLg": "pf-m-align-start-on-lg",
@@ -9288,40 +9353,22 @@ var styles$4 = {
     "gap_4xlOnLg": "pf-m-gap-4xl-on-lg",
     "columnGapNoneOnLg": "pf-m-column-gap-none-on-lg",
     "rowGapNoneOnLg": "pf-m-row-gap-none-on-lg",
-    "marginInlineStartnoneOnLg": "pf-m-margin-inline-startnone-on-lg",
-    "marginInlineEndnoneOnLg": "pf-m-margin-inline-endnone-on-lg",
     "columnGapXsOnLg": "pf-m-column-gap-xs-on-lg",
     "rowGapXsOnLg": "pf-m-row-gap-xs-on-lg",
-    "marginInlineStartxsOnLg": "pf-m-margin-inline-startxs-on-lg",
-    "marginInlineEndxsOnLg": "pf-m-margin-inline-endxs-on-lg",
     "columnGapSmOnLg": "pf-m-column-gap-sm-on-lg",
     "rowGapSmOnLg": "pf-m-row-gap-sm-on-lg",
-    "marginInlineStartsmOnLg": "pf-m-margin-inline-startsm-on-lg",
-    "marginInlineEndsmOnLg": "pf-m-margin-inline-endsm-on-lg",
     "columnGapMdOnLg": "pf-m-column-gap-md-on-lg",
     "rowGapMdOnLg": "pf-m-row-gap-md-on-lg",
-    "marginInlineStartmdOnLg": "pf-m-margin-inline-startmd-on-lg",
-    "marginInlineEndmdOnLg": "pf-m-margin-inline-endmd-on-lg",
     "columnGapLgOnLg": "pf-m-column-gap-lg-on-lg",
     "rowGapLgOnLg": "pf-m-row-gap-lg-on-lg",
-    "marginInlineStartlgOnLg": "pf-m-margin-inline-startlg-on-lg",
-    "marginInlineEndlgOnLg": "pf-m-margin-inline-endlg-on-lg",
     "columnGapXlOnLg": "pf-m-column-gap-xl-on-lg",
     "rowGapXlOnLg": "pf-m-row-gap-xl-on-lg",
-    "marginInlineStartxlOnLg": "pf-m-margin-inline-startxl-on-lg",
-    "marginInlineEndxlOnLg": "pf-m-margin-inline-endxl-on-lg",
     "columnGap_2xlOnLg": "pf-m-column-gap-2xl-on-lg",
     "rowGap_2xlOnLg": "pf-m-row-gap-2xl-on-lg",
-    "marginInlineStart2xlOnLg": "pf-m-margin-inline-start2xl-on-lg",
-    "marginInlineEnd2xlOnLg": "pf-m-margin-inline-end2xl-on-lg",
     "columnGap_3xlOnLg": "pf-m-column-gap-3xl-on-lg",
     "rowGap_3xlOnLg": "pf-m-row-gap-3xl-on-lg",
-    "marginInlineStart3xlOnLg": "pf-m-margin-inline-start3xl-on-lg",
-    "marginInlineEnd3xlOnLg": "pf-m-margin-inline-end3xl-on-lg",
     "columnGap_4xlOnLg": "pf-m-column-gap-4xl-on-lg",
     "rowGap_4xlOnLg": "pf-m-row-gap-4xl-on-lg",
-    "marginInlineStart4xlOnLg": "pf-m-margin-inline-start4xl-on-lg",
-    "marginInlineEnd4xlOnLg": "pf-m-margin-inline-end4xl-on-lg",
     "showOnLg": "pf-m-show-on-lg",
     "hideOnLg": "pf-m-hide-on-lg",
     "alignStartOnXl": "pf-m-align-start-on-xl",
@@ -9360,40 +9407,22 @@ var styles$4 = {
     "gap_4xlOnXl": "pf-m-gap-4xl-on-xl",
     "columnGapNoneOnXl": "pf-m-column-gap-none-on-xl",
     "rowGapNoneOnXl": "pf-m-row-gap-none-on-xl",
-    "marginInlineStartnoneOnXl": "pf-m-margin-inline-startnone-on-xl",
-    "marginInlineEndnoneOnXl": "pf-m-margin-inline-endnone-on-xl",
     "columnGapXsOnXl": "pf-m-column-gap-xs-on-xl",
     "rowGapXsOnXl": "pf-m-row-gap-xs-on-xl",
-    "marginInlineStartxsOnXl": "pf-m-margin-inline-startxs-on-xl",
-    "marginInlineEndxsOnXl": "pf-m-margin-inline-endxs-on-xl",
     "columnGapSmOnXl": "pf-m-column-gap-sm-on-xl",
     "rowGapSmOnXl": "pf-m-row-gap-sm-on-xl",
-    "marginInlineStartsmOnXl": "pf-m-margin-inline-startsm-on-xl",
-    "marginInlineEndsmOnXl": "pf-m-margin-inline-endsm-on-xl",
     "columnGapMdOnXl": "pf-m-column-gap-md-on-xl",
     "rowGapMdOnXl": "pf-m-row-gap-md-on-xl",
-    "marginInlineStartmdOnXl": "pf-m-margin-inline-startmd-on-xl",
-    "marginInlineEndmdOnXl": "pf-m-margin-inline-endmd-on-xl",
     "columnGapLgOnXl": "pf-m-column-gap-lg-on-xl",
     "rowGapLgOnXl": "pf-m-row-gap-lg-on-xl",
-    "marginInlineStartlgOnXl": "pf-m-margin-inline-startlg-on-xl",
-    "marginInlineEndlgOnXl": "pf-m-margin-inline-endlg-on-xl",
     "columnGapXlOnXl": "pf-m-column-gap-xl-on-xl",
     "rowGapXlOnXl": "pf-m-row-gap-xl-on-xl",
-    "marginInlineStartxlOnXl": "pf-m-margin-inline-startxl-on-xl",
-    "marginInlineEndxlOnXl": "pf-m-margin-inline-endxl-on-xl",
     "columnGap_2xlOnXl": "pf-m-column-gap-2xl-on-xl",
     "rowGap_2xlOnXl": "pf-m-row-gap-2xl-on-xl",
-    "marginInlineStart2xlOnXl": "pf-m-margin-inline-start2xl-on-xl",
-    "marginInlineEnd2xlOnXl": "pf-m-margin-inline-end2xl-on-xl",
     "columnGap_3xlOnXl": "pf-m-column-gap-3xl-on-xl",
     "rowGap_3xlOnXl": "pf-m-row-gap-3xl-on-xl",
-    "marginInlineStart3xlOnXl": "pf-m-margin-inline-start3xl-on-xl",
-    "marginInlineEnd3xlOnXl": "pf-m-margin-inline-end3xl-on-xl",
     "columnGap_4xlOnXl": "pf-m-column-gap-4xl-on-xl",
     "rowGap_4xlOnXl": "pf-m-row-gap-4xl-on-xl",
-    "marginInlineStart4xlOnXl": "pf-m-margin-inline-start4xl-on-xl",
-    "marginInlineEnd4xlOnXl": "pf-m-margin-inline-end4xl-on-xl",
     "showOnXl": "pf-m-show-on-xl",
     "hideOnXl": "pf-m-hide-on-xl",
     "alignStartOn_2xl": "pf-m-align-start-on-2xl",
@@ -9432,40 +9461,22 @@ var styles$4 = {
     "gap_4xlOn_2xl": "pf-m-gap-4xl-on-2xl",
     "columnGapNoneOn_2xl": "pf-m-column-gap-none-on-2xl",
     "rowGapNoneOn_2xl": "pf-m-row-gap-none-on-2xl",
-    "marginInlineStartnoneOn_2xl": "pf-m-margin-inline-startnone-on-2xl",
-    "marginInlineEndnoneOn_2xl": "pf-m-margin-inline-endnone-on-2xl",
     "columnGapXsOn_2xl": "pf-m-column-gap-xs-on-2xl",
     "rowGapXsOn_2xl": "pf-m-row-gap-xs-on-2xl",
-    "marginInlineStartxsOn_2xl": "pf-m-margin-inline-startxs-on-2xl",
-    "marginInlineEndxsOn_2xl": "pf-m-margin-inline-endxs-on-2xl",
     "columnGapSmOn_2xl": "pf-m-column-gap-sm-on-2xl",
     "rowGapSmOn_2xl": "pf-m-row-gap-sm-on-2xl",
-    "marginInlineStartsmOn_2xl": "pf-m-margin-inline-startsm-on-2xl",
-    "marginInlineEndsmOn_2xl": "pf-m-margin-inline-endsm-on-2xl",
     "columnGapMdOn_2xl": "pf-m-column-gap-md-on-2xl",
     "rowGapMdOn_2xl": "pf-m-row-gap-md-on-2xl",
-    "marginInlineStartmdOn_2xl": "pf-m-margin-inline-startmd-on-2xl",
-    "marginInlineEndmdOn_2xl": "pf-m-margin-inline-endmd-on-2xl",
     "columnGapLgOn_2xl": "pf-m-column-gap-lg-on-2xl",
     "rowGapLgOn_2xl": "pf-m-row-gap-lg-on-2xl",
-    "marginInlineStartlgOn_2xl": "pf-m-margin-inline-startlg-on-2xl",
-    "marginInlineEndlgOn_2xl": "pf-m-margin-inline-endlg-on-2xl",
     "columnGapXlOn_2xl": "pf-m-column-gap-xl-on-2xl",
     "rowGapXlOn_2xl": "pf-m-row-gap-xl-on-2xl",
-    "marginInlineStartxlOn_2xl": "pf-m-margin-inline-startxl-on-2xl",
-    "marginInlineEndxlOn_2xl": "pf-m-margin-inline-endxl-on-2xl",
     "columnGap_2xlOn_2xl": "pf-m-column-gap-2xl-on-2xl",
     "rowGap_2xlOn_2xl": "pf-m-row-gap-2xl-on-2xl",
-    "marginInlineStart2xlOn_2xl": "pf-m-margin-inline-start2xl-on-2xl",
-    "marginInlineEnd2xlOn_2xl": "pf-m-margin-inline-end2xl-on-2xl",
     "columnGap_3xlOn_2xl": "pf-m-column-gap-3xl-on-2xl",
     "rowGap_3xlOn_2xl": "pf-m-row-gap-3xl-on-2xl",
-    "marginInlineStart3xlOn_2xl": "pf-m-margin-inline-start3xl-on-2xl",
-    "marginInlineEnd3xlOn_2xl": "pf-m-margin-inline-end3xl-on-2xl",
     "columnGap_4xlOn_2xl": "pf-m-column-gap-4xl-on-2xl",
     "rowGap_4xlOn_2xl": "pf-m-row-gap-4xl-on-2xl",
-    "marginInlineStart4xlOn_2xl": "pf-m-margin-inline-start4xl-on-2xl",
-    "marginInlineEnd4xlOn_2xl": "pf-m-margin-inline-end4xl-on-2xl",
     "showOn_2xl": "pf-m-show-on-2xl",
     "hideOn_2xl": "pf-m-hide-on-2xl"
   },
@@ -9483,7 +9494,7 @@ var styles$4 = {
 const ToolbarContext = React.createContext({
     isExpanded: false,
     toggleIsExpanded: () => { },
-    chipGroupContentRef: null,
+    labelGroupContentRef: null,
     updateNumberFilters: () => { },
     numberOfFilters: 0,
     clearAllFilters: () => { }
@@ -9491,14 +9502,14 @@ const ToolbarContext = React.createContext({
 const ToolbarContentContext = React.createContext({
     expandableContentRef: null,
     expandableContentId: '',
-    chipContainerRef: null,
+    labelContainerRef: null,
     clearAllFilters: () => { }
 });
 const globalBreakpoints = {
-    md: parseInt(global_breakpoint_md.value),
-    lg: parseInt(global_breakpoint_lg.value),
-    xl: parseInt(global_breakpoint_xl.value),
-    '2xl': parseInt(global_breakpoint_2xl.value)
+    md: parseInt(global_breakpoint_md.value) * 16,
+    lg: parseInt(global_breakpoint_lg.value) * 16,
+    xl: parseInt(global_breakpoint_xl.value) * 16,
+    '2xl': parseInt(global_breakpoint_2xl.value) * 16
 };
 
 var ToolbarItemVariant;
@@ -9506,7 +9517,7 @@ var ToolbarItemVariant;
     ToolbarItemVariant["separator"] = "separator";
     ToolbarItemVariant["pagination"] = "pagination";
     ToolbarItemVariant["label"] = "label";
-    ToolbarItemVariant["chip-group"] = "chip-group";
+    ToolbarItemVariant["label-group"] = "label-group";
     ToolbarItemVariant["expand-all"] = "expand-all";
 })(ToolbarItemVariant || (ToolbarItemVariant = {}));
 const ToolbarItem = (_a) => {
@@ -9514,27 +9525,31 @@ const ToolbarItem = (_a) => {
     if (variant === ToolbarItemVariant.separator) {
         return React.createElement(Divider, Object.assign({ className: css(className), orientation: { default: 'vertical' } }, props));
     }
-    return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbarItem, variant && styles$4.modifiers[toCamel(variant)], variant === ToolbarItemVariant['chip-group'] && styles$4.modifiers.labelGroup, isAllExpanded && styles$4.modifiers.expanded, isOverflowContainer && styles$4.modifiers.overflowContainer, formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), formatBreakpointMods(align, styles$4, '', getBreakpoint(width)), formatBreakpointMods(gap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(columnGap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(rowGap, styles$4, '', getBreakpoint(width)), alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline, alignSelf === 'start' && styles$4.modifiers.alignSelfStart, alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline, className) }, (variant === 'label' && { 'aria-hidden': true }), { id: id }, props), children))));
+    return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbarItem, variant && styles$4.modifiers[toCamel(variant)], variant === ToolbarItemVariant['label-group'] && styles$4.modifiers.labelGroup, isAllExpanded && styles$4.modifiers.expanded, isOverflowContainer && styles$4.modifiers.overflowContainer, formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), formatBreakpointMods(align, styles$4, '', getBreakpoint(width)), formatBreakpointMods(gap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(columnGap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(rowGap, styles$4, '', getBreakpoint(width)), alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline, alignSelf === 'start' && styles$4.modifiers.alignSelfStart, alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline, className) }, (variant === 'label' && { 'aria-hidden': true }), { id: id }, props), children))));
 };
 ToolbarItem.displayName = 'ToolbarItem';
 
 var ToolbarGroupVariant;
 (function (ToolbarGroupVariant) {
     ToolbarGroupVariant["filter-group"] = "filter-group";
-    ToolbarGroupVariant["icon-button-group"] = "icon-button-group";
+    ToolbarGroupVariant["action-group"] = "action-group";
+    ToolbarGroupVariant["action-group-inline"] = "action-group-inline";
+    ToolbarGroupVariant["action-group-plain"] = "action-group-plain";
+    ToolbarGroupVariant["label-group"] = "label-group";
 })(ToolbarGroupVariant || (ToolbarGroupVariant = {}));
 class ToolbarGroupWithRef extends React.Component {
     render() {
         const _a = this.props, { visibility, align, alignItems, alignSelf, gap, columnGap, rowGap, className, variant, children, isOverflowContainer, innerRef } = _a, props = __rest$1(_a, ["visibility", "align", "alignItems", "alignSelf", "gap", "columnGap", "rowGap", "className", "variant", "children", "isOverflowContainer", "innerRef"]);
-        return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbarGroup, variant && styles$4.modifiers[toCamel(variant)], formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), formatBreakpointMods(align, styles$4, '', getBreakpoint(width)), formatBreakpointMods(gap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(columnGap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(rowGap, styles$4, '', getBreakpoint(width)), alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline, alignSelf === 'start' && styles$4.modifiers.alignSelfStart, alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline, isOverflowContainer && styles$4.modifiers.overflowContainer, className) }, props, { ref: innerRef }), children))));
+        return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbarGroup, variant &&
+                styles$4.modifiers[toCamel(variant)], formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), formatBreakpointMods(align, styles$4, '', getBreakpoint(width)), formatBreakpointMods(gap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(columnGap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(rowGap, styles$4, '', getBreakpoint(width)), alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline, alignSelf === 'start' && styles$4.modifiers.alignSelfStart, alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline, isOverflowContainer && styles$4.modifiers.overflowContainer, className) }, props, { ref: innerRef }), children))));
     }
 }
 const ToolbarGroup = React.forwardRef((props, ref) => (React.createElement(ToolbarGroupWithRef, Object.assign({}, props, { innerRef: ref }))));
 
-class ToolbarChipGroupContent extends React.Component {
+class ToolbarLabelGroupContent extends React.Component {
     render() {
-        const _a = this.props, { className, isExpanded, chipGroupContentRef, clearAllFilters, showClearFiltersButton, clearFiltersButtonText, collapseListedFiltersBreakpoint, numberOfFilters, numberOfFiltersText, customChipGroupContent } = _a, props = __rest$1(_a, ["className", "isExpanded", "chipGroupContentRef", "clearAllFilters", "showClearFiltersButton", "clearFiltersButtonText", "collapseListedFiltersBreakpoint", "numberOfFilters", "numberOfFiltersText", "customChipGroupContent"]);
-        const clearChipGroups = () => {
+        const _a = this.props, { className, isExpanded, labelGroupContentRef, clearAllFilters, showClearFiltersButton, clearFiltersButtonText, collapseListedFiltersBreakpoint, numberOfFilters, numberOfFiltersText, customLabelGroupContent } = _a, props = __rest$1(_a, ["className", "isExpanded", "labelGroupContentRef", "clearAllFilters", "showClearFiltersButton", "clearFiltersButtonText", "collapseListedFiltersBreakpoint", "numberOfFilters", "numberOfFiltersText", "customLabelGroupContent"]);
+        const clearLabelGroups = () => {
             clearAllFilters();
         };
         let collapseListedFilters = false;
@@ -9546,17 +9561,19 @@ class ToolbarChipGroupContent extends React.Component {
                 (canUseDOM ? window.innerWidth : 1200) < globalBreakpoints[collapseListedFiltersBreakpoint];
         }
         const isHidden = numberOfFilters === 0 || isExpanded;
-        return (React.createElement("div", Object.assign({ className: css(styles$4.toolbarContent, isHidden && styles$4.modifiers.hidden, className) }, ((numberOfFilters === 0 || isExpanded) && { hidden: true }), { ref: chipGroupContentRef }, props),
+        const showNumberOfFilters = collapseListedFilters && numberOfFilters > 0 && !isExpanded;
+        const showDefaultClearFilter = showClearFiltersButton && !isExpanded && !customLabelGroupContent;
+        return (React.createElement("div", Object.assign({ className: css(styles$4.toolbarContent, isHidden && styles$4.modifiers.hidden, className) }, ((numberOfFilters === 0 || isExpanded) && { hidden: true }), { ref: labelGroupContentRef }, props),
             React.createElement(ToolbarGroup, Object.assign({ className: css(collapseListedFilters && styles$4.modifiers.hidden) }, (collapseListedFilters && { hidden: true }), (collapseListedFilters && { 'aria-hidden': true }))),
-            collapseListedFilters && numberOfFilters > 0 && !isExpanded && (React.createElement(ToolbarGroup, null,
-                React.createElement(ToolbarItem, null, numberOfFiltersText(numberOfFilters)))),
-            showClearFiltersButton && !isExpanded && !customChipGroupContent && (React.createElement(ToolbarItem, null,
-                React.createElement(Button, { variant: "link", onClick: clearChipGroups, isInline: true }, clearFiltersButtonText))),
-            customChipGroupContent && customChipGroupContent));
+            (showNumberOfFilters || showDefaultClearFilter || customLabelGroupContent) && (React.createElement(ToolbarGroup, { variant: "action-group-inline" },
+                showNumberOfFilters && React.createElement(ToolbarItem, null, numberOfFiltersText(numberOfFilters)),
+                showDefaultClearFilter && (React.createElement(ToolbarItem, null,
+                    React.createElement(Button, { variant: "link", onClick: clearLabelGroups, isInline: true }, clearFiltersButtonText))),
+                customLabelGroupContent && customLabelGroupContent))));
     }
 }
-ToolbarChipGroupContent.displayName = 'ToolbarChipGroupContent';
-ToolbarChipGroupContent.defaultProps = {
+ToolbarLabelGroupContent.displayName = 'ToolbarLabelGroupContent';
+ToolbarLabelGroupContent.defaultProps = {
     clearFiltersButtonText: 'Clear all filters',
     collapseListedFiltersBreakpoint: 'lg',
     numberOfFiltersText: (numberOfFilters) => `${numberOfFilters} filters applied`
@@ -9572,7 +9589,7 @@ var ToolbarColorVariant;
 class Toolbar extends React.Component {
     constructor() {
         super(...arguments);
-        this.chipGroupContentRef = React.createRef();
+        this.labelGroupContentRef = React.createRef();
         this.staticFilterInfo = {};
         this.state = {
             isManagedToggleExpanded: false,
@@ -9604,27 +9621,27 @@ class Toolbar extends React.Component {
         };
         this.getNumberOfFilters = () => Object.values(this.state.filterInfo).reduce((acc, cur) => acc + cur, 0);
         this.renderToolbar = (randomId) => {
-            const _a = this.props, { clearAllFilters, clearFiltersButtonText, collapseListedFiltersBreakpoint, isExpanded: isExpandedProp, toggleIsExpanded, className, children, isFullHeight, isStatic, inset, usePageInsets, isSticky, ouiaId, numberOfFiltersText, customChipGroupContent, colorVariant = ToolbarColorVariant.default } = _a, props = __rest$1(_a, ["clearAllFilters", "clearFiltersButtonText", "collapseListedFiltersBreakpoint", "isExpanded", "toggleIsExpanded", "className", "children", "isFullHeight", "isStatic", "inset", "usePageInsets", "isSticky", "ouiaId", "numberOfFiltersText", "customChipGroupContent", "colorVariant"]);
+            const _a = this.props, { clearAllFilters, clearFiltersButtonText, collapseListedFiltersBreakpoint, isExpanded: isExpandedProp, toggleIsExpanded, className, children, isFullHeight, isStatic, inset, isSticky, ouiaId, numberOfFiltersText, customLabelGroupContent, colorVariant = ToolbarColorVariant.default } = _a, props = __rest$1(_a, ["clearAllFilters", "clearFiltersButtonText", "collapseListedFiltersBreakpoint", "isExpanded", "toggleIsExpanded", "className", "children", "isFullHeight", "isStatic", "inset", "isSticky", "ouiaId", "numberOfFiltersText", "customLabelGroupContent", "colorVariant"]);
             const { isManagedToggleExpanded } = this.state;
             const isToggleManaged = this.isToggleManaged();
             const isExpanded = isToggleManaged ? isManagedToggleExpanded : isExpandedProp;
             const numberOfFilters = this.getNumberOfFilters();
             const showClearFiltersButton = numberOfFilters > 0;
-            return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbar, isFullHeight && styles$4.modifiers.fullHeight, isStatic && styles$4.modifiers.static, usePageInsets && styles$4.modifiers.pageInsets, isSticky && styles$4.modifiers.sticky, formatBreakpointMods(inset, styles$4, '', getBreakpoint(width)), colorVariant === 'primary' && styles$4.modifiers.primary, colorVariant === 'secondary' && styles$4.modifiers.secondary, colorVariant === 'no-background' && styles$4.modifiers.noBackground, className), id: randomId }, getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId), props),
+            return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbar, isFullHeight && styles$4.modifiers.fullHeight, isStatic && styles$4.modifiers.static, isSticky && styles$4.modifiers.sticky, formatBreakpointMods(inset, styles$4, '', getBreakpoint(width)), colorVariant === 'primary' && styles$4.modifiers.primary, colorVariant === 'secondary' && styles$4.modifiers.secondary, colorVariant === 'no-background' && styles$4.modifiers.noBackground, className), id: randomId }, getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId), props),
                 React.createElement(ToolbarContext.Provider, { value: {
                         isExpanded,
                         toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded,
-                        chipGroupContentRef: this.chipGroupContentRef,
+                        labelGroupContentRef: this.labelGroupContentRef,
                         updateNumberFilters: this.updateNumberFilters,
                         numberOfFilters,
                         clearAllFilters,
                         clearFiltersButtonText,
                         showClearFiltersButton,
                         toolbarId: randomId,
-                        customChipGroupContent
+                        customLabelGroupContent
                     } },
                     children,
-                    React.createElement(ToolbarChipGroupContent, { isExpanded: isExpanded, chipGroupContentRef: this.chipGroupContentRef, clearAllFilters: clearAllFilters, showClearFiltersButton: showClearFiltersButton, clearFiltersButtonText: clearFiltersButtonText, numberOfFilters: numberOfFilters, numberOfFiltersText: numberOfFiltersText, collapseListedFiltersBreakpoint: collapseListedFiltersBreakpoint, customChipGroupContent: customChipGroupContent }))))));
+                    React.createElement(ToolbarLabelGroupContent, { isExpanded: isExpanded, labelGroupContentRef: this.labelGroupContentRef, clearAllFilters: clearAllFilters, showClearFiltersButton: showClearFiltersButton, clearFiltersButtonText: clearFiltersButtonText, numberOfFilters: numberOfFilters, numberOfFiltersText: numberOfFiltersText, collapseListedFiltersBreakpoint: collapseListedFiltersBreakpoint, customLabelGroupContent: customLabelGroupContent }))))));
         };
     }
     componentDidMount() {
@@ -9647,23 +9664,23 @@ class ToolbarContent extends React.Component {
     constructor() {
         super(...arguments);
         this.expandableContentRef = React.createRef();
-        this.chipContainerRef = React.createRef();
+        this.labelContainerRef = React.createRef();
     }
     render() {
-        const _a = this.props, { className, children, isExpanded, toolbarId, visibility, alignItems, clearAllFilters, showClearFiltersButton, clearFiltersButtonText, alignSelf } = _a, props = __rest$1(_a, ["className", "children", "isExpanded", "toolbarId", "visibility", "alignItems", "clearAllFilters", "showClearFiltersButton", "clearFiltersButtonText", "alignSelf"]);
+        const _a = this.props, { className, children, isExpanded, toolbarId, visibility, alignItems, clearAllFilters, showClearFiltersButton, clearFiltersButtonText } = _a, props = __rest$1(_a, ["className", "children", "isExpanded", "toolbarId", "visibility", "alignItems", "clearAllFilters", "showClearFiltersButton", "clearFiltersButtonText"]);
         return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbarContent, formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), className), ref: this.expandableContentRef }, props),
             React.createElement(ToolbarContext.Consumer, null, ({ clearAllFilters: clearAllFiltersContext, clearFiltersButtonText: clearFiltersButtonContext, showClearFiltersButton: showClearFiltersButtonContext, isExpanded: isExpandedContext, toolbarId: toolbarIdContext }) => {
                 const expandableContentId = `${toolbarId || toolbarIdContext}-expandable-content-${ToolbarContent.currentId++}`;
                 return (React.createElement(ToolbarContentContext.Provider, { value: {
                         expandableContentRef: this.expandableContentRef,
                         expandableContentId,
-                        chipContainerRef: this.chipContainerRef,
+                        labelContainerRef: this.labelContainerRef,
                         isExpanded: isExpanded || isExpandedContext,
                         clearAllFilters: clearAllFilters || clearAllFiltersContext,
                         clearFiltersButtonText: clearFiltersButtonText || clearFiltersButtonContext,
                         showClearFiltersButton: showClearFiltersButton || showClearFiltersButtonContext
                     } },
-                    React.createElement("div", { className: css(styles$4.toolbarContentSection, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline, alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'start' && styles$4.modifiers.alignSelfStart, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline) }, children)));
+                    React.createElement("div", { className: css(styles$4.toolbarContentSection, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline) }, children)));
             })))));
     }
 }
@@ -9682,6 +9699,7 @@ var styles$3 = {
     "finished": "pf-m-finished",
     "expanded": "pf-m-expanded",
     "danger": "pf-m-danger",
+    "success": "pf-m-success",
     "current": "pf-m-current",
     "expandable": "pf-m-expandable",
     "disabled": "pf-m-disabled",
@@ -9720,6 +9738,7 @@ var WizardNavItemStatus;
 (function (WizardNavItemStatus) {
     WizardNavItemStatus["Default"] = "default";
     WizardNavItemStatus["Error"] = "error";
+    WizardNavItemStatus["Success"] = "success";
 })(WizardNavItemStatus || (WizardNavItemStatus = {}));
 var WizardStepChangeScope;
 (function (WizardStepChangeScope) {
@@ -9728,9 +9747,10 @@ var WizardStepChangeScope;
     WizardStepChangeScope["Nav"] = "nav";
 })(WizardStepChangeScope || (WizardStepChangeScope = {}));
 
-const WizardNavItem = ({ children = null, content = '', isCurrent = false, isDisabled = false, 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-isVisited = false, stepIndex, onClick, component: NavItemComponent = 'button', href, isExpandable = false, id, status = 'default', target, ouiaId, ouiaSafe = true }) => {
+const WizardNavItem = (_a) => {
+    var { children = null, content = '', isCurrent = false, isDisabled = false, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    isVisited = false, stepIndex, onClick, component: NavItemComponent = 'button', href, isExpandable = false, id, status = 'default', target, ouiaId, ouiaSafe = true, className } = _a, props = __rest$1(_a, ["children", "content", "isCurrent", "isDisabled", "isVisited", "stepIndex", "onClick", "component", "href", "isExpandable", "id", "status", "target", "ouiaId", "ouiaSafe", "className"]);
     const [isExpanded, setIsExpanded] = React.useState(false);
     const ouiaProps = useOUIAProps(WizardNavItem.displayName, ouiaId, ouiaSafe);
     React.useEffect(() => {
@@ -9740,19 +9760,20 @@ isVisited = false, stepIndex, onClick, component: NavItemComponent = 'button', h
         // eslint-disable-next-line no-console
         console.error('WizardNavItem: When using an anchor, please provide an href');
     }
-    return (React.createElement("li", { className: css(styles$3.wizardNavItem, isExpandable && styles$3.modifiers.expandable, isExpandable && isExpanded && styles$3.modifiers.expanded) },
+    return (React.createElement("li", Object.assign({ className: css(styles$3.wizardNavItem, isExpandable && styles$3.modifiers.expandable, isExpandable && isExpanded && styles$3.modifiers.expanded, className) }, props),
         React.createElement(NavItemComponent, Object.assign({}, (NavItemComponent === 'a'
             ? { tabIndex: isDisabled ? -1 : undefined, href, target }
             : { disabled: isDisabled }), (id && { id: id.toString() }), { onClick: (e) => {
                 e.stopPropagation();
                 isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onClick === null || onClick === void 0 ? void 0 : onClick(e, stepIndex);
-            }, className: css(styles$3.wizardNavLink, isCurrent && styles$3.modifiers.current, isDisabled && styles$3.modifiers.disabled, status === WizardNavItemStatus.Error && styles$3.modifiers.danger), "aria-disabled": isDisabled ? true : null, "aria-current": isCurrent && !children ? 'step' : false }, (isExpandable && { 'aria-expanded': isExpanded }), ouiaProps),
-            status === WizardNavItemStatus.Error && (React.createElement(React.Fragment, null,
-                React.createElement("span", { className: "pf-v5-screen-reader" },
+            }, className: css(styles$3.wizardNavLink, isCurrent && styles$3.modifiers.current, isDisabled && styles$3.modifiers.disabled, status === WizardNavItemStatus.Error && styles$3.modifiers.danger, status === WizardNavItemStatus.Success && styles$3.modifiers.success), "aria-disabled": isDisabled ? true : null, "aria-current": isCurrent && !children ? 'step' : false }, (isExpandable && { 'aria-expanded': isExpanded }), ouiaProps),
+            status !== WizardNavItemStatus.Default && (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: "pf-v6-screen-reader" },
                     ", ",
                     status),
                 React.createElement("span", { className: css(styles$3.wizardNavLinkStatusIcon) },
-                    React.createElement(ExclamationCircleIcon, null)))),
+                    status === WizardNavItemStatus.Error && React.createElement(ExclamationCircleIcon, null),
+                    status === WizardNavItemStatus.Success && React.createElement(CheckCircleIcon$1, null)))),
             React.createElement("span", { className: css(styles$3.wizardNavLinkMain) }, isExpandable ? (React.createElement(React.Fragment, null,
                 React.createElement("span", { className: css(styles$3.wizardNavLinkText) }, content),
                 React.createElement("span", { className: css(styles$3.wizardNavLinkToggle) },
@@ -10365,13 +10386,6 @@ const Gallery = (_a) => {
 };
 Gallery.displayName = 'Gallery';
 
-const GalleryItem = (_a) => {
-    var { children = null, component = 'div' } = _a, props = __rest$1(_a, ["children", "component"]);
-    const Component = component;
-    return React.createElement(Component, Object.assign({}, props), children);
-};
-GalleryItem.displayName = 'GalleryItem';
-
 var styles = {
   "modifiers": {
     "fill": "pf-m-fill",
@@ -11177,9 +11191,7 @@ const useValuesForQuickStartContext = (value = {}) => {
         setAllQuickStartStates((qs) => (Object.assign(Object.assign({}, qs), { [activeQuickStartID]: updatedQuickStart })));
     }, [allQuickStartStates, activeQuickStartID, setAllQuickStartStates]);
     const activeQuickStartState = (_b = allQuickStartStates === null || allQuickStartStates === void 0 ? void 0 : allQuickStartStates[activeQuickStartID]) !== null && _b !== void 0 ? _b : {};
-    const getQuickStartForId = useCallback((id) => allQuickStartStates[id], [
-        allQuickStartStates,
-    ]);
+    const getQuickStartForId = useCallback((id) => allQuickStartStates[id], [allQuickStartStates]);
     return {
         allQuickStarts: quickStarts,
         setAllQuickStarts: updateAllQuickStarts,
@@ -11258,66 +11270,6 @@ const CamelCaseWrap = ({ value, dataTest }) => {
     return rendered;
 };
 
-class CatalogTile extends React.Component {
-    constructor(props) {
-        super(props);
-        this.handleClick = (e) => {
-            const { onClick, href } = this.props;
-            if (!href) {
-                e.preventDefault();
-            }
-            if (onClick) {
-                onClick(e);
-            }
-        };
-        this.renderBadges = (badges) => {
-            if (!badges || !badges.length) {
-                return null;
-            }
-            return (React.createElement("div", { className: "catalog-tile-pf-badge-container" }, badges.map((badge, index) => (React.createElement("span", { key: `badge-${index}` }, badge)))));
-        };
-        this.generatedId = getUniqueId('pf-catalog-tile');
-    }
-    render() {
-        const _a = this.props, { id, className, featured, onClick, href, icon, iconImg, iconAlt, iconClass, badges, title, vendor, description, footer, 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        ref, children } = _a, props = __rest(_a, ["id", "className", "featured", "onClick", "href", "icon", "iconImg", "iconAlt", "iconClass", "badges", "title", "vendor", "description", "footer", "ref", "children"]);
-        return (React.createElement(Card, Object.assign({ component: href ? 'a' : 'div', id: id || this.generatedId, href: href || '#', className: css('catalog-tile-pf', { featured }, className), variant: featured ? 'secondary' : 'default', isClickable: !!onClick }, props),
-            (badges.length > 0 || iconImg || iconClass || icon || onClick) && (React.createElement(CardHeader, { actions: { actions: badges.length > 0 && this.renderBadges(badges), hasNoOffset: true }, selectableActions: onClick && {
-                    selectableActionId: id + '-input',
-                    onClickAction: (e) => this.handleClick(e),
-                    selectableActionAriaLabelledby: id
-                } },
-                iconImg && React.createElement("img", { className: "catalog-tile-pf-icon", src: iconImg, alt: iconAlt }),
-                !iconImg && (iconClass || icon) && React.createElement("span", { className: `catalog-tile-pf-icon ${iconClass}` }, icon))),
-            React.createElement(CardTitle, { className: "catalog-tile-pf-header" },
-                React.createElement("div", { className: "catalog-tile-pf-title" }, title),
-                vendor && React.createElement("div", { className: "catalog-tile-pf-subtitle" }, vendor)),
-            (description || children) && (React.createElement(CardBody, { className: "catalog-tile-pf-body" },
-                description && (React.createElement("div", { className: "catalog-tile-pf-description" },
-                    React.createElement("span", { className: css({ 'has-footer': footer }) }, description))),
-                children)),
-            footer && React.createElement(CardFooter, { className: "catalog-tile-pf-footer" }, footer)));
-    }
-}
-CatalogTile.displayName = 'CatalogTile';
-CatalogTile.defaultProps = {
-    id: null,
-    className: '',
-    featured: false,
-    onClick: null,
-    href: null,
-    iconImg: null,
-    iconAlt: '',
-    iconClass: '',
-    icon: null,
-    badges: [],
-    vendor: null,
-    description: null,
-    footer: null,
-    children: null
-};
-
 var rocketIcon = createCommonjsModule(function (module, exports) {
 exports.__esModule = true;
 exports.RocketIconConfig = {
@@ -11467,44 +11419,6 @@ var Shadows;
     Shadows["top"] = "top";
     Shadows["bottom"] = "bottom";
 })(Shadows || (Shadows = {}));
-const useScrollShadows = (node) => {
-    const [shadows, setShadows] = React.useState(Shadows.none);
-    const computeShadows = React.useCallback(() => {
-        if (node) {
-            const { scrollTop, clientHeight, scrollHeight } = node;
-            const top = scrollTop !== 0;
-            const bottom = scrollTop + clientHeight < scrollHeight;
-            if (top && bottom) {
-                setShadows(Shadows.both);
-            }
-            else if (top) {
-                setShadows(Shadows.top);
-            }
-            else if (bottom) {
-                setShadows(Shadows.bottom);
-            }
-            else {
-                setShadows(Shadows.none);
-            }
-        }
-    }, [node]);
-    // recompute when the scroll container changes in size
-    useResizeObserver(computeShadows, node);
-    React.useEffect(() => {
-        if (node) {
-            // compute initial shadows
-            computeShadows();
-            // listen for scroll events
-            node.addEventListener('scroll', computeShadows);
-        }
-        return () => {
-            if (node) {
-                node.removeEventListener('scroll', computeShadows);
-            }
-        };
-    }, [node, computeShadows]);
-    return shadows;
-};
 
 const useBoundingClientRect = (targetElement) => {
     const [clientRect, setClientRect] = React.useState(() => targetElement ? targetElement.getBoundingClientRect() : null);
@@ -26066,6 +25980,7 @@ const useInlineCopyClipboardShowdownExtension = () => {
     }), [getResource]);
 };
 
+/* eslint-disable max-len */
 const useMultilineCopyClipboardShowdownExtension = () => {
     const { getResource } = React.useContext(QuickStartContext);
     return React.useMemo(() => ({
@@ -26086,10 +26001,7 @@ const useMultilineCopyClipboardShowdownExtension = () => {
                 </div>
               </div>
               <div class="pf-v6-c-code-block__content">
-                <pre class="pf-v6-c-code-block__pre pfext-code-block__pre">
-                  <code class="pf-v6-c-code-block__code" 
-                    ${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code>
-                </pre>
+                <pre class="pf-v6-c-code-block__pre pfext-code-block__pre"><code class="pf-v6-c-code-block__code"${MARKDOWN_SNIPPET_ID}="${groupId}">${group.trim()}</code></pre>
               </div>
             </div>`;
         },
@@ -31197,16 +31109,40 @@ const markdownConvert = (markdown, extensions) => {
     }
     DOMPurify.addHook('beforeSanitizeElements', function (node) {
         // nodeType 1 = element type
+        var _a;
         // transform anchor tags
         if (node.nodeType === 1 && node.nodeName.toLowerCase() === 'a') {
             node.setAttribute('rel', 'noopener noreferrer');
             return node;
         }
-        // add PF class to ul and ol lists
-        if (node.nodeType === 1 &&
-            (node.nodeName.toLowerCase() === 'ul' || node.nodeName.toLowerCase() === 'ol')) {
-            node.setAttribute('class', 'pf-v6-c-list');
-            return node;
+        // add PF content classes
+        if (node.nodeType === 1) {
+            const contentElements = [
+                'ul',
+                'ol',
+                'p',
+                'li',
+                'hr',
+                'h1',
+                'h2',
+                'h3',
+                'h4',
+                'h5',
+                'h6',
+                'blockquote',
+                'pre',
+                'dl',
+                'dt',
+                'dd',
+                'table',
+            ];
+            if (contentElements.includes(node.nodeName.toLowerCase())) {
+                // don't overwrite elements already being styled by PatternFly
+                if (!((_a = node.getAttribute('class')) === null || _a === void 0 ? void 0 : _a.includes('pf-v6-c-'))) {
+                    node.setAttribute('class', `pf-v6-c-content--${node.nodeName.toLowerCase()}`);
+                    return node;
+                }
+            }
         }
     });
     // Add a hook to make all links open a new window
@@ -31274,7 +31210,7 @@ const RenderExtension = ({ renderExtension, selector, markup, docContext, }) =>
 };
 const InlineMarkdownView = ({ markup, isEmpty, renderExtension, className, }) => {
     const id = React.useMemo(() => uniqueId('markdown'), []);
-    return (React.createElement("div", { className: css('pfext-markdown-view', { 'is-empty': isEmpty }, className), id: id },
+    return (React.createElement("div", { className: css({ 'is-empty': isEmpty }, className), id: id },
         React.createElement("div", { dangerouslySetInnerHTML: { __html: markup } }),
         renderExtension && (React.createElement(RenderExtension, { renderExtension: renderExtension, selector: `#${id}`, markup: markup }))));
 };
@@ -31346,7 +31282,6 @@ const SELECTOR_ID = `[\\w-]+`;
 // [linkLabel]{{action id}}
 const HIGHLIGHT_REGEXP = new RegExp(`\\[(${LINK_LABEL})]{{(${HIGHLIGHT_ACTIONS.join('|')}) (${SELECTOR_ID})}}`, 'g');
 
-const removeParagraphWrap = (markdown) => markdown.replace(/^<p>|<\/p>$/g, '');
 const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const { markdown } = React.useContext(QuickStartContext);
     const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
@@ -31398,7 +31333,7 @@ var AdmonitionType;
 })(AdmonitionType || (AdmonitionType = {}));
 const admonitionToAlertVariantMap = {
     [AdmonitionType.NOTE]: { variant: 'info' },
-    [AdmonitionType.TIP]: { variant: 'default', customIcon: React.createElement(LightbulbIcon, null) },
+    [AdmonitionType.TIP]: { variant: 'custom', customIcon: React.createElement(LightbulbIcon, null) },
     [AdmonitionType.IMPORTANT]: { variant: 'danger' },
     [AdmonitionType.CAUTION]: { variant: 'warning', customIcon: React.createElement(FireIcon, null) },
     [AdmonitionType.WARNING]: { variant: 'warning' },
@@ -31414,9 +31349,8 @@ React.useMemo(() => ({
         }
         admonitionType = admonitionType.toUpperCase();
         const { variant, customIcon } = admonitionToAlertVariantMap[admonitionType];
-        const style = admonitionType === AdmonitionType.CAUTION ? { backgroundColor: '#ec7a0915' } : {};
         const mdContent = React.createElement(QuickStartMarkdownView, { content: content });
-        const pfAlert = (React.createElement(Alert, { variant: variant, customIcon: customIcon && customIcon, isInline: true, title: admonitionType, className: "pfext-markdown-admonition", style: style }, mdContent));
+        const pfAlert = (React.createElement(Alert, Object.assign({ variant: variant }, (customIcon && { customIcon }), { isInline: true, title: admonitionType, className: "pfext-markdown-admonition" }), mdContent));
         return removeTemplateWhitespace(renderToStaticMarkup(pfAlert));
     },
 }), []);
@@ -31573,42 +31507,39 @@ const StatusIcon = ({ status }) => (React.createElement(Status, { status: status
 const QuickStartTileDescription = ({ description, prerequisites, }) => {
     const { getResource } = React.useContext(QuickStartContext);
     const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
+    const buttonRef = React.useRef(null);
     return (React.createElement(React.Fragment, null,
-        React.createElement(QuickStartMarkdownView, { content: description, className: "pfext-quick-start-tile-description" }),
-        (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React.createElement("div", { className: "pfext-quick-start-tile-prerequisites" },
-            React.createElement(Text, { component: TextVariants.h5, className: "pfext-quick-start-tile-prerequisites__text" },
+        React.createElement(QuickStartMarkdownView, { content: description }),
+        (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React.createElement(Flex, { spaceItems: { default: 'spaceItemsSm' } },
+            React.createElement("h5", null,
                 getResource('Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length),
                 ' '),
-            React.createElement(Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), className: "pfext-quick-start__base", bodyContent: React.createElement("div", { className: "pfext-popover__base" },
-                    React.createElement(TextList, { "aria-label": getResource('Prerequisites'), className: "pfext-quick-start-tile-prerequisites-list" }, prereqs.map((prerequisite, index) => (
+            React.createElement(Button, { variant: "link", isInline: true, "data-testid": "qs-card-prereqs", ref: buttonRef, onClick: (e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                }, "aria-label": getResource('Show prerequisites') },
+                React.createElement(InfoCircleIcon, null)),
+            React.createElement(Popover, { "aria-label": getResource('Prerequisites'), headerContent: getResource('Prerequisites'), triggerRef: buttonRef, bodyContent: React.createElement("div", null,
+                    React.createElement("ul", { "aria-label": getResource('Prerequisites') }, prereqs.map((prerequisite, index) => (
                     // eslint-disable-next-line react/no-array-index-key
-                    React.createElement(TextListItem, { key: index },
-                        React.createElement(QuickStartMarkdownView, { content: prerequisite })))))) },
-                React.createElement(Button, { variant: "link", isInline: true, className: "pfext-quick-start-tile-prerequisites__icon", "data-testid": "qs-card-prereqs", onClick: (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                    }, "aria-label": getResource('Show prerequisites') },
-                    React.createElement(InfoCircleIcon, null)))))));
+                    React.createElement("li", { key: index },
+                        React.createElement(QuickStartMarkdownView, { content: prerequisite })))))) })))));
 };
 
-const QuickStartTileFooter = ({ quickStartId, status, totalTasks, }) => {
+const QuickStartTileFooter = ({ quickStartId, status, totalTasks, onClickContinue, }) => {
     const { getResource } = React.useContext(QuickStartContext);
     const { activeQuickStartID, startQuickStart, restartQuickStart } = React.useContext(QuickStartContext);
-    const start = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
+    const start = React.useCallback(() => {
         startQuickStart(quickStartId, totalTasks);
     }, [quickStartId, startQuickStart, totalTasks]);
-    const restart = React.useCallback((e) => {
-        e.preventDefault();
-        e.stopPropagation();
+    const restart = React.useCallback(() => {
         restartQuickStart(quickStartId, totalTasks);
     }, [quickStartId, restartQuickStart, totalTasks]);
     return (React.createElement(Flex, { justifyContent: { default: 'justifyContentSpaceBetween' } },
         status === QuickStartStatus.NOT_STARTED && (React.createElement(FlexItem, null,
             React.createElement(Button, { onClick: start, variant: "link", isInline: true, "data-testid": "qs-card-notStarted-start", id: `${quickStartId}-start`, "aria-labelledby": `${quickStartId}-start ${quickStartId}` }, getResource('Start')))),
         status === QuickStartStatus.IN_PROGRESS && activeQuickStartID !== quickStartId && (React.createElement(FlexItem, null,
-            React.createElement(Button, { variant: "link", isInline: true, "data-testid": "qs-card-inProgress-resume", id: `${quickStartId}-continue`, "aria-labelledby": `${quickStartId}-continue ${quickStartId}` }, getResource('Continue')))),
+            React.createElement(Button, { variant: "link", onClick: onClickContinue, isInline: true, "data-testid": "qs-card-inProgress-resume", id: `${quickStartId}-continue`, "aria-labelledby": `${quickStartId}-continue ${quickStartId}` }, getResource('Continue')))),
         status === QuickStartStatus.COMPLETE && (React.createElement(FlexItem, null,
             React.createElement(Button, { onClick: restart, variant: "link", isInline: true, "data-testid": "qs-card-complete-restart", id: `${quickStartId}-restart`, "aria-labelledby": `${quickStartId}-restart ${quickStartId}` }, getResource('Restart')))),
         status === QuickStartStatus.IN_PROGRESS && (React.createElement(FlexItem, null,
@@ -31638,21 +31569,12 @@ const QuickStartTileFooterExternal = ({ link, quickStartId, }) => {
             React.createElement(Button, { component: "a", href: href, target: "_blank", rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: React.createElement(ExternalLinkAltIcon, null), iconPosition: "right", id: quickStartId, "aria-labelledby": `${quickStartId}-external ${quickStartId}` }, text || href))));
 };
 
-var outlinedClockIcon = createCommonjsModule(function (module, exports) {
-exports.__esModule = true;
-exports.OutlinedClockIconConfig = {
-  name: 'OutlinedClockIcon',
-  height: 512,
-  width: 512,
-  svgPath: 'M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z',
-  yOffset: 0,
-  xOffset: 0,
+const QuickStartTileHeader = ({ name, quickStartId, onSelect, }) => {
+    return (React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
+        React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
+            React.createElement(Button, { variant: "link", isInline: true, onClick: onSelect },
+                React.createElement(QuickStartMarkdownView, { content: name })))));
 };
-exports.OutlinedClockIcon = createIcon_1.createIcon(exports.OutlinedClockIconConfig);
-exports["default"] = exports.OutlinedClockIcon;
-});
-
-var OutlinedClockIcon = /*@__PURE__*/getDefaultExportFromCjs(outlinedClockIcon);
 
 var outlinedBookmarkIcon = createCommonjsModule(function (module, exports) {
 exports.__esModule = true;
@@ -31670,42 +31592,52 @@ exports["default"] = exports.OutlinedBookmarkIcon;
 
 var OutlinedBookmarkIcon = /*@__PURE__*/getDefaultExportFromCjs(outlinedBookmarkIcon);
 
-const statusColorMap = {
-    [QuickStartStatus.COMPLETE]: 'green',
-    [QuickStartStatus.IN_PROGRESS]: 'purple',
-    [QuickStartStatus.NOT_STARTED]: 'grey',
+var outlinedClockIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.OutlinedClockIconConfig = {
+  name: 'OutlinedClockIcon',
+  height: 512,
+  width: 512,
+  svgPath: 'M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm61.8-104.4l-84.9-61.7c-3.1-2.3-4.9-5.9-4.9-9.7V116c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v141.7l66.8 48.6c5.4 3.9 6.5 11.4 2.6 16.8L334.6 349c-3.9 5.3-11.4 6.5-16.8 2.6z',
+  yOffset: 0,
+  xOffset: 0,
 };
-const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, action, }) => {
-    const { getResource } = React.useContext(QuickStartContext);
+exports.OutlinedClockIcon = createIcon_1.createIcon(exports.OutlinedClockIconConfig);
+exports["default"] = exports.OutlinedClockIcon;
+});
+
+var OutlinedClockIcon = /*@__PURE__*/getDefaultExportFromCjs(outlinedClockIcon);
+
+const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, action, }) => {
+    const { metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
+    const { setActiveQuickStart, footer, getResource } = React.useContext(QuickStartContext);
+    const statusColorMap = {
+        [QuickStartStatus.COMPLETE]: 'green',
+        [QuickStartStatus.IN_PROGRESS]: 'purple',
+        [QuickStartStatus.NOT_STARTED]: 'grey',
+    };
     const statusLocaleMap = {
         [QuickStartStatus.COMPLETE]: getResource('Complete'),
         [QuickStartStatus.IN_PROGRESS]: getResource('In progress'),
         [QuickStartStatus.NOT_STARTED]: getResource('Not started'),
     };
-    const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon;
-    return (React.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React.createElement(Flex, { flexWrap: { default: 'nowrap' } },
-            React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
-                React.createElement(QuickStartMarkdownView, { content: name })),
-            action && (React.createElement(Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps)))),
-        React.createElement("div", { className: "pfext-quick-start-tile-header__status" },
-            type && (React.createElement(Label, { className: "pfext-quick-start-tile-header--margin", color: type.color }, type.text)),
-            duration && (React.createElement(Label, { variant: "outline", "data-test": "duration", icon: React.createElement(OutlinedClockIcon, null), className: "pfext-quick-start-tile-header--margin" }, getResource('{{duration, number}} minutes', duration).replace('{{duration, number}}', duration))),
-            status !== QuickStartStatus.NOT_STARTED && (React.createElement(Label, { variant: "outline", color: statusColorMap[status], icon: React.createElement(StatusIcon, { status: status }), "data-test": "status" }, statusLocaleMap[status])))));
-};
-
-const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, action, }) => {
-    const { metadata: { name: id }, spec: { icon, tasks, displayName, description, durationMinutes, prerequisites, link, type }, } = quickStart;
-    const { setActiveQuickStart, footer } = React.useContext(QuickStartContext);
-    const ref = React.useRef(null);
     let quickStartIcon;
     if (typeof icon === 'object') {
-        quickStartIcon = React.createElement(Icon, { size: "xl" }, icon);
+        quickStartIcon = React.createElement(Icon, { size: "2xl" }, icon);
     }
     else {
-        quickStartIcon = (React.createElement(Icon, { size: "xl" },
-            React.createElement(FallbackImg, { className: "pfext-catalog-item-icon__img--large", src: icon, alt: "", fallback: React.createElement(RocketIcon, null) })));
+        quickStartIcon = (React.createElement(Icon, { size: "2xl" },
+            React.createElement(FallbackImg, { src: icon, alt: "", className: "pfext-catalog-item-icon__img", fallback: React.createElement(RocketIcon, null) })));
     }
+    const onSelect = () => {
+        if (!link) {
+            setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
+        }
+        else {
+            window.open(link.href, '_blank', 'noopener,noreferrer');
+        }
+        onClick();
+    };
     const footerComponent = React.useMemo(() => {
         if (footer && footer.show === false) {
             return null;
@@ -31713,52 +31645,44 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, act
         if (link) {
             return React.createElement(QuickStartTileFooterExternal, { link: link, quickStartId: id });
         }
-        return React.createElement(QuickStartTileFooter, { quickStartId: id, status: status, totalTasks: tasks === null || tasks === void 0 ? void 0 : tasks.length });
+        return (React.createElement(QuickStartTileFooter, { quickStartId: id, status: status, totalTasks: tasks === null || tasks === void 0 ? void 0 : tasks.length, onClickContinue: onSelect }));
     }, [footer, id, link, status, tasks === null || tasks === void 0 ? void 0 : tasks.length]);
-    const handleClick = (e) => {
-        var _a;
-        if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
-            if (!link) {
-                setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
-            }
-            onClick();
-        }
-    };
-    const linkProps = link
-        ? {
-            href: link.href,
-            target: '_blank',
-            rel: 'noreferrer',
-        }
-        : {};
-    return (React.createElement("div", { ref: ref, onClick: handleClick },
-        React.createElement(CatalogTile, Object.assign({ id: id + '-catalog-tile', style: {
-                cursor: 'pointer',
-            }, icon: quickStartIcon, className: "pfext-quick-start-tile", "data-testid": `qs-card-${camelize(displayName)}`, featured: isActive, title: React.createElement(QuickStartTileHeader, { name: displayName, status: status, duration: durationMinutes, type: type, quickStartId: id, action: action }), onKeyDown: (event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                    setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
-                    onClick();
-                }
-            } }, linkProps, { "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent, tabIndex: 0, 
-            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-            // @ts-ignore-next-line
-            isSelectableRaised: true }))));
+    const ActionIcon = (action === null || action === void 0 ? void 0 : action.icon) || OutlinedBookmarkIcon;
+    const additionalAction = action ? (React.createElement(Button, Object.assign({ "aria-label": action['aria-label'], icon: React.createElement(ActionIcon, null), variant: "plain", onClick: action.onClick }, action.buttonProps))) : undefined;
+    return (React.createElement(Card, Object.assign({ id: `${id}-catalog-tile`, style: { height: '100%' }, "data-testid": `qs-card-${camelize(displayName)}` }, (isActive && {
+        isClickable: true,
+        isSelectable: true,
+        isSelected: true,
+        isClicked: true,
+    })),
+        React.createElement(CardHeader, Object.assign({}, (action && {
+            actions: { actions: additionalAction },
+        })), quickStartIcon),
+        React.createElement(CardTitle, null,
+            React.createElement(QuickStartTileHeader, { name: displayName, onSelect: onSelect, quickStartId: id })),
+        React.createElement(CardBody, null,
+            React.createElement(Stack, { hasGutter: true },
+                React.createElement(Flex, { spaceItems: { default: 'spaceItemsSm' } },
+                    type && React.createElement(Label, { color: type.color }, type.text),
+                    durationMinutes && (React.createElement(Label, { variant: "outline", "data-test": "duration", icon: React.createElement(OutlinedClockIcon, null) }, getResource('{{duration, number}} minutes', durationMinutes).replace('{{duration, number}}', durationMinutes))),
+                    status !== QuickStartStatus.NOT_STARTED && (React.createElement(Label, { variant: "outline", color: statusColorMap[status], icon: React.createElement(StatusIcon, { status: status }), "data-test": "status" }, statusLocaleMap[status]))),
+                React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }))),
+        React.createElement(CardFooter, null, footerComponent)));
 };
 
 const QuickStartCatalog = ({ quickStarts }) => {
     const { activeQuickStartID, allQuickStartStates } = React.useContext(QuickStartContext);
-    return (React.createElement("div", { className: "pfext-page-layout__content" },
-        React.createElement(Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
+    return (React.createElement("div", null,
+        React.createElement(Gallery, { hasGutter: true }, quickStarts.map((quickStart, index) => {
             const { metadata: { name: id }, } = quickStart;
-            return (React.createElement(GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
-                React.createElement(QuickStartTile, { quickStart: quickStart, isActive: id === activeQuickStartID, status: getQuickStartStatus(allQuickStartStates, id) })));
+            return (React.createElement(QuickStartTile, { key: index, quickStart: quickStart, isActive: id === activeQuickStartID, status: getQuickStartStatus(allQuickStartStates, id) }));
         }))));
 };
 
 const QuickStartCatalogFilterSearch = (_a) => {
     var { searchInputText, handleTextChange } = _a, props = __rest(_a, ["searchInputText", "handleTextChange"]);
     const { getResource } = React.useContext(QuickStartContext);
-    return (React.createElement(ToolbarItem, { className: "pfext-quick-start-catalog-filter__input" },
+    return (React.createElement(ToolbarItem, null,
         React.createElement(SearchInput, Object.assign({ placeholder: getResource('Filter by keyword...'), value: searchInputText, onChange: (_ev, value) => handleTextChange(value), onClear: () => handleTextChange('') }, props))));
 };
 const QuickStartCatalogFilterSelect = (_a) => {
@@ -31773,7 +31697,7 @@ const QuickStartCatalogFilterSelect = (_a) => {
 };
 const QuickStartCatalogFilterCount = ({ quickStartsCount }) => {
     const { getResource } = React.useContext(QuickStartContext);
-    return (React.createElement(ToolbarItem, { className: "pfext-quick-start-catalog-filter__count", align: { default: 'alignEnd' } }, getResource('{{count, number}} item', quickStartsCount).replace('{{count, number}}', quickStartsCount)));
+    return (React.createElement(ToolbarItem, { align: { default: 'alignEnd' } }, getResource('{{count, number}} item', quickStartsCount).replace('{{count, number}}', quickStartsCount)));
 };
 const QuickStartCatalogFilterSearchWrapper = ({ onSearchInputChange = () => { } }) => {
     const { useQueryParams, filter, setFilter } = React.useContext(QuickStartContext);
@@ -31863,7 +31787,7 @@ const QuickStartCatalogFilterCountWrapper = ({ quickStartsCount }) => React.crea
 
 const QuickStartCatalogFilter = (_a) => {
     var { quickStartsCount, onSearchInputChange = () => { }, onStatusChange = () => { } } = _a, props = __rest(_a, ["quickStartsCount", "onSearchInputChange", "onStatusChange"]);
-    return (React.createElement(Toolbar, Object.assign({ usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, props),
+    return (React.createElement(Toolbar, Object.assign({}, props),
         React.createElement(ToolbarContent, null,
             React.createElement(QuickStartCatalogFilterSearchWrapper, { onSearchInputChange: onSearchInputChange }),
             React.createElement(QuickStartCatalogFilterStatusWrapper, { onStatusChange: onStatusChange }),
@@ -31939,28 +31863,29 @@ const QuickStartCatalogPage = ({ quickStarts, showFilter, sortFnc = (q1, q2) =>
     if (!allQuickStarts || allQuickStarts.length === 0) {
         return React.createElement(EmptyBox, { label: getResource('Quick Starts') });
     }
-    return (React.createElement("div", { className: "pfext-quick-start__base" },
-        showTitle && (React.createElement("div", { className: "pfext-page-layout__header" },
-            React.createElement(Text, { component: "h1", className: "pfext-page-layout__title", "data-test": "page-title" }, title || getResource('Quick Starts')),
-            hint && React.createElement("div", { className: "pfext-page-layout__hint" }, hint))),
-        showTitle && React.createElement(Divider, { component: "div" }),
-        showFilter && (React.createElement(React.Fragment, null,
-            React.createElement(QuickStartCatalogFilter, { quickStartsCount: filteredQuickStarts.length, onSearchInputChange: onSearchInputChange, onStatusChange: onStatusChange }),
-            React.createElement(Divider, { component: "div" }))),
-        React.createElement(React.Fragment, null, filteredQuickStarts.length === 0 ? (React.createElement(QuickStartCatalogEmptyState, { clearFilters: clearFilters })) : (React.createElement(QuickStartCatalog, { quickStarts: filteredQuickStarts })))));
+    return (React.createElement(React.Fragment, null,
+        (showTitle || showFilter) && (React.createElement(PageSection, { hasBodyWrapper: false },
+            showTitle && (React.createElement(React.Fragment, null,
+                React.createElement(Content, { component: "h1", "data-test": "page-title" }, title || getResource('Quick Starts')),
+                hint && React.createElement("div", null, hint))),
+            showTitle && React.createElement(Divider, { component: "div" }),
+            showFilter && (React.createElement(React.Fragment, null,
+                React.createElement(QuickStartCatalogFilter, { quickStartsCount: filteredQuickStarts.length, onSearchInputChange: onSearchInputChange, onStatusChange: onStatusChange }),
+                React.createElement(Divider, { component: "div" }))))),
+        React.createElement(PageSection, { hasBodyWrapper: false }, filteredQuickStarts.length === 0 ? (React.createElement(QuickStartCatalogEmptyState, { clearFilters: clearFilters })) : (React.createElement(QuickStartCatalog, { quickStarts: filteredQuickStarts })))));
 };
 
-const QuickStartCatalogHeader = ({ title, hint, }) => (React.createElement("div", { className: "pfext-page-layout__header" },
-    React.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
-    hint && React.createElement("div", { className: "pfext-page-layout__hint" }, hint)));
+const QuickStartCatalogHeader = ({ title, hint, }) => (React.createElement("div", null,
+    React.createElement(Title, { headingLevel: "h1", "data-pf-content": "true" }, title),
+    hint && React.createElement("div", null, hint)));
 
-const QuickStartCatalogSection = ({ children }) => (React.createElement("div", { className: "pfext-page-layout__content" }, children));
+const QuickStartCatalogSection = ({ children }) => (React.createElement("div", null, children));
 
-const QuickStartCatalogToolbar = ({ children }) => (React.createElement(Toolbar, { usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, children));
+const QuickStartCatalogToolbar = ({ children }) => (React.createElement(Toolbar, null, children));
 
 const QuickStartCloseModal = ({ isOpen, onConfirm, onCancel, }) => {
     const { getResource } = React.useContext(QuickStartContext);
-    return (React.createElement(Modal, { className: "pfext-quick-start-drawer__modal pfext-quick-start__base", isOpen: isOpen, variant: ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React.createElement(Flex, null,
+    return (React.createElement(Modal, { isOpen: isOpen, variant: ModalVariant.small, showClose: false, "data-test": "leave-quickstart", title: getResource('Leave quick start?'), footer: React.createElement(Flex, null,
             React.createElement(FlexItem, { align: { default: 'alignRight' } },
                 React.createElement(Button, { variant: "secondary", "data-test": "cancel button", onClick: onCancel }, getResource('Cancel'))),
             React.createElement(FlexItem, null,
@@ -31992,29 +31917,28 @@ const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, is
             titleRef.current.parentNode.focus();
         }
     }, [focusOnQuickStart, isActiveTask]);
-    css('pfext-quick-start-task-header__title', {
-        'pfext-quick-start-task-header__title-success': taskStatus === QuickStartTaskStatus.SUCCESS,
-        'pfext-quick-start-task-header__title-failed': taskStatus === (QuickStartTaskStatus.FAILED || QuickStartTaskStatus.VISITED),
-    });
-    // const notCompleted = taskStatus === QuickStartTaskStatus.VISITED;
-    // const skippedReview = taskStatus === QuickStartTaskStatus.REVIEW;
     const failedReview = taskStatus === QuickStartTaskStatus.FAILED;
-    // TODO: toned down when this is shown, investigate further when we should display it
-    // related: https://github.com/patternfly/patternfly-quickstarts/issues/104
     const tryAgain = failedReview && (React.createElement(React.Fragment, null,
         React.createElement("div", null),
         React.createElement("div", { className: "pfext-quick-start-task-header__tryagain" }, "Try the steps again.")));
     const content = (React.createElement("div", { ref: titleRef },
-        React.createElement(Title, { headingLevel: "h3" },
-            React.createElement("span", { dangerouslySetInnerHTML: { __html: removeParagraphWrap(markdownConvert(title)) } }),
-            isActiveTask && subtitle && (React.createElement("span", { "data-test-id": "quick-start-task-subtitle" },
+        React.createElement(Title, { headingLevel: "h3", size: size },
+            React.createElement("span", { className: "pfext-quick-start-task-header__title" }, title),
+            isActiveTask && subtitle && (React.createElement("span", null,
                 ' ',
-                React.createElement(Text, { component: TextVariants.small }, subtitle))),
+                React.createElement("span", { "data-test-id": "quick-start-task-subtitle", className: "pfext-quick-start-task-header__subtitle" }, subtitle))),
             tryAgain)));
-    return (React.createElement(WizardNavItem, { content: content, stepIndex: taskIndex, onClick: () => onTaskSelect(taskIndex - 1), component: "button", isCurrent: isActiveTask }, children));
+    let status = 'default';
+    if (taskStatus === QuickStartTaskStatus.FAILED) {
+        status = 'error';
+    }
+    else if (taskStatus === QuickStartTaskStatus.SUCCESS) {
+        status = 'success';
+    }
+    return (React.createElement(WizardNavItem, { content: content, stepIndex: taskIndex, onClick: () => onTaskSelect(taskIndex - 1), component: "button", isCurrent: isActiveTask, status: status }, children));
 };
 
-const QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => tasks.length > 0 ? (React.createElement(List, { className: "pf-v6-c-wizard__nav-list" }, tasks.map((task, index) => (React.createElement(QuickStartTaskHeader, { key: task.title, title: task.title, taskIndex: index + 1, size: "md", taskStatus: allTaskStatuses[index], onTaskSelect: onTaskSelect }))))) : null;
+const QuickStartTaskHeaderList = ({ tasks, allTaskStatuses, onTaskSelect, }) => (tasks === null || tasks === void 0 ? void 0 : tasks.length) > 0 ? (React.createElement("div", { className: "pf-v6-c-wizard__nav-list" }, tasks.map((task, index) => (React.createElement(QuickStartTaskHeader, { key: task.title, title: task.title, taskIndex: index + 1, size: "md", taskStatus: allTaskStatuses[index], onTaskSelect: onTaskSelect }))))) : null;
 
 const QuickStartConclusion = ({ tasks, conclusion, allTaskStatuses, nextQuickStarts, onQuickStartChange, onTaskSelect, }) => {
     const hasFailedTask = allTaskStatuses.includes(QuickStartTaskStatus.FAILED);
@@ -32029,10 +31953,7 @@ const QuickStartConclusion = ({ tasks, conclusion, allTaskStatuses, nextQuickSta
             nextQuickStarts.length > 0 &&
             nextQuickStarts.map((nextQuickStart, index) => {
                 var _a;
-                return (React.createElement(Button, { variant: "link", onClick: () => onQuickStartChange(nextQuickStart.metadata.name), isInline: true, isBlock: true, key: index },
-                    getResource('Start {{nextQSDisplayName}} quick start').replace('{{nextQSDisplayName}}', (_a = nextQuickStart === null || nextQuickStart === void 0 ? void 0 : nextQuickStart.spec) === null || _a === void 0 ? void 0 : _a.displayName),
-                    ' ',
-                    React.createElement(ArrowRightIcon, { style: { marginLeft: 'var(--pf-t--global--spacer--xs)', verticalAlign: 'middle' } })));
+                return (React.createElement(Button, { variant: "link", onClick: () => onQuickStartChange(nextQuickStart.metadata.name), isInline: true, icon: React.createElement(ArrowRightIcon, null), iconPosition: "end", isBlock: true, key: index, style: { marginTop: 'var(--pf-t--global--spacer--md' } }, getResource('Start {{nextQSDisplayName}} quick start').replace('{{nextQSDisplayName}}', (_a = nextQuickStart === null || nextQuickStart === void 0 ? void 0 : nextQuickStart.spec) === null || _a === void 0 ? void 0 : _a.displayName)));
             })));
 };
 
@@ -32040,15 +31961,14 @@ const QuickStartIntroduction = ({ tasks, introduction, allTaskStatuses, prerequi
     const { getResource } = React.useContext(QuickStartContext);
     const prereqs = prerequisites === null || prerequisites === void 0 ? void 0 : prerequisites.filter((p) => p);
     const [isPrereqsExpanded, setIsPrereqsExpanded] = React.useState(false);
-    const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React.createElement(ExpandableSection, { toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded), className: "pfext-quick-start-intro__prereq" },
-        React.createElement(List, { className: "pfext-quick-start-intro__prereq-list" }, prereqs.map((pr) => (React.createElement(ListItem, { key: pr, className: "pfext-quick-start-intro__prereq-list__item" },
-            React.createElement("span", { className: "pfext-quick-start-intro__prereq-list__item-content" },
-                React.createElement(QuickStartMarkdownView, { content: pr }))))))));
-    return (React.createElement(React.Fragment, null,
+    const prereqList = (prereqs === null || prereqs === void 0 ? void 0 : prereqs.length) > 0 && (React.createElement(ExpandableSection, { toggleText: getResource('View Prerequisites ({{totalPrereqs}})').replace('{{totalPrereqs}}', prereqs.length), onToggle: () => setIsPrereqsExpanded(!isPrereqsExpanded) },
+        React.createElement(List, null, prereqs.map((pr) => (React.createElement(ListItem, { key: pr },
+            React.createElement(QuickStartMarkdownView, { content: pr })))))));
+    return (React.createElement(Stack, { hasGutter: true },
         React.createElement(QuickStartMarkdownView, { content: introduction }),
         prereqList,
-        React.createElement("p", { style: { marginBottom: 'var(--pf-t--global--spacer--md)' } },
-            getResource('In this quick start, you will complete {{count, number}} task', tasks.length).replace('{{count, number}}', tasks.length),
+        React.createElement("p", null,
+            getResource('In this quick start, you will complete {{count, number}} task', tasks === null || tasks === void 0 ? void 0 : tasks.length).replace('{{count, number}}', (tasks === null || tasks === void 0 ? void 0 : tasks.length) || 0),
             ":"),
         React.createElement(QuickStartTaskHeaderList, { tasks: tasks, allTaskStatuses: allTaskStatuses, onTaskSelect: onTaskSelect })));
 };
@@ -32066,12 +31986,9 @@ const getAlertVariant = (status) => {
 const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
     const { instructions, failedTaskHelp: taskHelp } = review;
     const { getResource } = React.useContext(QuickStartContext);
-    const alertClassNames = css('pfext-quick-start-task-review', {
-        'pfext-quick-start-task-review--success': taskStatus === QuickStartTaskStatus.SUCCESS,
-        'pfext-quick-start-task-review--failed': taskStatus === QuickStartTaskStatus.FAILED,
-    });
-    const title = React.createElement("span", { className: alertClassNames }, getResource('Check your work'));
-    return (React.createElement(Alert, { className: "pfext-quick-start-task-review-alert", variant: getAlertVariant(taskStatus), title: title, isInline: true, role: "alert" },
+    return (React.createElement(Alert, { variant: getAlertVariant(taskStatus), title: getResource('Check your work'), isInline: true, role: "alert", style: {
+            marginBottom: 'var(--pf-t--global--spacer--md)',
+        } },
         React.createElement(QuickStartMarkdownView, { content: instructions }),
         React.createElement("span", { className: "pfext-quick-start-task-review__actions" },
             React.createElement(Radio, { id: "review-success", name: "review-success", "data-testid": "qs-drawer-check-yes", label: getResource('Yes'), className: "pfext-quick-start-task-review__radio", isChecked: taskStatus === QuickStartTaskStatus.SUCCESS, onChange: () => onTaskReview(QuickStartTaskStatus.SUCCESS) }),
@@ -32081,7 +31998,7 @@ const QuickStartTaskReview = ({ review, taskStatus, onTaskReview, }) => {
 
 const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onTaskSelect, }) => {
     const { getResource, alwaysShowTaskReview } = React.useContext(QuickStartContext);
-    return (React.createElement("div", { className: "pfext-quick-start-tasks__list" },
+    return (React.createElement("div", { className: "pf-v6-c-wizard__nav-list", style: { padding: '0 0 0 0' } },
         React.createElement("ul", null, tasks
             .filter((_, index) => allTaskStatuses[index] !== QuickStartTaskStatus.INIT)
             .map((task, index) => {
@@ -32093,7 +32010,7 @@ const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onT
             return (React.createElement(React.Fragment, { key: title },
                 React.createElement(QuickStartTaskHeader, { taskIndex: index + 1, title: title, size: "md", subtitle: getResource('{{index, number}} of {{tasks, number}}')
                         .replace('{{index, number}}', index + 1)
-                        .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }, isActiveTask && (React.createElement("div", { className: "pfext-quick-start-task__content" },
+                        .replace('{{tasks, number}}', tasks.length), taskStatus: taskStatus, isActiveTask: isActiveTask, onTaskSelect: onTaskSelect }, isActiveTask && (React.createElement(Stack, { hasGutter: true },
                     React.createElement(QuickStartMarkdownView, { content: description }),
                     shouldShowTaskReview && (React.createElement(QuickStartTaskReview, { review: review, taskStatus: taskStatus, onTaskReview: onTaskReview })))))));
         }))));
@@ -32101,14 +32018,14 @@ const QuickStartTasks = ({ tasks, taskNumber, allTaskStatuses, onTaskReview, onT
 
 const QuickStartContent = React.forwardRef(({ quickStart, nextQuickStarts = [], taskNumber, allTaskStatuses, onTaskSelect, onTaskReview, onQuickStartChange, }, ref) => {
     const { spec: { introduction, tasks, conclusion, prerequisites }, } = quickStart;
-    const totalTasks = tasks.length;
-    return (React.createElement("div", { className: "pfext-quick-start-content", ref: ref },
+    const totalTasks = tasks === null || tasks === void 0 ? void 0 : tasks.length;
+    return (React.createElement("div", { className: "pfext-quick-start-task", ref: ref },
         taskNumber === -1 && (React.createElement(QuickStartIntroduction, { tasks: tasks, allTaskStatuses: allTaskStatuses, introduction: introduction, prerequisites: prerequisites, onTaskSelect: onTaskSelect })),
         taskNumber > -1 && taskNumber < totalTasks && (React.createElement(QuickStartTasks, { tasks: tasks, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskReview: onTaskReview, onTaskSelect: onTaskSelect })),
         taskNumber === totalTasks && (React.createElement(QuickStartConclusion, { tasks: tasks, conclusion: conclusion, allTaskStatuses: allTaskStatuses, nextQuickStarts: nextQuickStarts, onQuickStartChange: onQuickStartChange, onTaskSelect: onTaskSelect }))));
 });
 
-const QuickStartFooter = ({ status, taskNumber, totalTasks, onNext, onBack, footerClass, quickStartId, }) => {
+const QuickStartFooter = ({ status, taskNumber, totalTasks, onNext, onBack, quickStartId, className, }) => {
     const { restartQuickStart, getResource } = React.useContext(QuickStartContext);
     const PrimaryButtonText = React.useMemo(() => ({
         START: getResource('Start'),
@@ -32137,13 +32054,16 @@ const QuickStartFooter = ({ status, taskNumber, totalTasks, onNext, onBack, foot
         }
         return PrimaryButtonText.CONTINUE;
     }, [taskNumber, totalTasks, PrimaryButtonText, status]);
-    const getPrimaryButton = React.useMemo(() => (React.createElement(Button, { variant: "primary", className: "pfext-quick-start-footer__actionbtn", onClick: onNext, "data-testid": `qs-drawer-${camelize(getPrimaryButtonText)}`, "data-test": `${getPrimaryButtonText} button` }, getPrimaryButtonText)), [getPrimaryButtonText, onNext]);
+    const getPrimaryButton = React.useMemo(() => (React.createElement(Button, { variant: "primary", onClick: onNext, "data-testid": `qs-drawer-${camelize(getPrimaryButtonText)}`, "data-test": `${getPrimaryButtonText} button` }, getPrimaryButtonText)), [getPrimaryButtonText, onNext]);
     const getSecondaryButton = React.useMemo(() => taskNumber === -1 && status !== QuickStartStatus.NOT_STARTED ? (React.createElement(Button, { variant: "secondary", onClick: onRestart, "data-testid": "qs-drawer-restart" }, SecondaryButtonText.RESTART)) : (taskNumber > -1 && (React.createElement(Button, { variant: "secondary", onClick: onBack, "data-testid": "qs-drawer-back" }, SecondaryButtonText.BACK))), [onRestart, onBack, SecondaryButtonText, status, taskNumber]);
-    const getSideNoteAction = React.useMemo(() => taskNumber !== -1 && (React.createElement(Button, { variant: "link", className: "pfext-quick-start-footer__restartbtn", onClick: onRestart, "data-testid": "qs-drawer-side-note-action" }, SecondaryButtonText.RESTART)), [taskNumber, onRestart, SecondaryButtonText.RESTART]);
-    return (React.createElement("div", { className: `pfext-quick-start-footer ${footerClass}` },
-        getPrimaryButton,
-        getSecondaryButton,
-        getSideNoteAction));
+    const getSideNoteAction = React.useMemo(() => taskNumber !== -1 && (React.createElement(Button, { variant: "link", onClick: onRestart, "data-testid": "qs-drawer-side-note-action" }, SecondaryButtonText.RESTART)), [taskNumber, onRestart, SecondaryButtonText.RESTART]);
+    return (React.createElement("div", { className: css('pfext-quick-start-footer', className) },
+        React.createElement(ActionList, null,
+            React.createElement(ActionListGroup, null,
+                React.createElement(ActionListItem, null, getPrimaryButton),
+                React.createElement(ActionListItem, null, getSecondaryButton)),
+            React.createElement(ActionListGroup, null,
+                React.createElement(ActionListItem, null, getSideNoteAction)))));
 };
 
 const QuickStartController = ({ quickStart, nextQuickStarts, contentRef, footerClass, }) => {
@@ -32182,7 +32102,7 @@ const QuickStartController = ({ quickStart, nextQuickStarts, contentRef, footerC
     }, [name, setQuickStartTaskNumber]);
     return (React.createElement(React.Fragment, null,
         React.createElement(QuickStartContent, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, taskNumber: taskNumber, allTaskStatuses: allTaskStatuses, onTaskSelect: handleTaskSelect, onTaskReview: handleTaskStatusChange, onQuickStartChange: handleQuickStartChange, ref: contentRef }),
-        React.createElement(QuickStartFooter, { status: status, taskNumber: taskNumber, totalTasks: totalTasks, onNext: handleNext, onBack: handleBack, footerClass: footerClass, quickStartId: quickStart.metadata.name })));
+        React.createElement(QuickStartFooter, { status: status, taskNumber: taskNumber, totalTasks: totalTasks, onNext: handleNext, onBack: handleBack, className: footerClass, quickStartId: quickStart.metadata.name })));
 };
 
 const getElement = (appendTo) => {
@@ -32199,24 +32119,17 @@ const useScrollTopOnTaskNumberChange = (node, taskNumber) => {
     }, [taskNumber, node]);
 };
 const QuickStartPanelContent = (_a) => {
-    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, headerVariant = '' } = _a, props = __rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "headerVariant"]);
+    var { quickStarts = [], handleClose, activeQuickStartID, appendTo, isResizable = true, showClose = true, footerClass } = _a, props = __rest(_a, ["quickStarts", "handleClose", "activeQuickStartID", "appendTo", "isResizable", "showClose", "footerClass"]);
     const titleRef = React.useRef(null);
     const { getResource, activeQuickStartState, focusOnQuickStart } = React.useContext(QuickStartContext);
     const [contentRef, setContentRef] = React.useState();
-    const shadows = useScrollShadows(contentRef);
     const quickStart = quickStarts.find((qs) => qs.metadata.name === activeQuickStartID);
     const taskNumber = activeQuickStartState === null || activeQuickStartState === void 0 ? void 0 : activeQuickStartState.taskNumber;
     useScrollTopOnTaskNumberChange(contentRef, taskNumber);
     const nextQuickStarts = quickStarts.filter((qs) => { var _a; return (_a = quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.nextQuickStart) === null || _a === void 0 ? void 0 : _a.includes(qs.metadata.name); });
-    const headerClasses = css('pfext-quick-start-panel-content__header', {
-        'pfext-quick-start-panel-content__header__shadow': shadows === Shadows.top || shadows === Shadows.both,
-        'pfext-quick-start-panel-content__header--blue-white': headerVariant === 'blue-white',
-    });
-    const footerClass = css({
-        'pfext-quick-start-panel-content__footer__shadow': shadows === Shadows.bottom || shadows === Shadows.both,
-    });
     const getStep = () => {
-        const tasks = quickStart.spec.tasks.length;
+        var _a;
+        const tasks = ((_a = quickStart.spec.tasks) === null || _a === void 0 ? void 0 : _a.length) || 0;
         if (Number.parseInt(taskNumber) === -1) {
             return 'intro';
         }
@@ -32230,23 +32143,21 @@ const QuickStartPanelContent = (_a) => {
             titleRef.current.focus();
         }
     }, [focusOnQuickStart, quickStart]);
-    const content = quickStart ? (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base", "data-testid": `qs-drawer-${camelize(quickStart.spec.displayName)}`, "data-qs": `qs-step-${getStep()}`, "data-test": "quickstart drawer" }, props),
-        React.createElement("div", { className: headerClasses },
+    const content = quickStart ? (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, "data-testid": `qs-drawer-${camelize(quickStart.spec.displayName)}`, "data-qs": `qs-step-${getStep()}`, "data-test": "quickstart drawer", style: { '--pf-v6-c-drawer__panel--PaddingBlockStart': '0' } }, props),
+        React.createElement("div", { className: "pfext-quick-start-panel-content" },
             React.createElement(DrawerHead, null,
-                React.createElement("div", { className: "pfext-quick-start-panel-content__title", tabIndex: -1, ref: titleRef },
-                    React.createElement(Title, { headingLevel: "h2", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-t--global--spacer--md)' } },
-                        React.createElement("span", { dangerouslySetInnerHTML: {
-                                __html: removeParagraphWrap(markdownConvert(quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName)),
-                            } }),
-                        ' ',
-                        React.createElement("small", { className: "pfext-quick-start-panel-content__duration" }, (quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
-                            ? getResource('{{type}} • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
-                                .replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
-                                .replace('{{type}}', getResource('Type'))
-                            : getResource('Type')))),
+                React.createElement("div", { tabIndex: -1, ref: titleRef },
+                    React.createElement(Title, { headingLevel: "h2", size: "xl", style: { marginRight: 'var(--pf-t--global--spacer--md)' } },
+                        React.createElement("span", null, quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.displayName),
+                        ' '),
+                    React.createElement("span", null, (quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                        ? getResource('{{type}} • {{duration, number}} minutes', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                            .replace('{{duration, number}}', quickStart === null || quickStart === void 0 ? void 0 : quickStart.spec.durationMinutes)
+                            .replace('{{type}}', getResource('Type'))
+                        : getResource('Type'))),
                 showClose && (React.createElement(DrawerActions, null,
                     React.createElement(DrawerCloseButton, { onClick: handleClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))))),
-        React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
+        React.createElement(DrawerPanelBody, { className: "pfext-quick-start-panel-content__body", "data-test": "content" },
             React.createElement(QuickStartController, { quickStart: quickStart, nextQuickStarts: nextQuickStarts, footerClass: footerClass, contentRef: setContentRef })))) : null;
     if (appendTo) {
         return ReactDOM.createPortal(content, getElement(appendTo));
@@ -32286,7 +32197,7 @@ const QuickStartContainer = (_a) => {
 };
 const QuickStartDrawer = (_a) => {
     var { quickStarts = [], children, appendTo, fullWidth, onCloseInProgress, onCloseNotInProgress } = _a, props = __rest(_a, ["quickStarts", "children", "appendTo", "fullWidth", "onCloseInProgress", "onCloseNotInProgress"]);
-    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, useLegacyHeaderColors, } = React.useContext(QuickStartContext);
+    const { activeQuickStartID, setActiveQuickStart, allQuickStarts = [], activeQuickStartState, allQuickStartStates, setAllQuickStartStates, } = React.useContext(QuickStartContext);
     const combinedQuickStarts = allQuickStarts.concat(quickStarts);
     React.useEffect(() => {
         const params = new URLSearchParams(window.location.search);
@@ -32345,10 +32256,10 @@ const QuickStartDrawer = (_a) => {
             },
         }
         : {};
-    const panelContent = (React.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth, headerVariant: useLegacyHeaderColors ? '' : 'blue-white' }, fullWidthPanelStyle)));
+    const panelContent = (React.createElement(QuickStartPanelContent, Object.assign({ quickStarts: combinedQuickStarts, handleClose: handleClose, activeQuickStartID: activeQuickStartID, appendTo: appendTo, isResizable: !fullWidth }, fullWidthPanelStyle)));
     return (React.createElement(React.Fragment, null,
         React.createElement(Drawer, Object.assign({ isExpanded: !!activeQuickStartID, isInline: true }, props), children ? (React.createElement(DrawerContent, Object.assign({ panelContent: panelContent }, fullWidthBodyStyle),
-            React.createElement(DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-v6-c-drawer__main" }, panelContent))),
+            React.createElement(DrawerContentBody, null, children))) : (React.createElement("div", null, panelContent))),
         React.createElement(QuickStartCloseModal, { isOpen: modalOpen, onConfirm: onModalConfirm, onCancel: onModalCancel })));
 };
 
@@ -32426,17 +32337,17 @@ const HelpTopicPanelContent = (_a) => {
         !!((_b = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _b === void 0 ? void 0 : _b.length) && React.createElement(Divider, null),
         paddingContainer(React.createElement(Stack, { hasGutter: true }, (_c = activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links) === null || _c === void 0 ? void 0 : _c.map(({ href, text, newTab, isExternal }, index) => (React.createElement(StackItem, { key: index },
             React.createElement(Button, { component: "a", href: href, target: newTab ? '_blank' : '', rel: "noopener noreferrer", variant: "link", "aria-label": `Open documentation in new window`, isInline: true, icon: isExternal ? React.createElement(ExternalLinkAltIcon, null) : null, iconPosition: "right", style: { fontSize: 'inherit' } }, text || href))))))));
-    const content = (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable, className: "pfext-quick-start__base" }, props),
+    const content = (React.createElement(DrawerPanelContent, Object.assign({ isResizable: isResizable }, props),
         React.createElement("div", null,
             React.createElement(DrawerHead, null,
-                React.createElement("div", { className: "pfext-quick-start-panel-content__title" },
+                React.createElement("div", null,
                     helpTopicOptions && (React.createElement(Select, { isPlain: true, id: "help-topics-select", selected: activeHelpTopic, isOpen: isHelpTopicMenuOpen, onSelect: onSelectHelpTopic, onOpenChange: (isOpen) => setIsHelpTopicMenuOpen(isOpen), toggle: (toggleRef) => (React.createElement(MenuToggle, { isFullWidth: true, ref: toggleRef, icon: React.createElement(BarsIcon, null), onClick: toggleHelpTopicMenu, isExpanded: isHelpTopicMenuOpen }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)) },
                         React.createElement(SelectList, null, helpTopicOptions))),
-                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-t--global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)),
+                    React.createElement(Title, { headingLevel: "h1", size: "xl", style: { marginRight: 'var(--pf-t--global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title)),
                 React.createElement(DrawerActions, null,
-                    React.createElement(DrawerCloseButton, { onClick: onClose, className: "pfext-quick-start-panel-content__close-button", "data-testid": "qs-drawer-close" }))),
+                    React.createElement(DrawerCloseButton, { onClick: onClose, "data-testid": "qs-drawer-close" }))),
             React.createElement(Divider, null),
-            React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" }, panelBodyItems))));
+            React.createElement(DrawerPanelBody, { "data-test": "content" }, panelBodyItems))));
     return content;
 };
 
@@ -32468,7 +32379,7 @@ const HelpTopicDrawer = (_a) => {
     const panelContent = (React.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics, onClose: onClose }));
     return (React.createElement(React.Fragment, null,
         React.createElement(Drawer, Object.assign({ isExpanded: !!activeHelpTopic, isInline: true }, props), children ? (React.createElement(DrawerContent, { panelContent: panelContent },
-            React.createElement(DrawerContentBody, { className: "pfext-quick-start-drawer__body" }, children))) : (React.createElement("div", { className: "pf-v6-c-drawer__main" }, panelContent)))));
+            React.createElement(DrawerContentBody, null, children))) : (React.createElement("div", { className: "pf-v6-c-drawer__main" }, panelContent)))));
 };
 
 const useLocalStorage = (key, initialValue) => {