@patternfly/quickstarts 2.2.0 → 2.2.3

package/dist/quickstarts-full.es.js

@@ -86,7 +86,7 @@ function createCommonjsModule(fn) {
 	return fn(module, module.exports), module.exports;
 }
 
-var _default$y = {
+var _default$z = {
   "backdrop": "pf-c-backdrop",
   "backdropOpen": "pf-c-backdrop__open"
 };
@@ -3084,11 +3084,11 @@ const Popper = ({ trigger, popper, popperMatchesTriggerWidth = true, direction =
 };
 Popper.displayName = 'Popper';
 
-var _default$x = {
+var _default$y = {
   "bullseye": "pf-l-bullseye"
 };
 
-var _default$w = {
+var _default$x = {
   "content": "pf-c-content",
   "modifiers": {
     "visited": "pf-m-visited",
@@ -3096,7 +3096,7 @@ var _default$w = {
   }
 };
 
-var _default$v = {
+var _default$w = {
   "modifiers": {
     "4xl": "pf-m-4xl",
     "3xl": "pf-m-3xl",
@@ -3130,11 +3130,11 @@ var headingLevelSizeMap;
 const Title = (_a) => {
     var { className = '', children = '', headingLevel: HeadingLevel, size = headingLevelSizeMap[HeadingLevel], ouiaId, ouiaSafe = true } = _a, props = __rest$2(_a, ["className", "children", "headingLevel", "size", "ouiaId", "ouiaSafe"]);
     const ouiaProps = useOUIAProps$1(Title.displayName, ouiaId, ouiaSafe);
-    return (React.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css(_default$v.title, size && _default$v.modifiers[size], className) }), children));
+    return (React.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css(_default$w.title, size && _default$w.modifiers[size], className) }), children));
 };
 Title.displayName = 'Title';
 
-var _default$u = {
+var _default$v = {
   "button": "pf-c-button",
   "buttonIcon": "pf-c-button__icon",
   "buttonProgress": "pf-c-button__progress",
@@ -3164,7 +3164,7 @@ var _default$u = {
   "spinner": "pf-c-spinner"
 };
 
-var _default$t = {
+var _default$u = {
   "modifiers": {
     "sm": "pf-m-sm",
     "md": "pf-m-md",
@@ -3190,10 +3190,10 @@ const Spinner$1 = (_a) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', isSVG = false, diameter } = _a, props = __rest$2(_a, ["className", "size", 'aria-valuetext', "isSVG", "diameter"]);
     const Component = isSVG ? 'svg' : 'span';
-    return (React.createElement(Component, Object.assign({ className: css(_default$t.spinner, _default$t.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), props), isSVG ? (React.createElement("circle", { className: _default$t.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: css(_default$t.spinnerClipper) }),
-        React.createElement("span", { className: css(_default$t.spinnerLeadBall) }),
-        React.createElement("span", { className: css(_default$t.spinnerTailBall) })))));
+    return (React.createElement(Component, Object.assign({ className: css(_default$u.spinner, _default$u.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), props), isSVG ? (React.createElement("circle", { className: _default$u.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: css(_default$u.spinnerClipper) }),
+        React.createElement("span", { className: css(_default$u.spinnerLeadBall) }),
+        React.createElement("span", { className: css(_default$u.spinnerTailBall) })))));
 };
 Spinner$1.displayName = 'Spinner';
 
@@ -3234,12 +3234,12 @@ const ButtonBase$1 = (_a) => {
             return 0;
         }
     };
-    return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isDisabled || isAriaDisabled, "aria-label": ariaLabel, className: css(_default$u.button, _default$u.modifiers[variant], isBlock && _default$u.modifiers.block, isDisabled && _default$u.modifiers.disabled, isAriaDisabled && _default$u.modifiers.ariaDisabled, isActive && _default$u.modifiers.active, isInline && variant === ButtonVariant$1.link && _default$u.modifiers.inline, isDanger && (variant === ButtonVariant$1.secondary || variant === ButtonVariant$1.link) && _default$u.modifiers.danger, isLoading !== null && _default$u.modifiers.progress, isLoading && _default$u.modifiers.inProgress, isSmall && _default$u.modifiers.small, isLarge && _default$u.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : null, ref: innerRef }, ouiaProps),
-        isLoading && (React.createElement("span", { className: css(_default$u.buttonProgress) },
+    return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isDisabled || isAriaDisabled, "aria-label": ariaLabel, className: css(_default$v.button, _default$v.modifiers[variant], isBlock && _default$v.modifiers.block, isDisabled && _default$v.modifiers.disabled, isAriaDisabled && _default$v.modifiers.ariaDisabled, isActive && _default$v.modifiers.active, isInline && variant === ButtonVariant$1.link && _default$v.modifiers.inline, isDanger && (variant === ButtonVariant$1.secondary || variant === ButtonVariant$1.link) && _default$v.modifiers.danger, isLoading !== null && _default$v.modifiers.progress, isLoading && _default$v.modifiers.inProgress, isSmall && _default$v.modifiers.small, isLarge && _default$v.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : null, ref: innerRef }, ouiaProps),
+        isLoading && (React.createElement("span", { className: css(_default$v.buttonProgress) },
             React.createElement(Spinner$1, { size: spinnerSize$1.md, "aria-valuetext": spinnerAriaValueText }))),
-        variant !== ButtonVariant$1.plain && icon && iconPosition === 'left' && (React.createElement("span", { className: css(_default$u.buttonIcon, _default$u.modifiers.start) }, icon)),
+        variant !== ButtonVariant$1.plain && icon && iconPosition === 'left' && (React.createElement("span", { className: css(_default$v.buttonIcon, _default$v.modifiers.start) }, icon)),
         children,
-        variant !== ButtonVariant$1.plain && icon && iconPosition === 'right' && (React.createElement("span", { className: css(_default$u.buttonIcon, _default$u.modifiers.end) }, icon))));
+        variant !== ButtonVariant$1.plain && icon && iconPosition === 'right' && (React.createElement("span", { className: css(_default$v.buttonIcon, _default$v.modifiers.end) }, icon))));
 };
 const Button$1 = React.forwardRef((props, ref) => (React.createElement(ButtonBase$1, Object.assign({ innerRef: ref }, props))));
 Button$1.displayName = 'Button';
@@ -3577,7 +3577,7 @@ const TimesIcon = createIcon(TimesIconConfig);
 
 const Backdrop = (_a) => {
     var { children = null, className = '' } = _a, props = __rest$2(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({}, props, { className: css(_default$y.backdrop, className) }), children));
+    return (React.createElement("div", Object.assign({}, props, { className: css(_default$z.backdrop, className) }), children));
 };
 Backdrop.displayName = 'Backdrop';
 
