@patternfly/react-core 4.221.14 → 4.221.17

package/dist/umd/react-core.js

@@ -8374,34 +8374,170 @@
         isFlipEnabled: false
     };
 
-    const ArrowLeftIconConfig = {
-      name: 'ArrowLeftIcon',
-      height: 512,
-      width: 448,
-      svgPath: 'M257.5 445.1l-22.2 22.2c-9.4 9.4-24.6 9.4-33.9 0L7 273c-9.4-9.4-9.4-24.6 0-33.9L201.4 44.7c9.4-9.4 24.6-9.4 33.9 0l22.2 22.2c9.5 9.5 9.3 25-.4 34.3L136.6 216H424c13.3 0 24 10.7 24 24v32c0 13.3-10.7 24-24 24H136.6l120.5 114.8c9.8 9.3 10 24.8.4 34.3z',
-      yOffset: 0,
-      xOffset: 0,
+    Promise.resolve().then(function () { return inputGroup; });
+    var styles$V = {
+      "formControl": "pf-c-form-control",
+      "inputGroup": "pf-c-input-group",
+      "inputGroupText": "pf-c-input-group__text",
+      "modifiers": {
+        "plain": "pf-m-plain"
+      },
+      "themeDark": "pf-theme-dark"
+    };
+
+    class FormSelect extends React__namespace.Component {
+        constructor(props) {
+            super(props);
+            this.handleChange = (event) => {
+                this.props.onChange(event.currentTarget.value, event);
+            };
+            if (!props.id && !props['aria-label']) {
+                // eslint-disable-next-line no-console
+                console.error('FormSelect requires either an id or aria-label to be specified');
+            }
+            this.state = {
+                ouiaStateId: getDefaultOUIAId(FormSelect.displayName, props.validated)
+            };
+        }
+        render() {
+            const _a = this.props, { children, className, value, validated, isDisabled, isRequired, isIconSprite, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["children", "className", "value", "validated", "isDisabled", "isRequired", "isIconSprite", "ouiaId", "ouiaSafe"]);
+            /* find selected option and get placeholder flag */
+            const selectedOption = React__namespace.Children.toArray(children).find((option) => option.props.value === value);
+            const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder;
+            return (React__namespace.createElement("select", Object.assign({}, props, { className: css(formStyles.formControl, isIconSprite && formStyles.modifiers.iconSprite, className, validated === exports.ValidatedOptions.success && formStyles.modifiers.success, validated === exports.ValidatedOptions.warning && formStyles.modifiers.warning, isSelectedPlaceholder && formStyles.modifiers.placeholder), "aria-invalid": validated === exports.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';
+    FormSelect.defaultProps = {
+        className: '',
+        value: '',
+        validated: 'default',
+        isDisabled: false,
+        isRequired: false,
+        isIconSprite: false,
+        onBlur: () => undefined,
+        onFocus: () => undefined,
+        onChange: () => undefined,
+        ouiaSafe: true
     };
 
-    const ArrowLeftIcon = createIcon(ArrowLeftIconConfig);
+    const FormSelectOption = (_a) => {
+        var { className = '', value = '', isDisabled = false, label, 
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        isPlaceholder = false } = _a, props = __rest$1(_a, ["className", "value", "isDisabled", "label", "isPlaceholder"]);
+        return (React__namespace.createElement("option", Object.assign({}, props, { className: className, value: value, disabled: isDisabled }), label));
+    };
+    FormSelectOption.displayName = 'FormSelectOption';
 
-    var ArrowLeftIcon$1 = ArrowLeftIcon;
+    const FormSelectOptionGroup = (_a) => {
+        var { children = null, className = '', isDisabled = false, label } = _a, props = __rest$1(_a, ["children", "className", "isDisabled", "label"]);
+        return (React__namespace.createElement("optgroup", Object.assign({}, props, { disabled: !!isDisabled, className: className, label: label }), children));
+    };
+    FormSelectOptionGroup.displayName = 'FormSelectOptionGroup';
 
-    const ArrowRightIconConfig = {
-      name: 'ArrowRightIcon',
+    const c_form_control_textarea_Height = {
+      "name": "--pf-c-form-control--textarea--Height",
+      "value": "auto",
+      "var": "var(--pf-c-form-control--textarea--Height)"
+    };
+    var heightToken = c_form_control_textarea_Height;
+
+    exports.TextAreResizeOrientation = void 0;
+    (function (TextAreResizeOrientation) {
+        TextAreResizeOrientation["horizontal"] = "horizontal";
+        TextAreResizeOrientation["vertical"] = "vertical";
+        TextAreResizeOrientation["both"] = "both";
+    })(exports.TextAreResizeOrientation || (exports.TextAreResizeOrientation = {}));
+    class TextAreaBase extends React__namespace.Component {
+        constructor(props) {
+            super(props);
+            this.handleChange = (event) => {
+                // https://gomakethings.com/automatically-expand-a-textarea-as-the-user-types-using-vanilla-javascript/
+                const field = event.currentTarget;
+                if (this.props.autoResize && canUseDOM) {
+                    field.style.setProperty(heightToken.name, 'inherit');
+                    const computed = window.getComputedStyle(field);
+                    // Calculate the height
+                    const height = parseInt(computed.getPropertyValue('border-top-width')) +
+                        parseInt(computed.getPropertyValue('padding-top')) +
+                        field.scrollHeight +
+                        parseInt(computed.getPropertyValue('padding-bottom')) +
+                        parseInt(computed.getPropertyValue('border-bottom-width'));
+                    field.style.setProperty(heightToken.name, `${height}px`);
+                }
+                if (this.props.onChange) {
+                    this.props.onChange(field.value, event);
+                }
+            };
+            if (!props.id && !props['aria-label']) {
+                // eslint-disable-next-line no-console
+                console.error('TextArea: TextArea requires either an id or aria-label to be specified');
+            }
+        }
+        render() {
+            const _a = this.props, { className, value, validated, isRequired, isDisabled, isIconSprite, isReadOnly, resizeOrientation, innerRef, readOnly, disabled, 
+            /* eslint-disable @typescript-eslint/no-unused-vars */
+            autoResize, onChange } = _a, 
+            /* eslint-enable @typescript-eslint/no-unused-vars */
+            props = __rest$1(_a, ["className", "value", "validated", "isRequired", "isDisabled", "isIconSprite", "isReadOnly", "resizeOrientation", "innerRef", "readOnly", "disabled", "autoResize", "onChange"]);
+            const orientation = `resize${capitalize(resizeOrientation)}`;
+            return (React__namespace.createElement("textarea", Object.assign({ className: css(formStyles.formControl, isIconSprite && formStyles.modifiers.iconSprite, className, resizeOrientation !== exports.TextAreResizeOrientation.both && formStyles.modifiers[orientation], validated === exports.ValidatedOptions.success && formStyles.modifiers.success, validated === exports.ValidatedOptions.warning && formStyles.modifiers.warning), onChange: this.handleChange }, (typeof this.props.defaultValue !== 'string' && { value }), { "aria-invalid": validated === exports.ValidatedOptions.error, required: isRequired, disabled: isDisabled || disabled, readOnly: isReadOnly || readOnly, ref: innerRef }, props)));
+        }
+    }
+    TextAreaBase.displayName = 'TextArea';
+    TextAreaBase.defaultProps = {
+        innerRef: React__namespace.createRef(),
+        className: '',
+        isRequired: false,
+        isDisabled: false,
+        isIconSprite: false,
+        validated: 'default',
+        resizeOrientation: 'both',
+        'aria-label': null
+    };
+    const TextArea = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TextAreaBase, Object.assign({}, props, { innerRef: ref }))));
+    TextArea.displayName = 'TextArea';
+
+    const InputGroup = (_a) => {
+        var { className = '', children, innerRef } = _a, props = __rest$1(_a, ["className", "children", "innerRef"]);
+        const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
+        const idItem = React__namespace.Children.toArray(children).find((child) => !formCtrls.includes(child.type.displayName) && child.props.id);
+        const inputGroupRef = innerRef || React__namespace.useRef(null);
+        return (React__namespace.createElement("div", Object.assign({ ref: inputGroupRef, className: css(styles$V.inputGroup, className) }, props), idItem
+            ? React__namespace.Children.map(children, (child) => formCtrls.includes(child.type.displayName)
+                ? React__namespace.cloneElement(child, { 'aria-describedby': idItem.props.id })
+                : child)
+            : children));
+    };
+    InputGroup.displayName = 'InputGroup';
+
+    exports.InputGroupTextVariant = void 0;
+    (function (InputGroupTextVariant) {
+        InputGroupTextVariant["default"] = "default";
+        InputGroupTextVariant["plain"] = "plain";
+    })(exports.InputGroupTextVariant || (exports.InputGroupTextVariant = {}));
+    const InputGroupText = (_a) => {
+        var { className = '', component = 'span', children, variant = exports.InputGroupTextVariant.default } = _a, props = __rest$1(_a, ["className", "component", "children", "variant"]);
+        const Component = component;
+        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$V.inputGroupText, variant === exports.InputGroupTextVariant.plain && styles$V.modifiers.plain, className) }, props), children));
+    };
+    InputGroupText.displayName = 'InputGroupText';
+
+    const AngleLeftIconConfig = {
+      name: 'AngleLeftIcon',
       height: 512,
-      width: 448,
-      svgPath: 'M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z',
+      width: 256,
+      svgPath: 'M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z',
       yOffset: 0,
       xOffset: 0,
     };
 
