@patternfly/quickstarts 6.0.0-alpha.1 → 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",
@@ -11000,6 +11014,7 @@ const QuickStartContextDefaults = {
     markdown: null,
     loading: false,
     alwaysShowTaskReview: true,
+    focusOnQuickStart: true,
 };
 const QuickStartContext = createContext(QuickStartContextDefaults);
 const getResource = (resource, options, resourceBundle, lng) => {
@@ -11176,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,
@@ -11257,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 = {
@@ -11466,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);
@@ -26065,6 +25980,7 @@ const useInlineCopyClipboardShowdownExtension = () => {
     }), [getResource]);
 };
 
+/* eslint-disable max-len */
 const useMultilineCopyClipboardShowdownExtension = () => {
     const { getResource } = React.useContext(QuickStartContext);
     return React.useMemo(() => ({
@@ -26085,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>`;
         },
@@ -26228,72 +26141,77 @@ function getDefaultOpts (simple) {
     },
     smartIndentationFix: {
       defaultValue: false,
-      description: 'Tries to smartly fix indentation in es6 strings',
+      describe: 'Tries to smartly fix indentation in es6 strings',
       type: 'boolean'
     },
     disableForced4SpacesIndentedSublists: {
       defaultValue: false,
-      description: 'Disables the requirement of indenting nested sublists by 4 spaces',
+      describe: 'Disables the requirement of indenting nested sublists by 4 spaces',
       type: 'boolean'
     },
     simpleLineBreaks: {
       defaultValue: false,
-      description: 'Parses simple line breaks as <br> (GFM Style)',
+      describe: 'Parses simple line breaks as <br> (GFM Style)',
       type: 'boolean'
     },
     requireSpaceBeforeHeadingText: {
       defaultValue: false,
-      description: 'Makes adding a space between `#` and the header text mandatory (GFM Style)',
+      describe: 'Makes adding a space between `#` and the header text mandatory (GFM Style)',
       type: 'boolean'
     },
     ghMentions: {
       defaultValue: false,
-      description: 'Enables github @mentions',
+      describe: 'Enables github @mentions',
       type: 'boolean'
     },
     ghMentionsLink: {
       defaultValue: 'https://github.com/{u}',
-      description: 'Changes the link generated by @mentions. Only applies if ghMentions option is enabled.',
+      describe: 'Changes the link generated by @mentions. Only applies if ghMentions option is enabled.',
       type: 'string'
     },
     encodeEmails: {
       defaultValue: true,
-      description: 'Encode e-mail addresses through the use of Character Entities, transforming ASCII e-mail addresses into its equivalent decimal entities',
+      describe: 'Encode e-mail addresses through the use of Character Entities, transforming ASCII e-mail addresses into its equivalent decimal entities',
       type: 'boolean'
     },
     openLinksInNewWindow: {
       defaultValue: false,
-      description: 'Open all links in new windows',
+      describe: 'Open all links in new windows',
       type: 'boolean'
     },
     backslashEscapesHTMLTags: {
       defaultValue: false,
-      description: 'Support for HTML Tag escaping. ex: \<div>foo\</div>',
+      describe: 'Support for HTML Tag escaping. ex: \<div>foo\</div>',
       type: 'boolean'
     },
     emoji: {
       defaultValue: false,
-      description: 'Enable emoji support. Ex: `this is a :smile: emoji`',
+      describe: 'Enable emoji support. Ex: `this is a :smile: emoji`',
       type: 'boolean'
     },
     underline: {
       defaultValue: false,
-      description: 'Enable support for underline. Syntax is double or triple underscores: `__underline word__`. With this option enabled, underscores no longer parses into `<em>` and `<strong>`',
+      describe: 'Enable support for underline. Syntax is double or triple underscores: `__underline word__`. With this option enabled, underscores no longer parses into `<em>` and `<strong>`',
+      type: 'boolean'
+    },
+    ellipsis: {
+      defaultValue: true,
+      describe: 'Replaces three dots with the ellipsis unicode character',
       type: 'boolean'
     },
     completeHTMLDocument: {
       defaultValue: false,
-      description: 'Outputs a complete html document, including `<html>`, `<head>` and `<body>` tags',
+      describe: 'Outputs a complete html document, including `<html>`, `<head>` and `<body>` tags',
       type: 'boolean'
     },
     metadata: {
       defaultValue: false,
-      description: 'Enable support for document metadata (defined at the top of the document between `«««` and `»»»` or between `---` and `---`).',
+      describe: 'Enable support for document metadata (defined at the top of the document between `«««` and `»»»` or between `---` and `---`).',
       type: 'boolean'
     },
     splitAdjacentBlockquotes: {
       defaultValue: false,
-      description: 'Split adjacent blockquote blocks',
+      describe: 'Split adjacent blockquote blocks',
       type: 'boolean'
     }
   };
@@ -26501,7 +26419,7 @@ showdown.subParser = function (name, func) {
  * Gets or registers an extension
  * @static
  * @param {string} name
- * @param {object|function=} ext
+ * @param {object|object[]|function=} ext
  * @returns {*}
  */
 showdown.extension = function (name, ext) {
@@ -26820,6 +26738,20 @@ showdown.helper.escapeCharacters = function (text, charsToEscape, afterBackslash
   return text;
 };
 
+/**
+ * Unescape HTML entities
+ * @param txt
+ * @returns {string}
+ */
+showdown.helper.unescapeHTMLEntities = function (txt) {
+
+  return txt
+    .replace(/&quot;/g, '"')
+    .replace(/&lt;/g, '<')
+    .replace(/&gt;/g, '>')
+    .replace(/&amp;/g, '&');
+};
+
 var rgxFindMatchPos = function (str, left, right, flags) {
   var f = flags || '',
       g = f.indexOf('g') > -1,
@@ -27024,11 +26956,35 @@ showdown.helper.encodeEmailAddress = function (mail) {
   return mail;
 };
 
+/**
+ *
+ * @param str
+ * @param targetLength
+ * @param padString
+ * @returns {string}
+ */
+showdown.helper.padEnd = function padEnd (str, targetLength, padString) {
+  /*jshint bitwise: false*/
+  // eslint-disable-next-line space-infix-ops
+  targetLength = targetLength>>0; //floor if number or convert non-number to 0;
+  /*jshint bitwise: true*/
+  padString = String(padString || ' ');
+  if (str.length > targetLength) {
+    return String(str);
+  } else {
+    targetLength = targetLength - str.length;
+    if (targetLength > padString.length) {
+      padString += padString.repeat(targetLength / padString.length); //append to original to ensure we are longer than needed
+    }
+    return String(str) + padString.slice(0,targetLength);
+  }
+};
+
 /**
  * POLYFILLS
  */
 // use this instead of builtin is undefined for IE8 compatibility
-if (typeof(console) === 'undefined') {
+if (typeof (console) === 'undefined') {
   console = {
     warn: function (msg) {
       alert(msg);
@@ -28229,8 +28185,8 @@ showdown.helper.emojis = {
   'zzz':'\ud83d\udca4',
 
   /* special emojis :P */
-  'octocat':  '<img width="20" height="20" align="absmiddle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAOwUlEQVR42uVbCVyO6RbPmn0sw9gZS0aZO4y5GTEUE2ObxjZjrbHEJVy3sWS5pkaWxjLEkCVDSbSgFLdESaWSLIVUSIi4kvb9f895vi/zbbR+yZ339/tbnu99n/ec/3Oe85xznufV0CjDBaAdwZqwnzCJ0FXjHV70/i8J5oQDhCFV8cJdq1atwqxZs+Ds7Iz4+HhqwgXCLELNKlK6G2Ej4e6lS5ewZcsWzJgxA+fOnWNZFqvzxT1v3boF/qcsBg0ahP3796OwsJAFWKYuIqjfPoS9cXFxWL58Obp06SInh5aWFr//jjoJWLlu3TolAorRuXNn7Ny5k4W4Spgj81xrgj5hLmED4RDhlNRygglBhADCSakpWxFMCHoETUJTwrYHDx7A1NT0je9nPHz4kN/fXl0EeI0aNeqtAjB69+4NPz8/FsSdlXvy5An8/f1hZ2cHCwsLGBsbY/To0cJy9PT0MGDAAAwePBhGRkbClNesWYODBw8iODgYOTk53M/d9evXo27duiW++8iRI3z/ZHURENOjR48ShSjGuHHjhHJ16tQp9TOKaNWqlZKpvw1MHluQOpSvk5eXh5YtW5ZbmarAvHnzmIBd6iCgXnZ2Npo1a1atCWAfwY5SHQTUKCoqQocOHao1AebmHBJgi7p8QBDP6epMwKFDvMDAWF0ELLS1ta3WBNy9e5cJMFIXAdvt7e2rNQHDhw9nAv5D+KKylV9y8+bNCi1pVYWZM2cyCfaVTcDdsqzH7xpBQRxcwqyylLdi5/K+KM/Q0dFhAqIri4Bn1T0AUgVpdmhYUeVHnD59+r1TnjF27Fgm4HhFCThoYmLyXhLQoEGD4mRKsyIE3OrZs+d7SQCDCyZcNSqv8k1evXoFTU3NUr+wzUcfYqRBf8yb/C2WzfoBFoTF08fBdMIITDD8CsP1+kL30x7Q6dYZH7drjfZ0f4fWLdG1Q1t81qMLBvTRwejB/TBl1BDMnzQGS2dMxKo5k7Fs9iSY/jAaBvR8Pc26pZaH02quLZSXgO6xsbGlelGnli1wZKcVMqN8gKcRwItrf+K/VB95doXaLwOJIVSzOU/+2Re5kV7IuuyJrIhTyLt6mmztLBBPNZLHoUAy9fE8UvJ8ikxfj8PwJPQErJeYlkquTZs2MQFLykuANgc/Jb2kn3Z3ZMaQUrmxwO1zyAo7gfRAJ6RfOIyMEFdkXj5F8BTK5lzxQv610yi8QcFatI8gQoCIK7x+hojwRnaE5H4JTiEj9Pjr/rJDqcZyn9b4ovu45LYbdWvXeqtsXMHiSlZ5CegRExPz1hd83PYj5POo0QinXyLFg48hnZTOiQ1Dzr1IZEaeQRoJn0HKZIR7lA2kfHrQUerXHTlx4ZL+rnjjFRGRGeYB5MUj2GnbW+XbuJFrp1heXgI6JCYmvvUFN1x3Aek3SWkapRAXMeJFGS8ge2Xfuog0toaykED3Mpk8+shOk+sv68Y50V9WuKewBKt5094o39atW/mRf5WXgIYZGRlo3Lixys4nj6A6Z1YMcqRCpwU4ouDlUyHk/QA/hNttR25Wlvh/ZthJUsil9ATQ/axkYbqEzDgfL0Ts/x35+aLyTES7IY36Q6w/+Q4/tP6wuUoZ9+7dy7ebVmQZjO/atavKzn32rAdeXkd6KCkXdAxZ13yFcLFnvPD73zrDVrsdTs6eggKSuSjjORHkUGoC0i86Iyc6QPQX7eqMnTodYNuzHU4vnosiaitMSUSavwMy6d3IvEUrzViVMrq5uXEX4ytCgL++vr5Sx7Vr1cIDX0dKkQJfj37Rs3jw1sBxkwlwGD4Ax3+ciN1faCHW76xQRFgAOcjSEMBkIe0x8nLzcez7kTg8Rh/uxuOxR/cTJISFSfq7eATpZCk8CAfXLVFJwIULXHnHoIoQYLtw4UKljps2aogXQcQuef/XAiMDKY+S4DhyEFwpDnCj9f+Afl8EbbWRTANaAdihlYoAMn8aZzyNuYODX/eD29TvRH/7v+qN8H27JdOAyWQfQQ74xPafVRLAPox9WUlK6hIGEgx4f00Kg2JcvHhRqeP6FIwknXemyen/2gLIIeC/CYk49M0AuE4xgtu0sThg8AUCN62TEuBdRgJo2Y+Kxh9D/k59SQiwH9QHobt3SAk4KSGA4oWjm1YqyVi8U6Soj4yOrHM/jTAyKVby/PnzIoNi8L+L4eXlpXoFcLcTgc1rAlISkJeXDxeK2A6P1hdTwI6mQPTJE+WbAlnJyE7PhNO3Q3BkrKGYWtxfHMkkmQLO0ilwA7+vXqAkn66urtBLUZ9iHfm30NBQaPAf165dA0d9vP2UlJSEp0+f4vHjx3j06JH4e+rUqUovcNmyGkiNEkLwklXsBG+ecMUOnfbYod1emG5uboFKJ8jPFVD0l0dBUHqoPDHpQeQEb0qc4FUHe3KAbYUT9JgzDbwOFL5MfN0fXkXhJ5PxSvLt2LFD1Ah5u4z1YJ14l4qnBe8v3rhxAzz4PAVG8nLHivIP0dHRiIiIQGRkpEgmrl69ClW1QBMjQ7LDW8hmU+RRI69ckJIkhL7jfRJBm62R+TJVYq6h0jhBRslsivqenT2MF/7OyI70VmkFhWnPJaS6OyPkt43IycqR9EfWlH7JDQUUTuNhCHR7Ke9YcRp/5coVoQPrcvnyZURFRYmBZlLS0kR8MVLD29sbnp6e8PHxQUBAgCgn8YO8E3z79m3BGKeVc+bMkXuBZt06SA12F/F5Go0gR4C8HBalPZMPXKL8lQKhPAqF+f97KXFyNx6HQsoPsshJ/kmAp2TKkJLISpXvjyxNhMYcDVLOEO+lPDi8B5mamipkZx1YF9YpJCRErAy+vr5CZ9ZdWABhDGEYYTBhAOFz3g4nfMJelNCbkNCpUye5F034mvxIPi1/FM+zQCw0k5B9O0iEr5kRXkqhMJOVf9NXIHjtT7hmaymSoBzKETimkAuFpaF1dkwI9RcmIYaXv3BJXoGCuyIgk5WpefPmKCgoYK46SmX/RKoL69Sfl0WuFEl1HlmWJXE5z6WmTZvKJxxmxkIQ3AuU5APk6NICj4hRT6eITTEEzqWk55HHPjz3cxJhNF5cxeNT9kj2cRDTQjEkzpDtjyyCic5l5fEA7uSHFEefR5pPsahrb2B9QkICFHeJ51HunkdLIg0VLY0BFKdLwllVHp4dHyvst3QuEiiju21vA/+VZkiluIKt4I3RIfWXQ4QgKUxkni47LJWUP3PmjHo2RxVI+CebmKJP6EiFDVurxUgmExe5PHlnPAkn8w4QqW62NCVmYopozid5H0CI9RKE21ggJeAYEeMnfitOnRn5XCfgeJ+VTosWQU8MOc6ZE0cqnUm4fv165SrPBVHCfMI4TowUfmOfsIcdJh92kBWmUcP6GDt8EDZbzIffH5tx3/ewSFjw5LKk0MEFEkZenDBjgew7Yiog5brkt+QrknvJmhIp4Apw/A1bVpjhG/0v5d7Vrl07bNu2TelUSqUoz8uI3Z49OEtBAy+TdP1CqKtwHzvQUxxgTJs2TeX5gdq1a0ObSmCjh+jB+NuvRamL1+3ls77HCip1rTSdJP5eNnMizKndjMLoH42G4bthX+FzHS3UVVEC69evH3799VeKMXJZrlWKclUGAZ5jxoxB02ZNsNlxH74aagBHZyex986HlVTczyGmI58h4CjL2toa48ePFxsUPEotWrQoc0GT0/C2bduiY8eO4ISMcxLeoOFYhS6qm2EpoZG65jmbv+dPSyRZlt5QfVjvtX19AOFNL+aDFNI4m0eFc9Ho5ORkaGtrl5kAVp6DMOk88efEjLe++ZhclZwHTJHEHbs4YOCmLj2645fdvwnTK42zoXtaEHwNDQ3LXdZm5yad3/2r+gQmDsRnIF5KAldX6zdsgG/GG8F44Vzcu3eP2y1K6GPr2rVrK1zbnz59Or/LoaoJCPZ4kCZsjw9GECL79OmDj9q2wb+320C3/5fgPQO6Vrzh+fpcDqxXr16lbHBwgkZXm6okYJr0ECMrX5vraiJ1lArEjrEnzWuOqemiYj9spGd2ee478XkiPsJakmJ83qA05/8qXNurJFLiunXrhpo1a6LxB02wyHIFZpovgOHwYfjZ0hK2lH5u2rwZ5suWYv5ycyUlmjRpgl69eimlrFy3kwuoyOvXr19frm3RokVMwPZ3TYC57E6xVq+e6KzVDSaL/oEp82Zh8IhhWLjGAp/p9oX5ujVKBNjY2MDV1VWuzd3dXaTesm2biUQuZ8u28elSPmKr8a4vdog8GnJpcT1N1KHUuBbt0jSgWuGbzJh3mVhh2TYHBwdxjFa2jVcZnvPVlQBOLXdZWlqW2ZFxNYYVlm07fPgwAgMD5dr4OD5HeHLFFxM+O42DGtXhIkFaMQlcUjIzM0P37t1Ro0YNpZPjPJcVK7SOjo5ybU5OTqIAo0gAh97VlgAZIj4l8Pn4WFaO64ocuXG6zJtDbMqySnC7IgF8uptLVrJtq1evFuWqak+A4j4i4TNpltiJ8LPiNFFFwNGjRyWFyfedAFUny/joekkEuLi4KK0CfykCeFnkiu1flgBeFtl3/D8SsMbKykpOifv37ysRcPz4cVHKUiSA8wwNdR9/VTMBSh9Y8S4Nf2qnSICiBbDzVCRg9uzZTMC+94kAv6FDh8opwRsVHPjItnl4eEDxHNLKlStFXV+2javQ/M1SpZe+1KA4L4G7WDG57fSm/OUbXiqG0ewAFYOeYcN4fwZhvLkp2y4tftrxcltdlf/w+fPn4qNGxTCYU2m6nrRu3VqunT/EoiuZvw6TTZHpyuNNmEaNGsndP3fu3OJAq1N1JOAHDmyKheVtNP4OkE2crULRAW7fvl20EyyLy24a8p+/7WISFixYIMLt4t82bNhQYjXqXREgPq3j74mlX3AmSL8E1eOPIBXnuVT5OsVZpuLnOMeOHeN7vifwiYhYzhC5IpwlOXj1QXWdBmy/XWU/X+UqMZfKBw4cKAobHPlJlZe9h6tOu+7cuSN2dg0MDMSSyZUpmXvaSD+crq/xvl0k9BTCRa7qEPq+5T4t6ffF52WVV+f1P6zyLG30bsU4AAAAAElFTkSuQmCC">',
-  'showdown': '<img width="20" height="20" align="absmiddle" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAECtaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/Pgo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJBZG9iZSBYTVAgQ29yZSA1LjYtYzA2NyA3OS4xNTc3NDcsIDIwMTUvMDMvMzAtMjM6NDA6NDIgICAgICAgICI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgICAgICAgICAgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIgogICAgICAgICAgICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgICAgICAgICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgICAgICAgICB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIgogICAgICAgICAgICB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIKICAgICAgICAgICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPHhtcDpDcmVhdG9yVG9vbD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoV2luZG93cyk8L3htcDpDcmVhdG9yVG9vbD4KICAgICAgICAgPHhtcDpDcmVhdGVEYXRlPjIwMTUtMDEtMTVUMjE6MDE6MTlaPC94bXA6Q3JlYXRlRGF0ZT4KICAgICAgICAgPHhtcDpNZXRhZGF0YURhdGU+MjAxNy0xMC0yNFQxMzozMTozMCswMTowMDwveG1wOk1ldGFkYXRhRGF0ZT4KICAgICAgICAgPHhtcDpNb2RpZnlEYXRlPjIwMTctMTAtMjRUMTM6MzE6MzArMDE6MDA8L3htcDpNb2RpZnlEYXRlPgogICAgICAgICA8cGhvdG9zaG9wOkNvbG9yTW9kZT4zPC9waG90b3Nob3A6Q29sb3JNb2RlPgogICAgICAgICA8cGhvdG9zaG9wOklDQ1Byb2ZpbGU+c1JHQiBJRUM2MTk2Ni0yLjE8L3Bob3Rvc2hvcDpJQ0NQcm9maWxlPgogICAgICAgICA8cGhvdG9zaG9wOlRleHRMYXllcnM+CiAgICAgICAgICAgIDxyZGY6QmFnPgogICAgICAgICAgICAgICA8cmRmOmxpIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgICAgICAgPHBob3Rvc2hvcDpMYXllck5hbWU+UyAtPC9waG90b3Nob3A6TGF5ZXJOYW1lPgogICAgICAgICAgICAgICAgICA8cGhvdG9zaG9wOkxheWVyVGV4dD5TIC08L3Bob3Rvc2hvcDpMYXllclRleHQ+CiAgICAgICAgICAgICAgIDwvcmRmOmxpPgogICAgICAgICAgICA8L3JkZjpCYWc+CiAgICAgICAgIDwvcGhvdG9zaG9wOlRleHRMYXllcnM+CiAgICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2UvcG5nPC9kYzpmb3JtYXQ+CiAgICAgICAgIDx4bXBNTTpJbnN0YW5jZUlEPnhtcC5paWQ6N2NkMzQxNzctOWYyZi0yNDRiLWEyYjQtMzU1MzJkY2Y1MWJiPC94bXBNTTpJbnN0YW5jZUlEPgogICAgICAgICA8eG1wTU06RG9jdW1lbnRJRD5hZG9iZTpkb2NpZDpwaG90b3Nob3A6M2E1YzgxYmYtYjhiNy0xMWU3LTk0NDktYTQ2MzdlZjJkNjMzPC94bXBNTTpEb2N1bWVudElEPgogICAgICAgICA8eG1wTU06T3JpZ2luYWxEb2N1bWVudElEPnhtcC5kaWQ6NjBDNUFFNjVGNjlDRTQxMTk0NUE4NTVFM0JDQTdFRUI8L3htcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD4KICAgICAgICAgPHhtcE1NOkhpc3Rvcnk+CiAgICAgICAgICAgIDxyZGY6U2VxPgogICAgICAgICAgICAgICA8cmRmOmxpIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmFjdGlvbj5jcmVhdGVkPC9zdEV2dDphY3Rpb24+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDppbnN0YW5jZUlEPnhtcC5paWQ6NjBDNUFFNjVGNjlDRTQxMTk0NUE4NTVFM0JDQTdFRUI8L3N0RXZ0Omluc3RhbmNlSUQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDp3aGVuPjIwMTUtMDEtMTVUMjE6MDE6MTlaPC9zdEV2dDp3aGVuPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6c29mdHdhcmVBZ2VudD5BZG9iZSBQaG90b3Nob3AgQ1M2IChXaW5kb3dzKTwvc3RFdnQ6c29mdHdhcmVBZ2VudD4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0iUmVzb3VyY2UiPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6YWN0aW9uPnNhdmVkPC9zdEV2dDphY3Rpb24+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDppbnN0YW5jZUlEPnhtcC5paWQ6ODZjNjBkMGQtOGY0Yy01ZTRlLWEwMjQtODI4ZWQyNTIwZDc3PC9zdEV2dDppbnN0YW5jZUlEPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6d2hlbj4yMDE3LTEwLTI0VDEzOjMxOjMwKzAxOjAwPC9zdEV2dDp3aGVuPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6c29mdHdhcmVBZ2VudD5BZG9iZSBQaG90b3Nob3AgQ0MgMjAxNSAoV2luZG93cyk8L3N0RXZ0OnNvZnR3YXJlQWdlbnQ+CiAgICAgICAgICAgICAgICAgIDxzdEV2dDpjaGFuZ2VkPi88L3N0RXZ0OmNoYW5nZWQ+CiAgICAgICAgICAgICAgIDwvcmRmOmxpPgogICAgICAgICAgICAgICA8cmRmOmxpIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmFjdGlvbj5jb252ZXJ0ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OnBhcmFtZXRlcnM+ZnJvbSBhcHBsaWNhdGlvbi92bmQuYWRvYmUucGhvdG9zaG9wIHRvIGltYWdlL3BuZzwvc3RFdnQ6cGFyYW1ldGVycz4KICAgICAgICAgICAgICAgPC9yZGY6bGk+CiAgICAgICAgICAgICAgIDxyZGY6bGkgcmRmOnBhcnNlVHlwZT0iUmVzb3VyY2UiPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6YWN0aW9uPmRlcml2ZWQ8L3N0RXZ0OmFjdGlvbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OnBhcmFtZXRlcnM+Y29udmVydGVkIGZyb20gYXBwbGljYXRpb24vdm5kLmFkb2JlLnBob3Rvc2hvcCB0byBpbWFnZS9wbmc8L3N0RXZ0OnBhcmFtZXRlcnM+CiAgICAgICAgICAgICAgIDwvcmRmOmxpPgogICAgICAgICAgICAgICA8cmRmOmxpIHJkZjpwYXJzZVR5cGU9IlJlc291cmNlIj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OmFjdGlvbj5zYXZlZDwvc3RFdnQ6YWN0aW9uPgogICAgICAgICAgICAgICAgICA8c3RFdnQ6aW5zdGFuY2VJRD54bXAuaWlkOjdjZDM0MTc3LTlmMmYtMjQ0Yi1hMmI0LTM1NTMyZGNmNTFiYjwvc3RFdnQ6aW5zdGFuY2VJRD4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OndoZW4+MjAxNy0xMC0yNFQxMzozMTozMCswMTowMDwvc3RFdnQ6d2hlbj4KICAgICAgICAgICAgICAgICAgPHN0RXZ0OnNvZnR3YXJlQWdlbnQ+QWRvYmUgUGhvdG9zaG9wIENDIDIwMTUgKFdpbmRvd3MpPC9zdEV2dDpzb2Z0d2FyZUFnZW50PgogICAgICAgICAgICAgICAgICA8c3RFdnQ6Y2hhbmdlZD4vPC9zdEV2dDpjaGFuZ2VkPgogICAgICAgICAgICAgICA8L3JkZjpsaT4KICAgICAgICAgICAgPC9yZGY6U2VxPgogICAgICAgICA8L3htcE1NOkhpc3Rvcnk+CiAgICAgICAgIDx4bXBNTTpEZXJpdmVkRnJvbSByZGY6cGFyc2VUeXBlPSJSZXNvdXJjZSI+CiAgICAgICAgICAgIDxzdFJlZjppbnN0YW5jZUlEPnhtcC5paWQ6ODZjNjBkMGQtOGY0Yy01ZTRlLWEwMjQtODI4ZWQyNTIwZDc3PC9zdFJlZjppbnN0YW5jZUlEPgogICAgICAgICAgICA8c3RSZWY6ZG9jdW1lbnRJRD54bXAuZGlkOjYwQzVBRTY1RjY5Q0U0MTE5NDVBODU1RTNCQ0E3RUVCPC9zdFJlZjpkb2N1bWVudElEPgogICAgICAgICAgICA8c3RSZWY6b3JpZ2luYWxEb2N1bWVudElEPnhtcC5kaWQ6NjBDNUFFNjVGNjlDRTQxMTk0NUE4NTVFM0JDQTdFRUI8L3N0UmVmOm9yaWdpbmFsRG9jdW1lbnRJRD4KICAgICAgICAgPC94bXBNTTpEZXJpdmVkRnJvbT4KICAgICAgICAgPHRpZmY6T3JpZW50YXRpb24+MTwvdGlmZjpPcmllbnRhdGlvbj4KICAgICAgICAgPHRpZmY6WFJlc29sdXRpb24+NzIwMDAwLzEwMDAwPC90aWZmOlhSZXNvbHV0aW9uPgogICAgICAgICA8dGlmZjpZUmVzb2x1dGlvbj43MjAwMDAvMTAwMDA8L3RpZmY6WVJlc29sdXRpb24+CiAgICAgICAgIDx0aWZmOlJlc29sdXRpb25Vbml0PjI8L3RpZmY6UmVzb2x1dGlvblVuaXQ+CiAgICAgICAgIDxleGlmOkNvbG9yU3BhY2U+MTwvZXhpZjpDb2xvclNwYWNlPgogICAgICAgICA8ZXhpZjpQaXhlbFhEaW1lbnNpb24+NjQ8L2V4aWY6UGl4ZWxYRGltZW5zaW9uPgogICAgICAgICA8ZXhpZjpQaXhlbFlEaW1lbnNpb24+NjQ8L2V4aWY6UGl4ZWxZRGltZW5zaW9uPgogICAgICA8L3JkZjpEZXNjcmlwdGlvbj4KICAgPC9yZGY6UkRGPgo8L3g6eG1wbWV0YT4KICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAKICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgIAogICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgCiAgICAgICAgICAgICAgICAgICAgICAgICAgICAKPD94cGFja2V0IGVuZD0idyI/Pse7bzcAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAA1JJREFUeNrsm1+OmlAUhz+aeS9dwZggJn1AnRUMO6jpBgZXULuC2hWUWUGZBTSxKyiuoA4mfUBMnB04K5g+9DihRBHlyh/lJLwIXLgf99xzzu9etZeXFy7Z3nDh1gBoAFy4XeVtQNO0zNcapmUDfUBPnFoBfhQGq6IBaHmjwD4Ahmk5wAD4kKG5J8CNwsAFaHe6DvA9cc0wCgOv8gDka3vA9RHNPgo0D7hNnJtGYWBXxgV2dH4MfMnRRA+Y1WIO2NJ5F/ikoKm3tYsChmkNFHW+fmHQMC1dfHaXPQP3wM1yMdc2B/AOGALTWobBmI1Shu0UGCwX83XyRBQGawHntTtdG5gUNfxVu4CTNqNv6/wWGL7kCc+1AmCYVisl3I2ydD4GYZUCs7IjoLXrxHIx9w9tLAqDCfBwDrXAY457x+cAoCfuwRGjYFUnAGk+PsjR7s8Dn1VeLWCYVlpDw+VivjVHSHt+u9PVJbzGzZXQWTkAkz0V31fATUaEsjVJlQBs4FeGcteLgzgbAALBA+4y3voAeJL8nA0AHfClnM1qm1HhnYUidCSE+KzvSSJUTwAxCOMcpfETMFYpfRUKIAbCFhC3OTJJJwqDWS0BxED0JZ4Pjix1P2+E0loCSMBwyK4S/xc1ojBwag8gMU84cvTKGgmlAYhngu1O9xAXuVE5J1QCQCz3bwHuHvdQui5QKQAxEO6eEKpsFCgTRSXkvdoxSlBMCxhJJbgrrbZRtHCiShN0pRB6PeQ3ckBw2K0oKXMBVYJIP+Nvh9qulFivGoBt1lLQxowT2ykBXCfnhZIglgYACWmqXQv+baioBYCeiCQHm+QEg1O7RhF7hO4OhSAhcJKSFU7qBGADwZeqMMuXn6TUBw8qlaMrirNb4LdhWlP+SWD+cjFfxTpuS2GUpik+o3jFSEkqbJiWn0P0OMSGqlWiOu0TvD+FRHZKAE+oW+cfRmEwqlsesJJEJs8y91QqP+9UL6lqEtz2gpuNEY5sm9sIHln2DRa2aFKGJtiXkZEMiWtgVvRKUSUFkSKt2S7fAGgAXLYpmQQXf36MUChTZdUa2u8/rkvPA6Tz30r4eH3ybcBS5gJ6SaNXb+aABkA1AMxKenclBZLW/He4cYEGwEXb3wEASelexk6LIIIAAAAASUVORK5CYII=">'
+  'octocat':  '<img alt=":octocat:" height="20" width="20" align="absmiddle" src="https://assets-cdn.github.com/images/icons/emoji/octocat.png">',
+  'showdown': '<span style="font-family: \'Anonymous Pro\', monospace; text-decoration: underline; text-decoration-style: dashed; text-decoration-color: #3e8b8a;text-underline-position: under;">S</span>'
 };
 
 /**
@@ -28279,10 +28235,10 @@ showdown.Converter = function (converterOptions) {
        */
       setConvFlavor = setFlavor,
 
-    /**
-     * Metadata of the document
-     * @type {{parsed: {}, raw: string, format: string}}
-     */
+      /**
+       * Metadata of the document
+       * @type {{parsed: {}, raw: string, format: string}}
+       */
       metadata = {
         parsed: {},
         raw: '',
@@ -28341,7 +28297,7 @@ showdown.Converter = function (converterOptions) {
           'Please inform the developer that the extension should be updated!');
         legacyExtensionLoading(showdown.extensions[ext], ext);
         return;
-      // END LEGACY SUPPORT CODE
+        // END LEGACY SUPPORT CODE
 
       } else if (!showdown.helper.isUndefined(extensions[ext])) {
         ext = extensions[ext];
@@ -28521,8 +28477,8 @@ showdown.Converter = function (converterOptions) {
     text = text.replace(/\r\n/g, '\n'); // DOS to Unix
     text = text.replace(/\r/g, '\n'); // Mac to Unix
 
-    // Stardardize line spaces (nbsp causes trouble in older browsers and some regex flavors)
-    text = text.replace(/\u00A0/g, ' ');
+    // Stardardize line spaces
+    text = text.replace(/\u00A0/g, '&nbsp;');
 
     if (options.smartIndentationFix) {
       text = rTrimInputText(text);
@@ -28577,6 +28533,112 @@ showdown.Converter = function (converterOptions) {
     return text;
   };
 
+  /**
+   * Converts an HTML string into a markdown string
+   * @param src
+   * @param [HTMLParser] A WHATWG DOM and HTML parser, such as JSDOM. If none is supplied, window.document will be used.
+   * @returns {string}
+   */
+  this.makeMarkdown = this.makeMd = function (src, HTMLParser) {
+
+    // replace \r\n with \n
+    src = src.replace(/\r\n/g, '\n');
+    src = src.replace(/\r/g, '\n'); // old macs
+
+    // due to an edge case, we need to find this: > <
+    // to prevent removing of non silent white spaces
+    // ex: <em>this is</em> <strong>sparta</strong>
+    src = src.replace(/>[ \t]+</, '>¨NBSP;<');
+
+    if (!HTMLParser) {
+      if (window && window.document) {
+        HTMLParser = window.document;
+      } else {
+        throw new Error('HTMLParser is undefined. If in a webworker or nodejs environment, you need to provide a WHATWG DOM and HTML such as JSDOM');
+      }
+    }
+
+    var doc = HTMLParser.createElement('div');
+    doc.innerHTML = src;
+
+    var globals = {
+      preList: substitutePreCodeTags(doc)
+    };
+
+    // remove all newlines and collapse spaces
+    clean(doc);
+
+    // some stuff, like accidental reference links must now be escaped
+    // TODO
+    // doc.innerHTML = doc.innerHTML.replace(/\[[\S\t ]]/);
+
+    var nodes = doc.childNodes,
+        mdDoc = '';
+
+    for (var i = 0; i < nodes.length; i++) {
+      mdDoc += showdown.subParser('makeMarkdown.node')(nodes[i], globals);
+    }
+
+    function clean (node) {
+      for (var n = 0; n < node.childNodes.length; ++n) {
+        var child = node.childNodes[n];
+        if (child.nodeType === 3) {
+          if (!/\S/.test(child.nodeValue) && !/^[ ]+$/.test(child.nodeValue)) {
+            node.removeChild(child);
+            --n;
+          } else {
+            child.nodeValue = child.nodeValue.split('\n').join(' ');
+            child.nodeValue = child.nodeValue.replace(/(\s)+/g, '$1');
+          }
+        } else if (child.nodeType === 1) {
+          clean(child);
+        }
+      }
+    }
+
+    // find all pre tags and replace contents with placeholder
+    // we need this so that we can remove all indentation from html
+    // to ease up parsing
+    function substitutePreCodeTags (doc) {
+
+      var pres = doc.querySelectorAll('pre'),
+          presPH = [];
+
+      for (var i = 0; i < pres.length; ++i) {
+
+        if (pres[i].childElementCount === 1 && pres[i].firstChild.tagName.toLowerCase() === 'code') {
+          var content = pres[i].firstChild.innerHTML.trim(),
+              language = pres[i].firstChild.getAttribute('data-language') || '';
+
+          // if data-language attribute is not defined, then we look for class language-*
+          if (language === '') {
+            var classes = pres[i].firstChild.className.split(' ');
+            for (var c = 0; c < classes.length; ++c) {
+              var matches = classes[c].match(/^language-(.+)$/);
+              if (matches !== null) {
+                language = matches[1];
+                break;
+              }
+            }
+          }
+
+          // unescape html entities in content
+          content = showdown.helper.unescapeHTMLEntities(content);
+
+          presPH.push(content);
+          pres[i].outerHTML = '<precode language="' + language + '" precodenum="' + i.toString() + '"></precode>';
+        } else {
+          presPH.push(pres[i].innerHTML);
+          pres[i].innerHTML = '';
+          pres[i].setAttribute('prenum', i.toString());
+        }
+      }
+      return presPH;
+    }
+
+    return mdDoc;
+  };
+
   /**
    * Set an option of this Converter instance
    * @param {string} key
@@ -28660,12 +28722,12 @@ showdown.Converter = function (converterOptions) {
       var ext = extension[a];
       for (var i = 0; i < langExtensions.length; ++i) {
         if (langExtensions[i] === ext) {
-          langExtensions[i].splice(i, 1);
+          langExtensions.splice(i, 1);
         }
       }
-      for (var ii = 0; ii < outputModifiers.length; ++i) {
+      for (var ii = 0; ii < outputModifiers.length; ++ii) {
         if (outputModifiers[ii] === ext) {
-          outputModifiers[ii].splice(i, 1);
+          outputModifiers.splice(ii, 1);
         }
       }
     }
@@ -28778,7 +28840,7 @@ showdown.subParser('anchors', function (text, options, globals) {
     // to external links. Hash links (#) open in same page
     if (options.openLinksInNewWindow && !/^#/.test(url)) {
       // escaped _
-      result += ' target="¨E95Eblank"';
+      result += ' rel="noopener noreferrer" target="¨E95Eblank"';
     }
 
     result += '>' + linkText + '</a>';
@@ -28796,7 +28858,7 @@ showdown.subParser('anchors', function (text, options, globals) {
 
   // normal cases
   text = text.replace(/\[((?:\[[^\]]*]|[^\[\]])*)]()[ \t]*\([ \t]?<?([\S]+?(?:\([\S]*?\)[\S]*?)?)>?(?:[ \t]*((["'])([^"]*?)\5))?[ \t]?\)/g,
-                      writeAnchorTag);
+    writeAnchorTag);
 
   // handle reference-style shortcuts: [link text]
   // These must come last in case you've also got [link test][1]
@@ -28805,7 +28867,7 @@ showdown.subParser('anchors', function (text, options, globals) {
 
   // Lastly handle GithubMentions if option is enabled
   if (options.ghMentions) {
-    text = text.replace(/(^|\s)(\\)?(@([a-z\d\-]+))(?=[.!?;,[\]()]|\s|$)/gmi, function (wm, st, escape, mentions, username) {
+    text = text.replace(/(^|\s)(\\)?(@([a-z\d]+(?:[a-z\d.-]+?[a-z\d]+)*))/gmi, function (wm, st, escape, mentions, username) {
       if (escape === '\\') {
         return st + mentions;
       }
@@ -28817,7 +28879,7 @@ showdown.subParser('anchors', function (text, options, globals) {
       var lnk = options.ghMentionsLink.replace(/\{u}/g, username),
           target = '';
       if (options.openLinksInNewWindow) {
-        target = ' target="¨E95Eblank"';
+        target = ' rel="noopener noreferrer" target="¨E95Eblank"';
       }
       return st + '<a href="' + lnk + '"' + target + '>' + mentions + '</a>';
     });
@@ -28850,7 +28912,7 @@ var simpleURLRegex  = /([*~_]+|\b)(((https?|ftp|dict):\/\/|www\.)[^'">\s]+?\.[^'
           append = trailingPunctuation;
         }
         if (options.openLinksInNewWindow) {
-          target = ' target="¨E95Eblank"';
+          target = ' rel="noopener noreferrer" target="¨E95Eblank"';
         }
         return lmc + '<a href="' + link + '"' + target + '>' + lnkTxt + '</a>' + append + tmc;
       };
@@ -29044,7 +29106,7 @@ showdown.subParser('codeSpans', function (text, options, globals) {
 
   text = globals.converter._dispatch('codeSpans.before', text, options, globals);
 
-  if (typeof(text) === 'undefined') {
+  if (typeof (text) === 'undefined') {
     text = '';
   }
   text = text.replace(/(^|[^\\])(`+)([^\r]*?[^`])\2(?!`)/gm,
@@ -29064,7 +29126,7 @@ showdown.subParser('codeSpans', function (text, options, globals) {
 });
 
 /**
- * Turn Markdown link shortcuts into XHTML <a> tags.
+ * Create a full HTML document from the processed markdown
  */
 showdown.subParser('completeHTMLDocument', function (text, options, globals) {
 
@@ -29160,6 +29222,10 @@ showdown.subParser('detab', function (text, options, globals) {
 
 showdown.subParser('ellipsis', function (text, options, globals) {
 
+  if (!options.ellipsis) {
+    return text;
+  }
+
   text = globals.converter._dispatch('ellipsis.before', text, options, globals);
 
   text = text.replace(/\.\.\./g, '…');
@@ -29170,8 +29236,9 @@ showdown.subParser('ellipsis', function (text, options, globals) {
 });
 
 /**
- * These are all the transformations that occur *within* block-level
- * tags like paragraphs, headers, and list items.
+ * Turn emoji codes into emojis
+ *
+ * List of supported emojis: https://github.com/showdownjs/showdown/wiki/Emojis
  */
 showdown.subParser('emoji', function (text, options, globals) {
 
@@ -29233,7 +29300,7 @@ showdown.subParser('encodeBackslashEscapes', function (text, options, globals) {
   text = globals.converter._dispatch('encodeBackslashEscapes.before', text, options, globals);
 
   text = text.replace(/\\(\\)/g, showdown.helper.escapeCharactersCallback);
-  text = text.replace(/\\([`*_{}\[\]()>#+.!~=|-])/g, showdown.helper.escapeCharactersCallback);
+  text = text.replace(/\\([`*_{}\[\]()>#+.!~=|:-])/g, showdown.helper.escapeCharactersCallback);
 
   text = globals.converter._dispatch('encodeBackslashEscapes.after', text, options, globals);
   return text;
@@ -29309,7 +29376,7 @@ showdown.subParser('githubCodeBlocks', function (text, options, globals) {
 
   text += '¨0';
 
-  text = text.replace(/(?:^|\n)(```+|~~~+)([^\s`~]*)\n([\s\S]*?)\n\1/g, function (wholeMatch, delim, language, codeblock) {
+  text = text.replace(/(?:^|\n)(?: {0,3})(```+|~~~+)(?: *)([^\s`~]*)\n([\s\S]*?)\n(?: {0,3})\1/g, function (wholeMatch, delim, language, codeblock) {
     var end = (options.omitExtraWLInCodeBlocks) ? '' : '\n';
 
     // First parse the github code block
@@ -29450,7 +29517,7 @@ showdown.subParser('hashHTMLBlocks', function (text, options, globals) {
 
       //2. Split the text in that position
       var subTexts = showdown.helper.splitAtIndex(text, opTagPos),
-      //3. Match recursively
+          //3. Match recursively
           newSubText1 = showdown.helper.replaceRecursiveRegExp(subTexts[1], repFunc, patLeft, patRight, 'im');
 
       // prevent an infinite loop
@@ -29565,13 +29632,13 @@ showdown.subParser('headers', function (text, options, globals) {
 
   var headerLevelStart = (isNaN(parseInt(options.headerLevelStart))) ? 1 : parseInt(options.headerLevelStart),
 
-  // Set text-style headers:
-  //	Header 1
-  //	========
-  //
-  //	Header 2
-  //	--------
-  //
+      // Set text-style headers:
+      //	Header 1
+      //	========
+      //
+      //	Header 2
+      //	--------
+      //
       setextRegexH1 = (options.smoothLivePreview) ? /^(.+)[ \t]*\n={2,}[ \t]*\n+/gm : /^(.+)[ \t]*\n=+[ \t]*\n+/gm,
       setextRegexH2 = (options.smoothLivePreview) ? /^(.+)[ \t]*\n-{2,}[ \t]*\n+/gm : /^(.+)[ \t]*\n-+[ \t]*\n+/gm;
 
@@ -29762,7 +29829,7 @@ showdown.subParser('images', function (text, options, globals) {
     url = url.replace(showdown.helper.regexes.asteriskDashAndColon, showdown.helper.escapeCharactersCallback);
     var result = '<img src="' + url + '" alt="' + altText + '"';
 
-    if (title) {
+    if (title && showdown.helper.isString(title)) {
       title = title
         .replace(/"/g, '&quot;')
       //title = showdown.helper.escapeCharacters(title, '*_', false);
@@ -29823,10 +29890,10 @@ showdown.subParser('italicsAndBold', function (text, options, globals) {
 
   // Parse underscores
   if (options.literalMidWordUnderscores) {
-    text = text.replace(/\b___(\S[\s\S]*)___\b/g, function (wm, txt) {
+    text = text.replace(/\b___(\S[\s\S]*?)___\b/g, function (wm, txt) {
       return parseInside (txt, '<strong><em>', '</em></strong>');
     });
-    text = text.replace(/\b__(\S[\s\S]*)__\b/g, function (wm, txt) {
+    text = text.replace(/\b__(\S[\s\S]*?)__\b/g, function (wm, txt) {
       return parseInside (txt, '<strong>', '</strong>');
     });
     text = text.replace(/\b_(\S[\s\S]*?)_\b/g, function (wm, txt) {
@@ -29847,13 +29914,13 @@ showdown.subParser('italicsAndBold', function (text, options, globals) {
 
   // Now parse asterisks
   if (options.literalMidWordAsterisks) {
-    text = text.replace(/([^*]|^)\B\*\*\*(\S[\s\S]+?)\*\*\*\B(?!\*)/g, function (wm, lead, txt) {
+    text = text.replace(/([^*]|^)\B\*\*\*(\S[\s\S]*?)\*\*\*\B(?!\*)/g, function (wm, lead, txt) {
       return parseInside (txt, lead + '<strong><em>', '</em></strong>');
     });
-    text = text.replace(/([^*]|^)\B\*\*(\S[\s\S]+?)\*\*\B(?!\*)/g, function (wm, lead, txt) {
+    text = text.replace(/([^*]|^)\B\*\*(\S[\s\S]*?)\*\*\B(?!\*)/g, function (wm, lead, txt) {
       return parseInside (txt, lead + '<strong>', '</strong>');
     });
-    text = text.replace(/([^*]|^)\B\*(\S[\s\S]+?)\*\B(?!\*)/g, function (wm, lead, txt) {
+    text = text.replace(/([^*]|^)\B\*(\S[\s\S]*?)\*\B(?!\*)/g, function (wm, lead, txt) {
       return parseInside (txt, lead + '<em>', '</em>');
     });
   } else {
@@ -30307,14 +30374,19 @@ showdown.subParser('strikethrough', function (text, options, globals) {
  */
 showdown.subParser('stripLinkDefinitions', function (text, options, globals) {
 
-  var regex       = /^ {0,3}\[(.+)]:[ \t]*\n?[ \t]*<?([^>\s]+)>?(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*\n?[ \t]*(?:(\n*)["|'(](.+?)["|')][ \t]*)?(?:\n+|(?=¨0))/gm,
-      base64Regex = /^ {0,3}\[(.+)]:[ \t]*\n?[ \t]*<?(data:.+?\/.+?;base64,[A-Za-z0-9+/=\n]+?)>?(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*\n?[ \t]*(?:(\n*)["|'(](.+?)["|')][ \t]*)?(?:\n\n|(?=¨0)|(?=\n\[))/gm;
+  var regex       = /^ {0,3}\[([^\]]+)]:[ \t]*\n?[ \t]*<?([^>\s]+)>?(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*\n?[ \t]*(?:(\n*)["|'(](.+?)["|')][ \t]*)?(?:\n+|(?=¨0))/gm,
+      base64Regex = /^ {0,3}\[([^\]]+)]:[ \t]*\n?[ \t]*<?(data:.+?\/.+?;base64,[A-Za-z0-9+/=\n]+?)>?(?: =([*\d]+[A-Za-z%]{0,4})x([*\d]+[A-Za-z%]{0,4}))?[ \t]*\n?[ \t]*(?:(\n*)["|'(](.+?)["|')][ \t]*)?(?:\n\n|(?=¨0)|(?=\n\[))/gm;
 
   // attacklab: sentinel workarounds for lack of \A and \Z, safari\khtml bug
   text += '¨0';
 
   var replaceFunc = function (wholeMatch, linkId, url, width, height, blankLines, title) {
+
+    // if there aren't two instances of linkId it must not be a reference link so back out
     linkId = linkId.toLowerCase();
+    if (text.toLowerCase().split(linkId).length - 1 < 2) {
+      return wholeMatch;
+    }
     if (url.match(/^data:.+?\/.+?;base64,/)) {
       // remove newlines
       globals.gUrls[linkId] = url.replace(/\s/g, '');
@@ -30360,7 +30432,7 @@ showdown.subParser('tables', function (text, options, globals) {
   }
 
   var tableRgx       = /^ {0,3}\|?.+\|.+\n {0,3}\|?[ \t]*:?[ \t]*(?:[-=]){2,}[ \t]*:?[ \t]*\|[ \t]*:?[ \t]*(?:[-=]){2,}[\s\S]+?(?:\n\n|¨0)/gm,
-    //singeColTblRgx = /^ {0,3}\|.+\|\n {0,3}\|[ \t]*:?[ \t]*(?:[-=]){2,}[ \t]*:?[ \t]*\|[ \t]*\n(?: {0,3}\|.+\|\n)+(?:\n\n|¨0)/gm;
+      //singeColTblRgx = /^ {0,3}\|.+\|\n {0,3}\|[ \t]*:?[ \t]*(?:[-=]){2,}[ \t]*:?[ \t]*\|[ \t]*\n(?: {0,3}\|.+\|\n)+(?:\n\n|¨0)/gm;
       singeColTblRgx = /^ {0,3}\|.+\|[ \t]*\n {0,3}\|[ \t]*:?[ \t]*(?:[-=]){2,}[ \t]*:?[ \t]*\|[ \t]*\n( {0,3}\|.+\|[ \t]*\n)*(?:\n|¨0)/gm;
 
   function parseStyles (sLine) {
@@ -30502,11 +30574,17 @@ showdown.subParser('underline', function (text, options, globals) {
   text = globals.converter._dispatch('underline.before', text, options, globals);
 
   if (options.literalMidWordUnderscores) {
-    text = text.replace(/\b_?__(\S[\s\S]*)___?\b/g, function (wm, txt) {
+    text = text.replace(/\b___(\S[\s\S]*?)___\b/g, function (wm, txt) {
+      return '<u>' + txt + '</u>';
+    });
+    text = text.replace(/\b__(\S[\s\S]*?)__\b/g, function (wm, txt) {
       return '<u>' + txt + '</u>';
     });
   } else {
-    text = text.replace(/_?__(\S[\s\S]*?)___?/g, function (wm, m) {
+    text = text.replace(/___(\S[\s\S]*?)___/g, function (wm, m) {
+      return (/\S$/.test(m)) ? '<u>' + m + '</u>' : wm;
+    });
+    text = text.replace(/__(\S[\s\S]*?)__/g, function (wm, m) {
       return (/\S$/.test(m)) ? '<u>' + m + '</u>' : wm;
     });
   }
@@ -30534,6 +30612,474 @@ showdown.subParser('unescapeSpecialChars', function (text, options, globals) {
   return text;
 });
 
+showdown.subParser('makeMarkdown.blockquote', function (node, globals) {
+
+  var txt = '';
+  if (node.hasChildNodes()) {
+    var children = node.childNodes,
+        childrenLength = children.length;
+
+    for (var i = 0; i < childrenLength; ++i) {
+      var innerTxt = showdown.subParser('makeMarkdown.node')(children[i], globals);
+
+      if (innerTxt === '') {
+        continue;
+      }
+      txt += innerTxt;
+    }
+  }
+  // cleanup
+  txt = txt.trim();
+  txt = '> ' + txt.split('\n').join('\n> ');
+  return txt;
+});
+
+showdown.subParser('makeMarkdown.codeBlock', function (node, globals) {
+
+  var lang = node.getAttribute('language'),
+      num  = node.getAttribute('precodenum');
+  return '```' + lang + '\n' + globals.preList[num] + '\n```';
+});
+
+showdown.subParser('makeMarkdown.codeSpan', function (node) {
+
+  return '`' + node.innerHTML + '`';
+});
+
+showdown.subParser('makeMarkdown.emphasis', function (node, globals) {
+
+  var txt = '';
+  if (node.hasChildNodes()) {
+    txt += '*';
+    var children = node.childNodes,
+        childrenLength = children.length;
+    for (var i = 0; i < childrenLength; ++i) {
+      txt += showdown.subParser('makeMarkdown.node')(children[i], globals);
+    }
+    txt += '*';
+  }
+  return txt;
+});
+
+showdown.subParser('makeMarkdown.header', function (node, globals, headerLevel) {
+
+  var headerMark = new Array(headerLevel + 1).join('#'),
+      txt = '';
+
+  if (node.hasChildNodes()) {
+    txt = headerMark + ' ';
+    var children = node.childNodes,
+        childrenLength = children.length;
+
+    for (var i = 0; i < childrenLength; ++i) {
+      txt += showdown.subParser('makeMarkdown.node')(children[i], globals);
+    }
+  }
+  return txt;
+});
+
+showdown.subParser('makeMarkdown.hr', function () {
+
+  return '---';
+});
+
+showdown.subParser('makeMarkdown.image', function (node) {
+
+  var txt = '';
+  if (node.hasAttribute('src')) {
+    txt += '![' + node.getAttribute('alt') + '](';
+    txt += '<' + node.getAttribute('src') + '>';
+    if (node.hasAttribute('width') && node.hasAttribute('height')) {
+      txt += ' =' + node.getAttribute('width') + 'x' + node.getAttribute('height');
+    }
+
+    if (node.hasAttribute('title')) {
+      txt += ' "' + node.getAttribute('title') + '"';
+    }
+    txt += ')';
+  }
+  return txt;
+});
+
+showdown.subParser('makeMarkdown.links', function (node, globals) {
+
+  var txt = '';
+  if (node.hasChildNodes() && node.hasAttribute('href')) {
+    var children = node.childNodes,
+        childrenLength = children.length;
+    txt = '[';
+    for (var i = 0; i < childrenLength; ++i) {
+      txt += showdown.subParser('makeMarkdown.node')(children[i], globals);
+    }
+    txt += '](';
+    txt += '<' + node.getAttribute('href') + '>';
+    if (node.hasAttribute('title')) {
+      txt += ' "' + node.getAttribute('title') + '"';
+    }
+    txt += ')';
+  }
+  return txt;
+});
+
+showdown.subParser('makeMarkdown.list', function (node, globals, type) {
+
+  var txt = '';
+  if (!node.hasChildNodes()) {
+    return '';
+  }
+  var listItems       = node.childNodes,
+      listItemsLenght = listItems.length,
+      listNum = node.getAttribute('start') || 1;
+
+  for (var i = 0; i < listItemsLenght; ++i) {
+    if (typeof listItems[i].tagName === 'undefined' || listItems[i].tagName.toLowerCase() !== 'li') {
+      continue;
+    }
+
+    // define the bullet to use in list
+    var bullet = '';
+    if (type === 'ol') {
+      bullet = listNum.toString() + '. ';
+    } else {
+      bullet = '- ';
+    }
+
+    // parse list item
+    txt += bullet + showdown.subParser('makeMarkdown.listItem')(listItems[i], globals);
+    ++listNum;
+  }
+
+  // add comment at the end to prevent consecutive lists to be parsed as one
+  txt += '\n<!-- -->\n';
+  return txt.trim();
+});
+
+showdown.subParser('makeMarkdown.listItem', function (node, globals) {
+
+  var listItemTxt = '';
+
+  var children = node.childNodes,
+      childrenLenght = children.length;
+
+  for (var i = 0; i < childrenLenght; ++i) {
+    listItemTxt += showdown.subParser('makeMarkdown.node')(children[i], globals);
+  }
+  // if it's only one liner, we need to add a newline at the end
+  if (!/\n$/.test(listItemTxt)) {
+    listItemTxt += '\n';
+  } else {
+    // it's multiparagraph, so we need to indent
+    listItemTxt = listItemTxt
+      .split('\n')
+      .join('\n    ')
+      .replace(/^ {4}$/gm, '')
+      .replace(/\n\n+/g, '\n\n');
+  }
+
+  return listItemTxt;
+});
+
+
+
+showdown.subParser('makeMarkdown.node', function (node, globals, spansOnly) {
+
+  spansOnly = spansOnly || false;
+
+  var txt = '';
+
+  // edge case of text without wrapper paragraph
+  if (node.nodeType === 3) {
+    return showdown.subParser('makeMarkdown.txt')(node, globals);
+  }
+
+  // HTML comment
+  if (node.nodeType === 8) {
+    return '<!--' + node.data + '-->\n\n';
+  }
+
+  // process only node elements
+  if (node.nodeType !== 1) {
+    return '';
+  }
+
+  var tagName = node.tagName.toLowerCase();
+
+  switch (tagName) {
+
+    //
+    // BLOCKS
+    //
+    case 'h1':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.header')(node, globals, 1) + '\n\n'; }
+      break;
+    case 'h2':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.header')(node, globals, 2) + '\n\n'; }
+      break;
+    case 'h3':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.header')(node, globals, 3) + '\n\n'; }
+      break;
+    case 'h4':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.header')(node, globals, 4) + '\n\n'; }
+      break;
+    case 'h5':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.header')(node, globals, 5) + '\n\n'; }
+      break;
+    case 'h6':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.header')(node, globals, 6) + '\n\n'; }
+      break;
+
+    case 'p':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.paragraph')(node, globals) + '\n\n'; }
+      break;
+
+    case 'blockquote':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.blockquote')(node, globals) + '\n\n'; }
+      break;
+
+    case 'hr':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.hr')(node, globals) + '\n\n'; }
+      break;
+
+    case 'ol':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.list')(node, globals, 'ol') + '\n\n'; }
+      break;
+
+    case 'ul':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.list')(node, globals, 'ul') + '\n\n'; }
+      break;
+
+    case 'precode':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.codeBlock')(node, globals) + '\n\n'; }
+      break;
+
+    case 'pre':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.pre')(node, globals) + '\n\n'; }
+      break;
+
+    case 'table':
+      if (!spansOnly) { txt = showdown.subParser('makeMarkdown.table')(node, globals) + '\n\n'; }
+      break;
+
+    //
+    // SPANS
+    //
+    case 'code':
+      txt = showdown.subParser('makeMarkdown.codeSpan')(node, globals);
+      break;
+
+    case 'em':
+    case 'i':
+      txt = showdown.subParser('makeMarkdown.emphasis')(node, globals);
+      break;
+
+    case 'strong':
+    case 'b':
+      txt = showdown.subParser('makeMarkdown.strong')(node, globals);
+      break;
+
+    case 'del':
+      txt = showdown.subParser('makeMarkdown.strikethrough')(node, globals);
+      break;
+
+    case 'a':
+      txt = showdown.subParser('makeMarkdown.links')(node, globals);
+      break;
+
+    case 'img':
+      txt = showdown.subParser('makeMarkdown.image')(node, globals);
+      break;
+
+    default:
+      txt = node.outerHTML + '\n\n';
+  }
+
+  // common normalization
+  // TODO eventually
+
+  return txt;
+});
+
+showdown.subParser('makeMarkdown.paragraph', function (node, globals) {
+
+  var txt = '';
+  if (node.hasChildNodes()) {
+    var children = node.childNodes,
+        childrenLength = children.length;
+    for (var i = 0; i < childrenLength; ++i) {
+      txt += showdown.subParser('makeMarkdown.node')(children[i], globals);
+    }
+  }
+
+  // some text normalization
+  txt = txt.trim();
+
+  return txt;
+});
+
+showdown.subParser('makeMarkdown.pre', function (node, globals) {
+
+  var num  = node.getAttribute('prenum');
+  return '<pre>' + globals.preList[num] + '</pre>';
+});
+
+showdown.subParser('makeMarkdown.strikethrough', function (node, globals) {
+
+  var txt = '';
+  if (node.hasChildNodes()) {
+    txt += '~~';
+    var children = node.childNodes,
+        childrenLength = children.length;
+    for (var i = 0; i < childrenLength; ++i) {
+      txt += showdown.subParser('makeMarkdown.node')(children[i], globals);
+    }
+    txt += '~~';
+  }
+  return txt;
+});
+
+showdown.subParser('makeMarkdown.strong', function (node, globals) {
+
+  var txt = '';
+  if (node.hasChildNodes()) {
+    txt += '**';
+    var children = node.childNodes,
+        childrenLength = children.length;
+    for (var i = 0; i < childrenLength; ++i) {
+      txt += showdown.subParser('makeMarkdown.node')(children[i], globals);
+    }
+    txt += '**';
+  }
+  return txt;
+});
+
+showdown.subParser('makeMarkdown.table', function (node, globals) {
+
+  var txt = '',
+      tableArray = [[], []],
+      headings   = node.querySelectorAll('thead>tr>th'),
+      rows       = node.querySelectorAll('tbody>tr'),
+      i, ii;
+  for (i = 0; i < headings.length; ++i) {
+    var headContent = showdown.subParser('makeMarkdown.tableCell')(headings[i], globals),
+        allign = '---';
+
+    if (headings[i].hasAttribute('style')) {
+      var style = headings[i].getAttribute('style').toLowerCase().replace(/\s/g, '');
+      switch (style) {
+        case 'text-align:left;':
+          allign = ':---';
+          break;
+        case 'text-align:right;':
+          allign = '---:';
+          break;
+        case 'text-align:center;':
+          allign = ':---:';
+          break;
+      }
+    }
+    tableArray[0][i] = headContent.trim();
+    tableArray[1][i] = allign;
+  }
+
+  for (i = 0; i < rows.length; ++i) {
+    var r = tableArray.push([]) - 1,
+        cols = rows[i].getElementsByTagName('td');
+
+    for (ii = 0; ii < headings.length; ++ii) {
+      var cellContent = ' ';
+      if (typeof cols[ii] !== 'undefined') {
+        cellContent = showdown.subParser('makeMarkdown.tableCell')(cols[ii], globals);
+      }
+      tableArray[r].push(cellContent);
+    }
+  }
+
+  var cellSpacesCount = 3;
+  for (i = 0; i < tableArray.length; ++i) {
+    for (ii = 0; ii < tableArray[i].length; ++ii) {
+      var strLen = tableArray[i][ii].length;
+      if (strLen > cellSpacesCount) {
+        cellSpacesCount = strLen;
+      }
+    }
+  }
+
+  for (i = 0; i < tableArray.length; ++i) {
+    for (ii = 0; ii < tableArray[i].length; ++ii) {
+      if (i === 1) {
+        if (tableArray[i][ii].slice(-1) === ':') {
+          tableArray[i][ii] = showdown.helper.padEnd(tableArray[i][ii].slice(-1), cellSpacesCount - 1, '-') + ':';
+        } else {
+          tableArray[i][ii] = showdown.helper.padEnd(tableArray[i][ii], cellSpacesCount, '-');
+        }
+      } else {
+        tableArray[i][ii] = showdown.helper.padEnd(tableArray[i][ii], cellSpacesCount);
+      }
+    }
+    txt += '| ' + tableArray[i].join(' | ') + ' |\n';
+  }
+
+  return txt.trim();
+});
+
+showdown.subParser('makeMarkdown.tableCell', function (node, globals) {
+
+  var txt = '';
+  if (!node.hasChildNodes()) {
+    return '';
+  }
+  var children = node.childNodes,
+      childrenLength = children.length;
+
+  for (var i = 0; i < childrenLength; ++i) {
+    txt += showdown.subParser('makeMarkdown.node')(children[i], globals, true);
+  }
+  return txt.trim();
+});
+
+showdown.subParser('makeMarkdown.txt', function (node) {
+
+  var txt = node.nodeValue;
+
+  // multiple spaces are collapsed
+  txt = txt.replace(/ +/g, ' ');
+
+  // replace the custom ¨NBSP; with a space
+  txt = txt.replace(/¨NBSP;/g, ' ');
+
+  // ", <, > and & should replace escaped html entities
+  txt = showdown.helper.unescapeHTMLEntities(txt);
+
+  // escape markdown magic characters
+  // emphasis, strong and strikethrough - can appear everywhere
+  // we also escape pipe (|) because of tables
+  // and escape ` because of code blocks and spans
+  txt = txt.replace(/([*_~|`])/g, '\\$1');
+
+  // escape > because of blockquotes
+  txt = txt.replace(/^(\s*)>/g, '\\$1>');
+
+  // hash character, only troublesome at the beginning of a line because of headers
+  txt = txt.replace(/^#/gm, '\\#');
+
+  // horizontal rules
+  txt = txt.replace(/^(\s*)([-=]{3,})(\s*)$/, '$1\\$2$3');
+
+  // dot, because of ordered lists, only troublesome at the beginning of a line when preceded by an integer
+  txt = txt.replace(/^( {0,3}\d+)\./gm, '$1\\.');
+
+  // +, * and -, at the beginning of a line becomes a list, so we need to escape them also (asterisk was already escaped)
+  txt = txt.replace(/^( {0,3})([+-])/gm, '$1\\$2');
+
+  // images and links, ] followed by ( is problematic, so we escape it
+  txt = txt.replace(/]([\s]*)\(/g, '\\]$1\\(');
+
+  // reference URIs must also be escaped
+  txt = txt.replace(/^ {0,3}\[([\S \t]*?)]:/gm, '\\[$1]:');
+
+  return txt;
+});
+
 var root = this;
 
 // AMD Loader
@@ -30563,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
@@ -30640,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 }))));
 };
@@ -30712,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();
@@ -30764,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' },
@@ -30780,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));
     },
 }), []);
@@ -30939,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,
@@ -31004,6 +31569,29 @@ 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))));
 };
 
+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 })))));
+};
+
+var outlinedBookmarkIcon = createCommonjsModule(function (module, exports) {
+exports.__esModule = true;
+exports.OutlinedBookmarkIconConfig = {
+  name: 'OutlinedBookmarkIcon',
+  height: 512,
+  width: 384,
+  svgPath: 'M336 0H48C21.49 0 0 21.49 0 48v464l192-112 192 112V48c0-26.51-21.49-48-48-48zm0 428.43l-144-84-144 84V54a6 6 0 0 1 6-6h276c3.314 0 6 2.683 6 5.996V428.43z',
+  yOffset: 0,
+  xOffset: 0,
+};
+exports.OutlinedBookmarkIcon = createIcon_1.createIcon(exports.OutlinedBookmarkIconConfig);
+exports["default"] = exports.OutlinedBookmarkIcon;
+});
+
+var OutlinedBookmarkIcon = /*@__PURE__*/getDefaultExportFromCjs(outlinedBookmarkIcon);
+
 var outlinedClockIcon = createCommonjsModule(function (module, exports) {
 exports.__esModule = true;
 exports.OutlinedClockIconConfig = {
@@ -31020,39 +31608,36 @@ exports["default"] = exports.OutlinedClockIcon;
 
 var OutlinedClockIcon = /*@__PURE__*/getDefaultExportFromCjs(outlinedClockIcon);
 
-const statusColorMap = {
-    [QuickStartStatus.COMPLETE]: 'green',
-    [QuickStartStatus.IN_PROGRESS]: 'purple',
-    [QuickStartStatus.NOT_STARTED]: 'grey',
-};
-const QuickStartTileHeader = ({ status, duration, name, type, quickStartId, }) => {
-    const { getResource } = React.useContext(QuickStartContext);
+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'),
     };
-    return (React.createElement("div", { className: "pfext-quick-start-tile-header" },
-        React.createElement(Title, { headingLevel: "h3", "data-test": "title", id: quickStartId },
-            React.createElement(QuickStartMarkdownView, { content: name })),
-        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 = () => { }, }) => {
-    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;
@@ -31060,47 +31645,44 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
         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) {
-                window.open(link.href);
-            }
-            else {
-                setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
-            }
-            onClick();
-        }
-    };
-    return (React.createElement("div", { ref: ref },
-        React.createElement(CatalogTile, { 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 }), onClick: handleClick, onKeyDown: (event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                    setActiveQuickStart(id, tasks === null || tasks === void 0 ? void 0 : tasks.length);
-                    onClick();
-                }
-            }, 
-            // https://github.com/patternfly/patternfly-react/issues/7039
-            href: link === null || link === void 0 ? void 0 : link.href, "data-test": `tile ${id}`, description: React.createElement(QuickStartTileDescription, { description: description, prerequisites: prerequisites }), footer: footerComponent, tabIndex: 0 })));
+    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) => {
@@ -31115,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);
@@ -31205,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 }),
@@ -31281,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,
@@ -31327,35 +31910,35 @@ var ArrowRightIcon = /*@__PURE__*/getDefaultExportFromCjs(arrowRightIcon);
 
 const QuickStartTaskHeader = ({ title, taskIndex, subtitle, taskStatus, size, isActiveTask, onTaskSelect, children, }) => {
     const titleRef = React.useRef(null);
+    const { focusOnQuickStart } = React.useContext(QuickStartContext);
     React.useEffect(() => {
-        if (isActiveTask) {
+        if (focusOnQuickStart && isActiveTask) {
             // Focus the WizardNavItem button element that contains the title
             titleRef.current.parentNode.focus();
         }
-    }, [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;
+    }, [focusOnQuickStart, isActiveTask]);
     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);
@@ -31370,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)));
             })));
 };
 
@@ -31381,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 })));
 };
@@ -31407,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) }),
@@ -31422,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) => {
@@ -31434,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 })))))));
         }))));
@@ -31442,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'),
@@ -31478,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, }) => {
@@ -31499,7 +32078,7 @@ const QuickStartController = ({ quickStart, nextQuickStarts, contentRef, footerC
     const getQuickStartActiveTask = React.useCallback(() => {
         let activeTaskNumber = 0;
         while (activeTaskNumber !== totalTasks &&
-            activeQuickStartState[`taskStatus${activeTaskNumber}`] !== QuickStartTaskStatus.INIT) {
+            activeQuickStartState[`taskStatus${activeTaskNumber}`] === QuickStartTaskStatus.SUCCESS) {
             activeTaskNumber++;
         }
         return activeTaskNumber;
@@ -31523,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) => {
@@ -31540,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 } = React.useContext(QuickStartContext);
+    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';
         }
@@ -31567,27 +32139,25 @@ const QuickStartPanelContent = (_a) => {
         return Number.parseInt(taskNumber) + 1;
     };
     React.useEffect(() => {
-        if (quickStart) {
+        if (focusOnQuickStart && quickStart) {
             titleRef.current.focus();
         }
-    }, [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 },
+    }, [focusOnQuickStart, quickStart]);
+    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));
@@ -31627,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);
@@ -31686,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 })));
 };
 
@@ -31767,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;
 };
 
@@ -31809,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) => {