@@ -3592,7 +3592,7 @@ const AngleRightIconConfig = {
 
 const AngleRightIcon = createIcon(AngleRightIconConfig);
 
-var _default$s = {
+var _default$t = {
   "alert": "pf-c-alert",
   "alertAction": "pf-c-alert__action",
   "alertActionGroup": "pf-c-alert__action-group",
@@ -3611,7 +3611,7 @@ var _default$s = {
   }
 };
 
-var _default$r = {
+var _default$s = {
   "hidden": "pf-u-hidden",
   "hiddenOnLg": "pf-u-hidden-on-lg",
   "hiddenOnMd": "pf-u-hidden-on-md",
@@ -3697,7 +3697,7 @@ const variantIcons = {
 const AlertIcon = (_a) => {
     var { variant, customIcon, className = '' } = _a, props = __rest$2(_a, ["variant", "customIcon", "className"]);
     const Icon = variantIcons[variant];
-    return (React.createElement("div", Object.assign({}, props, { className: css(_default$s.alertIcon, className) }), customIcon || React.createElement(Icon, null)));
+    return (React.createElement("div", Object.assign({}, props, { className: css(_default$t.alertIcon, className) }), customIcon || React.createElement(Icon, null)));
 };
 
 const AlertContext = React.createContext(null);
@@ -3708,7 +3708,7 @@ const c_alert__title_max_lines = {
   "var": "var(--pf-c-alert__title--max-lines)"
 };
 
-var _default$q = {
+var _default$r = {
   "modifiers": {
     "top": "pf-m-top",
     "bottom": "pf-m-bottom",
@@ -3723,13 +3723,13 @@ var _default$q = {
 
 const TooltipContent = (_a) => {
     var { className, children, isLeftAligned } = _a, props = __rest$2(_a, ["className", "children", "isLeftAligned"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$q.tooltipContent, isLeftAligned && _default$q.modifiers.textAlignLeft, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(_default$r.tooltipContent, isLeftAligned && _default$r.modifiers.textAlignLeft, className) }, props), children));
 };
 TooltipContent.displayName = 'TooltipContent';
 
 const TooltipArrow = (_a) => {
     var { className } = _a, props = __rest$2(_a, ["className"]);
-    return React.createElement("div", Object.assign({ className: css(_default$q.tooltipArrow, className) }, props));
+    return React.createElement("div", Object.assign({ className: css(_default$r.tooltipArrow, className) }, props));
 };
 TooltipArrow.displayName = 'TooltipArrow';
 
@@ -3820,13 +3820,13 @@ const Tooltip = (_a) => {
         }, exitDelay);
     };
     const positionModifiers = {
-        top: _default$q.modifiers.top,
-        bottom: _default$q.modifiers.bottom,
-        left: _default$q.modifiers.left,
-        right: _default$q.modifiers.right
+        top: _default$r.modifiers.top,
+        bottom: _default$r.modifiers.bottom,
+        left: _default$r.modifiers.left,
+        right: _default$r.modifiers.right
     };
     const hasCustomMaxWidth = maxWidth !== c_tooltip_MaxWidth.value;
-    const content = (React.createElement("div", Object.assign({ className: css(_default$q.tooltip, className), role: "tooltip", id: id, style: {
+    const content = (React.createElement("div", Object.assign({ className: css(_default$r.tooltip, className), role: "tooltip", id: id, style: {
             maxWidth: hasCustomMaxWidth ? maxWidth : null,
             opacity,
             transition: getOpacityTransition(animationDuration)
@@ -3871,7 +3871,7 @@ const Alert = (_a) => {
     var { variant = AlertVariant.default, isInline = false, isLiveRegion = false, variantLabel = `${capitalize(variant)} alert:`, 'aria-label': ariaLabel = `${capitalize(variant)} Alert`, actionClose, actionLinks, title, children = '', className = '', ouiaId, ouiaSafe = true, timeout = false, timeoutAnimation = 3000, onTimeout = () => { }, truncateTitle = 0, tooltipPosition, customIcon, onMouseEnter = () => { }, onMouseLeave = () => { } } = _a, props = __rest$2(_a, ["variant", "isInline", "isLiveRegion", "variantLabel", 'aria-label', "actionClose", "actionLinks", "title", "children", "className", "ouiaId", "ouiaSafe", "timeout", "timeoutAnimation", "onTimeout", "truncateTitle", "tooltipPosition", "customIcon", "onMouseEnter", "onMouseLeave"]);
     const ouiaProps = useOUIAProps$1(Alert.displayName, ouiaId, ouiaSafe, variant);
     const getHeadingContent = (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: css(_default$r.screenReader) }, variantLabel),
+        React.createElement("span", { className: css(_default$s.screenReader) }, variantLabel),
         title));
     const titleRef = React.useRef(null);
     const divRef = React.useRef();
@@ -3934,21 +3934,21 @@ const Alert = (_a) => {
     if (dismissed) {
         return null;
     }
-    const Title = (React.createElement("h4", Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css(_default$s.alertTitle, truncateTitle && _default$s.modifiers.truncate) }), getHeadingContent));
-    return (React.createElement("div", Object.assign({ ref: divRef, className: css(_default$s.alert, isInline && _default$s.modifiers.inline, _default$s.modifiers[variant], className), "aria-label": ariaLabel }, ouiaProps, (isLiveRegion && {
+    const Title = (React.createElement("h4", Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css(_default$t.alertTitle, truncateTitle && _default$t.modifiers.truncate) }), getHeadingContent));
+    return (React.createElement("div", Object.assign({ ref: divRef, className: css(_default$t.alert, isInline && _default$t.modifiers.inline, _default$t.modifiers[variant], className), "aria-label": ariaLabel }, ouiaProps, (isLiveRegion && {
         'aria-live': 'polite',
         'aria-atomic': 'false'
     }), { onMouseEnter: myOnMouseEnter, onMouseLeave: myOnMouseLeave }, props),
         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(_default$s.alertAction) }, actionClose))),
-        children && React.createElement("div", { className: css(_default$s.alertDescription) }, children),
-        actionLinks && React.createElement("div", { className: css(_default$s.alertActionGroup) }, actionLinks)));
+            React.createElement("div", { className: css(_default$t.alertAction) }, actionClose))),
+        children && React.createElement("div", { className: css(_default$t.alertDescription) }, children),
+        actionLinks && React.createElement("div", { className: css(_default$t.alertActionGroup) }, actionLinks)));
 };
 Alert.displayName = 'Alert';
 
-var _default$p = {
+var _default$q = {
   "formControl": "pf-c-form-control",
   "modifiers": {
     "success": "pf-m-success",
@@ -3964,7 +3964,7 @@ var _default$p = {
   }
 };
 
-var _default$o = {
+var _default$p = {
   "badge": "pf-c-badge",
   "check": "pf-c-check",
   "divider": "pf-c-divider",
@@ -4142,12 +4142,12 @@ class DropdownMenu extends React.Component {
         return (React.createElement(DropdownArrowContext.Provider, { value: {
                 keyHandler: this.childKeyHandler,
                 sendRef: this.sendRef
-            } }, component === 'div' ? (React.createElement(DropdownContext.Consumer, null, ({ onSelect, menuClass }) => (React.createElement("div", { className: css(menuClass, position === DropdownPosition.right && _default$o.modifiers.alignRight, formatBreakpointMods(alignments, _default$o, 'align-'), className), hidden: !isOpen, onClick: event => onSelect && onSelect(event), ref: setMenuComponentRef }, children)))) : ((isGrouped && (React.createElement(DropdownContext.Consumer, null, ({ menuClass, menuComponent }) => {
+            } }, component === 'div' ? (React.createElement(DropdownContext.Consumer, null, ({ onSelect, menuClass }) => (React.createElement("div", { className: css(menuClass, position === DropdownPosition.right && _default$p.modifiers.alignRight, formatBreakpointMods(alignments, _default$p, 'align-'), className), hidden: !isOpen, onClick: event => onSelect && onSelect(event), ref: setMenuComponentRef }, children)))) : ((isGrouped && (React.createElement(DropdownContext.Consumer, null, ({ menuClass, menuComponent }) => {
             const MenuComponent = (menuComponent || 'div');
-            return (React.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === DropdownPosition.right && _default$o.modifiers.alignRight, formatBreakpointMods(alignments, _default$o, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
+            return (React.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === DropdownPosition.right && _default$p.modifiers.alignRight, formatBreakpointMods(alignments, _default$p, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
         }))) || (React.createElement(DropdownContext.Consumer, null, ({ menuClass, menuComponent }) => {
             const MenuComponent = (menuComponent || component);
-            return (React.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === DropdownPosition.right && _default$o.modifiers.alignRight, formatBreakpointMods(alignments, _default$o, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
+            return (React.createElement(MenuComponent, Object.assign({}, props, { className: css(menuClass, position === DropdownPosition.right && _default$p.modifiers.alignRight, formatBreakpointMods(alignments, _default$p, 'align-'), className), hidden: !isOpen, role: "menu", ref: setMenuComponentRef }), this.extendChildren()));
         })))));
     }
 }
@@ -4162,7 +4162,7 @@ DropdownMenu.defaultProps = {
     isGrouped: false,
     setMenuComponentRef: null
 };
-DropdownMenu.validToggleClasses = [_default$o.dropdownToggle, _default$o.dropdownToggleButton];
+DropdownMenu.validToggleClasses = [_default$p.dropdownToggle, _default$p.dropdownToggleButton];
 DropdownMenu.focusFirstRef = (refCollection) => {
     if (refCollection && refCollection[0] && refCollection[0].focus) {
         setTimeout(() => refCollection[0].focus());
@@ -4214,8 +4214,8 @@ class DropdownWithContext extends React.Component {
         return (React.createElement(DropdownContext.Consumer, null, ({ baseClass, baseComponent, id: contextId, ouiaId, ouiaComponentType, ouiaSafe, alignments }) => {
             const BaseComponent = baseComponent;
             const menuContainer = (React.createElement(DropdownMenu, { setMenuComponentRef: this.setMenuComponentRef, component: component, isOpen: isOpen, position: position, "aria-labelledby": contextId ? `${contextId}-toggle` : id, isGrouped: isGrouped, autoFocus: openedOnEnter && autoFocus, alignments: alignments }, renderedContent));
-            const popperContainer = (React.createElement("div", { className: css(baseClass, direction === DropdownDirection.up && _default$o.modifiers.top, position === DropdownPosition.right && _default$o.modifiers.alignRight, isOpen && _default$o.modifiers.expanded, className) }, isOpen && menuContainer));
-            const mainContainer = (React.createElement(BaseComponent, Object.assign({}, props, { className: css(baseClass, direction === DropdownDirection.up && _default$o.modifiers.top, position === DropdownPosition.right && _default$o.modifiers.alignRight, isOpen && _default$o.modifiers.expanded, className), ref: this.baseComponentRef }, getOUIAProps(ouiaComponentType, ouiaId, ouiaSafe)),
+            const popperContainer = (React.createElement("div", { className: css(baseClass, direction === DropdownDirection.up && _default$p.modifiers.top, position === DropdownPosition.right && _default$p.modifiers.alignRight, isOpen && _default$p.modifiers.expanded, className) }, isOpen && menuContainer));
+            const mainContainer = (React.createElement(BaseComponent, Object.assign({}, props, { className: css(baseClass, direction === DropdownDirection.up && _default$p.modifiers.top, position === DropdownPosition.right && _default$p.modifiers.alignRight, isOpen && _default$p.modifiers.expanded, className), ref: this.baseComponentRef }, getOUIAProps(ouiaComponentType, ouiaId, ouiaSafe)),
                 React.Children.map(toggle, oneToggle => React.cloneElement(oneToggle, {
                     parentRef: this.baseComponentRef,
                     getMenuRef: this.getMenuComponentRef,
@@ -4317,7 +4317,7 @@ class InternalDropdownItem extends React.Component {
         /* eslint-disable @typescript-eslint/no-unused-vars */
         const _a = this.props, { className, children, isHovered, context, onClick, component, role, isDisabled, isPlainText, index, href, tooltip, tooltipProps, id, componentID, listItemClassName, additionalChild, customChild, enterTriggersArrowDown, icon, autoFocus, styleChildren, description, inoperableEvents } = _a, additionalProps = __rest$2(_a, ["className", "children", "isHovered", "context", "onClick", "component", "role", "isDisabled", "isPlainText", "index", "href", "tooltip", "tooltipProps", "id", "componentID", "listItemClassName", "additionalChild", "customChild", "enterTriggersArrowDown", "icon", "autoFocus", "styleChildren", "description", "inoperableEvents"]);
         /* eslint-enable @typescript-eslint/no-unused-vars */
-        let classes = css(icon && _default$o.modifiers.icon, className);
+        let classes = css(icon && _default$p.modifiers.icon, className);
         if (component === 'a') {
             additionalProps['aria-disabled'] = isDisabled;
         }
@@ -4332,17 +4332,17 @@ class InternalDropdownItem extends React.Component {
         const renderDefaultComponent = (tag) => {
             const Component = tag;
             const componentContent = description ? (React.createElement(React.Fragment, null,
-                React.createElement("div", { className: _default$o.dropdownMenuItemMain },
-                    icon && React.createElement("span", { className: css(_default$o.dropdownMenuItemIcon) }, icon),
+                React.createElement("div", { className: _default$p.dropdownMenuItemMain },
+                    icon && React.createElement("span", { className: css(_default$p.dropdownMenuItemIcon) }, icon),
                     children),
-                React.createElement("div", { className: _default$o.dropdownMenuItemDescription }, description))) : (React.createElement(React.Fragment, null,
-                icon && React.createElement("span", { className: css(_default$o.dropdownMenuItemIcon) }, icon),
+                React.createElement("div", { className: _default$p.dropdownMenuItemDescription }, description))) : (React.createElement(React.Fragment, null,
+                icon && React.createElement("span", { className: css(_default$p.dropdownMenuItemIcon) }, icon),
                 children));
             return (React.createElement(Component, Object.assign({}, additionalProps, (isDisabled ? preventedEvents(inoperableEvents) : null), { href: href, ref: this.ref, className: classes, id: componentID }), componentContent));
         };
         return (React.createElement(DropdownContext.Consumer, null, ({ onSelect, itemClass, disabledClass, plainTextClass }) => {
             if (this.props.role !== 'separator') {
-                classes = css(classes, isDisabled && disabledClass, isPlainText && plainTextClass, itemClass, description && _default$o.modifiers.description);
+                classes = css(classes, isDisabled && disabledClass, isPlainText && plainTextClass, itemClass, description && _default$p.modifiers.description);
             }
             if (customChild) {
                 return React.cloneElement(customChild, {
@@ -4396,7 +4396,7 @@ const DropdownItem = (_a) => {
 };
 DropdownItem.displayName = 'DropdownItem';
 
-var _default$n = {
+var _default$o = {
   "divider": "pf-c-divider",
   "modifiers": {
     "vertical": "pf-m-vertical",
@@ -4460,7 +4460,7 @@ var DividerVariant;
 const Divider = (_a) => {
     var { className, component = DividerVariant.hr, isVertical = false, inset } = _a, props = __rest$2(_a, ["className", "component", "isVertical", "inset"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(_default$n.divider, isVertical && _default$n.modifiers.vertical, formatBreakpointMods(inset, _default$n), className) }, (component !== 'hr' && { role: 'separator' }), props)));
+    return (React.createElement(Component, Object.assign({ className: css(_default$o.divider, isVertical && _default$o.modifiers.vertical, formatBreakpointMods(inset, _default$o), className) }, (component !== 'hr' && { role: 'separator' }), props)));
 };
 Divider.displayName = 'Divider';
 
@@ -4548,7 +4548,7 @@ class Toggle extends React.Component {
         isActive, bubbleEvent, onEnter, parentRef, getMenuRef, 
         /* eslint-enable @typescript-eslint/no-unused-vars */
         id, type } = _a, props = __rest$2(_a, ["className", "children", "isOpen", "isDisabled", "isPlain", "isPrimary", "isSplitButton", "onToggle", 'aria-haspopup', "isActive", "bubbleEvent", "onEnter", "parentRef", "getMenuRef", "id", "type"]);
-        return (React.createElement(DropdownContext.Consumer, null, ({ toggleClass }) => (React.createElement("button", Object.assign({}, props, { id: id, ref: this.buttonRef, className: css(isSplitButton ? _default$o.dropdownToggleButton : toggleClass || _default$o.dropdownToggle, isActive && _default$o.modifiers.active, isPlain && _default$o.modifiers.plain, isPrimary && _default$o.modifiers.primary, className), type: type || 'button', onClick: event => onToggle(!isOpen, event), "aria-expanded": isOpen, "aria-haspopup": ariaHasPopup, onKeyDown: event => this.onKeyDown(event), disabled: isDisabled }), children))));
+        return (React.createElement(DropdownContext.Consumer, null, ({ toggleClass }) => (React.createElement("button", Object.assign({}, props, { id: id, ref: this.buttonRef, className: css(isSplitButton ? _default$p.dropdownToggleButton : toggleClass || _default$p.dropdownToggle, isActive && _default$p.modifiers.active, isPlain && _default$p.modifiers.plain, isPrimary && _default$p.modifiers.primary, className), type: type || 'button', onClick: event => onToggle(!isOpen, event), "aria-expanded": isOpen, "aria-haspopup": ariaHasPopup, onKeyDown: event => this.onKeyDown(event), disabled: isDisabled }), children))));
     }
 }
 Toggle.displayName = 'Toggle';
@@ -4565,7 +4565,7 @@ Toggle.defaultProps = {
     bubbleEvent: false
 };
 
-var _default$m = {
+var _default$n = {
   "badge": "pf-c-badge",
   "modifiers": {
     "read": "pf-m-read",
@@ -4575,7 +4575,7 @@ var _default$m = {
 
 const Badge = (_a) => {
     var { isRead = false, className = '', children = '' } = _a, props = __rest$2(_a, ["isRead", "className", "children"]);
-    return (React.createElement("span", Object.assign({}, props, { className: css(_default$m.badge, (isRead ? _default$m.modifiers.read : _default$m.modifiers.unread), className) }), children));
+    return (React.createElement("span", Object.assign({}, props, { className: css(_default$n.badge, (isRead ? _default$n.modifiers.read : _default$n.modifiers.unread), className) }), children));
 };
 Badge.displayName = 'Badge';
 
@@ -4595,7 +4595,7 @@ const DropdownToggle = (_a) => {
         ToggleIndicator && (React.createElement("span", { className: css(!splitButtonItems && toggleIndicatorClass) },
             React.createElement(ToggleIndicator, null)))))));
     if (splitButtonItems) {
-        return (React.createElement("div", { className: css(_default$o.dropdownToggle, _default$o.modifiers.splitButton, splitButtonVariant === 'action' && _default$o.modifiers.action, isDisabled && _default$o.modifiers.disabled) },
+        return (React.createElement("div", { className: css(_default$p.dropdownToggle, _default$p.modifiers.splitButton, splitButtonVariant === 'action' && _default$p.modifiers.action, isDisabled && _default$p.modifiers.disabled) },
             splitButtonItems,
             toggle));
     }
@@ -4764,7 +4764,7 @@ class TextInputBase extends React.Component {
         if (customIconDimensions) {
             customIconStyle.backgroundSize = customIconDimensions;
         }
-        return (React.createElement("input", Object.assign({}, props, { onFocus: this.onFocus, onBlur: this.onBlur, className: css(_default$p.formControl, validated === ValidatedOptions.success && _default$p.modifiers.success, validated === ValidatedOptions.warning && _default$p.modifiers.warning, ((iconVariant && iconVariant !== 'search') || customIconUrl) && _default$p.modifiers.icon, iconVariant && _default$p.modifiers[iconVariant], className), onChange: this.handleChange, type: type, value: value, "aria-invalid": validated === ValidatedOptions.error, required: isRequired, disabled: isDisabled, readOnly: isReadOnly, ref: innerRef || this.inputRef }, ((customIconUrl || customIconDimensions) && { style: customIconStyle }))));
+        return (React.createElement("input", Object.assign({}, props, { onFocus: this.onFocus, onBlur: this.onBlur, className: css(_default$q.formControl, validated === ValidatedOptions.success && _default$q.modifiers.success, validated === ValidatedOptions.warning && _default$q.modifiers.warning, ((iconVariant && iconVariant !== 'search') || customIconUrl) && _default$q.modifiers.icon, iconVariant && _default$q.modifiers[iconVariant], className), onChange: this.handleChange, type: type, value: value, "aria-invalid": validated === ValidatedOptions.error, required: isRequired, disabled: isDisabled, readOnly: isReadOnly, ref: innerRef || this.inputRef }, ((customIconUrl || customIconDimensions) && { style: customIconStyle }))));
     }
 }
 TextInputBase.displayName = 'TextInputBase';
@@ -4782,7 +4782,7 @@ TextInputBase.defaultProps = {
 const TextInput = React.forwardRef((props, ref) => (React.createElement(TextInputBase, Object.assign({}, props, { innerRef: ref }))));
 TextInput.displayName = 'TextInput';
 
-var _default$l = {
+var _default$m = {
   "check": "pf-c-check",
   "checkLabel": "pf-c-check__label",
   "chipGroup": "pf-c-chip-group",
@@ -4850,7 +4850,7 @@ const TimesCircleIconConfig = {
 
 const TimesCircleIcon = createIcon(TimesCircleIconConfig);
 
-var _default$k = {
+var _default$l = {
   "form": "pf-c-form",
   "formActions": "pf-c-form__actions",
   "formFieldGroup": "pf-c-form__field-group",
@@ -4897,7 +4897,7 @@ var _default$k = {
   }
 };
 
-var _default$j = {
+var _default$k = {
   "check": "pf-c-check",
   "checkBody": "pf-c-check__body",
   "checkDescription": "pf-c-check__description",
@@ -5008,21 +5008,21 @@ class SelectOption extends React.Component {
             console.error('Please provide an id to use the favorites feature.');
         }
         const generatedId = id || getUniqueId('select-option');
-        const favoriteButton = (onFavorite) => (React.createElement("button", { className: css(_default$l.selectMenuItem, _default$l.modifiers.action, _default$l.modifiers.favoriteAction), "aria-label": isFavorite ? ariaIsFavoriteLabel : ariaIsNotFavoriteLabel, onClick: () => {
+        const favoriteButton = (onFavorite) => (React.createElement("button", { className: css(_default$m.selectMenuItem, _default$m.modifiers.action, _default$m.modifiers.favoriteAction), "aria-label": isFavorite ? ariaIsFavoriteLabel : ariaIsNotFavoriteLabel, onClick: () => {
                 onFavorite(generatedId.replace('favorite-', ''), isFavorite);
             }, onKeyDown: event => {
                 this.onKeyDown(event, 1, () => onFavorite(generatedId.replace('favorite-', '')));
             }, ref: this.favoriteRef },
-            React.createElement("span", { className: css(_default$l.selectMenuItemActionIcon) },
+            React.createElement("span", { className: css(_default$m.selectMenuItemActionIcon) },
                 React.createElement(StarIcon, null))));
-        const itemDisplay = itemCount ? (React.createElement("span", { className: css(_default$l.selectMenuItemRow) },
-            React.createElement("span", { className: css(_default$l.selectMenuItemText) }, children || (value && value.toString && value.toString())),
-            React.createElement("span", { className: css(_default$l.selectMenuItemCount) }, itemCount))) : (children || value.toString());
+        const itemDisplay = itemCount ? (React.createElement("span", { className: css(_default$m.selectMenuItemRow) },
+            React.createElement("span", { className: css(_default$m.selectMenuItemText) }, children || (value && value.toString && value.toString())),
+            React.createElement("span", { className: css(_default$m.selectMenuItemCount) }, itemCount))) : (children || value.toString());
         return (React.createElement(SelectConsumer, null, ({ onSelect, onClose, variant, inputIdPrefix, onFavorite }) => (React.createElement(React.Fragment, null,
-            variant !== SelectVariant.checkbox && (React.createElement("li", { id: generatedId, role: "presentation", className: css(isLoading && _default$l.selectListItem, !isLoad && !isLoading && _default$l.selectMenuWrapper, isFavorite && _default$l.modifiers.favorite, isFocused && _default$l.modifiers.focus, isLoading && _default$l.modifiers.loading), ref: this.liRef },
+            variant !== SelectVariant.checkbox && (React.createElement("li", { id: generatedId, role: "presentation", className: css(isLoading && _default$m.selectListItem, !isLoad && !isLoading && _default$m.selectMenuWrapper, isFavorite && _default$m.modifiers.favorite, isFocused && _default$m.modifiers.focus, isLoading && _default$m.modifiers.loading), ref: this.liRef },
                 isLoading && children,
                 !isLoading && (React.createElement(React.Fragment, null,
-                    React.createElement(Component, Object.assign({}, props, { className: css(_default$l.selectMenuItem, isLoad && _default$l.modifiers.load, isSelected && _default$l.modifiers.selected, isDisabled && _default$l.modifiers.disabled, description && _default$l.modifiers.description, isFavorite !== null && _default$l.modifiers.link, className), onClick: (event) => {
+                    React.createElement(Component, Object.assign({}, props, { className: css(_default$m.selectMenuItem, isLoad && _default$m.modifiers.load, isSelected && _default$m.modifiers.selected, isDisabled && _default$m.modifiers.disabled, description && _default$m.modifiers.description, isFavorite !== null && _default$m.modifiers.link, className), onClick: (event) => {
                             if (isLoad) {
                                 onClick(event);
                                 event.stopPropagation();
@@ -5036,36 +5036,36 @@ class SelectOption extends React.Component {
                             this.onKeyDown(event, 0);
                         }, type: "button" }),
                         description && (React.createElement(React.Fragment, null,
-                            React.createElement("span", { className: css(_default$l.selectMenuItemMain) },
+                            React.createElement("span", { className: css(_default$m.selectMenuItemMain) },
                                 itemDisplay,
-                                isSelected && (React.createElement("span", { className: css(_default$l.selectMenuItemIcon) },
+                                isSelected && (React.createElement("span", { className: css(_default$m.selectMenuItemIcon) },
                                     React.createElement(CheckIcon, { "aria-hidden": true })))),
-                            React.createElement("span", { className: css(_default$l.selectMenuItemDescription) }, description))),
+                            React.createElement("span", { className: css(_default$m.selectMenuItemDescription) }, description))),
                         !description && (React.createElement(React.Fragment, null,
                             itemDisplay,
-                            isSelected && (React.createElement("span", { className: css(_default$l.selectMenuItemIcon) },
+                            isSelected && (React.createElement("span", { className: css(_default$m.selectMenuItemIcon) },
                                 React.createElement(CheckIcon, { "aria-hidden": true })))))),
                     isFavorite !== null && id && favoriteButton(onFavorite))))),
-            variant === SelectVariant.checkbox && isLoad && (React.createElement("button", { className: css(_default$l.selectMenuItem, _default$l.modifiers.load, isFocused && _default$l.modifiers.focus, className), onKeyDown: (event) => {
+            variant === SelectVariant.checkbox && isLoad && (React.createElement("button", { className: css(_default$m.selectMenuItem, _default$m.modifiers.load, isFocused && _default$m.modifiers.focus, className), onKeyDown: (event) => {
                     this.onKeyDown(event, 0, undefined, true);
                 }, onClick: (event) => {
                     onClick(event);
                     event.stopPropagation();
                 }, ref: this.ref }, children || (value && value.toString && value.toString()))),
-            variant === SelectVariant.checkbox && isLoading && (React.createElement("div", { className: css(_default$l.selectListItem, isLoading && _default$l.modifiers.loading, className) }, children)),
-            variant === SelectVariant.checkbox && !isNoResultsOption && !isLoading && !isLoad && (React.createElement("label", Object.assign({}, props, { className: css(_default$j.check, _default$l.selectMenuItem, isDisabled && _default$l.modifiers.disabled, description && _default$l.modifiers.description, className), onKeyDown: (event) => {
+            variant === SelectVariant.checkbox && isLoading && (React.createElement("div", { className: css(_default$m.selectListItem, isLoading && _default$m.modifiers.loading, className) }, children)),
+            variant === SelectVariant.checkbox && !isNoResultsOption && !isLoading && !isLoad && (React.createElement("label", Object.assign({}, props, { className: css(_default$k.check, _default$m.selectMenuItem, isDisabled && _default$m.modifiers.disabled, description && _default$m.modifiers.description, className), onKeyDown: (event) => {
                     this.onKeyDown(event, 0, undefined, true);
                 } }),
-                React.createElement("input", { id: inputId || `${inputIdPrefix}-${value.toString()}`, className: css(_default$j.checkInput), type: "checkbox", onChange: event => {
+                React.createElement("input", { id: inputId || `${inputIdPrefix}-${value.toString()}`, className: css(_default$k.checkInput), type: "checkbox", onChange: event => {
                         if (!isDisabled) {
                             onClick(event);
                             onSelect(event, value);
                         }
                     }, ref: this.ref, checked: isChecked || false, disabled: isDisabled }),
-                React.createElement("span", { className: css(_default$j.checkLabel, isDisabled && _default$l.modifiers.disabled) }, itemDisplay),
-                description && React.createElement("div", { className: css(_default$j.checkDescription) }, description))),
+                React.createElement("span", { className: css(_default$k.checkLabel, isDisabled && _default$m.modifiers.disabled) }, itemDisplay),
+                description && React.createElement("div", { className: css(_default$k.checkDescription) }, description))),
             variant === SelectVariant.checkbox && isNoResultsOption && !isLoading && !isLoad && (React.createElement("div", null,
-                React.createElement(Component, Object.assign({}, props, { className: css(_default$l.selectMenuItem, isSelected && _default$l.modifiers.selected, isDisabled && _default$l.modifiers.disabled, className), role: "option", "aria-selected": isSelected || null, ref: this.ref, onKeyDown: (event) => {
+                React.createElement(Component, Object.assign({}, props, { className: css(_default$m.selectMenuItem, isSelected && _default$m.modifiers.selected, isDisabled && _default$m.modifiers.disabled, className), role: "option", "aria-selected": isSelected || null, ref: this.ref, onKeyDown: (event) => {
                         this.onKeyDown(event, 0, undefined, true);
                     }, type: "button" }), itemDisplay)))))));
     }
@@ -5092,8 +5092,8 @@ SelectOption.defaultProps = {
 
 const SelectGroup = (_a) => {
     var { children = [], className = '', label = '', titleId = '' } = _a, props = __rest$2(_a, ["children", "className", "label", "titleId"]);
-    return (React.createElement(SelectConsumer, null, ({ variant }) => (React.createElement("div", Object.assign({}, props, { className: css(_default$l.selectMenuGroup, className) }),
-        React.createElement("div", { className: css(_default$l.selectMenuGroupTitle), id: titleId, "aria-hidden": true }, label),
+    return (React.createElement(SelectConsumer, null, ({ variant }) => (React.createElement("div", Object.assign({}, props, { className: css(_default$m.selectMenuGroup, className) }),
+        React.createElement("div", { className: css(_default$m.selectMenuGroupTitle), id: titleId, "aria-hidden": true }, label),
         variant === SelectVariant.checkbox ? children : React.createElement("ul", { role: "listbox" }, children)))));
 };
 SelectGroup.displayName = 'SelectGroup';
@@ -5166,7 +5166,7 @@ class SelectMenuWithRef extends React.Component {
                 }
                 return React.cloneElement(group, {
                     titleId: group.props.label && group.props.label.replace(/\W/g, '-'),
-                    children: group.props.children ? (React.createElement("fieldset", { "aria-labelledby": group.props.label && group.props.label.replace(/\W/g, '-'), className: css(_default$l.selectMenuFieldset) }, React.Children.map(group.props.children, (option) => option.type === Divider
+                    children: group.props.children ? (React.createElement("fieldset", { "aria-labelledby": group.props.label && group.props.label.replace(/\W/g, '-'), className: css(_default$m.selectMenuFieldset) }, React.Children.map(group.props.children, (option) => option.type === Divider
                         ? option
                         : React.cloneElement(option, {
                             isChecked: this.checkForValue(option.props.value, checked),
@@ -5191,7 +5191,7 @@ class SelectMenuWithRef extends React.Component {
         const _a = this.props, { children, isCustomContent, className, isExpanded, openedOnEnter, selected, checked, isGrouped, sendRef, keyHandler, maxHeight, noResultsFoundText, createText, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, hasInlineFilter, innerRef, footer, footerRef } = _a, props = __rest$2(_a, ["children", "isCustomContent", "className", "isExpanded", "openedOnEnter", "selected", "checked", "isGrouped", "sendRef", "keyHandler", "maxHeight", "noResultsFoundText", "createText", 'aria-label', 'aria-labelledby', "hasInlineFilter", "innerRef", "footer", "footerRef"]);
         /* eslint-enable @typescript-eslint/no-unused-vars */
         let Component = 'div';
-        const variantProps = Object.assign({ ref: innerRef, className: css(!footer ? _default$l.selectMenu : 'pf-c-select__menu-list', className) }, (maxHeight && { style: { maxHeight, overflow: 'auto' } }));
+        const variantProps = Object.assign({ ref: innerRef, className: css(!footer ? _default$m.selectMenu : 'pf-c-select__menu-list', className) }, (maxHeight && { style: { maxHeight, overflow: 'auto' } }));
         const extendedChildren = () => variant === SelectVariant.checkbox
             ? this.extendCheckboxChildren(children)
             : this.extendChildren(inputIdPrefix);
@@ -5200,10 +5200,10 @@ class SelectMenuWithRef extends React.Component {
         }
         else if (hasInlineFilter) {
             if (React.Children.count(children) === 0) {
-                variantProps.children = React.createElement("fieldset", { className: css(_default$l.selectMenuFieldset) });
+                variantProps.children = React.createElement("fieldset", { className: css(_default$m.selectMenuFieldset) });
             }
             else {
-                variantProps.children = (React.createElement("fieldset", { "aria-label": ariaLabel, "aria-labelledby": (!ariaLabel && ariaLabelledBy) || null, className: css(_default$k.formFieldset) },
+                variantProps.children = (React.createElement("fieldset", { "aria-label": ariaLabel, "aria-labelledby": (!ariaLabel && ariaLabelledBy) || null, className: css(_default$l.formFieldset) },
                     children.shift(),
                     extendedChildren()));
             }
@@ -5219,7 +5219,7 @@ class SelectMenuWithRef extends React.Component {
         }
         return (React.createElement(React.Fragment, null,
             React.createElement(Component, Object.assign({}, variantProps, props)),
-            footer && (React.createElement("div", { className: css(_default$l.selectMenuFooter), ref: footerRef }, footer))));
+            footer && (React.createElement("div", { className: css(_default$m.selectMenuFooter), ref: footerRef }, footer))));
     }
     render() {
         return React.createElement(SelectConsumer, null, context => this.renderSelectMenu(context));
@@ -5371,7 +5371,7 @@ class SelectToggle extends React.Component {
             'aria-haspopup': (variant !== SelectVariant.checkbox && 'listbox') || null
         };
         return (React.createElement(React.Fragment, null,
-            !isTypeahead && (React.createElement("button", Object.assign({}, props, toggleProps, { ref: this.toggle, type: type, className: css(_default$l.selectToggle, isDisabled && _default$l.modifiers.disabled, isPlain && _default$l.modifiers.plain, isActive && _default$l.modifiers.active, className), 
+            !isTypeahead && (React.createElement("button", Object.assign({}, props, toggleProps, { ref: this.toggle, type: type, className: css(_default$m.selectToggle, isDisabled && _default$m.modifiers.disabled, isPlain && _default$m.modifiers.plain, isActive && _default$m.modifiers.active, className), 
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 onClick: _event => {
                     onToggle(!isOpen);
@@ -5380,9 +5380,9 @@ class SelectToggle extends React.Component {
                     }
                 }, onKeyDown: this.onKeyDown, disabled: isDisabled }),
                 children,
-                React.createElement("span", { className: css(_default$l.selectToggleArrow) },
+                React.createElement("span", { className: css(_default$m.selectToggleArrow) },
                     React.createElement(CaretDownIcon, null)))),
-            isTypeahead && (React.createElement("div", Object.assign({}, props, { ref: this.toggle, className: css(_default$l.selectToggle, isDisabled && _default$l.modifiers.disabled, isPlain && _default$l.modifiers.plain, isTypeahead && _default$l.modifiers.typeahead, className), 
+            isTypeahead && (React.createElement("div", Object.assign({}, props, { ref: this.toggle, className: css(_default$m.selectToggle, isDisabled && _default$m.modifiers.disabled, isPlain && _default$m.modifiers.plain, isTypeahead && _default$m.modifiers.typeahead, className), 
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 onClick: _event => {
                     if (!isDisabled) {
@@ -5390,7 +5390,7 @@ class SelectToggle extends React.Component {
                     }
                 }, onKeyDown: this.onKeyDown }),
                 children,
-                React.createElement("button", Object.assign({}, toggleProps, { type: type, className: css(_default$u.button, _default$l.selectToggleButton, _default$l.modifiers.plain), "aria-label": ariaLabel, onClick: _event => {
+                React.createElement("button", Object.assign({}, toggleProps, { type: type, className: css(_default$v.button, _default$m.selectToggleButton, _default$m.modifiers.plain), "aria-label": ariaLabel, onClick: _event => {
                         onToggle(!isOpen);
                         if (isOpen) {
                             onClose();
@@ -5399,7 +5399,7 @@ class SelectToggle extends React.Component {
                     } }, ((variant === SelectVariant.typeahead || variant === SelectVariant.typeaheadMulti) && {
                     tabIndex: -1
                 }), { disabled: isDisabled }),
-                    React.createElement(CaretDownIcon, { className: css(_default$l.selectToggleArrow) }))))));
+                    React.createElement(CaretDownIcon, { className: css(_default$m.selectToggleArrow) }))))));
     }
 }
 SelectToggle.displayName = 'SelectToggle';
@@ -5421,7 +5421,7 @@ SelectToggle.defaultProps = {
     onClickTypeaheadToggleButton: () => { }
 };
 
-var _default$i = {
+var _default$j = {
   "chipGroup": "pf-c-chip-group",
   "chipGroupClose": "pf-c-chip-group__close",
   "chipGroupLabel": "pf-c-chip-group__label",
@@ -5433,7 +5433,7 @@ var _default$i = {
   }
 };
 
-var _default$h = {
+var _default$i = {
   "badge": "pf-c-badge",
   "button": "pf-c-button",
   "chip": "pf-c-chip",
@@ -5452,8 +5452,8 @@ class Chip extends React.Component {
         this.renderOverflowChip = () => {
             const { children, className, onClick, ouiaId } = this.props;
             const Component = this.props.component;
-            return (React.createElement(Component, Object.assign({ onClick: onClick, className: css(_default$h.chip, _default$h.modifiers.overflow, className) }, (this.props.component === 'button' ? { type: 'button' } : {}), getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
-                React.createElement("span", { className: css(_default$h.chipText) }, children)));
+            return (React.createElement(Component, Object.assign({ onClick: onClick, className: css(_default$i.chip, _default$i.modifiers.overflow, className) }, (this.props.component === 'button' ? { type: 'button' } : {}), getOUIAProps('OverflowChip', ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
+                React.createElement("span", { className: css(_default$i.chipText) }, children)));
         };
         this.renderChip = (randomId) => {
             const { children, tooltipPosition } = this.props;
@@ -5475,8 +5475,8 @@ class Chip extends React.Component {
     renderInnerChip(id) {
         const { children, className, onClick, closeBtnAriaLabel, isReadOnly, component, ouiaId } = this.props;
         const Component = component;
-        return (React.createElement(Component, Object.assign({ className: css(_default$h.chip, className) }, (this.state.isTooltipVisible && { tabIndex: 0 }), getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
-            React.createElement("span", { ref: this.span, className: css(_default$h.chipText), id: id }, children),
+        return (React.createElement(Component, Object.assign({ className: css(_default$i.chip, className) }, (this.state.isTooltipVisible && { tabIndex: 0 }), getOUIAProps(Chip.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId)),
+            React.createElement("span", { ref: this.span, className: css(_default$i.chipText), id: id }, children),
             !isReadOnly && (React.createElement(Button$1, { onClick: onClick, variant: "plain", "aria-label": closeBtnAriaLabel, id: `remove_${id}`, "aria-labelledby": `remove_${id} ${id}`, ouiaId: ouiaId || closeBtnAriaLabel },
                 React.createElement(TimesIcon, { "aria-hidden": "true" })))));
     }
@@ -5521,8 +5521,8 @@ class ChipGroup extends React.Component {
         const { categoryName, tooltipPosition } = this.props;
         const { isTooltipVisible } = this.state;
         return isTooltipVisible ? (React.createElement(Tooltip, { position: tooltipPosition, content: categoryName },
-            React.createElement("span", { tabIndex: 0, ref: this.headingRef, className: css(_default$i.chipGroupLabel), id: id, "aria-label": categoryName },
-                React.createElement("span", { "aria-hidden": "true" }, categoryName)))) : (React.createElement("span", { ref: this.headingRef, className: css(_default$i.chipGroupLabel), "aria-hidden": "true", id: id }, categoryName));
+            React.createElement("span", { tabIndex: 0, ref: this.headingRef, className: css(_default$j.chipGroupLabel), id: id, "aria-label": categoryName },
+                React.createElement("span", { "aria-hidden": "true" }, categoryName)))) : (React.createElement("span", { ref: this.headingRef, className: css(_default$j.chipGroupLabel), "aria-hidden": "true", id: id }, categoryName));
     }
     render() {
         const _a = this.props, { categoryName, children, className, isClosable, closeBtnAriaLabel, 'aria-label': ariaLabel, onClick, onOverflowChipClick, numChips, expandedText, collapsedText, ouiaId, 
@@ -5539,17 +5539,17 @@ class ChipGroup extends React.Component {
             const chipArray = !isOpen
                 ? React.Children.toArray(children).slice(0, numChips)
                 : React.Children.toArray(children);
-            return (React.createElement("div", Object.assign({ className: css(_default$i.chipGroup, className, categoryName && _default$i.modifiers.category) }, getOUIAProps(ChipGroup.displayName, ouiaId)),
-                React.createElement("div", { className: css(_default$i.chipGroupMain) },
+            return (React.createElement("div", Object.assign({ className: css(_default$j.chipGroup, className, categoryName && _default$j.modifiers.category) }, getOUIAProps(ChipGroup.displayName, ouiaId)),
+                React.createElement("div", { className: css(_default$j.chipGroupMain) },
                     categoryName && this.renderLabel(id),
-                    React.createElement("ul", Object.assign({ className: css(_default$i.chipGroupList) }, (categoryName && { 'aria-labelledby': id }), (!categoryName && { 'aria-label': ariaLabel }), { role: "list" }, rest),
-                        chipArray.map((child, i) => (React.createElement("li", { className: css(_default$i.chipGroupListItem), key: i }, child))),
-                        numChildren > numChips && (React.createElement("li", { className: css(_default$i.chipGroupListItem) },
+                    React.createElement("ul", Object.assign({ className: css(_default$j.chipGroupList) }, (categoryName && { 'aria-labelledby': id }), (!categoryName && { 'aria-label': ariaLabel }), { role: "list" }, rest),
+                        chipArray.map((child, i) => (React.createElement("li", { className: css(_default$j.chipGroupListItem), key: i }, child))),
+                        numChildren > numChips && (React.createElement("li", { className: css(_default$j.chipGroupListItem) },
                             React.createElement(Chip, { isOverflowChip: true, onClick: event => {
                                     this.toggleCollapse();
                                     onOverflowChipClick(event);
                                 }, component: "button" }, isOpen ? expandedText : collapsedTextResult))))),
-                isClosable && (React.createElement("div", { className: css(_default$i.chipGroupClose) },
+                isClosable && (React.createElement("div", { className: css(_default$j.chipGroupClose) },
                     React.createElement(Button$1, { variant: "plain", "aria-label": closeBtnAriaLabel, onClick: onClick, id: `remove_group_${id}`, "aria-labelledby": `remove_group_${id} ${id}`, ouiaId: ouiaId || closeBtnAriaLabel },
                         React.createElement(TimesCircleIcon, { "aria-hidden": "true" }))))));
         };
@@ -6038,7 +6038,7 @@ class Select extends React.Component {
             }
         }
         const hasOnClear = onClear !== Select.defaultProps.onClear;
-        const clearBtn = (React.createElement("button", { className: css(_default$u.button, _default$u.modifiers.plain, _default$l.selectToggleClear), onClick: e => {
+        const clearBtn = (React.createElement("button", { className: css(_default$v.button, _default$v.modifiers.plain, _default$m.selectToggleClear), onClick: e => {
                 this.clearSelection(e);
                 onClear(e);
             }, "aria-label": clearSelectionsAriaLabel, type: "button", disabled: isDisabled, ref: this.clearRef, onKeyDown: event => {
@@ -6054,8 +6054,8 @@ class Select extends React.Component {
         }
         if (hasInlineFilter) {
             const filterBox = (React.createElement(React.Fragment, null,
-                React.createElement("div", { key: "inline-filter", className: css(_default$l.selectMenuSearch) },
-                    React.createElement("input", { key: "inline-filter-input", type: "search", className: css(_default$p.formControl, _default$p.modifiers.search), onChange: this.onChange, placeholder: inlineFilterPlaceholderText, onKeyDown: event => {
+                React.createElement("div", { key: "inline-filter", className: css(_default$m.selectMenuSearch) },
+                    React.createElement("input", { key: "inline-filter-input", type: "search", className: css(_default$q.formControl, _default$q.modifiers.search), onChange: this.onChange, placeholder: inlineFilterPlaceholderText, onKeyDown: event => {
                             if (event.key === KeyTypes.ArrowUp) {
                                 this.handleMenuKeys(0, 0, 'up');
                                 event.preventDefault();
@@ -6140,46 +6140,46 @@ class Select extends React.Component {
             }
         }
         const innerMenu = (React.createElement(SelectMenu, Object.assign({}, props, { isGrouped: isGrouped, selected: selections }, variantProps, { openedOnEnter: openedOnEnter, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, sendRef: this.sendRef, keyHandler: this.handleMenuKeys, maxHeight: maxHeight, ref: this.menuComponentRef, footer: footer, footerRef: this.footerRef }), variantChildren));
-        const menuContainer = footer ? React.createElement("div", { className: css(_default$l.selectMenu) },
+        const menuContainer = footer ? React.createElement("div", { className: css(_default$m.selectMenu) },
             " ",
             innerMenu,
             " ") : innerMenu;
-        const popperContainer = (React.createElement("div", Object.assign({ className: css(_default$l.select, isOpen && _default$l.modifiers.expanded, validated === ValidatedOptions.success && _default$l.modifiers.success, validated === ValidatedOptions.warning && _default$l.modifiers.warning, validated === ValidatedOptions.error && _default$l.modifiers.invalid, direction === SelectDirection.up && _default$l.modifiers.top, className) }, (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })), isOpen && menuContainer));
-        const mainContainer = (React.createElement("div", Object.assign({ className: css(_default$l.select, isOpen && _default$l.modifiers.expanded, validated === ValidatedOptions.success && _default$l.modifiers.success, validated === ValidatedOptions.warning && _default$l.modifiers.warning, validated === ValidatedOptions.error && _default$l.modifiers.invalid, direction === SelectDirection.up && _default$l.modifiers.top, className), ref: this.parentRef }, getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })),
+        const popperContainer = (React.createElement("div", Object.assign({ className: css(_default$m.select, isOpen && _default$m.modifiers.expanded, validated === ValidatedOptions.success && _default$m.modifiers.success, validated === ValidatedOptions.warning && _default$m.modifiers.warning, validated === ValidatedOptions.error && _default$m.modifiers.invalid, direction === SelectDirection.up && _default$m.modifiers.top, className) }, (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })), isOpen && menuContainer));
+        const mainContainer = (React.createElement("div", Object.assign({ className: css(_default$m.select, isOpen && _default$m.modifiers.expanded, validated === ValidatedOptions.success && _default$m.modifiers.success, validated === ValidatedOptions.warning && _default$m.modifiers.warning, validated === ValidatedOptions.error && _default$m.modifiers.invalid, direction === SelectDirection.up && _default$m.modifiers.top, className), ref: this.parentRef }, getOUIAProps(Select.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), (width && { style: { width } }), (validated !== ValidatedOptions.default && { 'aria-describedby': ariaDescribedby }), (validated !== ValidatedOptions.default && { 'aria-invalid': ariaInvalid })),
             React.createElement(SelectToggle, Object.assign({ id: selectToggleId, parentRef: this.parentRef, menuRef: this.menuComponentRef }, (footer && { footerRef: this.footerRef }), { isOpen: isOpen, isPlain: isPlain, onToggle: this.onToggle, onEnter: this.onEnter, onClose: this.onClose, variant: variant, "aria-labelledby": `${ariaLabelledBy || ''} ${selectToggleId}`, "aria-label": toggleAriaLabel, handleTypeaheadKeys: this.handleTypeaheadKeys, isDisabled: isDisabled, hasClearButton: hasOnClear, hasFooter: footer !== undefined, onClickTypeaheadToggleButton: this.onClickTypeaheadToggleButton }),
-                customContent && (React.createElement("div", { className: css(_default$l.selectToggleWrapper) },
-                    toggleIcon && React.createElement("span", { className: css(_default$l.selectToggleIcon) }, toggleIcon),
-                    React.createElement("span", { className: css(_default$l.selectToggleText) }, placeholderText))),
+                customContent && (React.createElement("div", { className: css(_default$m.selectToggleWrapper) },
+                    toggleIcon && React.createElement("span", { className: css(_default$m.selectToggleIcon) }, toggleIcon),
+                    React.createElement("span", { className: css(_default$m.selectToggleText) }, placeholderText))),
                 variant === SelectVariant.single && !customContent && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: css(_default$l.selectToggleWrapper) },
-                        toggleIcon && React.createElement("span", { className: css(_default$l.selectToggleIcon) }, toggleIcon),
-                        React.createElement("span", { className: css(_default$l.selectToggleText) }, this.getDisplay(selections[0], 'node') || placeholderText || childPlaceholderText)),
+                    React.createElement("div", { className: css(_default$m.selectToggleWrapper) },
+                        toggleIcon && React.createElement("span", { className: css(_default$m.selectToggleIcon) }, toggleIcon),
+                        React.createElement("span", { className: css(_default$m.selectToggleText) }, this.getDisplay(selections[0], 'node') || placeholderText || childPlaceholderText)),
                     hasOnClear && hasAnySelections && clearBtn)),
                 variant === SelectVariant.checkbox && !customContent && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: css(_default$l.selectToggleWrapper) },
-                        toggleIcon && React.createElement("span", { className: css(_default$l.selectToggleIcon) }, toggleIcon),
-                        React.createElement("span", { className: css(_default$l.selectToggleText) }, placeholderText),
-                        !isCheckboxSelectionBadgeHidden && hasAnySelections && (React.createElement("div", { className: css(_default$l.selectToggleBadge) },
-                            React.createElement("span", { className: css(_default$m.badge, _default$m.modifiers.read) }, this.generateSelectedBadge())))),
+                    React.createElement("div", { className: css(_default$m.selectToggleWrapper) },
+                        toggleIcon && React.createElement("span", { className: css(_default$m.selectToggleIcon) }, toggleIcon),
+                        React.createElement("span", { className: css(_default$m.selectToggleText) }, placeholderText),
+                        !isCheckboxSelectionBadgeHidden && hasAnySelections && (React.createElement("div", { className: css(_default$m.selectToggleBadge) },
+                            React.createElement("span", { className: css(_default$n.badge, _default$n.modifiers.read) }, this.generateSelectedBadge())))),
                     hasOnClear && hasAnySelections && clearBtn)),
                 variant === SelectVariant.typeahead && !customContent && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: css(_default$l.selectToggleWrapper) },
-                        toggleIcon && React.createElement("span", { className: css(_default$l.selectToggleIcon) }, toggleIcon),
-                        React.createElement("input", { className: css(_default$p.formControl, _default$l.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-typeahead`, "aria-label": typeAheadAriaLabel, placeholder: placeholderText, value: typeaheadInputValue !== null
+                    React.createElement("div", { className: css(_default$m.selectToggleWrapper) },
+                        toggleIcon && React.createElement("span", { className: css(_default$m.selectToggleIcon) }, toggleIcon),
+                        React.createElement("input", { className: css(_default$q.formControl, _default$m.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-typeahead`, "aria-label": typeAheadAriaLabel, placeholder: placeholderText, value: typeaheadInputValue !== null
                                 ? typeaheadInputValue
                                 : this.getDisplay(selections[0], 'text') || '', type: "text", onClick: this.onClick, onChange: this.onChange, autoComplete: "off", disabled: isDisabled, ref: this.inputRef })),
                     hasOnClear && (selections[0] || typeaheadInputValue) && clearBtn)),
                 variant === SelectVariant.typeaheadMulti && !customContent && (React.createElement(React.Fragment, null,
-                    React.createElement("div", { className: css(_default$l.selectToggleWrapper) },
-                        toggleIcon && React.createElement("span", { className: css(_default$l.selectToggleIcon) }, toggleIcon),
+                    React.createElement("div", { className: css(_default$m.selectToggleWrapper) },
+                        toggleIcon && React.createElement("span", { className: css(_default$m.selectToggleIcon) }, toggleIcon),
                         selections && Array.isArray(selections) && selections.length > 0 && selectedChips,
-                        React.createElement("input", { className: css(_default$p.formControl, _default$l.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === ValidatedOptions.error, placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: "off", disabled: isDisabled, ref: this.inputRef })),
+                        React.createElement("input", { className: css(_default$q.formControl, _default$m.selectToggleTypeahead), "aria-activedescendant": typeaheadActiveChild && typeaheadActiveChild.id, id: `${selectToggleId}-select-multi-typeahead-typeahead`, "aria-label": typeAheadAriaLabel, "aria-invalid": validated === ValidatedOptions.error, placeholder: placeholderText, value: typeaheadInputValue !== null ? typeaheadInputValue : '', type: "text", onChange: this.onChange, onClick: this.onClick, autoComplete: "off", disabled: isDisabled, ref: this.inputRef })),
                     hasOnClear && ((selections && selections.length > 0) || typeaheadInputValue) && clearBtn)),
-                validated === ValidatedOptions.success && (React.createElement("span", { className: css(_default$l.selectToggleStatusIcon) },
+                validated === ValidatedOptions.success && (React.createElement("span", { className: css(_default$m.selectToggleStatusIcon) },
                     React.createElement(CheckCircleIcon$1, { "aria-hidden": "true" }))),
-                validated === ValidatedOptions.error && (React.createElement("span", { className: css(_default$l.selectToggleStatusIcon) },
+                validated === ValidatedOptions.error && (React.createElement("span", { className: css(_default$m.selectToggleStatusIcon) },
                     React.createElement(ExclamationCircleIcon$1, { "aria-hidden": "true" }))),
-                validated === ValidatedOptions.warning && (React.createElement("span", { className: css(_default$l.selectToggleStatusIcon) },
+                validated === ValidatedOptions.warning && (React.createElement("span", { className: css(_default$m.selectToggleStatusIcon) },
                     React.createElement(ExclamationTriangleIcon, { "aria-hidden": "true" })))),
             isOpen && menuAppendTo === 'inline' && menuContainer));
         const getParentElement = () => {
@@ -6246,7 +6246,7 @@ const ArrowRightIconConfig = {
 
 const ArrowRightIcon$1 = createIcon(ArrowRightIconConfig);
 
-var _default$g = {
+var _default$h = {
   "card": "pf-c-card",
   "cardActions": "pf-c-card__actions",
   "cardBody": "pf-c-card__body",
@@ -6286,6 +6286,24 @@ const AngleDownIconConfig = {
 
 const AngleDownIcon = createIcon(AngleDownIconConfig);
 
+var _default$g = {
+  "codeBlock": "pf-c-code-block",
+  "codeBlockActions": "pf-c-code-block__actions",
+  "codeBlockCode": "pf-c-code-block__code",
+  "codeBlockContent": "pf-c-code-block__content",
+  "codeBlockHeader": "pf-c-code-block__header",
+  "codeBlockPre": "pf-c-code-block__pre"
+};
+
+const CodeBlock = (_a) => {
+    var { children = null, className, actions = null } = _a, props = __rest$2(_a, ["children", "className", "actions"]);
+    return (React.createElement("div", Object.assign({ className: css(_default$g.codeBlock, className) }, props),
+        React.createElement("div", { className: css(_default$g.codeBlockHeader) },
+            React.createElement("div", { className: css(_default$g.codeBlockActions) }, actions && actions)),
+        React.createElement("div", { className: css(_default$g.codeBlockContent) }, children)));
+};
+CodeBlock.displayName = 'CodeBlock';
+
 const SearchIconConfig = {
   name: 'SearchIcon',
   height: 512,
@@ -6325,7 +6343,7 @@ class FormSelect extends React.Component {
         /* find selected option and get placeholder flag */
         const selectedOption = React.Children.toArray(children).find((option) => option.props.value === value);
         const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder;
-        return (React.createElement("select", Object.assign({}, props, { className: css(_default$p.formControl, className, validated === ValidatedOptions.success && _default$p.modifiers.success, validated === ValidatedOptions.warning && _default$p.modifiers.warning, isSelectedPlaceholder && _default$p.modifiers.placeholder), "aria-invalid": validated === ValidatedOptions.error }, getOUIAProps(FormSelect.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { onChange: this.handleChange, disabled: isDisabled, required: isRequired, value: value }), children));
+        return (React.createElement("select", Object.assign({}, props, { className: css(_default$q.formControl, className, validated === ValidatedOptions.success && _default$q.modifiers.success, validated === ValidatedOptions.warning && _default$q.modifiers.warning, isSelectedPlaceholder && _default$q.modifiers.placeholder), "aria-invalid": validated === ValidatedOptions.error }, getOUIAProps(FormSelect.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), { onChange: this.handleChange, disabled: isDisabled, required: isRequired, value: value }), children));
     }
 }
 FormSelect.displayName = 'FormSelect';
@@ -6386,7 +6404,7 @@ class TextAreaBase extends React.Component {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         props = __rest$2(_a, ["className", "value", "validated", "isRequired", "isDisabled", "isReadOnly", "resizeOrientation", "innerRef", "readOnly", "disabled", "autoResize", "onChange"]);
         const orientation = `resize${capitalize(resizeOrientation)}`;
-        return (React.createElement("textarea", Object.assign({ className: css(_default$p.formControl, className, resizeOrientation !== TextAreResizeOrientation.both && _default$p.modifiers[orientation], validated === ValidatedOptions.success && _default$p.modifiers.success, validated === ValidatedOptions.warning && _default$p.modifiers.warning), onChange: this.handleChange }, (typeof this.props.defaultValue !== 'string' && { value }), { "aria-invalid": validated === ValidatedOptions.error, required: isRequired, disabled: isDisabled || disabled, readOnly: isReadOnly || readOnly, ref: innerRef }, props)));
+        return (React.createElement("textarea", Object.assign({ className: css(_default$q.formControl, className, resizeOrientation !== TextAreResizeOrientation.both && _default$q.modifiers[orientation], validated === ValidatedOptions.success && _default$q.modifiers.success, validated === ValidatedOptions.warning && _default$q.modifiers.warning), onChange: this.handleChange }, (typeof this.props.defaultValue !== 'string' && { value }), { "aria-invalid": validated === ValidatedOptions.error, required: isRequired, disabled: isDisabled || disabled, readOnly: isReadOnly || readOnly, ref: innerRef }, props)));
     }
 }
 TextAreaBase.displayName = 'TextArea';
@@ -7314,39 +7332,39 @@ var checkPropTypes_1 = checkPropTypes;
 
 const ActionGroup = (_a) => {
     var { children = null, className = '' } = _a, props = __rest$2(_a, ["children", "className"]);
-    const customClassName = css(_default$k.formGroup, _default$k.modifiers.action, className);
-    const formActionsComponent = React.createElement("div", { className: css(_default$k.formActions) }, children);
+    const customClassName = css(_default$l.formGroup, _default$l.modifiers.action, className);
+    const formActionsComponent = React.createElement("div", { className: css(_default$l.formActions) }, children);
     return (React.createElement("div", Object.assign({}, props, { className: customClassName }),
-        React.createElement("div", { className: css(_default$k.formGroupControl) }, formActionsComponent)));
+        React.createElement("div", { className: css(_default$l.formGroupControl) }, formActionsComponent)));
 };
 ActionGroup.displayName = 'ActionGroup';
 
 const Form = (_a) => {
     var { children = null, className = '', isHorizontal = false, isWidthLimited = false } = _a, props = __rest$2(_a, ["children", "className", "isHorizontal", "isWidthLimited"]);
-    return (React.createElement("form", Object.assign({ noValidate: true }, props, { className: css(_default$k.form, isHorizontal && _default$k.modifiers.horizontal, isWidthLimited && _default$k.modifiers.limitWidth, className) }), children));
+    return (React.createElement("form", Object.assign({ noValidate: true }, props, { className: css(_default$l.form, isHorizontal && _default$l.modifiers.horizontal, isWidthLimited && _default$l.modifiers.limitWidth, className) }), children));
 };
 Form.displayName = 'Form';
 
 const FormGroup = (_a) => {
     var { children = null, className = '', label, labelIcon, isRequired = false, validated = 'default', isInline = false, hasNoPaddingTop = false, isStack = false, helperText, isHelperTextBeforeField = false, helperTextInvalid, helperTextIcon, helperTextInvalidIcon, fieldId } = _a, props = __rest$2(_a, ["children", "className", "label", "labelIcon", "isRequired", "validated", "isInline", "hasNoPaddingTop", "isStack", "helperText", "isHelperTextBeforeField", "helperTextInvalid", "helperTextIcon", "helperTextInvalidIcon", "fieldId"]);
-    const validHelperText = typeof helperText !== 'string' ? (helperText) : (React.createElement("div", { className: css(_default$k.formHelperText, validated === ValidatedOptions.success && _default$k.modifiers.success, validated === ValidatedOptions.warning && _default$k.modifiers.warning), id: `${fieldId}-helper`, "aria-live": "polite" },
-        helperTextIcon && React.createElement("span", { className: css(_default$k.formHelperTextIcon) }, helperTextIcon),
+    const validHelperText = typeof helperText !== 'string' ? (helperText) : (React.createElement("div", { className: css(_default$l.formHelperText, validated === ValidatedOptions.success && _default$l.modifiers.success, validated === ValidatedOptions.warning && _default$l.modifiers.warning), id: `${fieldId}-helper`, "aria-live": "polite" },
+        helperTextIcon && React.createElement("span", { className: css(_default$l.formHelperTextIcon) }, helperTextIcon),
         helperText));
-    const inValidHelperText = typeof helperTextInvalid !== 'string' ? (helperTextInvalid) : (React.createElement("div", { className: css(_default$k.formHelperText, _default$k.modifiers.error), id: `${fieldId}-helper`, "aria-live": "polite" },
-        helperTextInvalidIcon && React.createElement("span", { className: css(_default$k.formHelperTextIcon) }, helperTextInvalidIcon),
+    const inValidHelperText = typeof helperTextInvalid !== 'string' ? (helperTextInvalid) : (React.createElement("div", { className: css(_default$l.formHelperText, _default$l.modifiers.error), id: `${fieldId}-helper`, "aria-live": "polite" },
+        helperTextInvalidIcon && React.createElement("span", { className: css(_default$l.formHelperTextIcon) }, helperTextInvalidIcon),
         helperTextInvalid));
     const showValidHelperTxt = (validationType) => validationType !== ValidatedOptions.error && helperText ? validHelperText : '';
     const helperTextToDisplay = validated === ValidatedOptions.error && helperTextInvalid ? inValidHelperText : showValidHelperTxt(validated);
-    return (React.createElement("div", Object.assign({}, props, { className: css(_default$k.formGroup, className) }),
-        label && (React.createElement("div", { className: css(_default$k.formGroupLabel, hasNoPaddingTop && _default$k.modifiers.noPaddingTop) },
-            React.createElement("label", { className: css(_default$k.formLabel), htmlFor: fieldId },
-                React.createElement("span", { className: css(_default$k.formLabelText) }, label),
-                isRequired && (React.createElement("span", { className: css(_default$k.formLabelRequired), "aria-hidden": "true" },
+    return (React.createElement("div", Object.assign({}, props, { className: css(_default$l.formGroup, className) }),
+        label && (React.createElement("div", { className: css(_default$l.formGroupLabel, hasNoPaddingTop && _default$l.modifiers.noPaddingTop) },
+            React.createElement("label", { className: css(_default$l.formLabel), htmlFor: fieldId },
+                React.createElement("span", { className: css(_default$l.formLabelText) }, label),
+                isRequired && (React.createElement("span", { className: css(_default$l.formLabelRequired), "aria-hidden": "true" },
                     ' ',
                     ASTERISK))),
             ' ',
             React.isValidElement(labelIcon) && labelIcon)),
-        React.createElement("div", { className: css(_default$k.formGroupControl, isInline && _default$k.modifiers.inline, isStack && _default$k.modifiers.stack) },
+        React.createElement("div", { className: css(_default$l.formGroupControl, isInline && _default$l.modifiers.inline, isStack && _default$l.modifiers.stack) },
             isHelperTextBeforeField && helperTextToDisplay,
             children,
             !isHelperTextBeforeField && helperTextToDisplay)));
@@ -7557,7 +7575,7 @@ const ModalBoxTitle = (_a) => {
     }, []);
     const content = (React.createElement("h1", Object.assign({ id: id, ref: h1, className: css(_default$8.modalBoxTitle, titleIconVariant && _default$8.modifiers.icon, className) }, props),
         titleIconVariant && (React.createElement("span", { className: css(_default$8.modalBoxTitleIcon) }, isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : React.createElement(CustomIcon, null))),
-        label && React.createElement("span", { className: css(_default$r.screenReader) }, label),
+        label && React.createElement("span", { className: css(_default$s.screenReader) }, label),
         React.createElement("span", { className: css(_default$8.modalBoxTitleText) }, title)));
     return isTooltipVisible ? (React.createElement(Tooltip, { content: title, isVisible: true }, content)) : (content);
 };
@@ -7597,7 +7615,7 @@ const ModalContent = (_a) => {
         modalBody,
         modalBoxFooter));
     return (React.createElement(Backdrop, null,
-        React.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true }, className: css(_default$x.bullseye) }, modalBox)));
+        React.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true }, className: css(_default$y.bullseye) }, modalBox)));
 };
 ModalContent.displayName = 'ModalContent';
 
@@ -7656,10 +7674,10 @@ class Modal$1 extends React.Component {
         target.appendChild(container);
         target.addEventListener('keydown', this.handleEscKeyClick, false);
         if (this.props.isOpen) {
-            target.classList.add(css(_default$y.backdropOpen));
+            target.classList.add(css(_default$z.backdropOpen));
         }
         else {
-            target.classList.remove(css(_default$y.backdropOpen));
+            target.classList.remove(css(_default$z.backdropOpen));
         }
         if (this.isEmpty(title) && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
             // eslint-disable-next-line no-console
@@ -7674,11 +7692,11 @@ class Modal$1 extends React.Component {
         const { appendTo } = this.props;
         const target = this.getElement(appendTo);
         if (this.props.isOpen) {
-            target.classList.add(css(_default$y.backdropOpen));
+            target.classList.add(css(_default$z.backdropOpen));
             this.toggleSiblingsFromScreenReaders(true);
         }
         else {
-            target.classList.remove(css(_default$y.backdropOpen));
+            target.classList.remove(css(_default$z.backdropOpen));
             this.toggleSiblingsFromScreenReaders(false);
         }
     }
@@ -7689,7 +7707,7 @@ class Modal$1 extends React.Component {
             target.removeChild(this.state.container);
         }
         target.removeEventListener('keydown', this.handleEscKeyClick, false);
-        target.classList.remove(css(_default$y.backdropOpen));
+        target.classList.remove(css(_default$z.backdropOpen));
     }
     render() {
         const _a = this.props, { 
@@ -7749,7 +7767,7 @@ const Text = (_a) => {
     var { children = null, className = '', component = TextVariants.p, isVisitedLink = false, ouiaId, ouiaSafe = true } = _a, props = __rest$2(_a, ["children", "className", "component", "isVisitedLink", "ouiaId", "ouiaSafe"]);
     const Component = component;
     const ouiaProps = useOUIAProps$1(Text.displayName, ouiaId, ouiaSafe);
-    return (React.createElement(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css(isVisitedLink && component === TextVariants.a && _default$w.modifiers.visited, className) }), children));
+    return (React.createElement(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css(isVisitedLink && component === TextVariants.a && _default$x.modifiers.visited, className) }), children));
 };
 Text.displayName = 'Text';
 
@@ -10027,10 +10045,10 @@ const Spinner = (_a) => {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', isSVG = false, diameter } = _a, props = __rest(_a, ["className", "size", 'aria-valuetext', "isSVG", "diameter"]);
     const Component = isSVG ? 'svg' : 'span';
-    return (React.createElement(Component, Object.assign({ className: css(_default$t.spinner, _default$t.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), props), isSVG ? (React.createElement("circle", { className: _default$t.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: css(_default$t.spinnerClipper) }),
-        React.createElement("span", { className: css(_default$t.spinnerLeadBall) }),
-        React.createElement("span", { className: css(_default$t.spinnerTailBall) })))));
+    return (React.createElement(Component, Object.assign({ className: css(_default$u.spinner, _default$u.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText }, (isSVG && { viewBox: '0 0 100 100' }), (diameter && { style: { '--pf-c-spinner--diameter': diameter } }), props), isSVG ? (React.createElement("circle", { className: _default$u.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })) : (React.createElement(React.Fragment, null,
+        React.createElement("span", { className: css(_default$u.spinnerClipper) }),
+        React.createElement("span", { className: css(_default$u.spinnerLeadBall) }),
+        React.createElement("span", { className: css(_default$u.spinnerTailBall) })))));
 };
 Spinner.displayName = 'Spinner';
 
@@ -10071,12 +10089,12 @@ const ButtonBase = (_a) => {
             return 0;
         }
     };
-    return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isDisabled || isAriaDisabled, "aria-label": ariaLabel, className: css(_default$u.button, _default$u.modifiers[variant], isBlock && _default$u.modifiers.block, isDisabled && _default$u.modifiers.disabled, isAriaDisabled && _default$u.modifiers.ariaDisabled, isActive && _default$u.modifiers.active, isInline && variant === ButtonVariant.link && _default$u.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && _default$u.modifiers.danger, isLoading !== null && _default$u.modifiers.progress, isLoading && _default$u.modifiers.inProgress, isSmall && _default$u.modifiers.small, isLarge && _default$u.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : null, ref: innerRef }, ouiaProps),
-        isLoading && (React.createElement("span", { className: css(_default$u.buttonProgress) },
+    return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isDisabled || isAriaDisabled, "aria-label": ariaLabel, className: css(_default$v.button, _default$v.modifiers[variant], isBlock && _default$v.modifiers.block, isDisabled && _default$v.modifiers.disabled, isAriaDisabled && _default$v.modifiers.ariaDisabled, isActive && _default$v.modifiers.active, isInline && variant === ButtonVariant.link && _default$v.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && _default$v.modifiers.danger, isLoading !== null && _default$v.modifiers.progress, isLoading && _default$v.modifiers.inProgress, isSmall && _default$v.modifiers.small, isLarge && _default$v.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : null, ref: innerRef }, ouiaProps),
+        isLoading && (React.createElement("span", { className: css(_default$v.buttonProgress) },
             React.createElement(Spinner, { size: spinnerSize.md, "aria-valuetext": spinnerAriaValueText }))),
-        variant !== ButtonVariant.plain && icon && iconPosition === 'left' && (React.createElement("span", { className: css(_default$u.buttonIcon, _default$u.modifiers.start) }, icon)),
+        variant !== ButtonVariant.plain && icon && iconPosition === 'left' && (React.createElement("span", { className: css(_default$v.buttonIcon, _default$v.modifiers.start) }, icon)),
         children,
-        variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (React.createElement("span", { className: css(_default$u.buttonIcon, _default$u.modifiers.end) }, icon))));
+        variant !== ButtonVariant.plain && icon && iconPosition === 'right' && (React.createElement("span", { className: css(_default$v.buttonIcon, _default$v.modifiers.end) }, icon))));
 };
 const Button = React.forwardRef((props, ref) => (React.createElement(ButtonBase, Object.assign({ innerRef: ref }, props))));
 Button.displayName = 'Button';
@@ -10098,47 +10116,47 @@ const Card = (_a) => {
             cardId: id,
             isExpanded
         } },
-        React.createElement(Component, Object.assign({ id: id, className: css(_default$g.card, isHoverable && _default$g.modifiers.hoverable, isCompact && _default$g.modifiers.compact, isSelectable && _default$g.modifiers.selectable, isSelected && isSelectable && _default$g.modifiers.selected, isExpanded && _default$g.modifiers.expanded, isFlat && _default$g.modifiers.flat, isRounded && _default$g.modifiers.rounded, isLarge && _default$g.modifiers.displayLg, isFullHeight && _default$g.modifiers.fullHeight, isPlain && _default$g.modifiers.plain, className), tabIndex: isSelectable ? '0' : undefined }, props, ouiaProps), children)));
+        React.createElement(Component, Object.assign({ id: id, className: css(_default$h.card, isHoverable && _default$h.modifiers.hoverable, isCompact && _default$h.modifiers.compact, isSelectable && _default$h.modifiers.selectable, isSelected && isSelectable && _default$h.modifiers.selected, isExpanded && _default$h.modifiers.expanded, isFlat && _default$h.modifiers.flat, isRounded && _default$h.modifiers.rounded, isLarge && _default$h.modifiers.displayLg, isFullHeight && _default$h.modifiers.fullHeight, isPlain && _default$h.modifiers.plain, className), tabIndex: isSelectable ? '0' : undefined }, props, ouiaProps), children)));
 };
 Card.displayName = 'Card';
 
 const CardActions = (_a) => {
     var { children = null, className = '', hasNoOffset = false } = _a, props = __rest(_a, ["children", "className", "hasNoOffset"]);
-    return (React.createElement("div", Object.assign({ className: css(_default$g.cardActions, hasNoOffset && _default$g.modifiers.noOffset, className) }, props), children));
+    return (React.createElement("div", Object.assign({ className: css(_default$h.cardActions, hasNoOffset && _default$h.modifiers.noOffset, className) }, props), children));
 };
 CardActions.displayName = 'CardActions';
 
 const CardBody = (_a) => {
     var { children = null, className = '', component = 'div', isFilled = true } = _a, props = __rest(_a, ["children", "className", "component", "isFilled"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(_default$g.cardBody, !isFilled && _default$g.modifiers.noFill, className) }, props), children));
+    return (React.createElement(Component, Object.assign({ className: css(_default$h.cardBody, !isFilled && _default$h.modifiers.noFill, className) }, props), children));
 };
 CardBody.displayName = 'CardBody';
 
 const CardFooter = (_a) => {
     var { children = null, className = '', component = 'div' } = _a, props = __rest(_a, ["children", "className", "component"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(_default$g.cardFooter, className) }, props), children));
+    return (React.createElement(Component, Object.assign({ className: css(_default$h.cardFooter, className) }, props), children));
 };
 CardFooter.displayName = 'CardFooter';
 
 const CardTitle = (_a) => {
     var { children = null, className = '', component = 'div' } = _a, props = __rest(_a, ["children", "className", "component"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(_default$g.cardTitle, className) }, props), children));
+    return (React.createElement(Component, Object.assign({ className: css(_default$h.cardTitle, className) }, props), children));
 };
 CardTitle.displayName = 'CardTitle';
 
 const CardHeader = (_a) => {
     var { children = null, className = '', id, onExpand, toggleButtonProps, isToggleRightAligned } = _a, props = __rest(_a, ["children", "className", "id", "onExpand", "toggleButtonProps", "isToggleRightAligned"]);
     return (React.createElement(CardContext.Consumer, null, ({ cardId }) => {
-        const cardHeaderToggle = (React.createElement("div", { className: css(_default$g.cardHeaderToggle) },
+        const cardHeaderToggle = (React.createElement("div", { className: css(_default$h.cardHeaderToggle) },
             React.createElement(Button, Object.assign({ variant: "plain", type: "button", onClick: evt => {
                     onExpand(evt, cardId);
                 } }, toggleButtonProps),
-                React.createElement("span", { className: css(_default$g.cardHeaderToggleIcon) },
+                React.createElement("span", { className: css(_default$h.cardHeaderToggleIcon) },
                     React.createElement(AngleRightIcon, { "aria-hidden": "true" })))));
-        return (React.createElement("div", Object.assign({ className: css(_default$g.cardHeader, isToggleRightAligned && _default$g.modifiers.toggleRight, className), id: id }, props),
+        return (React.createElement("div", Object.assign({ className: css(_default$h.cardHeader, isToggleRightAligned && _default$h.modifiers.toggleRight, className), id: id }, props),
             onExpand && !isToggleRightAligned && cardHeaderToggle,
             children,
             onExpand && isToggleRightAligned && cardHeaderToggle));
@@ -14814,6 +14832,20 @@ const useAdmonitionShowdownExtension = () => {
     }), []);
 };
 
+const useCodeShowdownExtension = () => {
+    return React.useMemo(() => ({
+        type: 'output',
+        regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,
+        replace: (text, content) => {
+            if (!content) {
+                return text;
+            }
+            const pfCodeBlock = React.createElement(CodeBlock, null, content);
+            return removeTemplateWhitespace(server.renderToStaticMarkup(pfCodeBlock));
+        },
+    }), []);
+};
+
 const FallbackImg = ({ src, alt, className, fallback }) => {
     const [isSrcValid, setIsSrcValid] = React.useState(true);
     if (src && isSrcValid) {
@@ -19550,6 +19582,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
     const inlineCopyClipboardShowdownExtension = useInlineCopyClipboardShowdownExtension();
     const multilineCopyClipboardShowdownExtension = useMultilineCopyClipboardShowdownExtension();
     const admonitionShowdownExtension = useAdmonitionShowdownExtension();
+    const codeShowdownExtension = useCodeShowdownExtension();
     return (React.createElement(SyncMarkdownView, { inline: true, content: content, exactHeight: exactHeight, extensions: [
             {
                 type: 'lang',
@@ -19572,6 +19605,7 @@ const QuickStartMarkdownView = ({ content, exactHeight, className, }) => {
             inlineCopyClipboardShowdownExtension,
             multilineCopyClipboardShowdownExtension,
             admonitionShowdownExtension,
+            codeShowdownExtension,
             ...(markdown ? markdown.extensions : []),
         ], renderExtension: (docContext, rootSelector) => (React.createElement(React.Fragment, null,
             React.createElement(MarkdownHighlightExtension, { docContext: docContext, rootSelector: rootSelector }),
@@ -19723,7 +19757,7 @@ const QuickStartTile = ({ quickStart, status, isActive, onClick = () => { }, })
 
 const QuickStartCatalog = ({ quickStarts }) => {
     const { activeQuickStartID, allQuickStartStates } = React.useContext(QuickStartContext);
-    return (React.createElement("div", { className: "pfext-page-layout__content pfext-is-dark" },
+    return (React.createElement("div", { className: "pfext-page-layout__content" },
         React.createElement(Gallery, { className: "pfext-quick-start-catalog__gallery", hasGutter: true }, quickStarts.map((quickStart) => {
             const { metadata: { name: id }, } = quickStart;
             return (React.createElement(GalleryItem, { key: id, className: "pfext-quick-start-catalog__gallery-item" },
@@ -19928,7 +19962,7 @@ const QuickStartCatalogHeader = ({ title, hint, }) => (React.createElement("div"
     React.createElement("h1", { "data-pf-content": "true", className: "pfext-page-layout__title" }, title),
     hint && React.createElement("div", { className: "pfext-page-layout__hint" }, hint)));
 
-const QuickStartCatalogSection = ({ children }) => (React.createElement("div", { className: "pfext-page-layout__content pfext-is-dark" }, children));
+const QuickStartCatalogSection = ({ children }) => (React.createElement("div", { className: "pfext-page-layout__content" }, children));
 
 const QuickStartCatalogToolbar = ({ children }) => (React.createElement(Toolbar, { usePageInsets: true, className: "pfext-quick-start-catalog-filter__flex" }, children));
 
@@ -20357,6 +20391,7 @@ var BarsIcon = /*@__PURE__*/getDefaultExportFromCjs(barsIcon);
 
 const HelpTopicContextDefaults = {
     helpTopics: [],
+    setHelpTopics: () => { },
     activeHelpTopic: null,
     setActiveHelpTopicByName: () => { },
     filteredHelpTopics: [],
@@ -20383,6 +20418,7 @@ const useValuesForHelpTopicContext = (value = {}) => {
     const [filteredHelpTopics, setFilteredHelpTopics] = React__default.useState(combinedValue.filteredHelpTopics || []);
     return {
         helpTopics,
+        setHelpTopics,
         activeHelpTopic,
         setActiveHelpTopicByName,
         filteredHelpTopics,
@@ -20393,7 +20429,8 @@ const useValuesForHelpTopicContext = (value = {}) => {
 };
 
 const HelpTopicPanelContent = (_a) => {
-    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true } = _a, props = __rest$1(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable"]);
+    var _b, _c;
+    var { activeHelpTopic = null, filteredHelpTopics = [], isResizable = true, onClose } = _a, props = __rest$1(_a, ["activeHelpTopic", "filteredHelpTopics", "isResizable", "onClose"]);
     const { setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
     const [isHelpTopicMenuOpen, setIsHelpTopicMenuOpen] = React.useState(false);
     const toggleHelpTopicMenu = () => {
@@ -20404,24 +20441,28 @@ const HelpTopicPanelContent = (_a) => {
         setActiveHelpTopicByName(topicName);
         toggleHelpTopicMenu();
     };
-    const menuItems = filteredHelpTopics.map((topic) => {
-        return (React.createElement(OptionsMenuItem, { key: topic.name, onSelect: onSelectHelpTopic, id: topic.name }, topic.title));
-    });
+    const menuItems = filteredHelpTopics.length > 0 &&
+        filteredHelpTopics.map((topic) => {
+            return (React.createElement(OptionsMenuItem, { key: topic.name, onSelect: onSelectHelpTopic, id: topic.name }, topic.title));
+        });
+    const paddingContainer = (children) => React.createElement("div", { style: { padding: '24px' } }, children);
+    const panelBodyItems = (React.createElement(React.Fragment, null,
+        paddingContainer(React.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
+        ((_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) => {
+            return (React.createElement(StackItem, { key: index },
+                React.createElement(Button$1, { 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),
         React.createElement("div", null,
             React.createElement(DrawerHead, null,
                 React.createElement("div", { className: "pfext-quick-start-panel-content__title" },
-                    React.createElement(OptionsMenu, { id: 'helptopics', isPlain: true, isOpen: isHelpTopicMenuOpen, toggle: React.createElement(OptionsMenuToggle, { onToggle: toggleHelpTopicMenu, toggleTemplate: React.createElement(BarsIcon, null) }), menuItems: menuItems }),
-                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-global--spacer--md)' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.title))),
+                    menuItems && (React.createElement(OptionsMenu, { id: 'helptopics', isPlain: true, isOpen: isHelpTopicMenuOpen, toggle: React.createElement(OptionsMenuToggle, { style: { paddingLeft: '0px' }, onToggle: toggleHelpTopicMenu, toggleTemplate: React.createElement(BarsIcon, null) }), menuItems: menuItems })),
+                    React.createElement(Title, { headingLevel: "h1", size: "xl", className: "pfext-quick-start-panel-content__name", style: { marginRight: 'var(--pf-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(Divider, null),
-            React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" },
-                React.createElement(Stack, { hasGutter: true },
-                    React.createElement(StackItem, { style: { padding: '20px' } },
-                        React.createElement(QuickStartMarkdownView, { content: activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.content })),
-                    React.createElement(Divider, null),
-                    React.createElement(StackItem, { style: { padding: '20px' } }, activeHelpTopic === null || activeHelpTopic === void 0 ? void 0 : activeHelpTopic.links.map((link) => {
-                        return React.createElement(QuickStartMarkdownView, { key: link, content: link });
-                    })))))));
+            React.createElement(DrawerPanelBody, { hasNoPadding: true, className: "pfext-quick-start-panel-content__body", "data-test": "content" }, panelBodyItems))));
     return content;
 };
 
@@ -20435,26 +20476,23 @@ const HelpTopicContainer = (_a) => {
             valuesForHelpTopicContext.setLoading(loading);
         }
     }, [loading, valuesForHelpTopicContext]);
+    React.useEffect(() => {
+        if (helpTopics &&
+            JSON.stringify(helpTopics) !== JSON.stringify(valuesForHelpTopicContext.helpTopics)) {
+            valuesForHelpTopicContext.setHelpTopics(helpTopics);
+        }
+    }, [helpTopics, valuesForHelpTopicContext]);
     const drawerProps = Object.assign({}, props);
     return (React.createElement(HelpTopicContext.Provider, { value: valuesForHelpTopicContext },
         React.createElement(HelpTopicDrawer, Object.assign({}, drawerProps), children)));
 };
 const HelpTopicDrawer = (_a) => {
-    var { 
-    // helpTopics,
-    children } = _a, props = __rest$1(_a, ["children"]);
-    const { activeHelpTopic, filteredHelpTopics } = React.useContext(HelpTopicContext);
-    // Leave here if query param is desired for help topics later
-    // React.useEffect(() => {
-    //   const params = new URLSearchParams(window.location.search);
-    //   // if there is a quick start param, but the quick start is not active, set it
-    //   // this can happen if a new browser session is opened or an incognito window for example
-    //   const helpTopicNameFromParam = params.get(HELP_TOPIC_NAME_KEY) || '';
-    //   if (helpTopicNameFromParam) {
-    //     setActiveHelpTopicByName(helpTopicNameFromParam);
-    //   }
-    // }, [inContextHelpTopics, setActiveHelpTopicByName]);
-    const panelContent = (React.createElement(HelpTopicPanelContent, { activeHelpTopic: activeHelpTopic, filteredHelpTopics: filteredHelpTopics }));
+    var { children } = _a, props = __rest$1(_a, ["children"]);
+    const { activeHelpTopic, filteredHelpTopics, setActiveHelpTopicByName } = React.useContext(HelpTopicContext);
+    const onClose = () => {
+        setActiveHelpTopicByName('');
+    };
+    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-c-drawer__main" }, panelContent)))));
@@ -20497,5 +20535,105 @@ const useLocalStorage = (key, initialValue) => {
     return [storedValue, setValue];
 };
 
-export { Box, CamelCaseWrap, EmptyBox, HELP_TOPIC_NAME_KEY, HelpTopicContainer, HelpTopicContext, HelpTopicContextDefaults, HelpTopicDrawer, Loading, LoadingBox, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForHelpTopicContext, useValuesForQuickStartContext };
+/* eslint-disable */
+// Brought in from dev to publish this with QS module
+// Dev now imports from here
+const ProcQuickStartParser = (quickStart, environmentVariables) => {
+    var _a;
+    const replaceEnvironmentVariables = (s) => s === null || s === void 0 ? void 0 : s.replace(/\${(\w+)}/, (substring, name) => {
+        return environmentVariables ? ([name] ? environmentVariables[name] : substring) : substring;
+    });
+    quickStart.spec.tasks = (_a = quickStart.spec.tasks) === null || _a === void 0 ? void 0 : _a.map((task, index) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        let proc;
+        let answer;
+        if (typeof task === 'string') {
+            proc = task;
+            answer = {};
+        }
+        else {
+            // @ts-ignore
+            proc = task.proc;
+            answer = task;
+            // @ts-ignore
+            delete task.proc;
+        }
+        let description = '', procedure, verification, title, summaryFailed, success, reviewFailed, prerequisites;
+        if (proc) {
+            const taskDOM = document.createElement('div');
+            taskDOM.innerHTML = proc;
+            // remove the screencapture images
+            taskDOM.querySelectorAll('.imageblock.screencapture').forEach((node) => {
+                var _a;
+                (_a = node.parentElement) === null || _a === void 0 ? void 0 : _a.removeChild(node);
+            });
+            title = (_a = taskDOM
+                .querySelector('h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child')) === null || _a === void 0 ? void 0 : _a.innerHTML.trim();
+            let sectionBody = taskDOM.querySelector('.sectionbody');
+            if (!(sectionBody === null || sectionBody === void 0 ? void 0 : sectionBody.hasChildNodes())) {
+                // possibly in other templates, where we want to look for article
+                sectionBody = taskDOM.querySelector('article');
+            }
+            if (sectionBody) {
+                for (let i = 0; i < sectionBody.children.length || 0; i++) {
+                    /**
+                    child typically looks like:
+          
+                    <div class="paragraph|olist|ulist|admonitionblock">
+                       <div class="title">Procedure|Prerequisites|Verification|Note|Warning</div>
+                       <ol|ul class="arabic">
+                         <li>
+                         <li>...
+                       </ol|ul>
+                    </div>
+          
+                    And the below code extracts the <ol> or <ul>
+                    Except for when there is no <div class="title|heading"/>, then the description is extracted
+                    in the else if below
+                    */
+                    const child = sectionBody.children.item(i);
+                    // find the title
+                    const sectionTitle = child === null || child === void 0 ? void 0 : child.querySelector('.heading,.title');
+                    // should this section be assigned to a specific section
+                    const sectionTitleText = (_b = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _b === void 0 ? void 0 : _b.trim();
+                    const isKnownSection = ['Procedure', 'Verification', 'Prerequisites'].includes((_c = sectionTitle === null || sectionTitle === void 0 ? void 0 : sectionTitle.textContent) === null || _c === void 0 ? void 0 : _c.trim());
+                    if (isKnownSection) {
+                        switch (sectionTitleText) {
+                            case 'Procedure':
+                                procedure = (_d = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _d === void 0 ? void 0 : _d.outerHTML.trim();
+                                break;
+                            case 'Verification':
+                                verification = (_e = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _e === void 0 ? void 0 : _e.outerHTML.trim();
+                                break;
+                            case 'Prerequisites':
+                                prerequisites = (_f = child === null || child === void 0 ? void 0 : child.querySelector(':not(.heading):not(.title)')) === null || _f === void 0 ? void 0 : _f.outerHTML.trim();
+                                break;
+                        }
+                    }
+                    else if (!procedure) {
+                        // Otherwise if it comes before a procedure it's part of the description
+                        description = description + (child === null || child === void 0 ? void 0 : child.outerHTML.trim());
+                    }
+                }
+            }
+            success = (_g = taskDOM.querySelector('.qs-summary.success')) === null || _g === void 0 ? void 0 : _g.innerHTML.trim();
+            reviewFailed = (_h = taskDOM.querySelector('.qs-review.failed')) === null || _h === void 0 ? void 0 : _h.innerHTML.trim();
+            summaryFailed = (_j = taskDOM.querySelector('.qs-summary.failed')) === null || _j === void 0 ? void 0 : _j.innerHTML.trim();
+        }
+        answer.title = replaceEnvironmentVariables(answer.title || title);
+        answer.description = replaceEnvironmentVariables(answer.description || `${description} ${prerequisites || ''} ${procedure}`);
+        answer.review = answer.review || {};
+        answer.review.instructions = replaceEnvironmentVariables(((_k = answer.review) === null || _k === void 0 ? void 0 : _k.instructions) || verification || 'Have you completed these steps?');
+        answer.review.failedTaskHelp = replaceEnvironmentVariables(answer.review.failedTaskHelp ||
+            reviewFailed ||
+            'This task isn’t verified yet. Try the task again.');
+        answer.summary = answer.summary || {};
+        answer.summary.success = replaceEnvironmentVariables(answer.summary.success || success || 'You have completed this task!');
+        answer.summary.failed = replaceEnvironmentVariables(answer.summary.failed || summaryFailed || 'Try the steps again.');
+        return answer;
+    });
+    return quickStart;
+};
+
+export { Box, CamelCaseWrap, EmptyBox, HELP_TOPIC_NAME_KEY, HelpTopicContainer, HelpTopicContext, HelpTopicContextDefaults, HelpTopicDrawer, Loading, LoadingBox, ProcQuickStartParser, QUICKSTART_ID_FILTER_KEY, QUICKSTART_SEARCH_FILTER_KEY, QUICKSTART_STATUS_FILTER_KEY, QUICKSTART_TASKS_INITIAL_STATES, QUICK_START_NAME, QuickStartCatalog, QuickStartCatalogEmptyState, QuickStartCatalogFilter, QuickStartCatalogFilterCount, QuickStartCatalogFilterCountWrapper, QuickStartCatalogFilterSearch, QuickStartCatalogFilterSearchWrapper, QuickStartCatalogFilterSelect, QuickStartCatalogFilterStatusWrapper, QuickStartCatalogHeader, QuickStartCatalogPage, QuickStartCatalogSection, QuickStartCatalogToolbar, QuickStartCloseModal, QuickStartContainer, QuickStartContext, QuickStartContextDefaults, QuickStartContextProvider, QuickStartDrawer, QuickStartPanelContent, QuickStartStatus, QuickStartTaskStatus, QuickStartTile, QuickStartTileDescription, QuickStartTileFooter, QuickStartTileFooterExternal, QuickStartTileHeader, camelize, clearFilterParams, equalsIgnoreOrder, filterQuickStarts, getDefaultQuickStartState, getDisabledQuickStarts, getQuickStartByName, getQuickStartStatus, getQuickStartStatusCount, getResource, getTaskStatusKey, history, isDisabledQuickStart, removeQueryArgument, setQueryArgument, useLocalStorage, useValuesForHelpTopicContext, useValuesForQuickStartContext };
 //# sourceMappingURL=quickstarts-full.es.js.map