-    const ArrowRightIcon = createIcon(ArrowRightIconConfig);
+    const AngleLeftIcon = createIcon(AngleLeftIconConfig);
 
-    var ArrowRightIcon$1 = ArrowRightIcon;
+    var AngleLeftIcon$1 = AngleLeftIcon;
 
     Promise.resolve().then(function () { return calendarMonth; });
-    var styles$V = {
+    var styles$U = {
       "calendarMonth": "pf-c-calendar-month",
       "calendarMonthCalendar": "pf-c-calendar-month__calendar",
       "calendarMonthDate": "pf-c-calendar-month__date",
@@ -8445,7 +8581,7 @@
         const defaultDate = new Date(year, month);
         const firstDayOfWeek = new Date(defaultDate);
         firstDayOfWeek.setDate(firstDayOfWeek.getDate() - firstDayOfWeek.getDay() + weekStart);
-        // We will always show 6 weeks like google calendar
+        // We will show a maximum of 6 weeks like Google calendar
         // Assume we just want the numbers for now...
         const calendarWeeks = [];
         for (let i = 0; i < 6; i++) {
@@ -8459,6 +8595,9 @@
                 firstDayOfWeek.setDate(firstDayOfWeek.getDate() + 1);
             }
             calendarWeeks.push(week);
+            if (firstDayOfWeek.getMonth() !== defaultDate.getMonth()) {
+                break;
+            }
         }
         return calendarWeeks;
     };
@@ -8558,50 +8697,51 @@
         const isHoveredDateValid = isValidated(hoveredDate);
         const monthFormatted = monthFormat(focusedDate);
         const yearFormatted = yearFormat(focusedDate);
-        return (React__default["default"].createElement("div", Object.assign({ className: css(styles$V.calendarMonth, className) }, props),
-            React__default["default"].createElement("div", { className: styles$V.calendarMonthHeader },
-                React__default["default"].createElement("div", { className: css(styles$V.calendarMonthHeaderNavControl, styles$V.modifiers.prevMonth) },
+        return (React__default["default"].createElement("div", Object.assign({ className: css(styles$U.calendarMonth, className) }, props),
+            React__default["default"].createElement("div", { className: styles$U.calendarMonthHeader },
+                React__default["default"].createElement("div", { className: css(styles$U.calendarMonthHeaderNavControl, styles$U.modifiers.prevMonth) },
                     React__default["default"].createElement(Button, { variant: "plain", "aria-label": prevMonthAriaLabel, onClick: () => onMonthClick(prevMonth) },
-                        React__default["default"].createElement(ArrowLeftIcon$1, { "aria-hidden": true }))),
-                React__default["default"].createElement("div", { className: styles$V.calendarMonthHeaderMonth },
-                    React__default["default"].createElement("span", { id: hiddenMonthId, hidden: true }, "Month"),
-                    React__default["default"].createElement(Select
-                    // Max width with "September"
-                    , { 
+                        React__default["default"].createElement(AngleLeftIcon$1, { "aria-hidden": true }))),
+                React__default["default"].createElement(InputGroup, null,
+                    React__default["default"].createElement("div", { className: styles$U.calendarMonthHeaderMonth },
+                        React__default["default"].createElement("span", { id: hiddenMonthId, hidden: true }, "Month"),
+                        React__default["default"].createElement(Select
                         // Max width with "September"
-                        width: "140px", "aria-labelledby": hiddenMonthId, isOpen: isSelectOpen, onToggle: () => {
-                            setIsSelectOpen(!isSelectOpen);
-                            onSelectToggle(!isSelectOpen);
-                        }, onSelect: (_ev, monthNum) => {
-                            // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
-                            // to see the SelectOption as a child so it doesn't close the Popover.
-                            setTimeout(() => {
-                                setIsSelectOpen(false);
-                                onSelectToggle(false);
+                        , { 
+                            // Max width with "September"
+                            width: "140px", "aria-labelledby": hiddenMonthId, isOpen: isSelectOpen, onToggle: () => {
+                                setIsSelectOpen(!isSelectOpen);
+                                onSelectToggle(!isSelectOpen);
+                            }, onSelect: (_ev, monthNum) => {
+                                // When we put CalendarMonth in a Popover we want the Popover's onDocumentClick
+                                // to see the SelectOption as a child so it doesn't close the Popover.
+                                setTimeout(() => {
+                                    setIsSelectOpen(false);
+                                    onSelectToggle(false);
+                                    const newDate = new Date(focusedDate);
+                                    newDate.setMonth(Number(monthNum));
+                                    setFocusedDate(newDate);
+                                    setHoveredDate(newDate);
+                                    setShouldFocus(false);
+                                }, 0);
+                            }, variant: "single", selections: monthFormatted }, longMonths.map((longMonth, index) => (React__default["default"].createElement(SelectOption, { key: index, value: index, isSelected: longMonth === monthFormatted }, longMonth))))),
+                    React__default["default"].createElement("div", { className: styles$U.calendarMonthHeaderYear },
+                        React__default["default"].createElement(TextInput, { "aria-label": yearInputAriaLabel, type: "number", value: yearFormatted, onChange: year => {
                                 const newDate = new Date(focusedDate);
-                                newDate.setMonth(Number(monthNum));
+                                newDate.setFullYear(+year);
                                 setFocusedDate(newDate);
                                 setHoveredDate(newDate);
                                 setShouldFocus(false);
-                            }, 0);
-                        }, variant: "single", selections: monthFormatted }, longMonths.map((longMonth, index) => (React__default["default"].createElement(SelectOption, { key: index, value: index, isSelected: longMonth === monthFormatted }, longMonth))))),
-                React__default["default"].createElement("div", { className: styles$V.calendarMonthHeaderYear },
-                    React__default["default"].createElement(TextInput, { "aria-label": yearInputAriaLabel, type: "number", value: yearFormatted, onChange: year => {
-                            const newDate = new Date(focusedDate);
-                            newDate.setFullYear(+year);
-                            setFocusedDate(newDate);
-                            setHoveredDate(newDate);
-                            setShouldFocus(false);
-                        } })),
-                React__default["default"].createElement("div", { className: css(styles$V.calendarMonthHeaderNavControl, styles$V.modifiers.nextMonth) },
+                            } }))),
+                React__default["default"].createElement("div", { className: css(styles$U.calendarMonthHeaderNavControl, styles$U.modifiers.nextMonth) },
                     React__default["default"].createElement(Button, { variant: "plain", "aria-label": nextMonthAriaLabel, onClick: () => onMonthClick(nextMonth) },
-                        React__default["default"].createElement(ArrowRightIcon$1, { "aria-hidden": true })))),
-            React__default["default"].createElement("table", { className: styles$V.calendarMonthCalendar },
-                React__default["default"].createElement("thead", { className: styles$V.calendarMonthDays },
-                    React__default["default"].createElement("tr", null, calendar[0].map(({ date }, index) => (React__default["default"].createElement("th", { key: index, className: styles$V.calendarMonthDay, scope: "col" },
+                        React__default["default"].createElement(AngleRightIcon$1, { "aria-hidden": true })))),
+            React__default["default"].createElement("table", { className: styles$U.calendarMonthCalendar },
+                React__default["default"].createElement("thead", { className: styles$U.calendarMonthDays },
+                    React__default["default"].createElement("tr", null, calendar[0].map(({ date }, index) => (React__default["default"].createElement("th", { key: index, className: styles$U.calendarMonthDay, scope: "col" },
                         React__default["default"].createElement("span", { className: "pf-screen-reader" }, longWeekdayFormat(date)),
                         React__default["default"].createElement("span", { "aria-hidden": true }, weekdayFormat(date))))))),
-                React__default["default"].createElement("tbody", { onKeyDown: onKeyDown }, calendar.map((week, index) => (React__default["default"].createElement("tr", { key: index, className: styles$V.calendarMonthDatesRow }, week.map(({ date, isValid }, index) => {
+                React__default["default"].createElement("tbody", { onKeyDown: onKeyDown }, calendar.map((week, index) => (React__default["default"].createElement("tr", { key: index, className: styles$U.calendarMonthDatesRow }, week.map(({ date, isValid }, index) => {
                     const dayFormatted = dayFormat(date);
                     const isToday = isSameDate(date, today);
                     const isSelected = isValidDate(dateProp) && isSameDate(date, dateProp);
@@ -8622,13 +8762,13 @@
                         // Don't handle focused dates before start dates for now.
                         // Core would likely need new styles
                     }
-                    return (React__default["default"].createElement("td", { key: index, className: css(styles$V.calendarMonthDatesCell, isAdjacentMonth && styles$V.modifiers.adjacentMonth, isToday && styles$V.modifiers.current, (isSelected || isRangeStart) && styles$V.modifiers.selected, !isValid && styles$V.modifiers.disabled, (isInRange || isRangeStart || isRangeEnd) && styles$V.modifiers.inRange, isRangeStart && styles$V.modifiers.startRange, isRangeEnd && styles$V.modifiers.endRange) },
-                        React__default["default"].createElement("button", Object.assign({ className: css(styles$V.calendarMonthDate, isRangeEnd && styles$V.modifiers.hover, !isValid && styles$V.modifiers.disabled), type: "button", onClick: () => onChange(date), onMouseOver: () => setHoveredDate(date), tabIndex: isFocused ? 0 : -1, disabled: !isValid, "aria-label": cellAriaLabel ? cellAriaLabel(date) : `${dayFormatted} ${monthFormatted} ${yearFormatted}` }, (isFocused && { ref: focusRef })), dayFormatted)));
+                    return (React__default["default"].createElement("td", { key: index, className: css(styles$U.calendarMonthDatesCell, isAdjacentMonth && styles$U.modifiers.adjacentMonth, isToday && styles$U.modifiers.current, (isSelected || isRangeStart) && styles$U.modifiers.selected, !isValid && styles$U.modifiers.disabled, (isInRange || isRangeStart || isRangeEnd) && styles$U.modifiers.inRange, isRangeStart && styles$U.modifiers.startRange, isRangeEnd && styles$U.modifiers.endRange) },
+                        React__default["default"].createElement("button", Object.assign({ className: css(styles$U.calendarMonthDate, isRangeEnd && styles$U.modifiers.hover, !isValid && styles$U.modifiers.disabled), type: "button", onClick: () => onChange(date), onMouseOver: () => setHoveredDate(date), tabIndex: isFocused ? 0 : -1, disabled: !isValid, "aria-label": cellAriaLabel ? cellAriaLabel(date) : `${dayFormatted} ${monthFormatted} ${yearFormatted}` }, (isFocused && { ref: focusRef })), dayFormatted)));
                 }))))))));
     };
 
     Promise.resolve().then(function () { return card; });
-    var styles$U = {
+    var styles$T = {
       "card": "pf-c-card",
       "cardActions": "pf-c-card__actions",
       "cardBody": "pf-c-card__body",
@@ -8679,13 +8819,13 @@
         }
         const getSelectableModifiers = () => {
             if (isDisabledRaised) {
-                return css(styles$U.modifiers.nonSelectableRaised);
+                return css(styles$T.modifiers.nonSelectableRaised);
             }
             if (isSelectableRaised) {
-                return css(styles$U.modifiers.selectableRaised, isSelected && styles$U.modifiers.selectedRaised);
+                return css(styles$T.modifiers.selectableRaised, isSelected && styles$T.modifiers.selectedRaised);
             }
             if (isSelectable || isHoverable) {
-                return css(styles$U.modifiers.selectable, isSelected && styles$U.modifiers.selected);
+                return css(styles$T.modifiers.selectable, isSelected && styles$T.modifiers.selected);
             }
             return '';
         };
@@ -8713,33 +8853,33 @@
                 isExpanded
             } },
             hasSelectableInput && (React__namespace.createElement("input", Object.assign({ className: "pf-screen-reader", id: `${id}-input` }, ariaProps, { type: "checkbox", checked: isSelected, onChange: event => onSelectableInputChange(id, event), disabled: isDisabledRaised, tabIndex: -1 }))),
-            React__namespace.createElement(Component, Object.assign({ id: id, className: css(styles$U.card, isCompact && styles$U.modifiers.compact, isExpanded && styles$U.modifiers.expanded, isFlat && styles$U.modifiers.flat, isRounded && styles$U.modifiers.rounded, isLarge && styles$U.modifiers.displayLg, isFullHeight && styles$U.modifiers.fullHeight, isPlain && styles$U.modifiers.plain, getSelectableModifiers(), className), tabIndex: isSelectable || isSelectableRaised ? '0' : undefined }, props, ouiaProps), children)));
+            React__namespace.createElement(Component, Object.assign({ id: id, className: css(styles$T.card, isCompact && styles$T.modifiers.compact, isExpanded && styles$T.modifiers.expanded, isFlat && styles$T.modifiers.flat, isRounded && styles$T.modifiers.rounded, isLarge && styles$T.modifiers.displayLg, isFullHeight && styles$T.modifiers.fullHeight, isPlain && styles$T.modifiers.plain, getSelectableModifiers(), className), tabIndex: isSelectable || isSelectableRaised ? '0' : undefined }, props, ouiaProps), children)));
     };
     Card.displayName = 'Card';
 
     const CardActions = (_a) => {
         var { children = null, className = '', hasNoOffset = false } = _a, props = __rest$1(_a, ["children", "className", "hasNoOffset"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$U.cardActions, hasNoOffset && styles$U.modifiers.noOffset, className) }, props), children));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$T.cardActions, hasNoOffset && styles$T.modifiers.noOffset, className) }, props), children));
     };
     CardActions.displayName = 'CardActions';
 
     const CardBody = (_a) => {
         var { children = null, className = '', component = 'div', isFilled = true } = _a, props = __rest$1(_a, ["children", "className", "component", "isFilled"]);
         const Component = component;
-        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$U.cardBody, !isFilled && styles$U.modifiers.noFill, className) }, props), children));
+        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$T.cardBody, !isFilled && styles$T.modifiers.noFill, className) }, props), children));
     };
     CardBody.displayName = 'CardBody';
 
     const CardExpandableContent = (_a) => {
         var { children = null, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement(CardContext.Consumer, null, ({ isExpanded }) => isExpanded ? (React__namespace.createElement("div", Object.assign({ className: css(styles$U.cardExpandableContent, className) }, props), children)) : null));
+        return (React__namespace.createElement(CardContext.Consumer, null, ({ isExpanded }) => isExpanded ? (React__namespace.createElement("div", Object.assign({ className: css(styles$T.cardExpandableContent, className) }, props), children)) : null));
     };
     CardExpandableContent.displayName = 'CardExpandableContent';
 
     const CardFooter = (_a) => {
         var { children = null, className = '', component = 'div' } = _a, props = __rest$1(_a, ["children", "className", "component"]);
         const Component = component;
-        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$U.cardFooter, className) }, props), children));
+        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$T.cardFooter, className) }, props), children));
     };
     CardFooter.displayName = 'CardFooter';
 
@@ -8752,20 +8892,20 @@
             registerTitleId(titleId);
             return () => registerTitleId('');
         }, [registerTitleId, titleId]);
-        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$U.cardTitle, className), id: titleId || undefined }, props), children));
+        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$T.cardTitle, className), id: titleId || undefined }, props), children));
     };
     CardTitle.displayName = 'CardTitle';
 
     const CardHeader = (_a) => {
         var { children = null, className = '', id, onExpand, toggleButtonProps, isToggleRightAligned } = _a, props = __rest$1(_a, ["children", "className", "id", "onExpand", "toggleButtonProps", "isToggleRightAligned"]);
         return (React__namespace.createElement(CardContext.Consumer, null, ({ cardId }) => {
-            const cardHeaderToggle = (React__namespace.createElement("div", { className: css(styles$U.cardHeaderToggle) },
+            const cardHeaderToggle = (React__namespace.createElement("div", { className: css(styles$T.cardHeaderToggle) },
                 React__namespace.createElement(Button, Object.assign({ variant: "plain", type: "button", onClick: evt => {
                         onExpand(evt, cardId);
                     } }, toggleButtonProps),
-                    React__namespace.createElement("span", { className: css(styles$U.cardHeaderToggleIcon) },
+                    React__namespace.createElement("span", { className: css(styles$T.cardHeaderToggleIcon) },
                         React__namespace.createElement(AngleRightIcon$1, { "aria-hidden": "true" })))));
-            return (React__namespace.createElement("div", Object.assign({ className: css(styles$U.cardHeader, isToggleRightAligned && styles$U.modifiers.toggleRight, className), id: id }, props),
+            return (React__namespace.createElement("div", Object.assign({ className: css(styles$T.cardHeader, isToggleRightAligned && styles$T.modifiers.toggleRight, className), id: id }, props),
                 onExpand && !isToggleRightAligned && cardHeaderToggle,
                 children,
                 onExpand && isToggleRightAligned && cardHeaderToggle));
@@ -8827,7 +8967,7 @@
     };
 
     Promise.resolve().then(function () { return clipboardCopy; });
-    var styles$T = {
+    var styles$S = {
       "button": "pf-c-button",
       "clipboardCopy": "pf-c-clipboard-copy",
       "clipboardCopyActions": "pf-c-clipboard-copy__actions",
@@ -8846,7 +8986,7 @@
     };
 
     Promise.resolve().then(function () { return popover; });
-    var styles$S = {
+    var styles$R = {
       "button": "pf-c-button",
       "modifiers": {
         "noPadding": "pf-m-no-padding",
@@ -8886,25 +9026,25 @@
 
     const PopoverContent = (_a) => {
         var { className = null, children } = _a, props = __rest$1(_a, ["className", "children"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$S.popoverContent, className) }, props), children));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$R.popoverContent, className) }, props), children));
     };
     PopoverContent.displayName = 'PopoverContent';
 
     const PopoverBody = (_a) => {
         var { children, id, className } = _a, props = __rest$1(_a, ["children", "id", "className"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$S.popoverBody, className), id: id }, props), children));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$R.popoverBody, className), id: id }, props), children));
     };
     PopoverBody.displayName = 'PopoverBody';
 
     const PopoverHeaderIcon = (_a) => {
         var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("span", Object.assign({ className: css(styles$S.popoverTitleIcon, className) }, props), children));
+        return (React__namespace.createElement("span", Object.assign({ className: css(styles$R.popoverTitleIcon, className) }, props), children));
     };
     PopoverHeaderIcon.displayName = 'PopoverHeaderIcon';
 
     const PopoverHeaderText = (_a) => {
         var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("span", Object.assign({ className: css(styles$S.popoverTitleText, className) }, props), children));
+        return (React__namespace.createElement("span", Object.assign({ className: css(styles$R.popoverTitleText, className) }, props), children));
     };
     PopoverHeaderText.displayName = 'PopoverHeaderText';
 
@@ -8912,7 +9052,7 @@
         var { children, icon, className, titleHeadingLevel = 'h6', alertSeverityVariant, id, alertSeverityScreenReaderText } = _a, props = __rest$1(_a, ["children", "icon", "className", "titleHeadingLevel", "alertSeverityVariant", "id", "alertSeverityScreenReaderText"]);
         const HeadingLevel = titleHeadingLevel;
         return icon || alertSeverityVariant ? (React__namespace.createElement("header", Object.assign({ className: css('pf-c-popover__header', className), id: id }, props),
-            React__namespace.createElement(HeadingLevel, { className: css(styles$S.popoverTitle, icon && styles$S.modifiers.icon) },
+            React__namespace.createElement(HeadingLevel, { className: css(styles$R.popoverTitle, icon && styles$R.modifiers.icon) },
                 icon && React__namespace.createElement(PopoverHeaderIcon, null, icon),
                 alertSeverityVariant && alertSeverityScreenReaderText && (React__namespace.createElement("span", { className: "pf-u-screen-reader" }, alertSeverityScreenReaderText)),
                 React__namespace.createElement(PopoverHeaderText, null, children)))) : (React__namespace.createElement(Title, Object.assign({ headingLevel: titleHeadingLevel, size: exports.TitleSizes.md, id: id, className: className }, props), children));
@@ -8921,7 +9061,7 @@
 
     const PopoverFooter = (_a) => {
         var { children, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("footer", Object.assign({ className: css(styles$S.popoverFooter, className) }, props), children));
+        return (React__namespace.createElement("footer", Object.assign({ className: css(styles$R.popoverFooter, className) }, props), children));
     };
     PopoverFooter.displayName = 'PopoverFooter';
 
@@ -8942,7 +9082,7 @@
 
     const PopoverArrow = (_a) => {
         var { className = '' } = _a, props = __rest$1(_a, ["className"]);
-        return React__namespace.createElement("div", Object.assign({ className: css(styles$S.popoverArrow, className) }, props));
+        return React__namespace.createElement("div", Object.assign({ className: css(styles$R.popoverArrow, className) }, props));
     };
     PopoverArrow.displayName = 'PopoverArrow';
 
@@ -8977,11 +9117,11 @@
         PopoverPosition["rightEnd"] = "right-end";
     })(exports.PopoverPosition || (exports.PopoverPosition = {}));
     const alertStyle = {
-        default: styles$S.modifiers.default,
-        info: styles$S.modifiers.info,
-        success: styles$S.modifiers.success,
-        warning: styles$S.modifiers.warning,
-        danger: styles$S.modifiers.danger
+        default: styles$R.modifiers.default,
+        info: styles$R.modifiers.info,
+        success: styles$R.modifiers.success,
+        warning: styles$R.modifiers.warning,
+        danger: styles$R.modifiers.danger
     };
     const Popover = (_a) => {
         var { children, position = 'top', enableFlip = true, className = '', isVisible = null, shouldClose = () => null, shouldOpen = () => null, 'aria-label': ariaLabel = '', bodyContent, headerContent = null, headerComponent = 'h6', headerIcon = null, alertSeverityVariant, alertSeverityScreenReaderText, footerContent = null, appendTo = () => document.body, hideOnOutsideClick = true, onHide = () => null, onHidden = () => null, onShow = () => null, onShown = () => null, onMount = () => null, zIndex = 9999, minWidth = popoverMinWidth && popoverMinWidth.value, maxWidth = popoverMaxWidth && popoverMaxWidth.value, closeBtnAriaLabel = 'Close', showClose = true, distance = 25, 
@@ -9045,18 +9185,18 @@
             }, 0);
         };
         const positionModifiers = {
-            top: styles$S.modifiers.top,
-            bottom: styles$S.modifiers.bottom,
-            left: styles$S.modifiers.left,
-            right: styles$S.modifiers.right,
-            'top-start': styles$S.modifiers.topLeft,
-            'top-end': styles$S.modifiers.topRight,
-            'bottom-start': styles$S.modifiers.bottomLeft,
-            'bottom-end': styles$S.modifiers.bottomRight,
-            'left-start': styles$S.modifiers.leftTop,
-            'left-end': styles$S.modifiers.leftBottom,
-            'right-start': styles$S.modifiers.rightTop,
-            'right-end': styles$S.modifiers.rightBottom
+            top: styles$R.modifiers.top,
+            bottom: styles$R.modifiers.bottom,
+            left: styles$R.modifiers.left,
+            right: styles$R.modifiers.right,
+            'top-start': styles$R.modifiers.topLeft,
+            'top-end': styles$R.modifiers.topRight,
+            'bottom-start': styles$R.modifiers.bottomLeft,
+            'bottom-end': styles$R.modifiers.bottomRight,
+            'left-start': styles$R.modifiers.leftTop,
+            'left-end': styles$R.modifiers.leftBottom,
+            'right-start': styles$R.modifiers.rightTop,
+            'right-end': styles$R.modifiers.rightBottom
         };
         const hasCustomMinWidth = minWidth !== popoverMinWidth.value;
         const hasCustomMaxWidth = maxWidth !== popoverMaxWidth.value;
@@ -9133,7 +9273,7 @@
                     }
                     return node;
                 }
-            }, preventScrollOnDeactivate: true, className: css(styles$S.popover, alertSeverityVariant && alertStyle[alertSeverityVariant], hasNoPadding && styles$S.modifiers.noPadding, hasAutoWidth && styles$S.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
+            }, preventScrollOnDeactivate: true, className: css(styles$R.popover, alertSeverityVariant && alertStyle[alertSeverityVariant], hasNoPadding && styles$R.modifiers.noPadding, hasAutoWidth && styles$R.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
                 minWidth: hasCustomMinWidth ? minWidth : null,
                 maxWidth: hasCustomMaxWidth ? maxWidth : null,
                 opacity,
@@ -9196,7 +9336,7 @@
         }
         render() {
             const _a = this.props, { className, children, onChange, isReadOnly, isCode } = _a, props = __rest$1(_a, ["className", "children", "onChange", "isReadOnly", "isCode"]);
-            return (React__namespace.createElement("div", Object.assign({ suppressContentEditableWarning: true, className: css(styles$T.clipboardCopyExpandableContent, className), onInput: (e) => onChange(e.target.innerText, e), contentEditable: !isReadOnly }, props), isCode ? React__namespace.createElement("pre", null, children) : children));
+            return (React__namespace.createElement("div", Object.assign({ suppressContentEditableWarning: true, className: css(styles$S.clipboardCopyExpandableContent, className), onInput: (e) => onChange(e.target.innerText, e), contentEditable: !isReadOnly }, props), isCode ? React__namespace.createElement("pre", null, children) : children));
         }
     }
     ClipboardCopyExpanded.displayName = 'ClipboardCopyExpanded';
@@ -9256,12 +9396,12 @@
                 const textIdPrefix = 'text-input-';
                 const toggleIdPrefix = 'toggle-';
                 const contentIdPrefix = 'content-';
-                return (React__namespace.createElement("div", Object.assign({ className: css(styles$T.clipboardCopy, variant === 'inline-compact' && styles$T.modifiers.inline, isBlock && styles$T.modifiers.block, this.state.expanded && styles$T.modifiers.expanded, className) }, divProps),
+                return (React__namespace.createElement("div", Object.assign({ className: css(styles$S.clipboardCopy, variant === 'inline-compact' && styles$S.modifiers.inline, isBlock && styles$S.modifiers.block, this.state.expanded && styles$S.modifiers.expanded, className) }, divProps),
                     variant === 'inline-compact' && (React__namespace.createElement(GenerateId, { prefix: "" }, id => (React__namespace.createElement(React__namespace.Fragment, null,
-                        !isCode && (React__namespace.createElement("span", { className: css(styles$T.clipboardCopyText), id: `${textIdPrefix}${id}` }, this.state.text)),
-                        isCode && (React__namespace.createElement("code", { className: css(styles$T.clipboardCopyText, styles$T.modifiers.code), id: `${textIdPrefix}${id}` }, this.state.text)),
-                        React__namespace.createElement("span", { className: css(styles$T.clipboardCopyActions) },
-                            React__namespace.createElement("span", { className: css(styles$T.clipboardCopyActionsItem) },
+                        !isCode && (React__namespace.createElement("span", { className: css(styles$S.clipboardCopyText), id: `${textIdPrefix}${id}` }, this.state.text)),
+                        isCode && (React__namespace.createElement("code", { className: css(styles$S.clipboardCopyText, styles$S.modifiers.code), id: `${textIdPrefix}${id}` }, this.state.text)),
+                        React__namespace.createElement("span", { className: css(styles$S.clipboardCopyActions) },
+                            React__namespace.createElement("span", { className: css(styles$S.clipboardCopyActionsItem) },
                                 React__namespace.createElement(ClipboardCopyButton, { variant: "plain", exitDelay: exitDelay, entryDelay: entryDelay, maxWidth: maxWidth, position: position, id: `copy-button-${id}`, textId: `text-input-${id}`, "aria-label": hoverTip, onClick: (event) => {
                                         if (this.timer) {
                                             window.clearTimeout(this.timer);
@@ -9277,7 +9417,7 @@
                                     } }, this.state.copied ? clickTip : hoverTip)),
                             additionalActions && additionalActions))))),
                     variant !== 'inline-compact' && (React__namespace.createElement(GenerateId, { prefix: "" }, id => (React__namespace.createElement(React__namespace.Fragment, null,
-                        React__namespace.createElement("div", { className: css(styles$T.clipboardCopyGroup) },
+                        React__namespace.createElement("div", { className: css(styles$S.clipboardCopyGroup) },
                             variant === 'expansion' && (React__namespace.createElement(ClipboardCopyToggle, { isExpanded: this.state.expanded, onClick: this.expandContent, id: `${toggleIdPrefix}${id}`, textId: `${textIdPrefix}${id}`, contentId: `${contentIdPrefix}${id}`, "aria-label": toggleAriaLabel })),
                             React__namespace.createElement(TextInput, { isReadOnly: isReadOnly || this.state.expanded, onChange: this.updateText, value: this.state.text, id: `text-input-${id}`, "aria-label": textAriaLabel }),
                             React__namespace.createElement(ClipboardCopyButton, { exitDelay: exitDelay, entryDelay: entryDelay, maxWidth: maxWidth, position: position, id: `copy-button-${id}`, textId: `text-input-${id}`, "aria-label": hoverTip, onClick: (event) => {
@@ -9326,12 +9466,12 @@
 
     const ClipboardCopyAction = (_a) => {
         var { children = null, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("span", Object.assign({ className: css(styles$T.clipboardCopyActionsItem, className) }, props), children));
+        return (React__namespace.createElement("span", Object.assign({ className: css(styles$S.clipboardCopyActionsItem, className) }, props), children));
     };
     ClipboardCopyAction.displayName = 'ClipboardCopyAction';
 
     Promise.resolve().then(function () { return codeBlock; });
-    var styles$R = {
+    var styles$Q = {
       "codeBlock": "pf-c-code-block",
       "codeBlockActions": "pf-c-code-block__actions",
       "codeBlockCode": "pf-c-code-block__code",
@@ -9342,17 +9482,17 @@
 
     const CodeBlock = (_a) => {
         var { children = null, className, actions = null } = _a, props = __rest$1(_a, ["children", "className", "actions"]);
-        return (React__namespace.createElement("div", Object.assign({ className: css(styles$R.codeBlock, className) }, props),
-            React__namespace.createElement("div", { className: css(styles$R.codeBlockHeader) },
-                React__namespace.createElement("div", { className: css(styles$R.codeBlockActions) }, actions && actions)),
-            React__namespace.createElement("div", { className: css(styles$R.codeBlockContent) }, children)));
+        return (React__namespace.createElement("div", Object.assign({ className: css(styles$Q.codeBlock, className) }, props),
+            React__namespace.createElement("div", { className: css(styles$Q.codeBlockHeader) },
+                React__namespace.createElement("div", { className: css(styles$Q.codeBlockActions) }, actions && actions)),
+            React__namespace.createElement("div", { className: css(styles$Q.codeBlockContent) }, children)));
     };
     CodeBlock.displayName = 'CodeBlock';
 
     const CodeBlockCode = (_a) => {
         var { children = null, className, codeClassName } = _a, props = __rest$1(_a, ["children", "className", "codeClassName"]);
-        return (React__namespace.createElement("pre", Object.assign({ className: css(styles$R.codeBlockPre, className) }, props),
-            React__namespace.createElement("code", { className: css(styles$R.codeBlockCode, codeClassName) }, children)));
+        return (React__namespace.createElement("pre", Object.assign({ className: css(styles$Q.codeBlockPre, className) }, props),
+            React__namespace.createElement("code", { className: css(styles$Q.codeBlockCode, codeClassName) }, children)));
     };
     CodeBlockCode.displayName = 'CodeBlockCode';
 
@@ -9363,7 +9503,7 @@
     CodeBlockAction.displayName = 'CodeBlockAction';
 
     Promise.resolve().then(function () { return contextSelector; });
-    var styles$Q = {
+    var styles$P = {
       "contextSelector": "pf-c-context-selector",
       "contextSelectorMenu": "pf-c-context-selector__menu",
       "contextSelectorMenuFooter": "pf-c-context-selector__menu-footer",
@@ -9450,9 +9590,9 @@
             isActive, onEnter, parentRef } = _a, 
             /* eslint-enable @typescript-eslint/no-unused-vars */
             props = __rest$1(_a, ["className", "toggleText", "isOpen", "onToggle", "id", "isPlain", "isText", "isActive", "onEnter", "parentRef"]);
-            return (React__namespace.createElement("button", Object.assign({}, props, { id: id, ref: this.toggle, className: css(styles$Q.contextSelectorToggle, isActive && styles$Q.modifiers.active, isPlain && styles$Q.modifiers.plain, isText && styles$Q.modifiers.text, className), type: "button", onClick: event => onToggle(event, !isOpen), "aria-expanded": isOpen, onKeyDown: this.onKeyDown }),
-                React__namespace.createElement("span", { className: css(styles$Q.contextSelectorToggleText) }, toggleText),
-                React__namespace.createElement("span", { className: css(styles$Q.contextSelectorToggleIcon) },
+            return (React__namespace.createElement("button", Object.assign({}, props, { id: id, ref: this.toggle, className: css(styles$P.contextSelectorToggle, isActive && styles$P.modifiers.active, isPlain && styles$P.modifiers.plain, isText && styles$P.modifiers.text, className), type: "button", onClick: event => onToggle(event, !isOpen), "aria-expanded": isOpen, onKeyDown: this.onKeyDown }),
+                React__namespace.createElement("span", { className: css(styles$P.contextSelectorToggleText) }, toggleText),
+                React__namespace.createElement("span", { className: css(styles$P.contextSelectorToggleIcon) },
                     React__namespace.createElement(CaretDownIcon$1, { "aria-hidden": true }))));
         }
     }
@@ -9478,7 +9618,7 @@
             this.render = () => {
                 // eslint-disable-next-line @typescript-eslint/no-unused-vars
                 const _a = this.props, { className, isOpen, children } = _a, props = __rest$1(_a, ["className", "isOpen", "children"]);
-                return (React__namespace.createElement("ul", Object.assign({ className: css(styles$Q.contextSelectorMenuList, className), hidden: !isOpen, role: "menu" }, props), this.extendChildren()));
+                return (React__namespace.createElement("ul", Object.assign({ className: css(styles$P.contextSelectorMenuList, className), hidden: !isOpen, role: "menu" }, props), this.extendChildren()));
             };
         }
         extendChildren() {
@@ -9500,155 +9640,6 @@
         onSelect: (event, value) => undefined
     });
 
-    Promise.resolve().then(function () { return inputGroup; });
-    var styles$P = {
-      "formControl": "pf-c-form-control",
-      "inputGroup": "pf-c-input-group",
-      "inputGroupText": "pf-c-input-group__text",
-      "modifiers": {
-        "plain": "pf-m-plain"
-      },
-      "themeDark": "pf-theme-dark"
-    };
-
-    class FormSelect extends React__namespace.Component {
-        constructor(props) {
-            super(props);
-            this.handleChange = (event) => {
-                this.props.onChange(event.currentTarget.value, event);
-            };
-            if (!props.id && !props['aria-label']) {
-                // eslint-disable-next-line no-console
-                console.error('FormSelect requires either an id or aria-label to be specified');
-            }
-            this.state = {
-                ouiaStateId: getDefaultOUIAId(FormSelect.displayName, props.validated)
-            };
-        }
-        render() {
-            const _a = this.props, { children, className, value, validated, isDisabled, isRequired, isIconSprite, ouiaId, ouiaSafe } = _a, props = __rest$1(_a, ["children", "className", "value", "validated", "isDisabled", "isRequired", "isIconSprite", "ouiaId", "ouiaSafe"]);
-            /* find selected option and get placeholder flag */
-            const selectedOption = React__namespace.Children.toArray(children).find((option) => option.props.value === value);
-            const isSelectedPlaceholder = selectedOption && selectedOption.props.isPlaceholder;
-            return (React__namespace.createElement("select", Object.assign({}, props, { className: css(formStyles.formControl, isIconSprite && formStyles.modifiers.iconSprite, className, validated === exports.ValidatedOptions.success && formStyles.modifiers.success, validated === exports.ValidatedOptions.warning && formStyles.modifiers.warning, isSelectedPlaceholder && formStyles.modifiers.placeholder), "aria-invalid": validated === exports.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';
-    FormSelect.defaultProps = {
-        className: '',
-        value: '',
-        validated: 'default',
-        isDisabled: false,
-        isRequired: false,
-        isIconSprite: false,
-        onBlur: () => undefined,
-        onFocus: () => undefined,
-        onChange: () => undefined,
-        ouiaSafe: true
-    };
-
-    const FormSelectOption = (_a) => {
-        var { className = '', value = '', isDisabled = false, label, 
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        isPlaceholder = false } = _a, props = __rest$1(_a, ["className", "value", "isDisabled", "label", "isPlaceholder"]);
-        return (React__namespace.createElement("option", Object.assign({}, props, { className: className, value: value, disabled: isDisabled }), label));
-    };
-    FormSelectOption.displayName = 'FormSelectOption';
-
-    const FormSelectOptionGroup = (_a) => {
-        var { children = null, className = '', isDisabled = false, label } = _a, props = __rest$1(_a, ["children", "className", "isDisabled", "label"]);
-        return (React__namespace.createElement("optgroup", Object.assign({}, props, { disabled: !!isDisabled, className: className, label: label }), children));
-    };
-    FormSelectOptionGroup.displayName = 'FormSelectOptionGroup';
-
-    const c_form_control_textarea_Height = {
-      "name": "--pf-c-form-control--textarea--Height",
-      "value": "auto",
-      "var": "var(--pf-c-form-control--textarea--Height)"
-    };
-    var heightToken = c_form_control_textarea_Height;
-
-    exports.TextAreResizeOrientation = void 0;
-    (function (TextAreResizeOrientation) {
-        TextAreResizeOrientation["horizontal"] = "horizontal";
-        TextAreResizeOrientation["vertical"] = "vertical";
-        TextAreResizeOrientation["both"] = "both";
-    })(exports.TextAreResizeOrientation || (exports.TextAreResizeOrientation = {}));
-    class TextAreaBase extends React__namespace.Component {
-        constructor(props) {
-            super(props);
-            this.handleChange = (event) => {
-                // https://gomakethings.com/automatically-expand-a-textarea-as-the-user-types-using-vanilla-javascript/
-                const field = event.currentTarget;
-                if (this.props.autoResize && canUseDOM) {
-                    field.style.setProperty(heightToken.name, 'inherit');
-                    const computed = window.getComputedStyle(field);
-                    // Calculate the height
-                    const height = parseInt(computed.getPropertyValue('border-top-width')) +
-                        parseInt(computed.getPropertyValue('padding-top')) +
-                        field.scrollHeight +
-                        parseInt(computed.getPropertyValue('padding-bottom')) +
-                        parseInt(computed.getPropertyValue('border-bottom-width'));
-                    field.style.setProperty(heightToken.name, `${height}px`);
-                }
-                if (this.props.onChange) {
-                    this.props.onChange(field.value, event);
-                }
-            };
-            if (!props.id && !props['aria-label']) {
-                // eslint-disable-next-line no-console
-                console.error('TextArea: TextArea requires either an id or aria-label to be specified');
-            }
-        }
-        render() {
-            const _a = this.props, { className, value, validated, isRequired, isDisabled, isIconSprite, isReadOnly, resizeOrientation, innerRef, readOnly, disabled, 
-            /* eslint-disable @typescript-eslint/no-unused-vars */
-            autoResize, onChange } = _a, 
-            /* eslint-enable @typescript-eslint/no-unused-vars */
-            props = __rest$1(_a, ["className", "value", "validated", "isRequired", "isDisabled", "isIconSprite", "isReadOnly", "resizeOrientation", "innerRef", "readOnly", "disabled", "autoResize", "onChange"]);
-            const orientation = `resize${capitalize(resizeOrientation)}`;
-            return (React__namespace.createElement("textarea", Object.assign({ className: css(formStyles.formControl, isIconSprite && formStyles.modifiers.iconSprite, className, resizeOrientation !== exports.TextAreResizeOrientation.both && formStyles.modifiers[orientation], validated === exports.ValidatedOptions.success && formStyles.modifiers.success, validated === exports.ValidatedOptions.warning && formStyles.modifiers.warning), onChange: this.handleChange }, (typeof this.props.defaultValue !== 'string' && { value }), { "aria-invalid": validated === exports.ValidatedOptions.error, required: isRequired, disabled: isDisabled || disabled, readOnly: isReadOnly || readOnly, ref: innerRef }, props)));
-        }
-    }
-    TextAreaBase.displayName = 'TextArea';
-    TextAreaBase.defaultProps = {
-        innerRef: React__namespace.createRef(),
-        className: '',
-        isRequired: false,
-        isDisabled: false,
-        isIconSprite: false,
-        validated: 'default',
-        resizeOrientation: 'both',
-        'aria-label': null
-    };
-    const TextArea = React__namespace.forwardRef((props, ref) => (React__namespace.createElement(TextAreaBase, Object.assign({}, props, { innerRef: ref }))));
-    TextArea.displayName = 'TextArea';
-
-    const InputGroup = (_a) => {
-        var { className = '', children, innerRef } = _a, props = __rest$1(_a, ["className", "children", "innerRef"]);
-        const formCtrls = [FormSelect, TextArea, TextInput].map(comp => comp.displayName);
-        const idItem = React__namespace.Children.toArray(children).find((child) => !formCtrls.includes(child.type.displayName) && child.props.id);
-        const inputGroupRef = innerRef || React__namespace.useRef(null);
-        return (React__namespace.createElement("div", Object.assign({ ref: inputGroupRef, className: css(styles$P.inputGroup, className) }, props), idItem
-            ? React__namespace.Children.map(children, (child) => formCtrls.includes(child.type.displayName)
-                ? React__namespace.cloneElement(child, { 'aria-describedby': idItem.props.id })
-                : child)
-            : children));
-    };
-    InputGroup.displayName = 'InputGroup';
-
-    exports.InputGroupTextVariant = void 0;
-    (function (InputGroupTextVariant) {
-        InputGroupTextVariant["default"] = "default";
-        InputGroupTextVariant["plain"] = "plain";
-    })(exports.InputGroupTextVariant || (exports.InputGroupTextVariant = {}));
-    const InputGroupText = (_a) => {
-        var { className = '', component = 'span', children, variant = exports.InputGroupTextVariant.default } = _a, props = __rest$1(_a, ["className", "component", "children", "variant"]);
-        const Component = component;
-        return (React__namespace.createElement(Component, Object.assign({ className: css(styles$P.inputGroupText, variant === exports.InputGroupTextVariant.plain && styles$P.modifiers.plain, className) }, props), children));
-    };
-    InputGroupText.displayName = 'InputGroupText';
-
     // seed for the aria-labelledby ID
     let currentId = 0;
     const newId = currentId++;
@@ -9671,8 +9662,8 @@
             const screenReaderLabelId = `pf-context-selector-label-id-${newId}`;
             const searchButtonId = `pf-context-selector-search-button-id-${newId}`;
             const _a = this.props, { children, className, isOpen, isFullHeight, onToggle, onSelect, screenReaderLabel, toggleText, searchButtonAriaLabel, searchInputValue, onSearchInputChange, searchInputPlaceholder, onSearchButtonClick, menuAppendTo, ouiaId, ouiaSafe, isPlain, isText, footer, disableFocusTrap, isFlipEnabled } = _a, props = __rest$1(_a, ["children", "className", "isOpen", "isFullHeight", "onToggle", "onSelect", "screenReaderLabel", "toggleText", "searchButtonAriaLabel", "searchInputValue", "onSearchInputChange", "searchInputPlaceholder", "onSearchButtonClick", "menuAppendTo", "ouiaId", "ouiaSafe", "isPlain", "isText", "footer", "disableFocusTrap", "isFlipEnabled"]);
-            const menuContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$Q.contextSelectorMenu) }, (isFlipEnabled && { style: { position: 'revert' } })), isOpen && (React__namespace.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } } },
-                React__namespace.createElement("div", { className: css(styles$Q.contextSelectorMenuSearch) },
+            const menuContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$P.contextSelectorMenu) }, (isFlipEnabled && { style: { position: 'revert' } })), isOpen && (React__namespace.createElement(FocusTrap, { active: !disableFocusTrap, focusTrapOptions: { clickOutsideDeactivates: true, tabbableOptions: { displayCheck: 'none' } } },
+                React__namespace.createElement("div", { className: css(styles$P.contextSelectorMenuSearch) },
                     React__namespace.createElement(InputGroup, null,
                         React__namespace.createElement(TextInput, { value: searchInputValue, type: "search", placeholder: searchInputPlaceholder, onChange: onSearchInputChange, onKeyPress: this.onEnterPressed, "aria-labelledby": searchButtonId }),
                         React__namespace.createElement(Button, { variant: exports.ButtonVariant.control, "aria-label": searchButtonAriaLabel, id: searchButtonId, onClick: onSearchButtonClick },
@@ -9680,8 +9671,8 @@
                 React__namespace.createElement(ContextSelectorContext.Provider, { value: { onSelect } },
                     React__namespace.createElement(ContextSelectorMenuList, { isOpen: isOpen }, children)),
                 footer))));
-            const popperContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$Q.contextSelector, isOpen && styles$Q.modifiers.expanded, className), ref: this.popperRef }, props), isOpen && menuContainer));
-            const mainContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$Q.contextSelector, isOpen && styles$Q.modifiers.expanded, isFullHeight && styles$Q.modifiers.fullHeight, className), ref: this.parentRef }, getOUIAProps(ContextSelector.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props),
+            const popperContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$P.contextSelector, isOpen && styles$P.modifiers.expanded, className), ref: this.popperRef }, props), isOpen && menuContainer));
+            const mainContainer = (React__namespace.createElement("div", Object.assign({ className: css(styles$P.contextSelector, isOpen && styles$P.modifiers.expanded, isFullHeight && styles$P.modifiers.fullHeight, className), ref: this.parentRef }, getOUIAProps(ContextSelector.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props),
                 screenReaderLabel && (React__namespace.createElement("span", { id: screenReaderLabelId, hidden: true }, screenReaderLabel)),
                 React__namespace.createElement(ContextSelectorToggle, { onToggle: onToggle, isOpen: isOpen, toggleText: toggleText, id: toggleId, parentRef: menuAppendTo === 'inline' ? this.parentRef : this.popperRef, "aria-labelledby": `${screenReaderLabelId} ${toggleId}`, isPlain: isPlain, isText: isText }),
                 isOpen && menuAppendTo === 'inline' && menuContainer));
@@ -9732,7 +9723,7 @@
             const Component = href ? 'a' : 'button';
             const isDisabledLink = href && isDisabled;
             return (React__namespace.createElement(ContextSelectorContext.Consumer, null, ({ onSelect }) => (React__namespace.createElement("li", { role: "none" },
-                React__namespace.createElement(Component, Object.assign({ className: css(styles$Q.contextSelectorMenuListItem, isDisabledLink && styles$Q.modifiers.disabled, className), ref: this.ref, onClick: event => {
+                React__namespace.createElement(Component, Object.assign({ className: css(styles$P.contextSelectorMenuListItem, isDisabledLink && styles$P.modifiers.disabled, className), ref: this.ref, onClick: event => {
                         if (!isDisabled) {
                             onClick(event);
                             onSelect(event, children);
@@ -9753,7 +9744,7 @@
 
     const ContextSelectorFooter = (_a) => {
         var { children = null, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
-        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$Q.contextSelectorMenuFooter, className) }), children));
+        return (React__namespace.createElement("div", Object.assign({}, props, { className: css(styles$P.contextSelectorMenuFooter, className) }), children));
     };
     ContextSelectorFooter.displayName = 'ContextSelectorFooter';
 
@@ -10900,19 +10891,6 @@
 
     var AngleDoubleLeftIcon$1 = AngleDoubleLeftIcon;
 
-    const AngleLeftIconConfig = {
-      name: 'AngleLeftIcon',
-      height: 512,
-      width: 256,
-      svgPath: 'M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z',
-      yOffset: 0,
-      xOffset: 0,
-    };
-
-    const AngleLeftIcon = createIcon(AngleLeftIconConfig);
-
-    var AngleLeftIcon$1 = AngleLeftIcon;
-
     const AngleDoubleRightIconConfig = {
       name: 'AngleDoubleRightIcon',
       height: 512,
@@ -11294,6 +11272,15 @@
             this.addSelectedButtonRef = React__namespace.createRef();
             this.removeSelectedButtonRef = React__namespace.createRef();
             this.removeAllButtonRef = React__namespace.createRef();
+            /** In dev environment, prevents circular structure during JSON stringification when
+             * options passed in to the dual list selector include HTML elements.
+             */
+            this.replacer = (key, value) => {
+                if (key[0] === '_') {
+                    return undefined;
+                }
+                return value;
+            };
             this.onFilterUpdate = (newFilteredOptions, paneType, isSearchReset) => {
                 const { isTree } = this.props;
                 if (paneType === 'available') {
@@ -11643,8 +11630,10 @@
                 : null;
         }
         componentDidUpdate() {
-            if (JSON.stringify(this.props.availableOptions) !== JSON.stringify(this.state.availableOptions) ||
-                JSON.stringify(this.props.chosenOptions) !== JSON.stringify(this.state.chosenOptions)) {
+            if (JSON.stringify(this.props.availableOptions, this.replacer) !==
+                JSON.stringify(this.state.availableOptions, this.replacer) ||
+                JSON.stringify(this.props.chosenOptions, this.replacer) !==
+                    JSON.stringify(this.state.chosenOptions, this.replacer)) {
                 this.setState({
                     availableOptions: [...this.props.availableOptions],
                     chosenOptions: [...this.props.chosenOptions]
@@ -18168,6 +18157,19 @@
       "themeDark": "pf-theme-dark"
     };
 
+    const ArrowRightIconConfig = {
+      name: 'ArrowRightIcon',
+      height: 512,
+      width: 448,
+      svgPath: 'M190.5 66.9l22.2-22.2c9.4-9.4 24.6-9.4 33.9 0L441 239c9.4 9.4 9.4 24.6 0 33.9L246.6 467.3c-9.4 9.4-24.6 9.4-33.9 0l-22.2-22.2c-9.5-9.5-9.3-25 .4-34.3L311.4 296H24c-13.3 0-24-10.7-24-24v-32c0-13.3 10.7-24 24-24h287.4L190.9 101.2c-9.8-9.3-10-24.8-.4-34.3z',
+      yOffset: 0,
+      xOffset: 0,
+    };
+
+    const ArrowRightIcon = createIcon(ArrowRightIconConfig);
+
+    var ArrowRightIcon$1 = ArrowRightIcon;
+
     Promise.resolve().then(function () { return panel; });
     var styles$m = {
       "modifiers": {
@@ -22471,6 +22473,10 @@
         __proto__: null
     });
 
+    var inputGroup = /*#__PURE__*/Object.freeze({
+        __proto__: null
+    });
+
     var calendarMonth = /*#__PURE__*/Object.freeze({
         __proto__: null
     });
@@ -22495,10 +22501,6 @@
         __proto__: null
     });
 
-    var inputGroup = /*#__PURE__*/Object.freeze({
-        __proto__: null
-    });
-
     var dataList = /*#__PURE__*/Object.freeze({
         __proto__: null
     });