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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/quickstarts-full.es.js +283 -256
  2. package/dist/quickstarts-full.es.js.map +1 -1
  3. package/package.json +9 -9
package/dist/quickstarts-full.es.js CHANGED
@@ -40,7 +40,7 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
40
40
  *
41
41
  * @param {any} args list of objects, string, or arrays to reduce
42
42
  */
43
- function css(...args) {
43
+ function css$1(...args) {
44
44
  // Adapted from https://github.com/JedWatson/classnames/blob/master/index.js
45
45
  const classes = [];
46
46
  const hasOwn = {}.hasOwnProperty;
@@ -50,7 +50,7 @@ function css(...args) {
50
50
  classes.push(arg);
51
51
  }
52
52
  else if (Array.isArray(arg) && arg.length) {
53
- const inner = css(...arg);
53
+ const inner = css$1(...arg);
54
54
  if (inner) {
55
55
  classes.push(inner);
56
56
  }
@@ -88,6 +88,7 @@ var styles$v = {
88
88
  "contentTable": "pf-v6-c-content--table",
89
89
  "contentUl": "pf-v6-c-content--ul",
90
90
  "modifiers": {
91
+ "editorial": "pf-m-editorial",
91
92
  "visited": "pf-m-visited",
92
93
  "plain": "pf-m-plain"
93
94
  }
@@ -4486,7 +4487,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
4486
4487
  }
4487
4488
  return positionModifiers.top;
4488
4489
  };
4489
- const options = Object.assign({ className: css(popper.props && popper.props.className, positionModifiers && modifierFromPopperPosition()), style: Object.assign(Object.assign(Object.assign({}, ((popper.props && popper.props.style) || {})), popperStyles.popper), { zIndex,
4490
+ const options = Object.assign({ className: css$1(popper.props && popper.props.className, positionModifiers && modifierFromPopperPosition()), style: Object.assign(Object.assign(Object.assign({}, ((popper.props && popper.props.style) || {})), popperStyles.popper), { zIndex,
4490
4491
  opacity, transition: getOpacityTransition(animationDuration) }) }, attributes.popper);
4491
4492
  const getMenuWithPopper = () => {
4492
4493
  const localPopper = React.cloneElement(popper, options);
@@ -4765,9 +4766,7 @@ const getResizeObserver = (containerRefElement, handleResize, useRequestAnimatio
4765
4766
  // Wrap resize function in requestAnimationFrame to avoid "ResizeObserver loop limit exceeded" errors
4766
4767
  if (useRequestAnimationFrame) {
4767
4768
  window.requestAnimationFrame(() => {
4768
- if (Array.isArray(entries) && entries.length > 0) {
4769
- handleResize();
4770
- }
4769
+ if (Array.isArray(entries) && entries.length > 0) ;
4771
4770
  });
4772
4771
  // Avoid wrapping function in requestAnimationFrame if the function is debounced
4773
4772
  }
@@ -4804,7 +4803,7 @@ var TitleSizes;
4804
4803
  const Title = (_a) => {
4805
4804
  var { className = '', children = '', headingLevel: HeadingLevel, size, ouiaId, ouiaSafe = true } = _a, props = __rest$1(_a, ["className", "children", "headingLevel", "size", "ouiaId", "ouiaSafe"]);
4806
4805
  const ouiaProps = useOUIAProps(Title.displayName, ouiaId, ouiaSafe);
4807
- return (React.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css(styles$u.title, size ? styles$u.modifiers[size] : styles$u.modifiers[HeadingLevel], className) }), children));
4806
+ return (React.createElement(HeadingLevel, Object.assign({}, ouiaProps, props, { className: css$1(styles$u.title, size ? styles$u.modifiers[size] : styles$u.modifiers[HeadingLevel], className) }), children));
4808
4807
  };
4809
4808
  Title.displayName = 'Title';
4810
4809
 
@@ -4869,10 +4868,8 @@ var spinnerSize;
4869
4868
  spinnerSize["xl"] = "xl";
4870
4869
  })(spinnerSize || (spinnerSize = {}));
4871
4870
  const Spinner = (_a) => {
4872
- var {
4873
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
4874
- className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', diameter, isInline = false, 'aria-label': ariaLabel, 'aria-labelledBy': ariaLabelledBy } = _a, props = __rest$1(_a, ["className", "size", 'aria-valuetext', "diameter", "isInline", 'aria-label', 'aria-labelledBy']);
4875
- return (React.createElement("svg", Object.assign({ className: css(styles$t.spinner, isInline ? styles$t.modifiers.inline : styles$t.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText, viewBox: "0 0 100 100" }, (diameter && { style: { [c_spinner_diameter.name]: diameter } }), (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy }), (!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' }), props),
4871
+ var { className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', diameter, isInline = false, 'aria-label': ariaLabel, 'aria-labelledBy': ariaLabelledBy } = _a, props = __rest$1(_a, ["className", "size", 'aria-valuetext', "diameter", "isInline", 'aria-label', 'aria-labelledBy']);
4872
+ return (React.createElement("svg", Object.assign({ className: css$1(styles$t.spinner, isInline ? styles$t.modifiers.inline : styles$t.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText, viewBox: "0 0 100 100" }, (diameter && { style: { [c_spinner_diameter.name]: diameter } }), (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy }), (!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' }), props),
4876
4873
  React.createElement("circle", { className: styles$t.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })));
4877
4874
  };
4878
4875
  Spinner.displayName = 'Spinner';
@@ -4889,7 +4886,7 @@ var styles$s = {
4889
4886
 
4890
4887
  const Badge = (_a) => {
4891
4888
  var { isRead = false, isDisabled = false, className = '', children = '', screenReaderText } = _a, props = __rest$1(_a, ["isRead", "isDisabled", "className", "children", "screenReaderText"]);
4892
- return (React.createElement("span", Object.assign({}, props, { className: css(styles$s.badge, (isRead ? styles$s.modifiers.read : styles$s.modifiers.unread), isDisabled && styles$s.modifiers.disabled, className) }),
4889
+ return (React.createElement("span", Object.assign({}, props, { className: css$1(styles$s.badge, (isRead ? styles$s.modifiers.read : styles$s.modifiers.unread), isDisabled && styles$s.modifiers.disabled, className) }),
4893
4890
  children,
4894
4891
  screenReaderText && React.createElement("span", { className: "pf-v6-screen-reader" }, screenReaderText)));
4895
4892
  };
@@ -4945,13 +4942,13 @@ const ButtonBase = (_a) => {
4945
4942
  return 0;
4946
4943
  }
4947
4944
  };
4948
- return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isAriaDisabled || (!isButtonElement && isDisabled), "aria-label": ariaLabel, className: css(buttonStyles.button, buttonStyles.modifiers[variant], isBlock && buttonStyles.modifiers.block, isDisabled && !isButtonElement && buttonStyles.modifiers.disabled, isAriaDisabled && buttonStyles.modifiers.ariaDisabled, isClicked && buttonStyles.modifiers.clicked, isInline && variant === ButtonVariant.link && buttonStyles.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && buttonStyles.modifiers.danger, isLoading !== null && variant !== ButtonVariant.plain && buttonStyles.modifiers.progress, isLoading && buttonStyles.modifiers.inProgress, hasNoPadding && variant === ButtonVariant.plain && buttonStyles.modifiers.noPadding, variant === ButtonVariant.stateful && buttonStyles.modifiers[state], size === ButtonSize.sm && buttonStyles.modifiers.small, size === ButtonSize.lg && buttonStyles.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : role, ref: innerRef }, ouiaProps),
4949
- isLoading && (React.createElement("span", { className: css(buttonStyles.buttonProgress) },
4945
+ return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isAriaDisabled || (!isButtonElement && isDisabled), "aria-label": ariaLabel, className: css$1(buttonStyles.button, buttonStyles.modifiers[variant], isBlock && buttonStyles.modifiers.block, isDisabled && !isButtonElement && buttonStyles.modifiers.disabled, isAriaDisabled && buttonStyles.modifiers.ariaDisabled, isClicked && buttonStyles.modifiers.clicked, isInline && variant === ButtonVariant.link && buttonStyles.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && buttonStyles.modifiers.danger, isLoading !== null && variant !== ButtonVariant.plain && buttonStyles.modifiers.progress, isLoading && buttonStyles.modifiers.inProgress, hasNoPadding && variant === ButtonVariant.plain && buttonStyles.modifiers.noPadding, variant === ButtonVariant.stateful && buttonStyles.modifiers[state], size === ButtonSize.sm && buttonStyles.modifiers.small, size === ButtonSize.lg && buttonStyles.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : role, ref: innerRef }, ouiaProps),
4946
+ isLoading && (React.createElement("span", { className: css$1(buttonStyles.buttonProgress) },
4950
4947
  React.createElement(Spinner, { size: spinnerSize.md, isInline: isInline, "aria-valuetext": spinnerAriaValueText, "aria-label": spinnerAriaLabel, "aria-labelledby": spinnerAriaLabelledBy }))),
4951
- icon && (iconPosition === 'start' || iconPosition === 'left') && (React.createElement("span", { className: css(buttonStyles.buttonIcon, buttonStyles.modifiers.start) }, icon)),
4952
- children && React.createElement("span", { className: css('pf-v6-c-button__text') }, children),
4953
- icon && (iconPosition === 'end' || iconPosition === 'right') && (React.createElement("span", { className: css(buttonStyles.buttonIcon, buttonStyles.modifiers.end) }, icon)),
4954
- countOptions && (React.createElement("span", { className: css(buttonStyles.buttonCount, countOptions.className) },
4948
+ icon && (iconPosition === 'start' || iconPosition === 'left') && (React.createElement("span", { className: css$1(buttonStyles.buttonIcon, buttonStyles.modifiers.start) }, icon)),
4949
+ children && React.createElement("span", { className: css$1('pf-v6-c-button__text') }, children),
4950
+ icon && (iconPosition === 'end' || iconPosition === 'right') && (React.createElement("span", { className: css$1(buttonStyles.buttonIcon, buttonStyles.modifiers.end) }, icon)),
4951
+ countOptions && (React.createElement("span", { className: css$1(buttonStyles.buttonCount, countOptions.className) },
4955
4952
  React.createElement(Badge, { isRead: countOptions.isRead, isDisabled: isDisabled }, countOptions.count)))));
4956
4953
  };
4957
4954
  const Button = React.forwardRef((props, ref) => (React.createElement(ButtonBase, Object.assign({ innerRef: ref }, props))));
@@ -5006,19 +5003,19 @@ var styles$p = {
5006
5003
 
5007
5004
  const Backdrop = (_a) => {
5008
5005
  var { children = null, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
5009
- return (React.createElement("div", Object.assign({}, props, { className: css(styles$r.backdrop, className) }), children));
5006
+ return (React.createElement("div", Object.assign({}, props, { className: css$1(styles$r.backdrop, className) }), children));
5010
5007
  };
5011
5008
  Backdrop.displayName = 'Backdrop';
5012
5009
 
5013
5010
  const ModalBoxBody = (_a) => {
5014
5011
  var { children = null, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
5015
- return (React.createElement("div", Object.assign({}, props, { className: css(styles$q.modalBoxBody, className) }), children));
5012
+ return (React.createElement("div", Object.assign({}, props, { className: css$1(styles$q.modalBoxBody, className) }), children));
5016
5013
  };
5017
5014
  ModalBoxBody.displayName = 'ModalBoxBody';
5018
5015
 
5019
5016
  const ModalBoxCloseButton = (_a) => {
5020
5017
  var { className, onClose = () => undefined, 'aria-label': ariaLabel = 'Close', ouiaId } = _a, props = __rest$1(_a, ["className", "onClose", 'aria-label', "ouiaId"]);
5021
- return (React.createElement("div", { className: css(styles$q.modalBoxClose, className) },
5018
+ return (React.createElement("div", { className: css$1(styles$q.modalBoxClose, className) },
5022
5019
  React.createElement(Button, Object.assign({ variant: "plain", onClick: (event) => onClose(event), "aria-label": ariaLabel }, (ouiaId && { ouiaId: `${ouiaId}-${ModalBoxCloseButton.displayName}` }), props, { icon: React.createElement(TimesIcon, null) }))));
5023
5020
  };
5024
5021
  ModalBoxCloseButton.displayName = 'ModalBoxCloseButton';
@@ -5035,27 +5032,27 @@ const ModalBox = (_a) => {
5035
5032
  style = style || {};
5036
5033
  style[c_modal_box_m_align_top_spacer.name] = positionOffset;
5037
5034
  }
5038
- return (React.createElement("div", Object.assign({}, props, { role: "dialog", "aria-label": ariaLabel || null, "aria-labelledby": ariaLabelledby || null, "aria-describedby": ariaDescribedby, "aria-modal": "true", className: css(styles$q.modalBox, className, position === 'top' && styles$q.modifiers.alignTop, variant === 'large' && styles$q.modifiers.lg, variant === 'small' && styles$q.modifiers.sm, variant === 'medium' && styles$q.modifiers.md), style: style }), children));
5035
+ return (React.createElement("div", Object.assign({}, props, { role: "dialog", "aria-label": ariaLabel || null, "aria-labelledby": ariaLabelledby || null, "aria-describedby": ariaDescribedby, "aria-modal": "true", className: css$1(styles$q.modalBox, className, position === 'top' && styles$q.modifiers.alignTop, variant === 'large' && styles$q.modifiers.lg, variant === 'small' && styles$q.modifiers.sm, variant === 'medium' && styles$q.modifiers.md), style: style }), children));
5039
5036
  };
5040
5037
  ModalBox.displayName = 'ModalBox';
5041
5038
 
5042
5039
  const ModalBoxFooter = (_a) => {
5043
5040
  var { children = null, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
5044
- return (React.createElement("footer", Object.assign({}, props, { className: css(styles$q.modalBoxFooter, className) }), children));
5041
+ return (React.createElement("footer", Object.assign({}, props, { className: css$1(styles$q.modalBoxFooter, className) }), children));
5045
5042
  };
5046
5043
  ModalBoxFooter.displayName = 'ModalBoxFooter';
5047
5044
 
5048
5045
  const ModalBoxDescription = (_a) => {
5049
5046
  var { children = null, className = '', id = '' } = _a, props = __rest$1(_a, ["children", "className", "id"]);
5050
- return (React.createElement("div", Object.assign({}, props, { id: id, className: css(styles$q.modalBoxDescription, className) }), children));
5047
+ return (React.createElement("div", Object.assign({}, props, { id: id, className: css$1(styles$q.modalBoxDescription, className) }), children));
5051
5048
  };
5052
5049
  ModalBoxDescription.displayName = 'ModalBoxDescription';
5053
5050
 
5054
5051
  const ModalBoxHeader = (_a) => {
5055
5052
  var { children = null, className = '', help = null } = _a, props = __rest$1(_a, ["children", "className", "help"]);
5056
- return (React.createElement("header", Object.assign({ className: css(styles$q.modalBoxHeader, help && styles$q.modifiers.help, className) }, props),
5053
+ return (React.createElement("header", Object.assign({ className: css$1(styles$q.modalBoxHeader, help && styles$q.modifiers.help, className) }, props),
5057
5054
  help && (React.createElement(React.Fragment, null,
5058
- React.createElement("div", { className: css(styles$q.modalBoxHeaderMain) }, children),
5055
+ React.createElement("div", { className: css$1(styles$q.modalBoxHeaderMain) }, children),
5059
5056
  React.createElement("div", { className: `${styles$q.modalBoxHeader}-help` }, help))),
5060
5057
  !help && children));
5061
5058
  };
@@ -5084,13 +5081,13 @@ var styles$o = {
5084
5081
 
5085
5082
  const TooltipContent = (_a) => {
5086
5083
  var { className, children, isLeftAligned } = _a, props = __rest$1(_a, ["className", "children", "isLeftAligned"]);
5087
- return (React.createElement("div", Object.assign({ className: css(styles$o.tooltipContent, isLeftAligned && styles$o.modifiers.textAlignLeft, className) }, props), children));
5084
+ return (React.createElement("div", Object.assign({ className: css$1(styles$o.tooltipContent, isLeftAligned && styles$o.modifiers.textAlignLeft, className) }, props), children));
5088
5085
  };
5089
5086
  TooltipContent.displayName = 'TooltipContent';
5090
5087
 
5091
5088
  const TooltipArrow = (_a) => {
5092
5089
  var { className } = _a, props = __rest$1(_a, ["className"]);
5093
- return React.createElement("div", Object.assign({ className: css(styles$o.tooltipArrow, className) }, props));
5090
+ return React.createElement("div", Object.assign({ className: css$1(styles$o.tooltipArrow, className) }, props));
5094
5091
  };
5095
5092
  TooltipArrow.displayName = 'TooltipArrow';
5096
5093
 
@@ -5174,7 +5171,7 @@ const Tooltip = (_a) => {
5174
5171
  'right-end': styles$o.modifiers.rightBottom
5175
5172
  };
5176
5173
  const hasCustomMaxWidth = maxWidth !== c_tooltip_MaxWidth.value;
5177
- const content = (React.createElement("div", Object.assign({ "aria-live": ariaLive, className: css(styles$o.tooltip, className), role: "tooltip", id: id, style: {
5174
+ const content = (React.createElement("div", Object.assign({ "aria-live": ariaLive, className: css$1(styles$o.tooltip, className), role: "tooltip", id: id, style: {
5178
5175
  maxWidth: hasCustomMaxWidth ? maxWidth : null
5179
5176
  }, ref: popperRef }, rest),
5180
5177
  React.createElement(TooltipArrow, null),
@@ -5222,10 +5219,10 @@ const ModalBoxTitle = (_a) => {
5222
5219
  useIsomorphicLayoutEffect(() => {
5223
5220
  setHasTooltip(h1.current && h1.current.offsetWidth < h1.current.scrollWidth);
5224
5221
  }, []);
5225
- const content = (React.createElement("h1", Object.assign({ id: id, ref: h1, className: css(styles$q.modalBoxTitle, titleIconVariant && styles$q.modifiers.icon, className) }, props),
5226
- titleIconVariant && (React.createElement("span", { className: css(styles$q.modalBoxTitleIcon) }, isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : React.createElement(CustomIcon, null))),
5222
+ const content = (React.createElement("h1", Object.assign({ id: id, ref: h1, className: css$1(styles$q.modalBoxTitle, titleIconVariant && styles$q.modifiers.icon, className) }, props),
5223
+ titleIconVariant && (React.createElement("span", { className: css$1(styles$q.modalBoxTitleIcon) }, isVariantIcon(titleIconVariant) ? variantIcons[titleIconVariant] : React.createElement(CustomIcon, null))),
5227
5224
  label && React.createElement("span", { className: "pf-v6-screen-reader" }, label),
5228
- React.createElement("span", { className: css(styles$q.modalBoxTitleText) }, title)));
5225
+ React.createElement("span", { className: css$1(styles$q.modalBoxTitleText) }, title)));
5229
5226
  return hasTooltip ? React.createElement(Tooltip, { content: title }, content) : content;
5230
5227
  };
5231
5228
  ModalBoxTitle.displayName = 'ModalBoxTitle';
@@ -5259,7 +5256,7 @@ const ModalContent = (_a) => {
5259
5256
  }
5260
5257
  return idRefList.join(' ');
5261
5258
  };
5262
- const modalBox = (React.createElement(ModalBox, Object.assign({ id: boxId, className: css(className, isVariantIcon(titleIconVariant) && styles$q.modifiers[titleIconVariant]), variant: variant, position: position, positionOffset: positionOffset, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyFormatted(), "aria-describedby": ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId) }, getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe), { style: Object.assign(Object.assign({}, (width && { '--pf-v6-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` })), (maxWidth && {
5259
+ const modalBox = (React.createElement(ModalBox, Object.assign({ id: boxId, className: css$1(className, isVariantIcon(titleIconVariant) && styles$q.modifiers[titleIconVariant]), variant: variant, position: position, positionOffset: positionOffset, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledbyFormatted(), "aria-describedby": ariaDescribedby || (hasNoBodyWrapper ? null : descriptorId) }, getOUIAProps(ModalContent.displayName, ouiaId, ouiaSafe), { style: Object.assign(Object.assign({}, (width && { '--pf-v6-c-modal-box--Width': typeof width !== 'number' ? width : `${width}px` })), (maxWidth && {
5263
5260
  '--pf-v6-c-modal-box--MaxWidth': typeof maxWidth !== 'number' ? maxWidth : `${maxWidth}px`
5264
5261
  })) }),
5265
5262
  showClose && React.createElement(ModalBoxCloseButton, { onClose: (event) => onClose(event), ouiaId: ouiaId }),
@@ -5273,7 +5270,7 @@ const ModalContent = (_a) => {
5273
5270
  // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
5274
5271
  // We want to prevent this in case false is ever passed in.
5275
5272
  initialFocus: elementToFocus || undefined
5276
- }, className: css(styles$p.bullseye) }, modalBox)));
5273
+ }, className: css$1(styles$p.bullseye) }, modalBox)));
5277
5274
  };
5278
5275
  ModalContent.displayName = 'ModalContent';
5279
5276
 
@@ -5333,10 +5330,10 @@ class Modal$1 extends React.Component {
5333
5330
  target.appendChild(container);
5334
5331
  target.addEventListener('keydown', this.handleEscKeyClick, false);
5335
5332
  if (this.props.isOpen) {
5336
- target.classList.add(css(styles$r.backdropOpen));
5333
+ target.classList.add(css$1(styles$r.backdropOpen));
5337
5334
  }
5338
5335
  else {
5339
- target.classList.remove(css(styles$r.backdropOpen));
5336
+ target.classList.remove(css$1(styles$r.backdropOpen));
5340
5337
  }
5341
5338
  if (!title && this.isEmpty(ariaLabel) && this.isEmpty(ariaLabelledby)) {
5342
5339
  // eslint-disable-next-line no-console
@@ -5351,11 +5348,11 @@ class Modal$1 extends React.Component {
5351
5348
  const { appendTo } = this.props;
5352
5349
  const target = this.getElement(appendTo);
5353
5350
  if (this.props.isOpen) {
5354
- target.classList.add(css(styles$r.backdropOpen));
5351
+ target.classList.add(css$1(styles$r.backdropOpen));
5355
5352
  this.toggleSiblingsFromScreenReaders(true);
5356
5353
  }
5357
5354
  else {
5358
- target.classList.remove(css(styles$r.backdropOpen));
5355
+ target.classList.remove(css$1(styles$r.backdropOpen));
5359
5356
  this.toggleSiblingsFromScreenReaders(false);
5360
5357
  }
5361
5358
  }
@@ -5366,7 +5363,7 @@ class Modal$1 extends React.Component {
5366
5363
  target.removeChild(this.state.container);
5367
5364
  }
5368
5365
  target.removeEventListener('keydown', this.handleEscKeyClick, false);
5369
- target.classList.remove(css(styles$r.backdropOpen));
5366
+ target.classList.remove(css$1(styles$r.backdropOpen));
5370
5367
  this.toggleSiblingsFromScreenReaders(false);
5371
5368
  }
5372
5369
  render() {
@@ -5428,7 +5425,7 @@ const AccordionItemContext = React.createContext({});
5428
5425
  const Accordion = (_a) => {
5429
5426
  var { children = null, className = '', 'aria-label': ariaLabel, headingLevel = 'h3', asDefinitionList = true, isBordered = false, displaySize = 'default', togglePosition = 'end' } = _a, props = __rest$1(_a, ["children", "className", 'aria-label', "headingLevel", "asDefinitionList", "isBordered", "displaySize", "togglePosition"]);
5430
5427
  const AccordionList = asDefinitionList ? 'dl' : 'div';
5431
- return (React.createElement(AccordionList, Object.assign({ className: css(styles$n.accordion, isBordered && styles$n.modifiers.bordered, togglePosition === 'start' && styles$n.modifiers.toggleStart, displaySize === 'lg' && styles$n.modifiers.displayLg, className), "aria-label": ariaLabel }, (!asDefinitionList && ariaLabel && { role: 'region' }), props),
5428
+ return (React.createElement(AccordionList, Object.assign({ className: css$1(styles$n.accordion, isBordered && styles$n.modifiers.bordered, togglePosition === 'start' && styles$n.modifiers.toggleStart, displaySize === 'lg' && styles$n.modifiers.displayLg, className), "aria-label": ariaLabel }, (!asDefinitionList && ariaLabel && { role: 'region' }), props),
5432
5429
  React.createElement(AccordionContext.Provider, { value: {
5433
5430
  ContentContainer: asDefinitionList ? 'dd' : 'div',
5434
5431
  ToggleContainer: asDefinitionList ? 'dt' : headingLevel,
@@ -5439,7 +5436,7 @@ Accordion.displayName = 'Accordion';
5439
5436
 
5440
5437
  const AccordionExpandableContentBody = (_a) => {
5441
5438
  var { children = null } = _a, props = __rest$1(_a, ["children"]);
5442
- return (React.createElement("div", Object.assign({ className: css(styles$n.accordionExpandableContentBody) }, props), children));
5439
+ return (React.createElement("div", Object.assign({ className: css$1(styles$n.accordionExpandableContentBody) }, props), children));
5443
5440
  };
5444
5441
  AccordionExpandableContentBody.displayName = 'AccordionExpandableContentBody';
5445
5442
 
@@ -5459,7 +5456,7 @@ const AccordionContent = (_a) => {
5459
5456
  }, [containerRef, isFixed, isExpanded]);
5460
5457
  return (React.createElement(AccordionContext.Consumer, null, ({ ContentContainer }) => {
5461
5458
  const Container = component || ContentContainer;
5462
- return (React.createElement(Container, Object.assign({ ref: containerRef, id: id, className: css(styles$n.accordionExpandableContent, isFixed && styles$n.modifiers.fixed, className), hidden: !isExpanded }, (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledby && { 'aria-labelledby': ariaLabelledby }), (hasScrollbar && { tabIndex: 0 }), (hasScrollbar && Container === 'div' && { role: 'region' }), props), isCustomContent ? (children) : (React.createElement(AccordionExpandableContentBody, Object.assign({}, contentBodyProps), children))));
5459
+ return (React.createElement(Container, Object.assign({ ref: containerRef, id: id, className: css$1(styles$n.accordionExpandableContent, isFixed && styles$n.modifiers.fixed, className), hidden: !isExpanded }, (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledby && { 'aria-labelledby': ariaLabelledby }), (hasScrollbar && { tabIndex: 0 }), (hasScrollbar && Container === 'div' && { role: 'region' }), props), isCustomContent ? (children) : (React.createElement(AccordionExpandableContentBody, Object.assign({}, contentBodyProps), children))));
5463
5460
  }));
5464
5461
  };
5465
5462
  AccordionContent.displayName = 'AccordionContent';
@@ -5469,7 +5466,7 @@ const AccordionItem = (_a) => {
5469
5466
  return (React.createElement(AccordionItemContext.Provider, { value: {
5470
5467
  isExpanded: isExpandedProp
5471
5468
  } },
5472
- React.createElement("div", Object.assign({ className: css(styles$n.accordionItem, isExpandedProp && styles$n.modifiers.expanded, className) }, props), children)));
5469
+ React.createElement("div", Object.assign({ className: css$1(styles$n.accordionItem, isExpandedProp && styles$n.modifiers.expanded, className) }, props), children)));
5473
5470
  };
5474
5471
  AccordionItem.displayName = 'AccordionItem';
5475
5472
 
@@ -5486,16 +5483,16 @@ const AngleRightIcon = createIcon(AngleRightIconConfig);
5486
5483
 
5487
5484
  const AccordionToggle = (_a) => {
5488
5485
  var { className = '', id, children = null, component } = _a, props = __rest$1(_a, ["className", "id", "children", "component"]);
5489
- const renderToggleIcon = () => (React.createElement("span", { className: css(styles$n.accordionToggleIcon) },
5486
+ const renderToggleIcon = () => (React.createElement("span", { className: css$1(styles$n.accordionToggleIcon) },
5490
5487
  React.createElement(AngleRightIcon, null)));
5491
5488
  const { isExpanded } = React.useContext(AccordionItemContext);
5492
5489
  return (React.createElement(AccordionContext.Consumer, null, ({ ToggleContainer, togglePosition }) => {
5493
5490
  const Container = component || ToggleContainer;
5494
5491
  const isToggleStartPositioned = togglePosition === 'start';
5495
5492
  return (React.createElement(Container, null,
5496
- React.createElement("button", Object.assign({ id: id, className: css(styles$n.accordionToggle, isExpanded && styles$n.modifiers.expanded, className), "aria-expanded": isExpanded, type: "button" }, props),
5493
+ React.createElement("button", Object.assign({ id: id, className: css$1(styles$n.accordionToggle, isExpanded && styles$n.modifiers.expanded, className), "aria-expanded": isExpanded, type: "button" }, props),
5497
5494
  isToggleStartPositioned && renderToggleIcon(),
5498
- React.createElement("span", { className: css(styles$n.accordionToggleText) }, children),
5495
+ React.createElement("span", { className: css$1(styles$n.accordionToggleText) }, children),
5499
5496
  !isToggleStartPositioned && renderToggleIcon())));
5500
5497
  }));
5501
5498
  };
@@ -5511,19 +5508,19 @@ var styles$m = {
5511
5508
 
5512
5509
  const ActionList = (_a) => {
5513
5510
  var { children, isIconList, className } = _a, props = __rest$1(_a, ["children", "isIconList", "className"]);
5514
- return (React.createElement("div", Object.assign({ className: css(styles$m.actionList, isIconList && styles$m.modifiers.icons, className) }, props), children));
5511
+ return (React.createElement("div", Object.assign({ className: css$1(styles$m.actionList, isIconList && styles$m.modifiers.icons, className) }, props), children));
5515
5512
  };
5516
5513
  ActionList.displayName = 'ActionList';
5517
5514
 
5518
5515
  const ActionListGroup = (_a) => {
5519
5516
  var { children, className, isIconGroup } = _a, props = __rest$1(_a, ["children", "className", "isIconGroup"]);
5520
- return (React.createElement("div", Object.assign({ className: css(styles$m.actionListGroup, isIconGroup && styles$m.modifiers.icons, className) }, props), children));
5517
+ return (React.createElement("div", Object.assign({ className: css$1(styles$m.actionListGroup, isIconGroup && styles$m.modifiers.icons, className) }, props), children));
5521
5518
  };
5522
5519
  ActionListGroup.displayName = 'ActionListGroup';
5523
5520
 
5524
5521
  const ActionListItem = (_a) => {
5525
5522
  var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
5526
- return (React.createElement("div", Object.assign({ className: css(`${styles$m.actionList}__item`, className) }, props), children));
5523
+ return (React.createElement("div", Object.assign({ className: css$1(`${styles$m.actionList}__item`, className) }, props), children));
5527
5524
  };
5528
5525
  ActionListItem.displayName = 'ActionListItem';
5529
5526
 
@@ -5562,7 +5559,7 @@ const variantIcons = {
5562
5559
  const AlertIcon = (_a) => {
5563
5560
  var { variant, customIcon, className = '' } = _a, props = __rest$1(_a, ["variant", "customIcon", "className"]);
5564
5561
  const Icon = variantIcons[variant];
5565
- return Icon ? (React.createElement("div", Object.assign({}, props, { className: css(styles$l.alertIcon, className) }), customIcon || React.createElement(Icon, null))) : null;
5562
+ return Icon ? (React.createElement("div", Object.assign({}, props, { className: css$1(styles$l.alertIcon, className) }), customIcon || React.createElement(Icon, null))) : null;
5566
5563
  };
5567
5564
 
5568
5565
  const AlertContext = React.createContext(null);
@@ -5576,7 +5573,7 @@ const c_alert__title_max_lines = {
5576
5573
  const AlertToggleExpandButton = (_a) => {
5577
5574
  var { 'aria-label': ariaLabel = '', variantLabel, onToggleExpand, isExpanded = false } = _a, props = __rest$1(_a, ['aria-label', "variantLabel", "onToggleExpand", "isExpanded"]);
5578
5575
  const { title, variantLabel: alertVariantLabel } = React.useContext(AlertContext);
5579
- return (React.createElement(Button, Object.assign({ variant: ButtonVariant.plain, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": ariaLabel === '' ? `Toggle ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel }, props, { icon: React.createElement("span", { className: css(styles$l.alertToggleIcon) },
5576
+ return (React.createElement(Button, Object.assign({ variant: ButtonVariant.plain, onClick: onToggleExpand, "aria-expanded": isExpanded, "aria-label": ariaLabel === '' ? `Toggle ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel }, props, { icon: React.createElement("span", { className: css$1(styles$l.alertToggleIcon) },
5580
5577
  React.createElement(AngleRightIcon, { "aria-hidden": "true" })) })));
5581
5578
  };
5582
5579
  AlertToggleExpandButton.displayName = 'AlertToggleExpandButton';
@@ -5661,20 +5658,20 @@ const Alert = (_a) => {
5661
5658
  if (dismissed) {
5662
5659
  return null;
5663
5660
  }
5664
- const Title = (React.createElement(TitleComponent, Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css(styles$l.alertTitle, truncateTitle && styles$l.modifiers.truncate) }), getHeadingContent));
5665
- return (React.createElement("div", Object.assign({ ref: divRef, className: css(styles$l.alert, isInline && styles$l.modifiers.inline, isPlain && styles$l.modifiers.plain, isExpandable && styles$l.modifiers.expandable, isExpanded && styles$l.modifiers.expanded, styles$l.modifiers[variant], className) }, ouiaProps, (isLiveRegion && {
5661
+ const Title = (React.createElement(TitleComponent, Object.assign({}, (isTooltipVisible && { tabIndex: 0 }), { ref: titleRef, className: css$1(styles$l.alertTitle, truncateTitle && styles$l.modifiers.truncate) }), getHeadingContent));
5662
+ return (React.createElement("div", Object.assign({ ref: divRef, className: css$1(styles$l.alert, isInline && styles$l.modifiers.inline, isPlain && styles$l.modifiers.plain, isExpandable && styles$l.modifiers.expandable, isExpanded && styles$l.modifiers.expanded, styles$l.modifiers[variant], className) }, ouiaProps, (isLiveRegion && {
5666
5663
  'aria-live': 'polite',
5667
5664
  'aria-atomic': 'false'
5668
5665
  }), { onMouseEnter: myOnMouseEnter, onMouseLeave: myOnMouseLeave, id: id }, props),
5669
5666
  isExpandable && (React.createElement(AlertContext.Provider, { value: { title, variantLabel } },
5670
- React.createElement("div", { className: css(styles$l.alertToggle) },
5667
+ React.createElement("div", { className: css$1(styles$l.alertToggle) },
5671
5668
  React.createElement(AlertToggleExpandButton, { isExpanded: isExpanded, onToggleExpand: onToggleExpand, "aria-label": toggleAriaLabel })))),
5672
5669
  React.createElement(AlertIcon, { variant: variant, customIcon: customIcon }),
5673
5670
  isTooltipVisible ? (React.createElement(Tooltip, { content: getHeadingContent, position: tooltipPosition }, Title)) : (Title),
5674
5671
  actionClose && (React.createElement(AlertContext.Provider, { value: { title, variantLabel } },
5675
- React.createElement("div", { className: css(styles$l.alertAction) }, actionClose))),
5676
- children && (!isExpandable || (isExpandable && isExpanded)) && (React.createElement("div", { className: css(styles$l.alertDescription) }, children)),
5677
- actionLinks && React.createElement("div", { className: css(styles$l.alertActionGroup) }, actionLinks)));
5672
+ React.createElement("div", { className: css$1(styles$l.alertAction) }, actionClose))),
5673
+ children && (!isExpandable || (isExpandable && isExpanded)) && (React.createElement("div", { className: css$1(styles$l.alertDescription) }, children)),
5674
+ actionLinks && React.createElement("div", { className: css$1(styles$l.alertActionGroup) }, actionLinks)));
5678
5675
  };
5679
5676
  Alert.displayName = 'Alert';
5680
5677
 
@@ -5733,7 +5730,7 @@ const statusIcons$1 = {
5733
5730
  const FormControlIcon = (_a) => {
5734
5731
  var { status, customIcon, className } = _a, props = __rest$1(_a, ["status", "customIcon", "className"]);
5735
5732
  const StatusIcon = status && statusIcons$1[status];
5736
- return (React.createElement("span", Object.assign({ className: css(formStyles.formControlIcon, status && formStyles.modifiers.status, className) }, props), customIcon || React.createElement(StatusIcon, null)));
5733
+ return (React.createElement("span", Object.assign({ className: css$1(formStyles.formControlIcon, status && formStyles.modifiers.status, className) }, props), customIcon || React.createElement(StatusIcon, null)));
5737
5734
  };
5738
5735
 
5739
5736
  var TextInputTypes;
@@ -5822,9 +5819,9 @@ class TextInputBase extends React.Component {
5822
5819
  const ariaExpandedProps = expandedProps
5823
5820
  ? { 'aria-expanded': expandedProps === null || expandedProps === void 0 ? void 0 : expandedProps.isExpanded, 'aria-controls': expandedProps === null || expandedProps === void 0 ? void 0 : expandedProps.ariaControls, role: 'combobox' }
5824
5821
  : {};
5825
- return (React.createElement("span", { className: css(formStyles.formControl, readOnlyVariant && formStyles.modifiers.readonly, readOnlyVariant === 'plain' && formStyles.modifiers.plain, isDisabled && formStyles.modifiers.disabled, (isExpanded || (expandedProps === null || expandedProps === void 0 ? void 0 : expandedProps.isExpanded)) && formStyles.modifiers.expanded, customIcon && formStyles.modifiers.icon, hasStatusIcon && formStyles.modifiers[validated], className) },
5822
+ return (React.createElement("span", { className: css$1(formStyles.formControl, readOnlyVariant && formStyles.modifiers.readonly, readOnlyVariant === 'plain' && formStyles.modifiers.plain, isDisabled && formStyles.modifiers.disabled, (isExpanded || (expandedProps === null || expandedProps === void 0 ? void 0 : expandedProps.isExpanded)) && formStyles.modifiers.expanded, customIcon && formStyles.modifiers.icon, hasStatusIcon && formStyles.modifiers[validated], className) },
5826
5823
  React.createElement("input", Object.assign({}, props, { onFocus: this.onFocus, onBlur: this.onBlur, onChange: this.handleChange, type: type, value: this.sanitizeInputValue(value), "aria-invalid": props['aria-invalid'] ? props['aria-invalid'] : validated === ValidatedOptions.error }, ariaExpandedProps, { required: isRequired, disabled: isDisabled, readOnly: !!readOnlyVariant || readOnly, ref: innerRef || this.inputRef, placeholder: placeholder }, getOUIAProps(TextInput.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))),
5827
- (customIcon || hasStatusIcon) && (React.createElement("span", { className: css(formStyles.formControlUtilities) },
5824
+ (customIcon || hasStatusIcon) && (React.createElement("span", { className: css$1(formStyles.formControlUtilities) },
5828
5825
  customIcon && React.createElement(FormControlIcon, { customIcon: customIcon }),
5829
5826
  hasStatusIcon && React.createElement(FormControlIcon, { status: validated })))));
5830
5827
  }
@@ -6034,13 +6031,13 @@ class MenuBase extends React.Component {
6034
6031
  if (this.context) {
6035
6032
  this.setState({ disableHover: this.context.disableHover });
6036
6033
  }
6037
- if (canUseDOM) {
6034
+ if (canUseDOM && this.props.containsDrilldown) {
6038
6035
  window.addEventListener('transitionend', this.props.isRootMenu ? this.handleDrilldownTransition : null);
6039
6036
  }
6040
6037
  this.allowTabFirstItem();
6041
6038
  }
6042
6039
  componentWillUnmount() {
6043
- if (canUseDOM) {
6040
+ if (canUseDOM && this.props.containsDrilldown) {
6044
6041
  window.removeEventListener('transitionend', this.handleDrilldownTransition);
6045
6042
  }
6046
6043
  }
@@ -6087,7 +6084,7 @@ class MenuBase extends React.Component {
6087
6084
  }, noHorizontalArrowHandling: document.activeElement &&
6088
6085
  (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
6089
6086
  document.activeElement.tagName === 'INPUT'), noEnterHandling: true, noSpaceHandling: true })),
6090
- React.createElement("div", Object.assign({ id: id, className: css(menuStyles.menu, isPlain && menuStyles.modifiers.plain, isScrollable && menuStyles.modifiers.scrollable, containsFlyout && menuStyles.modifiers.flyout, isNavFlyout && 'pf-m-nav', containsDrilldown && menuStyles.modifiers.drilldown, _isMenuDrilledIn && menuStyles.modifiers.drilledIn, className), ref: this.menuRef }, getOUIAProps(Menu.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props), children)));
6087
+ React.createElement("div", Object.assign({ id: id, className: css$1(menuStyles.menu, isPlain && menuStyles.modifiers.plain, isScrollable && menuStyles.modifiers.scrollable, containsFlyout && menuStyles.modifiers.flyout, isNavFlyout && 'pf-m-nav', containsDrilldown && menuStyles.modifiers.drilldown, _isMenuDrilledIn && menuStyles.modifiers.drilledIn, className), ref: this.menuRef }, getOUIAProps(Menu.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props), children)));
6091
6088
  }
6092
6089
  }
6093
6090
  MenuBase.displayName = 'Menu';
@@ -6141,7 +6138,7 @@ const MenuContent = React.forwardRef((props, ref) => {
6141
6138
  }
6142
6139
  return ref || menuContentRef;
6143
6140
  };
6144
- return (React.createElement(MenuContext.Consumer, null, ({ menuId, onGetMenuHeight }) => (React.createElement("div", Object.assign({}, rest, { className: css(menuStyles.menuContent, props.className), ref: (el) => refCallback(el, menuId, onGetMenuHeight), style: Object.assign(Object.assign({}, (menuHeight && { [c_menu__content_Height.name]: menuHeight })), (maxMenuHeight && { [c_menu__content_MaxHeight.name]: maxMenuHeight })) }), children))));
6141
+ return (React.createElement(MenuContext.Consumer, null, ({ menuId, onGetMenuHeight }) => (React.createElement("div", Object.assign({}, rest, { className: css$1(menuStyles.menuContent, props.className), ref: (el) => refCallback(el, menuId, onGetMenuHeight), style: Object.assign(Object.assign({}, (menuHeight && { [c_menu__content_Height.name]: menuHeight })), (maxMenuHeight && { [c_menu__content_MaxHeight.name]: maxMenuHeight })) }), children))));
6145
6142
  });
6146
6143
  MenuContent.displayName = 'MenuContent';
6147
6144
 
@@ -6237,22 +6234,22 @@ class Checkbox extends React.Component {
6237
6234
  if ([false, true].includes(defaultChecked)) {
6238
6235
  checkedProps.defaultChecked = defaultChecked;
6239
6236
  }
6240
- const inputRendered = (React.createElement("input", Object.assign({}, props, { className: css(styles$k.checkInput, inputClassName), type: "checkbox", onChange: this.handleChange, "aria-invalid": !isValid, "aria-label": ariaLabel, disabled: isDisabled, required: isRequired, ref: (elem) => elem && (elem.indeterminate = isChecked === null) }, checkedProps, getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
6237
+ const inputRendered = (React.createElement("input", Object.assign({}, props, { className: css$1(styles$k.checkInput, inputClassName), type: "checkbox", onChange: this.handleChange, "aria-invalid": !isValid, "aria-label": ariaLabel, disabled: isDisabled, required: isRequired, ref: (elem) => elem && (elem.indeterminate = isChecked === null) }, checkedProps, getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
6241
6238
  const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
6242
6239
  const Label = wrapWithLabel ? 'span' : 'label';
6243
- const labelRendered = label ? (React.createElement(Label, { className: css(styles$k.checkLabel, isDisabled && styles$k.modifiers.disabled), htmlFor: !wrapWithLabel ? props.id : undefined },
6240
+ const labelRendered = label ? (React.createElement(Label, { className: css$1(styles$k.checkLabel, isDisabled && styles$k.modifiers.disabled), htmlFor: !wrapWithLabel ? props.id : undefined },
6244
6241
  label,
6245
- isRequired && (React.createElement("span", { className: css(styles$k.checkLabelRequired), "aria-hidden": "true" }, ASTERISK)))) : null;
6242
+ isRequired && (React.createElement("span", { className: css$1(styles$k.checkLabelRequired), "aria-hidden": "true" }, ASTERISK)))) : null;
6246
6243
  const Component = component !== null && component !== void 0 ? component : (wrapWithLabel ? 'label' : 'div');
6247
6244
  checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
6248
- return (React.createElement(Component, { className: css(styles$k.check, !label && styles$k.modifiers.standalone, className), htmlFor: wrapWithLabel ? props.id : undefined },
6245
+ return (React.createElement(Component, { className: css$1(styles$k.check, !label && styles$k.modifiers.standalone, className), htmlFor: wrapWithLabel ? props.id : undefined },
6249
6246
  labelPosition === 'start' ? (React.createElement(React.Fragment, null,
6250
6247
  labelRendered,
6251
6248
  inputRendered)) : (React.createElement(React.Fragment, null,
6252
6249
  inputRendered,
6253
6250
  labelRendered)),
6254
- description && React.createElement("span", { className: css(styles$k.checkDescription) }, description),
6255
- body && React.createElement("span", { className: css(styles$k.checkBody) }, body)));
6251
+ description && React.createElement("span", { className: css$1(styles$k.checkDescription) }, description),
6252
+ body && React.createElement("span", { className: css$1(styles$k.checkBody) }, body)));
6256
6253
  }
6257
6254
  }
6258
6255
  Checkbox.displayName = 'Checkbox';
@@ -6287,7 +6284,7 @@ const MenuItemActionBase = (_a) => {
6287
6284
  // event specified on the Menu
6288
6285
  onActionClick && onActionClick(event, itemId, actionId);
6289
6286
  };
6290
- return (React.createElement("div", Object.assign({ className: css(menuStyles.menuItemAction, isFavorited !== null && 'pf-m-favorite', isFavorited && menuStyles.modifiers.favorited, className) }, props),
6287
+ return (React.createElement("div", Object.assign({ className: css$1(menuStyles.menuItemAction, isFavorited !== null && 'pf-m-favorite', isFavorited && menuStyles.modifiers.favorited, className) }, props),
6291
6288
  React.createElement(Button, { "aria-label": ariaLabel, onClick: onClickButton, ref: innerRef, role: "menuitem", variant: "plain", tabIndex: -1, isDisabled: isDisabled || isDisabledContext, icon: icon === 'favorites' || isFavorited !== null ? React.createElement(StarIcon, { "aria-hidden": true }) : icon })));
6292
6289
  }))));
6293
6290
  };
@@ -6487,7 +6484,7 @@ const MenuItemBase = (_a) => {
6487
6484
  }, [isFocused]);
6488
6485
  const isSelectMenu = menuRole === 'listbox';
6489
6486
  const renderItem = (React.createElement(React.Fragment, null,
6490
- React.createElement(GenerateId, null, (randomId) => (React.createElement(Component, Object.assign({ id: id, tabIndex: -1, className: css(menuStyles.menuItem, getIsSelected() && !hasCheckbox && menuStyles.modifiers.selected, className), "aria-current": getAriaCurrent() }, (!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel }), (!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' }), (!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() }), { ref: innerRef }, (!hasCheckbox && {
6487
+ React.createElement(GenerateId, null, (randomId) => (React.createElement(Component, Object.assign({ id: id, tabIndex: -1, className: css$1(menuStyles.menuItem, getIsSelected() && !hasCheckbox && menuStyles.modifiers.selected, className), "aria-current": getAriaCurrent() }, (!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel }), (!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' }), (!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() }), { ref: innerRef }, (!hasCheckbox && {
6491
6488
  onClick: (event) => {
6492
6489
  if (!isAriaDisabled) {
6493
6490
  onItemSelect(event, onSelect);
@@ -6499,20 +6496,20 @@ const MenuItemBase = (_a) => {
6499
6496
  }
6500
6497
  }
6501
6498
  }), (hasCheckbox && { htmlFor: randomId }), additionalProps),
6502
- React.createElement("span", { className: css(menuStyles.menuItemMain) },
6503
- direction === 'up' && (React.createElement("span", { className: css(menuStyles.menuItemToggleIcon) },
6499
+ React.createElement("span", { className: css$1(menuStyles.menuItemMain) },
6500
+ direction === 'up' && (React.createElement("span", { className: css$1(menuStyles.menuItemToggleIcon) },
6504
6501
  React.createElement(AngleLeftIcon, { "aria-hidden": true }))),
6505
- icon && React.createElement("span", { className: css(menuStyles.menuItemIcon) }, icon),
6506
- hasCheckbox && (React.createElement("span", { className: css(menuStyles.menuItemCheck) },
6502
+ icon && React.createElement("span", { className: css$1(menuStyles.menuItemIcon) }, icon),
6503
+ hasCheckbox && (React.createElement("span", { className: css$1(menuStyles.menuItemCheck) },
6507
6504
  React.createElement(Checkbox, { id: randomId, component: "span", isChecked: isSelected || false, onChange: (event) => onItemSelect(event, onSelect), isDisabled: isDisabled, "aria-disabled": isAriaDisabled }))),
6508
- React.createElement("span", { className: css(menuStyles.menuItemText) }, children),
6509
- isExternalLink && (React.createElement("span", { className: css(menuStyles.menuItemExternalIcon) },
6505
+ React.createElement("span", { className: css$1(menuStyles.menuItemText) }, children),
6506
+ isExternalLink && (React.createElement("span", { className: css$1(menuStyles.menuItemExternalIcon) },
6510
6507
  React.createElement(ExternalLinkAltIcon$1, { "aria-hidden": true }))),
6511
- (flyoutMenu || direction === 'down') && (React.createElement("span", { className: css(menuStyles.menuItemToggleIcon) },
6508
+ (flyoutMenu || direction === 'down') && (React.createElement("span", { className: css$1(menuStyles.menuItemToggleIcon) },
6512
6509
  React.createElement(AngleRightIcon, { "aria-hidden": true }))),
6513
- getIsSelected() && (React.createElement("span", { className: css(menuStyles.menuItemSelectIcon) },
6510
+ getIsSelected() && (React.createElement("span", { className: css$1(menuStyles.menuItemSelectIcon) },
6514
6511
  React.createElement(CheckIcon, { "aria-hidden": true })))),
6515
- description && direction !== 'up' && (React.createElement("span", { className: css(menuStyles.menuItemDescription) },
6512
+ description && direction !== 'up' && (React.createElement("span", { className: css$1(menuStyles.menuItemDescription) },
6516
6513
  React.createElement("span", null, description)))))),
6517
6514
  flyoutVisible && (React.createElement(MenuContext.Provider, { value: { disableHover } },
6518
6515
  React.createElement(FlyoutContext.Provider, { value: { direction: flyoutXDirection } }, flyoutMenu))),
@@ -6520,7 +6517,7 @@ const MenuItemBase = (_a) => {
6520
6517
  React.createElement(MenuItemContext.Provider, { value: { itemId, isDisabled } },
6521
6518
  actions,
6522
6519
  isFavorited !== null && (React.createElement(MenuItemAction, { icon: "favorites", isFavorited: isFavorited, "aria-label": isFavorited ? 'starred' : 'not starred', onClick: (event) => onActionClick(event, itemId), tabIndex: -1, actionId: "fav" })))));
6523
- return (React.createElement("li", Object.assign({ className: css(menuStyles.menuListItem, isDisabled && menuStyles.modifiers.disabled, isAriaDisabled && menuStyles.modifiers.ariaDisabled, _isOnPath && menuStyles.modifiers.currentPath, isLoadButton && menuStyles.modifiers.load, isLoading && menuStyles.modifiers.loading, isFocused && 'pf-m-focus', isDanger && menuStyles.modifiers.danger, className), onMouseOver: () => {
6520
+ return (React.createElement("li", Object.assign({ className: css$1(menuStyles.menuListItem, isDisabled && menuStyles.modifiers.disabled, isAriaDisabled && menuStyles.modifiers.ariaDisabled, _isOnPath && menuStyles.modifiers.currentPath, isLoadButton && menuStyles.modifiers.load, isLoading && menuStyles.modifiers.loading, isFocused && 'pf-m-focus', isDanger && menuStyles.modifiers.danger, className), onMouseOver: () => {
6524
6521
  if (!isAriaDisabled) {
6525
6522
  onMouseOver();
6526
6523
  }
@@ -6532,7 +6529,7 @@ MenuItem.displayName = 'MenuItem';
6532
6529
  const MenuList = (_a) => {
6533
6530
  var { children = null, className, isAriaMultiselectable = false, 'aria-label': ariaLabel } = _a, props = __rest$1(_a, ["children", "className", "isAriaMultiselectable", 'aria-label']);
6534
6531
  const { role } = React.useContext(MenuContext);
6535
- return (React.createElement("ul", Object.assign({ role: role }, (role === 'listbox' && { 'aria-multiselectable': isAriaMultiselectable }), { className: css(menuStyles.menuList, className), "aria-label": ariaLabel }, props), children));
6532
+ return (React.createElement("ul", Object.assign({ role: role }, (role === 'listbox' && { 'aria-multiselectable': isAriaMultiselectable }), { className: css$1(menuStyles.menuList, className), "aria-label": ariaLabel }, props), children));
6536
6533
  };
6537
6534
  MenuList.displayName = 'MenuList';
6538
6535
 
@@ -6544,6 +6541,19 @@ const SelectBase = (_a) => {
6544
6541
  const toggleRef = typeof toggle === 'function' || (typeof toggle !== 'function' && !toggle.toggleRef)
6545
6542
  ? localToggleRef
6546
6543
  : toggle === null || toggle === void 0 ? void 0 : toggle.toggleRef;
6544
+ const prevIsOpen = React__default.useRef(isOpen);
6545
+ React__default.useEffect(() => {
6546
+ // menu was opened, focus on first menu item
6547
+ if (prevIsOpen.current === false && isOpen === true && shouldFocusFirstItemOnOpen) {
6548
+ setTimeout(() => {
6549
+ var _a;
6550
+ const firstElement = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('li button:not(:disabled),li input:not(:disabled)');
6551
+ firstElement && firstElement.focus();
6552
+ }, 0);
6553
+ }
6554
+ prevIsOpen.current = isOpen;
6555
+ // eslint-disable-next-line react-hooks/exhaustive-deps
6556
+ }, [isOpen]);
6547
6557
  React__default.useEffect(() => {
6548
6558
  const handleMenuKeys = (event) => {
6549
6559
  var _a, _b, _c;
@@ -6559,18 +6569,10 @@ const SelectBase = (_a) => {
6559
6569
  }
6560
6570
  };
6561
6571
  const handleClick = (event) => {
6562
- var _a, _b, _c;
6563
- // toggle was opened, focus on first menu item
6564
- if (isOpen && shouldFocusFirstItemOnOpen && ((_a = toggleRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
6565
- setTimeout(() => {
6566
- var _a;
6567
- const firstElement = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('li button:not(:disabled),li input:not(:disabled)');
6568
- firstElement && firstElement.focus();
6569
- }, 0);
6570
- }
6572
+ var _a, _b;
6571
6573
  // If the event is not on the toggle and onOpenChange callback is provided, close the menu
6572
- if (isOpen && onOpenChange && !((_b = toggleRef === null || toggleRef === void 0 ? void 0 : toggleRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
6573
- if (isOpen && !((_c = menuRef.current) === null || _c === void 0 ? void 0 : _c.contains(event.target))) {
6574
+ if (isOpen && onOpenChange && !((_a = toggleRef === null || toggleRef === void 0 ? void 0 : toggleRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
6575
+ if (isOpen && !((_b = menuRef.current) === null || _b === void 0 ? void 0 : _b.contains(event.target))) {
6574
6576
  onOpenChange(false);
6575
6577
  }
6576
6578
  }
@@ -6582,7 +6584,7 @@ const SelectBase = (_a) => {
6582
6584
  window.removeEventListener('click', handleClick);
6583
6585
  };
6584
6586
  }, [isOpen, menuRef, toggleRef, onOpenChange, onOpenChangeKeys]);
6585
- const menu = (React__default.createElement(Menu, Object.assign({ role: role, className: css(className), ref: menuRef, onSelect: (event, value) => {
6587
+ const menu = (React__default.createElement(Menu, Object.assign({ role: role, className: css$1(className), ref: menuRef, onSelect: (event, value) => {
6586
6588
  onSelect && onSelect(event, value);
6587
6589
  shouldFocusToggleOnSelect && toggleRef.current.focus();
6588
6590
  }, isPlain: isPlain, selected: selected, isScrollable: isScrollable !== null && isScrollable !== void 0 ? isScrollable : (menuHeight !== undefined || maxMenuHeight !== undefined) }, getOUIAProps(Select.displayName, props.ouiaId !== undefined ? props.ouiaId : getDefaultOUIAId(Select.displayName), props.ouiaSafe !== undefined ? props.ouiaSafe : true), props),
@@ -6594,13 +6596,13 @@ Select.displayName = 'Select';
6594
6596
 
6595
6597
  const SelectList = (_a) => {
6596
6598
  var { children, className, isAriaMultiselectable = false } = _a, props = __rest$1(_a, ["children", "className", "isAriaMultiselectable"]);
6597
- return (React__default.createElement(MenuList, Object.assign({ isAriaMultiselectable: isAriaMultiselectable, className: css(className) }, props), children));
6599
+ return (React__default.createElement(MenuList, Object.assign({ isAriaMultiselectable: isAriaMultiselectable, className: css$1(className) }, props), children));
6598
6600
  };
6599
6601
  SelectList.displayName = 'SelectList';
6600
6602
 
6601
6603
  const SelectOptionBase = (_a) => {
6602
6604
  var { children, className, innerRef, value } = _a, props = __rest$1(_a, ["children", "className", "innerRef", "value"]);
6603
- return (React__default.createElement(MenuItem, Object.assign({ itemId: value, ref: innerRef, className: css(className) }, props), children));
6605
+ return (React__default.createElement(MenuItem, Object.assign({ itemId: value, ref: innerRef, className: css$1(className) }, props), children));
6604
6606
  };
6605
6607
  const SelectOption = React__default.forwardRef((props, ref) => (React__default.createElement(SelectOptionBase, Object.assign({}, props, { innerRef: ref }))));
6606
6608
  SelectOption.displayName = 'SelectOption';
@@ -6654,6 +6656,11 @@ var MenuToggleStatus;
6654
6656
  MenuToggleStatus["danger"] = "danger";
6655
6657
  MenuToggleStatus["warning"] = "warning";
6656
6658
  })(MenuToggleStatus || (MenuToggleStatus = {}));
6659
+ var MenuToggleSize;
6660
+ (function (MenuToggleSize) {
6661
+ MenuToggleSize["default"] = "default";
6662
+ MenuToggleSize["sm"] = "sm";
6663
+ })(MenuToggleSize || (MenuToggleSize = {}));
6657
6664
  class MenuToggleBase extends React.Component {
6658
6665
  constructor() {
6659
6666
  super(...arguments);
@@ -6663,7 +6670,7 @@ class MenuToggleBase extends React.Component {
6663
6670
  };
6664
6671
  }
6665
6672
  render() {
6666
- const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, splitButtonOptions, variant, status, statusIcon, innerRef, onClick, 'aria-label': ariaLabel, ouiaId, ouiaSafe } = _a, otherProps = __rest$1(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "isFullWidth", "splitButtonOptions", "variant", "status", "statusIcon", "innerRef", "onClick", 'aria-label', "ouiaId", "ouiaSafe"]);
6673
+ const _a = this.props, { children, className, icon, badge, isExpanded, isDisabled, isFullHeight, isFullWidth, splitButtonOptions, variant, status, statusIcon, innerRef, onClick, 'aria-label': ariaLabel, ouiaId, ouiaSafe, size } = _a, otherProps = __rest$1(_a, ["children", "className", "icon", "badge", "isExpanded", "isDisabled", "isFullHeight", "isFullWidth", "splitButtonOptions", "variant", "status", "statusIcon", "innerRef", "onClick", 'aria-label', "ouiaId", "ouiaSafe", "size"]);
6667
6674
  const isPlain = variant === 'plain';
6668
6675
  const isPlainText = variant === 'plainText';
6669
6676
  const isTypeahead = variant === 'typeahead';
@@ -6682,28 +6689,28 @@ class MenuToggleBase extends React.Component {
6682
6689
  break;
6683
6690
  }
6684
6691
  }
6685
- const toggleControls = (React.createElement("span", { className: css(styles$j.menuToggleControls) },
6686
- status !== undefined && React.createElement("span", { className: css(styles$j.menuToggleStatusIcon) }, _statusIcon),
6687
- React.createElement("span", { className: css(styles$j.menuToggleToggleIcon) },
6692
+ const toggleControls = (React.createElement("span", { className: css$1(styles$j.menuToggleControls) },
6693
+ status !== undefined && React.createElement("span", { className: css$1(styles$j.menuToggleStatusIcon) }, _statusIcon),
6694
+ React.createElement("span", { className: css$1(styles$j.menuToggleToggleIcon) },
6688
6695
  React.createElement(CaretDownIcon, { "aria-hidden": true }))));
6689
6696
  const content = (React.createElement(React.Fragment, null,
6690
- icon && React.createElement("span", { className: css(styles$j.menuToggleIcon) }, icon),
6691
- isTypeahead ? children : children && React.createElement("span", { className: css(styles$j.menuToggleText) }, children),
6692
- React.isValidElement(badge) && React.createElement("span", { className: css(styles$j.menuToggleCount) }, badge),
6693
- isTypeahead ? (React.createElement("button", Object.assign({ type: "button", className: css(styles$j.menuToggleButton), "aria-expanded": isExpanded, onClick: onClick, "aria-label": ariaLabel || 'Menu toggle', tabIndex: -1 }, ouiaProps), toggleControls)) : (!isPlain && toggleControls)));
6694
- const commonStyles = css(styles$j.menuToggle, isExpanded && styles$j.modifiers.expanded, variant === 'primary' && styles$j.modifiers.primary, variant === 'secondary' && styles$j.modifiers.secondary, status && styles$j.modifiers[status], (isPlain || isPlainText) && styles$j.modifiers.plain, isPlainText && 'pf-m-text', isFullHeight && styles$j.modifiers.fullHeight, isFullWidth && styles$j.modifiers.fullWidth, isDisabled && styles$j.modifiers.disabled, className);
6697
+ icon && React.createElement("span", { className: css$1(styles$j.menuToggleIcon) }, icon),
6698
+ isTypeahead ? children : children && React.createElement("span", { className: css$1(styles$j.menuToggleText) }, children),
6699
+ React.isValidElement(badge) && React.createElement("span", { className: css$1(styles$j.menuToggleCount) }, badge),
6700
+ isTypeahead ? (React.createElement("button", Object.assign({ type: "button", className: css$1(styles$j.menuToggleButton), "aria-expanded": isExpanded, onClick: onClick, "aria-label": ariaLabel || 'Menu toggle', tabIndex: -1 }, ouiaProps), toggleControls)) : (!isPlain && toggleControls)));
6701
+ const commonStyles = css$1(styles$j.menuToggle, isExpanded && styles$j.modifiers.expanded, variant === 'primary' && styles$j.modifiers.primary, variant === 'secondary' && styles$j.modifiers.secondary, status && styles$j.modifiers[status], (isPlain || isPlainText) && styles$j.modifiers.plain, isPlainText && 'pf-m-text', isFullHeight && styles$j.modifiers.fullHeight, isFullWidth && styles$j.modifiers.fullWidth, isDisabled && styles$j.modifiers.disabled, size === MenuToggleSize.sm && styles$j.modifiers.small, className);
6695
6702
  const componentProps = Object.assign(Object.assign({ children: content }, (isDisabled && { disabled: true })), otherProps);
6696
6703
  if (isTypeahead) {
6697
- return (React.createElement("div", Object.assign({ ref: innerRef, className: css(commonStyles, styles$j.modifiers.typeahead) }, componentProps)));
6704
+ return (React.createElement("div", Object.assign({ ref: innerRef, className: css$1(commonStyles, styles$j.modifiers.typeahead) }, componentProps)));
6698
6705
  }
6699
6706
  if (splitButtonOptions) {
6700
- return (React.createElement("div", { ref: innerRef, className: css(commonStyles, styles$j.modifiers.splitButton, (splitButtonOptions === null || splitButtonOptions === void 0 ? void 0 : splitButtonOptions.variant) === 'action' && styles$j.modifiers.action) }, splitButtonOptions === null || splitButtonOptions === void 0 ? void 0 :
6707
+ return (React.createElement("div", { ref: innerRef, className: css$1(commonStyles, styles$j.modifiers.splitButton, (splitButtonOptions === null || splitButtonOptions === void 0 ? void 0 : splitButtonOptions.variant) === 'action' && styles$j.modifiers.action) }, splitButtonOptions === null || splitButtonOptions === void 0 ? void 0 :
6701
6708
  splitButtonOptions.items,
6702
- React.createElement("button", Object.assign({ className: css(styles$j.menuToggleButton, children && styles$j.modifiers.text), type: "button", "aria-expanded": isExpanded, "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick }, otherProps, ouiaProps),
6703
- children && React.createElement("span", { className: css(styles$j.menuToggleText) }, children),
6709
+ React.createElement("button", Object.assign({ className: css$1(styles$j.menuToggleButton, children && styles$j.modifiers.text), type: "button", "aria-expanded": isExpanded, "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick }, otherProps, ouiaProps),
6710
+ children && React.createElement("span", { className: css$1(styles$j.menuToggleText) }, children),
6704
6711
  toggleControls)));
6705
6712
  }
6706
- return (React.createElement("button", Object.assign({ className: css(commonStyles), type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, ref: innerRef, disabled: isDisabled, onClick: onClick }, componentProps, ouiaProps)));
6713
+ return (React.createElement("button", Object.assign({ className: css$1(commonStyles), type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, ref: innerRef, disabled: isDisabled, onClick: onClick }, componentProps, ouiaProps)));
6707
6714
  }
6708
6715
  }
6709
6716
  MenuToggleBase.defaultProps = {
@@ -6712,6 +6719,7 @@ MenuToggleBase.defaultProps = {
6712
6719
  isDisabled: false,
6713
6720
  isFullWidth: false,
6714
6721
  isFullHeight: false,
6722
+ size: 'default',
6715
6723
  ouiaSafe: true
6716
6724
  };
6717
6725
  const MenuToggle = React.forwardRef((props, ref) => (React.createElement(MenuToggleBase, Object.assign({ innerRef: ref }, props))));
@@ -6733,7 +6741,7 @@ const InputGroupBase = (_a) => {
6733
6741
  var { className, children, innerRef } = _a, props = __rest$1(_a, ["className", "children", "innerRef"]);
6734
6742
  const ref = React.useRef(null);
6735
6743
  const inputGroupRef = innerRef || ref;
6736
- return (React.createElement("div", Object.assign({ ref: inputGroupRef, className: css(styles$i.inputGroup, className) }, props), children));
6744
+ return (React.createElement("div", Object.assign({ ref: inputGroupRef, className: css$1(styles$i.inputGroup, className) }, props), children));
6737
6745
  };
6738
6746
  InputGroupBase.displayName = 'InputGroupBase';
6739
6747
  const InputGroup = React.forwardRef((props, ref) => (React.createElement(InputGroupBase, Object.assign({ innerRef: ref }, props))));
@@ -6741,7 +6749,7 @@ InputGroup.displayName = 'InputGroup';
6741
6749
 
6742
6750
  const InputGroupItem = (_a) => {
6743
6751
  var { className, children, isFill = false, isBox = false, isPlain, isDisabled } = _a, props = __rest$1(_a, ["className", "children", "isFill", "isBox", "isPlain", "isDisabled"]);
6744
- return (React.createElement("div", Object.assign({ className: css(styles$i.inputGroupItem, isFill && styles$i.modifiers.fill, isBox && styles$i.modifiers.box, isPlain && styles$i.modifiers.plain, isDisabled && styles$i.modifiers.disabled, className) }, props), children));
6752
+ return (React.createElement("div", Object.assign({ className: css$1(styles$i.inputGroupItem, isFill && styles$i.modifiers.fill, isBox && styles$i.modifiers.box, isPlain && styles$i.modifiers.plain, isDisabled && styles$i.modifiers.disabled, className) }, props), children));
6745
6753
  };
6746
6754
  InputGroupItem.displayName = 'InputGroupItem';
6747
6755
 
@@ -6750,6 +6758,7 @@ var styles$h = {
6750
6758
  "card": "pf-v6-c-card",
6751
6759
  "cardActions": "pf-v6-c-card__actions",
6752
6760
  "cardBody": "pf-v6-c-card__body",
6761
+ "cardClickableAction": "pf-v6-c-card__clickable-action",
6753
6762
  "cardExpandableContent": "pf-v6-c-card__expandable-content",
6754
6763
  "cardFooter": "pf-v6-c-card__footer",
6755
6764
  "cardHeader": "pf-v6-c-card__header",
@@ -6767,8 +6776,8 @@ var styles$h = {
6767
6776
  "modifiers": {
6768
6777
  "selectable": "pf-m-selectable",
6769
6778
  "clickable": "pf-m-clickable",
6770
- "selected": "pf-m-selected",
6771
6779
  "current": "pf-m-current",
6780
+ "selected": "pf-m-selected",
6772
6781
  "disabled": "pf-m-disabled",
6773
6782
  "compact": "pf-m-compact",
6774
6783
  "displayLg": "pf-m-display-lg",
@@ -6806,13 +6815,13 @@ const Card = (_a) => {
6806
6815
  }
6807
6816
  const getSelectableModifiers = () => {
6808
6817
  if (isSelectable && isClickable) {
6809
- return css(styles$h.modifiers.selectable, styles$h.modifiers.clickable, (isSelected || isClicked) && styles$h.modifiers.current);
6818
+ return css$1(styles$h.modifiers.selectable, styles$h.modifiers.clickable, (isSelected || isClicked) && styles$h.modifiers.current);
6810
6819
  }
6811
6820
  if (isSelectable) {
6812
- return css(styles$h.modifiers.selectable, isSelected && styles$h.modifiers.selected);
6821
+ return css$1(styles$h.modifiers.selectable, isSelected && styles$h.modifiers.selected);
6813
6822
  }
6814
6823
  if (isClickable) {
6815
- return css(styles$h.modifiers.clickable, isClicked && styles$h.modifiers.current);
6824
+ return css$1(styles$h.modifiers.clickable, isClicked && styles$h.modifiers.current);
6816
6825
  }
6817
6826
  return '';
6818
6827
  };
@@ -6825,21 +6834,21 @@ const Card = (_a) => {
6825
6834
  isClicked,
6826
6835
  isDisabled
6827
6836
  } },
6828
- React.createElement(Component, Object.assign({ id: id, className: css(styles$h.card, isCompact && styles$h.modifiers.compact, isExpanded && styles$h.modifiers.expanded, isLarge && styles$h.modifiers.displayLg, isFullHeight && styles$h.modifiers.fullHeight, isPlain && styles$h.modifiers.plain, variant === 'secondary' && styles$h.modifiers.secondary, getSelectableModifiers(), isDisabled && styles$h.modifiers.disabled, className) }, props, ouiaProps), children)));
6837
+ React.createElement(Component, Object.assign({ id: id, className: css$1(styles$h.card, isCompact && styles$h.modifiers.compact, isExpanded && styles$h.modifiers.expanded, isLarge && styles$h.modifiers.displayLg, isFullHeight && styles$h.modifiers.fullHeight, isPlain && styles$h.modifiers.plain, variant === 'secondary' && styles$h.modifiers.secondary, getSelectableModifiers(), isDisabled && styles$h.modifiers.disabled, className) }, props, ouiaProps), children)));
6829
6838
  };
6830
6839
  Card.displayName = 'Card';
6831
6840
 
6832
6841
  const CardBody = (_a) => {
6833
6842
  var { children, className, component = 'div', isFilled = true } = _a, props = __rest$1(_a, ["children", "className", "component", "isFilled"]);
6834
6843
  const Component = component;
6835
- return (React.createElement(Component, Object.assign({ className: css(styles$h.cardBody, !isFilled && styles$h.modifiers.noFill, className) }, props), children));
6844
+ return (React.createElement(Component, Object.assign({ className: css$1(styles$h.cardBody, !isFilled && styles$h.modifiers.noFill, className) }, props), children));
6836
6845
  };
6837
6846
  CardBody.displayName = 'CardBody';
6838
6847
 
6839
6848
  const CardFooter = (_a) => {
6840
6849
  var { children, className, component = 'div' } = _a, props = __rest$1(_a, ["children", "className", "component"]);
6841
6850
  const Component = component;
6842
- return (React.createElement(Component, Object.assign({ className: css(styles$h.cardFooter, className) }, props), children));
6851
+ return (React.createElement(Component, Object.assign({ className: css$1(styles$h.cardFooter, className) }, props), children));
6843
6852
  };
6844
6853
  CardFooter.displayName = 'CardFooter';
6845
6854
 
@@ -6848,26 +6857,26 @@ const CardTitle = (_a) => {
6848
6857
  const { cardId } = React.useContext(CardContext);
6849
6858
  const Component = component;
6850
6859
  const titleId = cardId ? `${cardId}-title` : '';
6851
- return (React.createElement("div", { className: css(styles$h.cardTitle) },
6852
- React.createElement(Component, Object.assign({ className: css(styles$h.cardTitleText, className), id: titleId || undefined }, props), children)));
6860
+ return (React.createElement("div", { className: css$1(styles$h.cardTitle) },
6861
+ React.createElement(Component, Object.assign({ className: css$1(styles$h.cardTitleText, className), id: titleId || undefined }, props), children)));
6853
6862
  };
6854
6863
  CardTitle.displayName = 'CardTitle';
6855
6864
 
6856
6865
  const CardHeaderMain = (_a) => {
6857
6866
  var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
6858
- return (React.createElement("div", Object.assign({ className: css(styles$h.cardHeaderMain, className) }, props), children));
6867
+ return (React.createElement("div", Object.assign({ className: css$1(styles$h.cardHeaderMain, className) }, props), children));
6859
6868
  };
6860
6869
  CardHeaderMain.displayName = 'CardHeaderMain';
6861
6870
 
6862
6871
  const CardActions = (_a) => {
6863
6872
  var { children, className, hasNoOffset = false } = _a, props = __rest$1(_a, ["children", "className", "hasNoOffset"]);
6864
- return (React.createElement("div", Object.assign({ className: css(styles$h.cardActions, hasNoOffset && styles$h.modifiers.noOffset, className) }, props), children));
6873
+ return (React.createElement("div", Object.assign({ className: css$1(styles$h.cardActions, hasNoOffset && styles$h.modifiers.noOffset, className) }, props), children));
6865
6874
  };
6866
6875
  CardActions.displayName = 'CardActions';
6867
6876
 
6868
6877
  const CardSelectableActions = (_a) => {
6869
6878
  var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
6870
- return (React.createElement("div", Object.assign({ className: css(styles$h.cardSelectableActions, className) }, props), children));
6879
+ return (React.createElement("div", Object.assign({ className: css$1(styles$h.cardSelectableActions, className) }, props), children));
6871
6880
  };
6872
6881
  CardSelectableActions.displayName = 'CardSelectableActions';
6873
6882
 
@@ -6905,19 +6914,19 @@ class Radio extends React.Component {
6905
6914
  // eslint-disable-next-line no-console
6906
6915
  console.error('Radio:', 'id is required to make input accessible');
6907
6916
  }
6908
- const inputRendered = (React.createElement("input", Object.assign({}, props, { className: css(styles$g.radioInput, inputClassName), type: "radio", onChange: this.handleChange, "aria-invalid": !isValid, disabled: isDisabled, checked: checked || isChecked }, (checked === undefined && { defaultChecked }), (!label && { 'aria-label': ariaLabel }), getOUIAProps(Radio.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
6917
+ const inputRendered = (React.createElement("input", Object.assign({}, props, { className: css$1(styles$g.radioInput, inputClassName), type: "radio", onChange: this.handleChange, "aria-invalid": !isValid, disabled: isDisabled, checked: checked || isChecked }, (checked === undefined && { defaultChecked }), (!label && { 'aria-label': ariaLabel }), getOUIAProps(Radio.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
6909
6918
  const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
6910
6919
  const Label = wrapWithLabel ? 'span' : 'label';
6911
- const labelRendered = label ? (React.createElement(Label, { className: css(styles$g.radioLabel, isDisabled && styles$g.modifiers.disabled), htmlFor: !wrapWithLabel ? props.id : undefined }, label)) : null;
6920
+ const labelRendered = label ? (React.createElement(Label, { className: css$1(styles$g.radioLabel, isDisabled && styles$g.modifiers.disabled), htmlFor: !wrapWithLabel ? props.id : undefined }, label)) : null;
6912
6921
  const Component = component !== null && component !== void 0 ? component : (wrapWithLabel ? 'label' : 'div');
6913
- return (React.createElement(Component, { className: css(styles$g.radio, !label && styles$g.modifiers.standalone, className), htmlFor: wrapWithLabel ? props.id : undefined },
6922
+ return (React.createElement(Component, { className: css$1(styles$g.radio, !label && styles$g.modifiers.standalone, className), htmlFor: wrapWithLabel ? props.id : undefined },
6914
6923
  labelPosition === 'start' ? (React.createElement(React.Fragment, null,
6915
6924
  labelRendered,
6916
6925
  inputRendered)) : (React.createElement(React.Fragment, null,
6917
6926
  inputRendered,
6918
6927
  labelRendered)),
6919
- description && React.createElement("span", { className: css(styles$g.radioDescription) }, description),
6920
- body && React.createElement("span", { className: css(styles$g.radioBody) }, body)));
6928
+ description && React.createElement("span", { className: css$1(styles$g.radioDescription) }, description),
6929
+ body && React.createElement("span", { className: css$1(styles$g.radioBody) }, body)));
6921
6930
  }
6922
6931
  }
6923
6932
  Radio.displayName = 'Radio';
@@ -6931,10 +6940,10 @@ Radio.defaultProps = {
6931
6940
  const CardHeader = (_a) => {
6932
6941
  var { children, className, actions, selectableActions, id, onExpand, toggleButtonProps, isToggleRightAligned } = _a, props = __rest$1(_a, ["children", "className", "actions", "selectableActions", "id", "onExpand", "toggleButtonProps", "isToggleRightAligned"]);
6933
6942
  return (React.createElement(CardContext.Consumer, null, ({ cardId, isClickable, isSelectable, isSelected, isClicked, isDisabled: isCardDisabled }) => {
6934
- const cardHeaderToggle = (React.createElement("div", { className: css(styles$h.cardHeaderToggle) },
6943
+ const cardHeaderToggle = (React.createElement("div", { className: css$1(styles$h.cardHeaderToggle) },
6935
6944
  React.createElement(Button, Object.assign({ variant: "plain", type: "button", onClick: (evt) => {
6936
6945
  onExpand(evt, cardId);
6937
- } }, toggleButtonProps, { icon: React.createElement("span", { className: css(styles$h.cardHeaderToggleIcon) },
6946
+ } }, toggleButtonProps, { icon: React.createElement("span", { className: css$1(styles$h.cardHeaderToggleIcon) },
6938
6947
  React.createElement(AngleRightIcon, { "aria-hidden": "true" })) }))));
6939
6948
  const isClickableOrSelectableOnly = (isClickable && !isSelectable) || (isSelectable && !isClickable);
6940
6949
  if ((actions === null || actions === void 0 ? void 0 : actions.actions) && isClickableOrSelectableOnly) {
@@ -6970,7 +6979,7 @@ const CardHeader = (_a) => {
6970
6979
  }
6971
6980
  return baseProps;
6972
6981
  };
6973
- return (React.createElement("div", Object.assign({ className: css(styles$h.cardHeader, isToggleRightAligned && styles$h.modifiers.toggleRight, className), id: id }, props),
6982
+ return (React.createElement("div", Object.assign({ className: css$1(styles$h.cardHeader, isToggleRightAligned && styles$h.modifiers.toggleRight, className), id: id }, props),
6974
6983
  onExpand && !isToggleRightAligned && cardHeaderToggle,
6975
6984
  (actions || (selectableActions && (isClickable || isSelectable))) && (React.createElement(CardActions, { className: actions === null || actions === void 0 ? void 0 : actions.className, hasNoOffset: (actions === null || actions === void 0 ? void 0 : actions.hasNoOffset) || (selectableActions === null || selectableActions === void 0 ? void 0 : selectableActions.hasNoOffset) }, actions === null || actions === void 0 ? void 0 :
6976
6985
  actions.actions,
@@ -6992,10 +7001,10 @@ var styles$f = {
6992
7001
 
6993
7002
  const CodeBlock = (_a) => {
6994
7003
  var { children = null, className, actions = null } = _a, props = __rest$1(_a, ["children", "className", "actions"]);
6995
- return (React.createElement("div", Object.assign({ className: css(styles$f.codeBlock, className) }, props),
6996
- actions && (React.createElement("div", { className: css(styles$f.codeBlockHeader) },
6997
- React.createElement("div", { className: css(styles$f.codeBlockActions) }, actions))),
6998
- React.createElement("div", { className: css(styles$f.codeBlockContent) }, children)));
7004
+ return (React.createElement("div", Object.assign({ className: css$1(styles$f.codeBlock, className) }, props),
7005
+ actions && (React.createElement("div", { className: css$1(styles$f.codeBlockHeader) },
7006
+ React.createElement("div", { className: css$1(styles$f.codeBlockActions) }, actions))),
7007
+ React.createElement("div", { className: css$1(styles$f.codeBlockContent) }, children)));
6999
7008
  };
7000
7009
  CodeBlock.displayName = 'CodeBlock';
7001
7010
 
@@ -7047,7 +7056,7 @@ const Content = (_a) => {
7047
7056
  const Component = wrappingComponent;
7048
7057
  const ouiaProps = useOUIAProps(Content.displayName, ouiaId, ouiaSafe);
7049
7058
  const isList = ['ul', 'ol', 'dl'].includes(wrappingComponent);
7050
- return (React.createElement(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css(componentStyles[wrappingComponent], isList && isPlainList && styles$v.modifiers.plain, isVisitedLink && styles$v.modifiers.visited, className) }), children));
7059
+ return (React.createElement(Component, Object.assign({}, ouiaProps, props, { "data-pf-content": true, className: css$1(componentStyles[wrappingComponent], isList && isPlainList && styles$v.modifiers.plain, isVisitedLink && styles$v.modifiers.visited, className) }), children));
7051
7060
  };
7052
7061
  Content.displayName = 'Content';
7053
7062
 
@@ -7089,33 +7098,33 @@ const PopoverContext = React.createContext({});
7089
7098
 
7090
7099
  const PopoverContent = (_a) => {
7091
7100
  var { className = null, children } = _a, props = __rest$1(_a, ["className", "children"]);
7092
- return (React.createElement("div", Object.assign({ className: css(styles$e.popoverContent, className) }, props), children));
7101
+ return (React.createElement("div", Object.assign({ className: css$1(styles$e.popoverContent, className) }, props), children));
7093
7102
  };
7094
7103
  PopoverContent.displayName = 'PopoverContent';
7095
7104
 
7096
7105
  const PopoverBody = (_a) => {
7097
7106
  var { children, id, className } = _a, props = __rest$1(_a, ["children", "id", "className"]);
7098
- return (React.createElement("div", Object.assign({ className: css(styles$e.popoverBody, className), id: id }, props), children));
7107
+ return (React.createElement("div", Object.assign({ className: css$1(styles$e.popoverBody, className), id: id }, props), children));
7099
7108
  };
7100
7109
  PopoverBody.displayName = 'PopoverBody';
7101
7110
 
7102
7111
  const PopoverHeaderIcon = (_a) => {
7103
7112
  var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
7104
- return (React.createElement("span", Object.assign({ className: css(styles$e.popoverTitleIcon, className) }, props), children));
7113
+ return (React.createElement("span", Object.assign({ className: css$1(styles$e.popoverTitleIcon, className) }, props), children));
7105
7114
  };
7106
7115
  PopoverHeaderIcon.displayName = 'PopoverHeaderIcon';
7107
7116
 
7108
7117
  const PopoverHeaderText = (_a) => {
7109
7118
  var { children, className, headingLevel } = _a, props = __rest$1(_a, ["children", "className", "headingLevel"]);
7110
7119
  const HeadingLevel = headingLevel;
7111
- return (React.createElement(HeadingLevel, Object.assign({ className: css(styles$e.popoverTitleText, className) }, props), children));
7120
+ return (React.createElement(HeadingLevel, Object.assign({ className: css$1(styles$e.popoverTitleText, className) }, props), children));
7112
7121
  };
7113
7122
  PopoverHeaderText.displayName = 'PopoverHeaderText';
7114
7123
 
7115
7124
  const PopoverHeader = (_a) => {
7116
7125
  var { children, icon, className, titleHeadingLevel = 'h6', alertSeverityVariant, id, alertSeverityScreenReaderText } = _a, props = __rest$1(_a, ["children", "icon", "className", "titleHeadingLevel", "alertSeverityVariant", "id", "alertSeverityScreenReaderText"]);
7117
- return (React.createElement("header", Object.assign({ className: css(styles$e.popoverHeader, className) }, props),
7118
- React.createElement("div", { className: css(styles$e.popoverTitle), id: id },
7126
+ return (React.createElement("header", Object.assign({ className: css$1(styles$e.popoverHeader, className) }, props),
7127
+ React.createElement("div", { className: css$1(styles$e.popoverTitle), id: id },
7119
7128
  icon && React.createElement(PopoverHeaderIcon, null, icon),
7120
7129
  React.createElement(PopoverHeaderText, { headingLevel: titleHeadingLevel },
7121
7130
  alertSeverityVariant && alertSeverityScreenReaderText && (React.createElement("span", { className: "pf-v6-screen-reader" }, alertSeverityScreenReaderText)),
@@ -7125,20 +7134,20 @@ PopoverHeader.displayName = 'PopoverHeader';
7125
7134
 
7126
7135
  const PopoverFooter = (_a) => {
7127
7136
  var { children, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
7128
- return (React.createElement("footer", Object.assign({ className: css(styles$e.popoverFooter, className) }, props), children));
7137
+ return (React.createElement("footer", Object.assign({ className: css$1(styles$e.popoverFooter, className) }, props), children));
7129
7138
  };
7130
7139
  PopoverFooter.displayName = 'PopoverFooter';
7131
7140
 
7132
7141
  const PopoverCloseButton = (_a) => {
7133
7142
  var { onClose = () => undefined } = _a, props = __rest$1(_a, ["onClose"]);
7134
- return (React.createElement("div", { className: css(styles$e.popoverClose) },
7143
+ return (React.createElement("div", { className: css$1(styles$e.popoverClose) },
7135
7144
  React.createElement(Button, Object.assign({ onClick: onClose, variant: "plain", "aria-label": true }, props, { style: { pointerEvents: 'auto' }, icon: React.createElement(TimesIcon, null) }))));
7136
7145
  };
7137
7146
  PopoverCloseButton.displayName = 'PopoverCloseButton';
7138
7147
 
7139
7148
  const PopoverArrow = (_a) => {
7140
7149
  var { className = '' } = _a, props = __rest$1(_a, ["className"]);
7141
- return React.createElement("div", Object.assign({ className: css(styles$e.popoverArrow, className) }, props));
7150
+ return React.createElement("div", Object.assign({ className: css$1(styles$e.popoverArrow, className) }, props));
7142
7151
  };
7143
7152
  PopoverArrow.displayName = 'PopoverArrow';
7144
7153
 
@@ -7353,7 +7362,7 @@ const Popover = (_a) => {
7353
7362
  }
7354
7363
  return node;
7355
7364
  }
7356
- }, preventScrollOnDeactivate: true, className: css(styles$e.popover, alertSeverityVariant && alertStyle[alertSeverityVariant], hasNoPadding && styles$e.modifiers.noPadding, hasAutoWidth && styles$e.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
7365
+ }, preventScrollOnDeactivate: true, className: css$1(styles$e.popover, alertSeverityVariant && alertStyle[alertSeverityVariant], hasNoPadding && styles$e.modifiers.noPadding, hasAutoWidth && styles$e.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
7357
7366
  minWidth: hasCustomMinWidth ? minWidth : null,
7358
7367
  maxWidth: hasCustomMaxWidth ? maxWidth : null
7359
7368
  } }, rest),
@@ -7454,7 +7463,7 @@ var DividerVariant;
7454
7463
  const Divider = (_a) => {
7455
7464
  var { className, component = DividerVariant.hr, inset, orientation } = _a, props = __rest$1(_a, ["className", "component", "inset", "orientation"]);
7456
7465
  const Component = component;
7457
- return (React.createElement(Component, Object.assign({ className: css(dividerStyles.divider, formatBreakpointMods(inset, dividerStyles), formatBreakpointMods(orientation, dividerStyles), className) }, (component !== 'hr' && { role: 'separator' }), props)));
7466
+ return (React.createElement(Component, Object.assign({ className: css$1(dividerStyles.divider, formatBreakpointMods(inset, dividerStyles), formatBreakpointMods(orientation, dividerStyles), className) }, (component !== 'hr' && { role: 'separator' }), props)));
7458
7467
  };
7459
7468
  Divider.displayName = 'Divider';
7460
7469
 
@@ -7542,33 +7551,27 @@ const Drawer = (_a) => {
7542
7551
  const drawerRef = React.useRef();
7543
7552
  const drawerContentRef = React.useRef();
7544
7553
  return (React.createElement(DrawerContext.Provider, { value: { isExpanded, isStatic, onExpand, position, drawerRef, drawerContentRef, isInline } },
7545
- React.createElement("div", Object.assign({ className: css(styles$d.drawer, isExpanded && styles$d.modifiers.expanded, isInline && styles$d.modifiers.inline, isStatic && styles$d.modifiers.static, (position === 'left' || position === 'start') && styles$d.modifiers.panelLeft, position === 'bottom' && styles$d.modifiers.panelBottom, className), ref: drawerRef }, props), children)));
7554
+ React.createElement("div", Object.assign({ className: css$1(styles$d.drawer, isExpanded && styles$d.modifiers.expanded, isInline && styles$d.modifiers.inline, isStatic && styles$d.modifiers.static, (position === 'left' || position === 'start') && styles$d.modifiers.panelLeft, position === 'bottom' && styles$d.modifiers.panelBottom, className), ref: drawerRef }, props), children)));
7546
7555
  };
7547
7556
  Drawer.displayName = 'Drawer';
7548
7557
 
7549
7558
  const DrawerActions = (_a) => {
7550
- var {
7551
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
7552
- className = '', children } = _a, props = __rest$1(_a, ["className", "children"]);
7553
- return (React.createElement("div", Object.assign({ className: css(styles$d.drawerActions, className) }, props), children));
7559
+ var { className = '', children } = _a, props = __rest$1(_a, ["className", "children"]);
7560
+ return (React.createElement("div", Object.assign({ className: css$1(styles$d.drawerActions, className) }, props), children));
7554
7561
  };
7555
7562
  DrawerActions.displayName = 'DrawerActions';
7556
7563
 
7557
7564
  const DrawerCloseButton = (_a) => {
7558
- var {
7559
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
7560
- className = '', onClose = () => undefined, 'aria-label': ariaLabel = 'Close drawer panel' } = _a, props = __rest$1(_a, ["className", "onClose", 'aria-label']);
7561
- return (React.createElement("div", Object.assign({ className: css(styles$d.drawerClose, className) }, props),
7565
+ var { className = '', onClose = () => undefined, 'aria-label': ariaLabel = 'Close drawer panel' } = _a, props = __rest$1(_a, ["className", "onClose", 'aria-label']);
7566
+ return (React.createElement("div", Object.assign({ className: css$1(styles$d.drawerClose, className) }, props),
7562
7567
  React.createElement(Button, { variant: "plain", onClick: onClose, "aria-label": ariaLabel },
7563
7568
  React.createElement(TimesIcon, null))));
7564
7569
  };
7565
7570
  DrawerCloseButton.displayName = 'DrawerCloseButton';
7566
7571
 
7567
7572
  const DrawerMain = (_a) => {
7568
- var {
7569
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
7570
- className = '', children } = _a, props = __rest$1(_a, ["className", "children"]);
7571
- return (React.createElement("div", Object.assign({ className: css(styles$d.drawerMain, className) }, props), children));
7573
+ var { className = '', children } = _a, props = __rest$1(_a, ["className", "children"]);
7574
+ return (React.createElement("div", Object.assign({ className: css$1(styles$d.drawerMain, className) }, props), children));
7572
7575
  };
7573
7576
  DrawerMain.displayName = 'DrawerMain';
7574
7577
 
@@ -7582,32 +7585,26 @@ const DrawerContent = (_a) => {
7582
7585
  var { className, children, panelContent, colorVariant = DrawerContentColorVariant.default } = _a, props = __rest$1(_a, ["className", "children", "panelContent", "colorVariant"]);
7583
7586
  const { drawerContentRef } = React.useContext(DrawerContext);
7584
7587
  return (React.createElement(DrawerMain, null,
7585
- React.createElement("div", Object.assign({ className: css(styles$d.drawerContent, colorVariant === DrawerContentColorVariant.primary && styles$d.modifiers.primary, colorVariant === DrawerContentColorVariant.secondary && styles$d.modifiers.secondary, className), ref: drawerContentRef }, props), children),
7588
+ React.createElement("div", Object.assign({ className: css$1(styles$d.drawerContent, colorVariant === DrawerContentColorVariant.primary && styles$d.modifiers.primary, colorVariant === DrawerContentColorVariant.secondary && styles$d.modifiers.secondary, className), ref: drawerContentRef }, props), children),
7586
7589
  panelContent));
7587
7590
  };
7588
7591
  DrawerContent.displayName = 'DrawerContent';
7589
7592
 
7590
7593
  const DrawerContentBody = (_a) => {
7591
- var {
7592
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
7593
- className = '', children, hasPadding = false } = _a, props = __rest$1(_a, ["className", "children", "hasPadding"]);
7594
- return (React.createElement("div", Object.assign({ className: css(styles$d.drawerBody, hasPadding && styles$d.modifiers.padding, className) }, props), children));
7594
+ var { className = '', children, hasPadding = false } = _a, props = __rest$1(_a, ["className", "children", "hasPadding"]);
7595
+ return (React.createElement("div", Object.assign({ className: css$1(styles$d.drawerBody, hasPadding && styles$d.modifiers.padding, className) }, props), children));
7595
7596
  };
7596
7597
  DrawerContentBody.displayName = 'DrawerContentBody';
7597
7598
 
7598
7599
  const DrawerHead = (_a) => {
7599
- var {
7600
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
7601
- className = '', children } = _a, props = __rest$1(_a, ["className", "children"]);
7602
- return (React.createElement("div", Object.assign({ className: css(styles$d.drawerHead, className) }, props), children));
7600
+ var { className = '', children } = _a, props = __rest$1(_a, ["className", "children"]);
7601
+ return (React.createElement("div", Object.assign({ className: css$1(styles$d.drawerHead, className) }, props), children));
7603
7602
  };
7604
7603
  DrawerHead.displayName = 'DrawerHead';
7605
7604
 
7606
7605
  const DrawerPanelBody = (_a) => {
7607
- var {
7608
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
7609
- className = '', children, hasNoPadding = false } = _a, props = __rest$1(_a, ["className", "children", "hasNoPadding"]);
7610
- return (React.createElement("div", Object.assign({ className: css(styles$d.drawerBody, hasNoPadding && styles$d.modifiers.noPadding, className) }, props), children));
7606
+ var { className = '', children, hasNoPadding = false } = _a, props = __rest$1(_a, ["className", "children", "hasNoPadding"]);
7607
+ return (React.createElement("div", Object.assign({ className: css$1(styles$d.drawerBody, hasNoPadding && styles$d.modifiers.noPadding, className) }, props), children));
7611
7608
  };
7612
7609
  DrawerPanelBody.displayName = 'DrawerPanelBody';
7613
7610
 
@@ -7732,7 +7729,7 @@ const DrawerPanelContent = (_a) => {
7732
7729
  e.preventDefault();
7733
7730
  document.addEventListener('mousemove', callbackMouseMove);
7734
7731
  document.addEventListener('mouseup', callbackMouseUp);
7735
- drawerRef.current.classList.add(css(styles$d.modifiers.resizing));
7732
+ drawerRef.current.classList.add(css$1(styles$d.modifiers.resizing));
7736
7733
  isResizing = true;
7737
7734
  setInitialVals = true;
7738
7735
  };
@@ -7787,7 +7784,7 @@ const DrawerPanelContent = (_a) => {
7787
7784
  if (!isResizing) {
7788
7785
  return;
7789
7786
  }
7790
- drawerRef.current.classList.remove(css(styles$d.modifiers.resizing));
7787
+ drawerRef.current.classList.remove(css$1(styles$d.modifiers.resizing));
7791
7788
  isResizing = false;
7792
7789
  onResize && onResize(e, currWidth, id);
7793
7790
  setInitialVals = true;
@@ -7898,7 +7895,7 @@ const DrawerPanelContent = (_a) => {
7898
7895
  escapeDeactivates: false
7899
7896
  }
7900
7897
  };
7901
- return (React.createElement(Component, Object.assign({}, (isValidFocusTrap && focusTrapProps), { id: id || panelId, className: css(styles$d.drawerPanel, isResizable && styles$d.modifiers.resizable, hasNoBorder && styles$d.modifiers.noBorder, formatBreakpointMods(widths, styles$d), colorVariant === DrawerColorVariant.noBackground && styles$d.modifiers.noBackground, colorVariant === DrawerColorVariant.secondary && styles$d.modifiers.secondary, className), onTransitionEnd: (ev) => {
7898
+ return (React.createElement(Component, Object.assign({}, (isValidFocusTrap && focusTrapProps), { id: id || panelId, className: css$1(styles$d.drawerPanel, isResizable && styles$d.modifiers.resizable, hasNoBorder && styles$d.modifiers.noBorder, formatBreakpointMods(widths, styles$d), colorVariant === DrawerColorVariant.noBackground && styles$d.modifiers.noBackground, colorVariant === DrawerColorVariant.secondary && styles$d.modifiers.secondary, className), onTransitionEnd: (ev) => {
7902
7899
  if (ev.target === panel.current) {
7903
7900
  if (!hidden && ev.nativeEvent.propertyName === 'transform') {
7904
7901
  onExpand(ev);
@@ -7912,9 +7909,9 @@ const DrawerPanelContent = (_a) => {
7912
7909
  style: boundaryCssVars
7913
7910
  }), props, { ref: panel }), isExpandedInternal && (React.createElement(React.Fragment, null,
7914
7911
  isResizable && (React.createElement(React.Fragment, null,
7915
- React.createElement("div", { className: css(styles$d.drawerSplitter, position !== 'bottom' && styles$d.modifiers.vertical), role: "separator", tabIndex: 0, "aria-orientation": position === 'bottom' ? 'horizontal' : 'vertical', "aria-label": resizeAriaLabel, "aria-valuenow": separatorValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-controls": id || panelId, onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, ref: splitterRef },
7916
- React.createElement("div", { className: css(styles$d.drawerSplitterHandle), "aria-hidden": true })),
7917
- React.createElement("div", { className: css(styles$d.drawerPanelMain) }, children))),
7912
+ React.createElement("div", { className: css$1(styles$d.drawerSplitter, position !== 'bottom' && styles$d.modifiers.vertical), role: "separator", tabIndex: 0, "aria-orientation": position === 'bottom' ? 'horizontal' : 'vertical', "aria-label": resizeAriaLabel, "aria-valuenow": separatorValue, "aria-valuemin": 0, "aria-valuemax": 100, "aria-controls": id || panelId, onMouseDown: handleMousedown, onKeyDown: handleKeys, onTouchStart: handleTouchStart, ref: splitterRef },
7913
+ React.createElement("div", { className: css$1(styles$d.drawerSplitterHandle), "aria-hidden": true })),
7914
+ React.createElement("div", { className: css$1(styles$d.drawerPanelMain) }, children))),
7918
7915
  !isResizable && children))));
7919
7916
  }));
7920
7917
  };
@@ -7954,9 +7951,9 @@ var styles$c = {
7954
7951
  const Icon = (_a) => {
7955
7952
  var { children, className, progressIcon, size, iconSize, progressIconSize, status, isInline = false, isInProgress = false, defaultProgressArialabel = 'Loading...', shouldMirrorRTL = false } = _a, props = __rest$1(_a, ["children", "className", "progressIcon", "size", "iconSize", "progressIconSize", "status", "isInline", "isInProgress", "defaultProgressArialabel", "shouldMirrorRTL"]);
7956
7953
  const _progressIcon = progressIcon !== null && progressIcon !== void 0 ? progressIcon : React.createElement(Spinner, { diameter: "1em", "aria-label": defaultProgressArialabel });
7957
- return (React.createElement("span", Object.assign({ className: css(styles$c.icon, isInline && styles$c.modifiers.inline, isInProgress && styles$c.modifiers.inProgress, styles$c.modifiers[size], className) }, props),
7958
- React.createElement("span", { className: css(styles$c.iconContent, styles$c.modifiers[iconSize], styles$c.modifiers[status], shouldMirrorRTL && 'pf-v6-m-mirror-inline-rtl') }, children),
7959
- isInProgress && (React.createElement("span", { className: css(styles$c.iconProgress, styles$c.modifiers[progressIconSize], className) }, _progressIcon))));
7954
+ return (React.createElement("span", Object.assign({ className: css$1(styles$c.icon, isInline && styles$c.modifiers.inline, isInProgress && styles$c.modifiers.inProgress, styles$c.modifiers[size], className) }, props),
7955
+ React.createElement("span", { className: css$1(styles$c.iconContent, styles$c.modifiers[iconSize], styles$c.modifiers[status], shouldMirrorRTL && 'pf-v6-m-mirror-inline-rtl') }, children),
7956
+ isInProgress && (React.createElement("span", { className: css$1(styles$c.iconProgress, styles$c.modifiers[progressIconSize], className) }, _progressIcon))));
7960
7957
  };
7961
7958
  Icon.displayName = 'Icon';
7962
7959
 
@@ -8046,10 +8043,10 @@ var styles$b = {
8046
8043
 
8047
8044
  const ActionGroup = (_a) => {
8048
8045
  var { children = null, className = '' } = _a, props = __rest$1(_a, ["children", "className"]);
8049
- const customClassName = css(styles$b.formGroup, styles$b.modifiers.action, className);
8050
- const formActionsComponent = React.createElement("div", { className: css(styles$b.formActions) }, children);
8046
+ const customClassName = css$1(styles$b.formGroup, styles$b.modifiers.action, className);
8047
+ const formActionsComponent = React.createElement("div", { className: css$1(styles$b.formActions) }, children);
8051
8048
  return (React.createElement("div", Object.assign({}, props, { className: customClassName }),
8052
- React.createElement("div", { className: css(styles$b.formGroupControl) }, formActionsComponent)));
8049
+ React.createElement("div", { className: css$1(styles$b.formGroupControl) }, formActionsComponent)));
8053
8050
  };
8054
8051
  ActionGroup.displayName = 'ActionGroup';
8055
8052
 
@@ -8063,7 +8060,7 @@ const FormBase = (_a) => {
8063
8060
  var { children = null, className = '', isHorizontal = false, isWidthLimited = false, maxWidth = '', innerRef } = _a, props = __rest$1(_a, ["children", "className", "isHorizontal", "isWidthLimited", "maxWidth", "innerRef"]);
8064
8061
  return (React.createElement("form", Object.assign({ noValidate: true }, (maxWidth && {
8065
8062
  style: Object.assign({ [c_form_m_limit_width_MaxWidth.name]: maxWidth }, props.style)
8066
- }), props, { className: css(styles$b.form, isHorizontal && styles$b.modifiers.horizontal, (isWidthLimited || maxWidth) && styles$b.modifiers.limitWidth, className), ref: innerRef }), children));
8063
+ }), props, { className: css$1(styles$b.form, isHorizontal && styles$b.modifiers.horizontal, (isWidthLimited || maxWidth) && styles$b.modifiers.limitWidth, className), ref: innerRef }), children));
8067
8064
  };
8068
8065
  const Form = React.forwardRef((props, ref) => React.createElement(FormBase, Object.assign({ innerRef: ref }, props)));
8069
8066
  Form.displayName = 'Form';
@@ -8073,20 +8070,20 @@ const FormGroup = (_a) => {
8073
8070
  const isGroupOrRadioGroup = role === 'group' || role === 'radiogroup';
8074
8071
  const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
8075
8072
  const labelContent = (React.createElement(React.Fragment, null,
8076
- React.createElement(LabelComponent, Object.assign({ className: css(styles$b.formLabel) }, (!isGroupOrRadioGroup && { htmlFor: fieldId })),
8077
- React.createElement("span", { className: css(styles$b.formLabelText) }, label),
8078
- isRequired && (React.createElement("span", { className: css(styles$b.formLabelRequired), "aria-hidden": "true" },
8073
+ React.createElement(LabelComponent, Object.assign({ className: css$1(styles$b.formLabel) }, (!isGroupOrRadioGroup && { htmlFor: fieldId })),
8074
+ React.createElement("span", { className: css$1(styles$b.formLabelText) }, label),
8075
+ isRequired && (React.createElement("span", { className: css$1(styles$b.formLabelRequired), "aria-hidden": "true" },
8079
8076
  ' ',
8080
8077
  ASTERISK))),
8081
8078
  React.createElement(React.Fragment, null, "\u00A0\u00A0"),
8082
8079
  React.isValidElement(labelHelp) && React.createElement("span", { className: styles$b.formGroupLabelHelp }, labelHelp)));
8083
- return (React.createElement(GenerateId, null, (randomId) => (React.createElement("div", Object.assign({ className: css(styles$b.formGroup, className) }, (role && { role }), (isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` }), props),
8084
- label && (React.createElement("div", Object.assign({ className: css(styles$b.formGroupLabel, labelInfo && styles$b.modifiers.info, hasNoPaddingTop && styles$b.modifiers.noPaddingTop) }, (isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })),
8080
+ return (React.createElement(GenerateId, null, (randomId) => (React.createElement("div", Object.assign({ className: css$1(styles$b.formGroup, className) }, (role && { role }), (isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` }), props),
8081
+ label && (React.createElement("div", Object.assign({ className: css$1(styles$b.formGroupLabel, labelInfo && styles$b.modifiers.info, hasNoPaddingTop && styles$b.modifiers.noPaddingTop) }, (isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })),
8085
8082
  labelInfo && (React.createElement(React.Fragment, null,
8086
- React.createElement("div", { className: css(styles$b.formGroupLabelMain) }, labelContent),
8087
- React.createElement("div", { className: css(styles$b.formGroupLabelInfo) }, labelInfo))),
8083
+ React.createElement("div", { className: css$1(styles$b.formGroupLabelMain) }, labelContent),
8084
+ React.createElement("div", { className: css$1(styles$b.formGroupLabelInfo) }, labelInfo))),
8088
8085
  !labelInfo && labelContent)),
8089
- React.createElement("div", { className: css(styles$b.formGroupControl, isInline && styles$b.modifiers.inline, isStack && styles$b.modifiers.stack) }, children)))));
8086
+ React.createElement("div", { className: css$1(styles$b.formGroupControl, isInline && styles$b.modifiers.inline, isStack && styles$b.modifiers.stack) }, children)))));
8090
8087
  };
8091
8088
  FormGroup.displayName = 'FormGroup';
8092
8089
 
@@ -8106,7 +8103,7 @@ var styles$a = {
8106
8103
 
8107
8104
  const PanelBase = (_a) => {
8108
8105
  var { className, children, variant, isScrollable, innerRef } = _a, props = __rest$1(_a, ["className", "children", "variant", "isScrollable", "innerRef"]);
8109
- return (React.createElement("div", Object.assign({ className: css(styles$a.panel, variant && styles$a.modifiers[variant], isScrollable && styles$a.modifiers.scrollable, className), ref: innerRef }, props), children));
8106
+ return (React.createElement("div", Object.assign({ className: css$1(styles$a.panel, variant && styles$a.modifiers[variant], isScrollable && styles$a.modifiers.scrollable, className), ref: innerRef }, props), children));
8110
8107
  };
8111
8108
  const Panel = React.forwardRef((props, ref) => (React.createElement(PanelBase, Object.assign({ innerRef: ref }, props))));
8112
8109
  Panel.displayName = 'Panel';
@@ -8119,13 +8116,13 @@ const c_panel__main_MaxHeight = {
8119
8116
 
8120
8117
  const PanelMain = (_a) => {
8121
8118
  var { className, children, maxHeight } = _a, props = __rest$1(_a, ["className", "children", "maxHeight"]);
8122
- return (React.createElement("div", Object.assign({ className: css(styles$a.panelMain, className), style: { [c_panel__main_MaxHeight.name]: maxHeight } }, props), children));
8119
+ return (React.createElement("div", Object.assign({ className: css$1(styles$a.panelMain, className), style: { [c_panel__main_MaxHeight.name]: maxHeight } }, props), children));
8123
8120
  };
8124
8121
  PanelMain.displayName = 'PanelMain';
8125
8122
 
8126
8123
  const PanelMainBody = (_a) => {
8127
8124
  var { className, children } = _a, props = __rest$1(_a, ["className", "children"]);
8128
- return (React.createElement("div", Object.assign({ className: css(styles$a.panelMainBody, className) }, props), children));
8125
+ return (React.createElement("div", Object.assign({ className: css$1(styles$a.panelMainBody, className) }, props), children));
8129
8126
  };
8130
8127
  PanelMainBody.displayName = 'PanelMainBody';
8131
8128
 
@@ -8225,7 +8222,7 @@ const AdvancedSearchMenu = ({ className, parentRef, parentInputRef, value = '',
8225
8222
  React.createElement(TextInput, { type: "text", id: randomId, value: getValue('haswords'), onChange: (evt, value) => handleValueChange('haswords', value, evt) })))));
8226
8223
  return formGroups;
8227
8224
  };
8228
- return isSearchMenuOpen ? (React.createElement(Panel, { variant: "raised", className: css(className) },
8225
+ return isSearchMenuOpen ? (React.createElement(Panel, { variant: "raised", className: css$1(className) },
8229
8226
  React.createElement(PanelMain, null,
8230
8227
  React.createElement(PanelMainBody, null,
8231
8228
  React.createElement(Form, null,
@@ -8266,7 +8263,7 @@ const TextInputGroup = (_a) => {
8266
8263
  const ref = React.useRef(null);
8267
8264
  const textInputGroupRef = innerRef || ref;
8268
8265
  return (React.createElement(TextInputGroupContext.Provider, { value: { isDisabled } },
8269
- React.createElement("div", Object.assign({ ref: textInputGroupRef, className: css(textInputGroupStyles.textInputGroup, isDisabled && textInputGroupStyles.modifiers.disabled, isPlain && textInputGroupStyles.modifiers.plain, className) }, props), children)));
8266
+ React.createElement("div", Object.assign({ ref: textInputGroupRef, className: css$1(textInputGroupStyles.textInputGroup, isDisabled && textInputGroupStyles.modifiers.disabled, isPlain && textInputGroupStyles.modifiers.plain, className) }, props), children)));
8270
8267
  };
8271
8268
  TextInputGroup.displayName = 'TextInputGroup';
8272
8269
 
@@ -8278,19 +8275,19 @@ const TextInputGroupMainBase = (_a) => {
8278
8275
  const handleChange = (event) => {
8279
8276
  onChange(event, event.currentTarget.value);
8280
8277
  };
8281
- return (React.createElement("div", Object.assign({ className: css(textInputGroupStyles.textInputGroupMain, icon && textInputGroupStyles.modifiers.icon, className) }, props),
8278
+ return (React.createElement("div", Object.assign({ className: css$1(textInputGroupStyles.textInputGroupMain, icon && textInputGroupStyles.modifiers.icon, className) }, props),
8282
8279
  children,
8283
- React.createElement("span", { className: css(textInputGroupStyles.textInputGroupText) },
8284
- hint && (React.createElement("input", { className: css(textInputGroupStyles.textInputGroupTextInput, textInputGroupStyles.modifiers.hint), type: "text", disabled: true, "aria-hidden": "true", value: hint, id: inputId })),
8285
- icon && React.createElement("span", { className: css(textInputGroupStyles.textInputGroupIcon) }, icon),
8286
- React.createElement("input", Object.assign({ ref: textInputGroupInputInputRef, type: type, className: css(textInputGroupStyles.textInputGroupTextInput), "aria-label": ariaLabel, disabled: isDisabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, value: inputValue || '', placeholder: inputPlaceHolder, name: name, "aria-activedescendant": ariaActivedescendant, id: inputId }, (role && { role }), (isExpanded !== undefined && { 'aria-expanded': isExpanded }), (ariaControls && { 'aria-controls': ariaControls }))))));
8280
+ React.createElement("span", { className: css$1(textInputGroupStyles.textInputGroupText) },
8281
+ hint && (React.createElement("input", { className: css$1(textInputGroupStyles.textInputGroupTextInput, textInputGroupStyles.modifiers.hint), type: "text", disabled: true, "aria-hidden": "true", value: hint, id: inputId })),
8282
+ icon && React.createElement("span", { className: css$1(textInputGroupStyles.textInputGroupIcon) }, icon),
8283
+ React.createElement("input", Object.assign({ ref: textInputGroupInputInputRef, type: type, className: css$1(textInputGroupStyles.textInputGroupTextInput), "aria-label": ariaLabel, disabled: isDisabled, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, value: inputValue || '', placeholder: inputPlaceHolder, name: name, "aria-activedescendant": ariaActivedescendant, id: inputId }, (role && { role }), (isExpanded !== undefined && { 'aria-expanded': isExpanded }), (ariaControls && { 'aria-controls': ariaControls }))))));
8287
8284
  };
8288
8285
  const TextInputGroupMain = React.forwardRef((props, ref) => (React.createElement(TextInputGroupMainBase, Object.assign({ innerRef: ref }, props))));
8289
8286
  TextInputGroupMain.displayName = 'TextInputGroupMain';
8290
8287
 
8291
8288
  const TextInputGroupUtilities = (_a) => {
8292
8289
  var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
8293
- return (React.createElement("div", Object.assign({ className: css(textInputGroupStyles.textInputGroupUtilities, className) }, props), children));
8290
+ return (React.createElement("div", Object.assign({ className: css$1(textInputGroupStyles.textInputGroupUtilities, className) }, props), children));
8294
8291
  };
8295
8292
  TextInputGroupUtilities.displayName = 'TextInputGroupUtilities';
8296
8293
 
@@ -8446,7 +8443,7 @@ const SearchInputBase = (_a) => {
8446
8443
  React.createElement(ArrowRightIcon$1, null)) }))),
8447
8444
  expandableInput && React.createElement(InputGroupItem, null, expandableToggle)));
8448
8445
  };
8449
- const searchInputProps = Object.assign(Object.assign({}, props), { className: className && css(className), innerRef: searchInputRef });
8446
+ const searchInputProps = Object.assign(Object.assign({}, props), { className: className && css$1(className), innerRef: searchInputRef });
8450
8447
  if (!!expandableInput && !isExpanded) {
8451
8448
  return (React.createElement(InputGroup, Object.assign({}, searchInputProps),
8452
8449
  React.createElement(InputGroupItem, null, expandableToggle)));
@@ -8455,9 +8452,9 @@ const SearchInputBase = (_a) => {
8455
8452
  if (attributes.length > 0) {
8456
8453
  const AdvancedSearch = (React.createElement("div", { ref: popperRef },
8457
8454
  React.createElement(AdvancedSearchMenu, { value: value, parentRef: searchInputRef, parentInputRef: searchInputInputRef, onSearch: onSearch, onClear: onClear, onChange: onChange, onToggleAdvancedMenu: onToggle, resetButtonLabel: resetButtonLabel, submitSearchButtonLabel: submitSearchButtonLabel, attributes: attributes, formAdditionalItems: formAdditionalItems, hasWordsAttrLabel: hasWordsAttrLabel, advancedSearchDelimiter: advancedSearchDelimiter, getAttrValueMap: getAttrValueMap, isSearchMenuOpen: isSearchMenuOpen })));
8458
- const AdvancedSearchWithPopper = (React.createElement("div", Object.assign({ className: css(className), ref: searchInputRef }, props),
8455
+ const AdvancedSearchWithPopper = (React.createElement("div", Object.assign({ className: css$1(className), ref: searchInputRef }, props),
8459
8456
  React.createElement(Popper, { trigger: buildSearchTextInputGroupWithExtraButtons(), triggerRef: triggerRef, popper: AdvancedSearch, popperRef: popperRef, isVisible: isSearchMenuOpen, enableFlip: true, appendTo: () => appendTo || searchInputRef.current, zIndex: zIndex })));
8460
- const AdvancedSearchInline = (React.createElement("div", Object.assign({ className: css(className), ref: searchInputRef }, props),
8457
+ const AdvancedSearchInline = (React.createElement("div", Object.assign({ className: css$1(className), ref: searchInputRef }, props),
8461
8458
  buildSearchTextInputGroupWithExtraButtons(),
8462
8459
  AdvancedSearch));
8463
8460
  return appendTo !== 'inline' ? AdvancedSearchWithPopper : AdvancedSearchInline;
@@ -8496,7 +8493,7 @@ const isSpinner = (icon) => icon.type === Spinner;
8496
8493
  const EmptyStateIcon = (_a) => {
8497
8494
  var { className, icon: IconComponent } = _a, props = __rest$1(_a, ["className", "icon"]);
8498
8495
  const iconIsSpinner = isSpinner(React.createElement(IconComponent, null));
8499
- return (React.createElement("div", { className: css(styles$9.emptyStateIcon) },
8496
+ return (React.createElement("div", { className: css$1(styles$9.emptyStateIcon) },
8500
8497
  React.createElement(IconComponent, Object.assign({ className: className, "aria-hidden": !iconIsSpinner }, props))));
8501
8498
  };
8502
8499
  EmptyStateIcon.displayName = 'EmptyStateIcon';
@@ -8512,10 +8509,10 @@ var EmptyStateHeadingLevel;
8512
8509
  })(EmptyStateHeadingLevel || (EmptyStateHeadingLevel = {}));
8513
8510
  const EmptyStateHeader = (_a) => {
8514
8511
  var { className, titleClassName, titleText, headingLevel: HeadingLevel = EmptyStateHeadingLevel.h1, icon: Icon } = _a, props = __rest$1(_a, ["className", "titleClassName", "titleText", "headingLevel", "icon"]);
8515
- return (React.createElement("div", Object.assign({ className: css(`${styles$9.emptyState}__header`, className) }, props),
8512
+ return (React.createElement("div", Object.assign({ className: css$1(`${styles$9.emptyState}__header`, className) }, props),
8516
8513
  Icon && React.createElement(EmptyStateIcon, { icon: Icon }),
8517
- React.createElement("div", { className: css(`${styles$9.emptyState}__title`) },
8518
- React.createElement(HeadingLevel, { className: css(styles$9.emptyStateTitleText, titleClassName) }, titleText))));
8514
+ React.createElement("div", { className: css$1(`${styles$9.emptyState}__title`) },
8515
+ React.createElement(HeadingLevel, { className: css$1(styles$9.emptyStateTitleText, titleClassName) }, titleText))));
8519
8516
  };
8520
8517
  EmptyStateHeader.displayName = 'EmptyStateHeader';
8521
8518
 
@@ -8539,8 +8536,8 @@ const EmptyState = (_a) => {
8539
8536
  var { children, className, variant = EmptyStateVariant.full, isFullHeight, status, icon: customIcon, titleText, titleClassName, headerClassName, headingLevel } = _a, props = __rest$1(_a, ["children", "className", "variant", "isFullHeight", "status", "icon", "titleText", "titleClassName", "headerClassName", "headingLevel"]);
8540
8537
  const statusIcon = status && statusIcons$2[status];
8541
8538
  const icon = customIcon || statusIcon;
8542
- return (React.createElement("div", Object.assign({ className: css(styles$9.emptyState, variant !== 'full' && styles$9.modifiers[variant], isFullHeight && styles$9.modifiers.fullHeight, status && styles$9.modifiers[status], className) }, props),
8543
- React.createElement("div", { className: css(styles$9.emptyStateContent) },
8539
+ return (React.createElement("div", Object.assign({ className: css$1(styles$9.emptyState, variant !== 'full' && styles$9.modifiers[variant], isFullHeight && styles$9.modifiers.fullHeight, status && styles$9.modifiers[status], className) }, props),
8540
+ React.createElement("div", { className: css$1(styles$9.emptyStateContent) },
8544
8541
  React.createElement(EmptyStateHeader, { icon: icon, titleText: titleText, titleClassName: titleClassName, className: headerClassName, headingLevel: headingLevel }),
8545
8542
  children)));
8546
8543
  };
@@ -8548,19 +8545,19 @@ EmptyState.displayName = 'EmptyState';
8548
8545
 
8549
8546
  const EmptyStateBody = (_a) => {
8550
8547
  var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
8551
- return (React.createElement("div", Object.assign({ className: css(styles$9.emptyStateBody, className) }, props), children));
8548
+ return (React.createElement("div", Object.assign({ className: css$1(styles$9.emptyStateBody, className) }, props), children));
8552
8549
  };
8553
8550
  EmptyStateBody.displayName = 'EmptyStateBody';
8554
8551
 
8555
8552
  const EmptyStateFooter = (_a) => {
8556
8553
  var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
8557
- return (React.createElement("div", Object.assign({ className: css(styles$9.emptyStateFooter, className) }, props), children));
8554
+ return (React.createElement("div", Object.assign({ className: css$1(styles$9.emptyStateFooter, className) }, props), children));
8558
8555
  };
8559
8556
  EmptyStateFooter.displayName = 'EmptyStateFooter';
8560
8557
 
8561
8558
  const EmptyStateActions = (_a) => {
8562
8559
  var { children, className } = _a, props = __rest$1(_a, ["children", "className"]);
8563
- return (React.createElement("div", Object.assign({ className: css(styles$9.emptyStateActions, className) }, props), children));
8560
+ return (React.createElement("div", Object.assign({ className: css$1(styles$9.emptyStateActions, className) }, props), children));
8564
8561
  };
8565
8562
  EmptyStateActions.displayName = 'EmptyStateActions';
8566
8563
 
@@ -8683,13 +8680,13 @@ class ExpandableSection extends React.Component {
8683
8680
  };
8684
8681
  }
8685
8682
  const computedToggleText = this.calculateToggleText(toggleText, toggleTextExpanded, toggleTextCollapsed, propOrStateIsExpanded);
8686
- const expandableToggle = !isDetached && (React.createElement("button", { className: css(styles$8.expandableSectionToggle), type: "button", "aria-expanded": propOrStateIsExpanded, "aria-controls": uniqueContentId, id: uniqueToggleId, onClick: (event) => onToggle(event, !propOrStateIsExpanded) },
8687
- variant !== ExpandableSectionVariant.truncate && (React.createElement("span", { className: css(styles$8.expandableSectionToggleIcon) },
8683
+ const expandableToggle = !isDetached && (React.createElement("button", { className: css$1(styles$8.expandableSectionToggle), type: "button", "aria-expanded": propOrStateIsExpanded, "aria-controls": uniqueContentId, id: uniqueToggleId, onClick: (event) => onToggle(event, !propOrStateIsExpanded) },
8684
+ variant !== ExpandableSectionVariant.truncate && (React.createElement("span", { className: css$1(styles$8.expandableSectionToggleIcon) },
8688
8685
  React.createElement(AngleRightIcon, { "aria-hidden": true }))),
8689
- React.createElement("span", { className: css(styles$8.expandableSectionToggleText) }, toggleContent || computedToggleText)));
8690
- return (React.createElement("div", Object.assign({ className: css(styles$8.expandableSection, propOrStateIsExpanded && styles$8.modifiers.expanded, displaySize === 'lg' && styles$8.modifiers.displayLg, isWidthLimited && styles$8.modifiers.limitWidth, isIndented && styles$8.modifiers.indented, variant === ExpandableSectionVariant.truncate && styles$8.modifiers.truncate, className) }, props),
8686
+ React.createElement("span", { className: css$1(styles$8.expandableSectionToggleText) }, toggleContent || computedToggleText)));
8687
+ return (React.createElement("div", Object.assign({ className: css$1(styles$8.expandableSection, propOrStateIsExpanded && styles$8.modifiers.expanded, displaySize === 'lg' && styles$8.modifiers.displayLg, isWidthLimited && styles$8.modifiers.limitWidth, isIndented && styles$8.modifiers.indented, variant === ExpandableSectionVariant.truncate && styles$8.modifiers.truncate, className) }, props),
8691
8688
  variant === ExpandableSectionVariant.default && expandableToggle,
8692
- React.createElement("div", { ref: this.expandableContentRef, className: css(styles$8.expandableSectionContent), hidden: variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded, id: uniqueContentId, "aria-labelledby": uniqueToggleId, role: "region" }, children),
8689
+ React.createElement("div", { ref: this.expandableContentRef, className: css$1(styles$8.expandableSectionContent), hidden: variant !== ExpandableSectionVariant.truncate && !propOrStateIsExpanded, id: uniqueContentId, "aria-labelledby": uniqueToggleId, role: "region" }, children),
8693
8690
  variant === ExpandableSectionVariant.truncate && this.state.hasToggle && expandableToggle));
8694
8691
  }
8695
8692
  }
@@ -8900,7 +8897,7 @@ const Label = (_a) => {
8900
8897
  };
8901
8898
  const isClickableDisabled = (href || onLabelClick) && isDisabled;
8902
8899
  const defaultCloseButton = (React.createElement(Button, Object.assign({ type: "button", variant: "plain", hasNoPadding: true, onClick: onClose, "aria-label": closeBtnAriaLabel || `Close ${children}` }, (isClickableDisabled && { isDisabled: true }), closeBtnProps, { icon: React.createElement(TimesIcon, null) })));
8903
- const closeButton = React.createElement("span", { className: css(labelStyles.labelActions) }, closeBtn || defaultCloseButton);
8900
+ const closeButton = React.createElement("span", { className: css$1(labelStyles.labelActions) }, closeBtn || defaultCloseButton);
8904
8901
  const textRef = React.createRef();
8905
8902
  // ref to apply tooltip when rendered is used
8906
8903
  const componentRef = React.useRef();
@@ -8912,8 +8909,8 @@ const Label = (_a) => {
8912
8909
  }
8913
8910
  }, [isEditableActive]);
8914
8911
  const content = (React.createElement(React.Fragment, null,
8915
- _icon && React.createElement("span", { className: css(labelStyles.labelIcon) }, _icon),
8916
- React.createElement("span", Object.assign({ ref: textRef, className: css(labelStyles.labelText) }, (textMaxWidth && {
8912
+ _icon && React.createElement("span", { className: css$1(labelStyles.labelIcon) }, _icon),
8913
+ React.createElement("span", Object.assign({ ref: textRef, className: css$1(labelStyles.labelText) }, (textMaxWidth && {
8917
8914
  style: {
8918
8915
  [c_label__text_MaxWidth.name]: textMaxWidth
8919
8916
  }
@@ -8938,7 +8935,7 @@ const Label = (_a) => {
8938
8935
  onClick: onLabelClick
8939
8936
  };
8940
8937
  const isButton = LabelComponentChildElement === 'button';
8941
- const labelComponentChildProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: css(labelStyles.labelContent, isClickable && labelStyles.modifiers.clickable) }, (isTooltipVisible && { tabIndex: 0 })), (href && { href })), (href && isDisabled && { onClick: (event) => event.preventDefault() })), (isButton && clickableLabelProps)), (isEditable && Object.assign({ ref: editableButtonRef, onClick: (e) => {
8938
+ const labelComponentChildProps = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({ className: css$1(labelStyles.labelContent, isClickable && labelStyles.modifiers.clickable) }, (isTooltipVisible && { tabIndex: 0 })), (href && { href })), (href && isDisabled && { onClick: (event) => event.preventDefault() })), (isButton && clickableLabelProps)), (isEditable && Object.assign({ ref: editableButtonRef, onClick: (e) => {
8942
8939
  setIsEditableActive(true);
8943
8940
  e.stopPropagation();
8944
8941
  } }, editableProps))), (isClickableDisabled && isButton && { disabled: true })), (isClickableDisabled && href && { tabIndex: -1, 'aria-disabled': true }));
@@ -8956,10 +8953,10 @@ const Label = (_a) => {
8956
8953
  labelComponentChild = (React.createElement(Tooltip, { content: children, position: tooltipPosition }, labelComponentChild));
8957
8954
  }
8958
8955
  const LabelComponent = (isOverflowLabel ? 'button' : 'span');
8959
- return (React.createElement(LabelComponent, Object.assign({}, props, { className: css(labelStyles.label, isClickableDisabled && labelStyles.modifiers.disabled, colorStyles[color], variant === 'filled' && labelStyles.modifiers.filled, variant === 'outline' && labelStyles.modifiers.outline, status && labelStyles.modifiers[status], isOverflowLabel && labelStyles.modifiers.overflow, isCompact && labelStyles.modifiers.compact, isEditable && styles$7.modifiers.editable, isEditableActive && labelStyles.modifiers.editableActive, isClickable && labelStyles.modifiers.clickable, isAddLabel && labelStyles.modifiers.add, className), onClick: isOverflowLabel || isAddLabel ? onLabelClick : undefined }, (LabelComponent === 'button' && { type: 'button' })),
8956
+ return (React.createElement(LabelComponent, Object.assign({}, props, { className: css$1(labelStyles.label, isClickableDisabled && labelStyles.modifiers.disabled, colorStyles[color], variant === 'filled' && labelStyles.modifiers.filled, variant === 'outline' && labelStyles.modifiers.outline, status && labelStyles.modifiers[status], isOverflowLabel && labelStyles.modifiers.overflow, isCompact && labelStyles.modifiers.compact, isEditable && styles$7.modifiers.editable, isEditableActive && labelStyles.modifiers.editableActive, isClickable && labelStyles.modifiers.clickable, isAddLabel && labelStyles.modifiers.add, className), onClick: isOverflowLabel || isAddLabel ? onLabelClick : undefined }, (LabelComponent === 'button' && { type: 'button' })),
8960
8957
  !isEditableActive && labelComponentChild,
8961
8958
  !isEditableActive && onClose && closeButton,
8962
- isEditableActive && (React.createElement("input", Object.assign({ className: css(labelStyles.labelContent), type: "text", id: "editable-input", ref: editableInputRef, value: currValue, onChange: updateVal }, editableProps)))));
8959
+ isEditableActive && (React.createElement("input", Object.assign({ className: css$1(labelStyles.labelContent), type: "text", id: "editable-input", ref: editableInputRef, value: currValue, onChange: updateVal }, editableProps)))));
8963
8960
  };
8964
8961
  Label.displayName = 'Label';
8965
8962
 
@@ -8994,15 +8991,15 @@ var ListComponent;
8994
8991
  })(ListComponent || (ListComponent = {}));
8995
8992
  const List = (_a) => {
8996
8993
  var { className = '', children = null, variant = null, isBordered = false, isPlain = false, iconSize = 'default', type = OrderType.number, ref = null, component = ListComponent.ul } = _a, props = __rest$1(_a, ["className", "children", "variant", "isBordered", "isPlain", "iconSize", "type", "ref", "component"]);
8997
- return component === ListComponent.ol ? (React.createElement("ol", Object.assign({ ref: ref, type: type }, (isPlain && { role: 'list' }), props, { className: css(styles$6.list, variant && styles$6.modifiers[variant], isBordered && styles$6.modifiers.bordered, isPlain && styles$6.modifiers.plain, iconSize && iconSize === 'large' && styles$6.modifiers.iconLg, className) }), children)) : (React.createElement("ul", Object.assign({ ref: ref }, (isPlain && { role: 'list' }), props, { className: css(styles$6.list, variant && styles$6.modifiers[variant], isBordered && styles$6.modifiers.bordered, isPlain && styles$6.modifiers.plain, iconSize && iconSize === 'large' && styles$6.modifiers.iconLg, className) }), children));
8994
+ return component === ListComponent.ol ? (React.createElement("ol", Object.assign({ ref: ref, type: type }, (isPlain && { role: 'list' }), props, { className: css$1(styles$6.list, variant && styles$6.modifiers[variant], isBordered && styles$6.modifiers.bordered, isPlain && styles$6.modifiers.plain, iconSize && iconSize === 'large' && styles$6.modifiers.iconLg, className) }), children)) : (React.createElement("ul", Object.assign({ ref: ref }, (isPlain && { role: 'list' }), props, { className: css$1(styles$6.list, variant && styles$6.modifiers[variant], isBordered && styles$6.modifiers.bordered, isPlain && styles$6.modifiers.plain, iconSize && iconSize === 'large' && styles$6.modifiers.iconLg, className) }), children));
8998
8995
  };
8999
8996
  List.displayName = 'List';
9000
8997
 
9001
8998
  const ListItem = (_a) => {
9002
8999
  var { icon = null, children = null } = _a, props = __rest$1(_a, ["icon", "children"]);
9003
- return (React.createElement("li", Object.assign({ className: css(icon && styles$6.listItem) }, props),
9004
- icon && React.createElement("span", { className: css(styles$6.listItemIcon) }, icon),
9005
- React.createElement("span", { className: icon && css(`${styles$6.list}__item-text`) }, children)));
9000
+ return (React.createElement("li", Object.assign({ className: css$1(icon && styles$6.listItem) }, props),
9001
+ icon && React.createElement("span", { className: css$1(styles$6.listItemIcon) }, icon),
9002
+ React.createElement("span", { className: icon && css$1(`${styles$6.list}__item-text`) }, children)));
9006
9003
  };
9007
9004
  ListItem.displayName = 'ListItem';
9008
9005
 
@@ -9082,7 +9079,7 @@ var styles$5 = {
9082
9079
 
9083
9080
  const PageBody = (_a) => {
9084
9081
  var { className, children } = _a, props = __rest$1(_a, ["className", "children"]);
9085
- return (React.createElement("div", Object.assign({}, props, { className: css(styles$5.pageMainBody, className) }), children));
9082
+ return (React.createElement("div", Object.assign({}, props, { className: css$1(styles$5.pageMainBody, className) }), children));
9086
9083
  };
9087
9084
  PageBody.displayName = 'PageBody';
9088
9085
 
@@ -9120,7 +9117,7 @@ const PageSection = (_a) => {
9120
9117
  }
9121
9118
  }, [hasOverflowScroll, ariaLabel]);
9122
9119
  const Component = component;
9123
- return (React.createElement(Component, Object.assign({}, props, { className: css(variantType[type], formatBreakpointMods(padding, styles$5), formatBreakpointMods(stickyOnBreakpoint, styles$5, 'sticky-', getVerticalBreakpoint(height), true), type === PageSectionTypes.default && variantStyle[variant], isFilled === false && styles$5.modifiers.noFill, isFilled === true && styles$5.modifiers.fill, isWidthLimited && styles$5.modifiers.limitWidth, isWidthLimited && isCenterAligned && type !== PageSectionTypes.subNav && styles$5.modifiers.alignCenter, hasShadowTop && styles$5.modifiers.shadowTop, hasShadowBottom && styles$5.modifiers.shadowBottom, hasOverflowScroll && styles$5.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), { "aria-label": ariaLabel }), hasBodyWrapper ? React.createElement(PageBody, null, children) : children));
9120
+ return (React.createElement(Component, Object.assign({}, props, { className: css$1(variantType[type], formatBreakpointMods(padding, styles$5), formatBreakpointMods(stickyOnBreakpoint, styles$5, 'sticky-', getVerticalBreakpoint(height), true), type === PageSectionTypes.default && variantStyle[variant], isFilled === false && styles$5.modifiers.noFill, isFilled === true && styles$5.modifiers.fill, isWidthLimited && styles$5.modifiers.limitWidth, isWidthLimited && isCenterAligned && type !== PageSectionTypes.subNav && styles$5.modifiers.alignCenter, hasShadowTop && styles$5.modifiers.shadowTop, hasShadowBottom && styles$5.modifiers.shadowBottom, hasOverflowScroll && styles$5.modifiers.overflowScroll, className) }, (hasOverflowScroll && { tabIndex: 0 }), { "aria-label": ariaLabel }), hasBodyWrapper ? React.createElement(PageBody, null, children) : children));
9124
9121
  };
9125
9122
  PageSection.displayName = 'PageSection';
9126
9123
 
@@ -9523,9 +9520,9 @@ var ToolbarItemVariant;
9523
9520
  const ToolbarItem = (_a) => {
9524
9521
  var { className, variant, visibility, gap, columnGap, rowGap, align, alignSelf, alignItems, id, children, isAllExpanded, isOverflowContainer } = _a, props = __rest$1(_a, ["className", "variant", "visibility", "gap", "columnGap", "rowGap", "align", "alignSelf", "alignItems", "id", "children", "isAllExpanded", "isOverflowContainer"]);
9525
9522
  if (variant === ToolbarItemVariant.separator) {
9526
- return React.createElement(Divider, Object.assign({ className: css(className), orientation: { default: 'vertical' } }, props));
9523
+ return React.createElement(Divider, Object.assign({ className: css$1(className), orientation: { default: 'vertical' } }, props));
9527
9524
  }
9528
- return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbarItem, variant && styles$4.modifiers[toCamel(variant)], variant === ToolbarItemVariant['label-group'] && styles$4.modifiers.labelGroup, isAllExpanded && styles$4.modifiers.expanded, isOverflowContainer && styles$4.modifiers.overflowContainer, formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), formatBreakpointMods(align, styles$4, '', getBreakpoint(width)), formatBreakpointMods(gap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(columnGap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(rowGap, styles$4, '', getBreakpoint(width)), alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline, alignSelf === 'start' && styles$4.modifiers.alignSelfStart, alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline, className) }, (variant === 'label' && { 'aria-hidden': true }), { id: id }, props), children))));
9525
+ return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css$1(styles$4.toolbarItem, variant && styles$4.modifiers[toCamel(variant)], variant === ToolbarItemVariant['label-group'] && styles$4.modifiers.labelGroup, isAllExpanded && styles$4.modifiers.expanded, isOverflowContainer && styles$4.modifiers.overflowContainer, formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), formatBreakpointMods(align, styles$4, '', getBreakpoint(width)), formatBreakpointMods(gap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(columnGap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(rowGap, styles$4, '', getBreakpoint(width)), alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline, alignSelf === 'start' && styles$4.modifiers.alignSelfStart, alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline, className) }, (variant === 'label' && { 'aria-hidden': true }), { id: id }, props), children))));
9529
9526
  };
9530
9527
  ToolbarItem.displayName = 'ToolbarItem';
9531
9528
 
@@ -9540,7 +9537,7 @@ var ToolbarGroupVariant;
9540
9537
  class ToolbarGroupWithRef extends React.Component {
9541
9538
  render() {
9542
9539
  const _a = this.props, { visibility, align, alignItems, alignSelf, gap, columnGap, rowGap, className, variant, children, isOverflowContainer, innerRef } = _a, props = __rest$1(_a, ["visibility", "align", "alignItems", "alignSelf", "gap", "columnGap", "rowGap", "className", "variant", "children", "isOverflowContainer", "innerRef"]);
9543
- return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbarGroup, variant &&
9540
+ return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css$1(styles$4.toolbarGroup, variant &&
9544
9541
  styles$4.modifiers[toCamel(variant)], formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), formatBreakpointMods(align, styles$4, '', getBreakpoint(width)), formatBreakpointMods(gap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(columnGap, styles$4, '', getBreakpoint(width)), formatBreakpointMods(rowGap, styles$4, '', getBreakpoint(width)), alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline, alignSelf === 'start' && styles$4.modifiers.alignSelfStart, alignSelf === 'center' && styles$4.modifiers.alignSelfCenter, alignSelf === 'baseline' && styles$4.modifiers.alignSelfBaseline, isOverflowContainer && styles$4.modifiers.overflowContainer, className) }, props, { ref: innerRef }), children))));
9545
9542
  }
9546
9543
  }
@@ -9563,8 +9560,8 @@ class ToolbarLabelGroupContent extends React.Component {
9563
9560
  const isHidden = numberOfFilters === 0 || isExpanded;
9564
9561
  const showNumberOfFilters = collapseListedFilters && numberOfFilters > 0 && !isExpanded;
9565
9562
  const showDefaultClearFilter = showClearFiltersButton && !isExpanded && !customLabelGroupContent;
9566
- return (React.createElement("div", Object.assign({ className: css(styles$4.toolbarContent, isHidden && styles$4.modifiers.hidden, className) }, ((numberOfFilters === 0 || isExpanded) && { hidden: true }), { ref: labelGroupContentRef }, props),
9567
- React.createElement(ToolbarGroup, Object.assign({ className: css(collapseListedFilters && styles$4.modifiers.hidden) }, (collapseListedFilters && { hidden: true }), (collapseListedFilters && { 'aria-hidden': true }))),
9563
+ return (React.createElement("div", Object.assign({ className: css$1(styles$4.toolbarContent, isHidden && styles$4.modifiers.hidden, className) }, ((numberOfFilters === 0 || isExpanded) && { hidden: true }), { ref: labelGroupContentRef }, props),
9564
+ React.createElement(ToolbarGroup, Object.assign({ className: css$1(collapseListedFilters && styles$4.modifiers.hidden) }, (collapseListedFilters && { hidden: true }), (collapseListedFilters && { 'aria-hidden': true }))),
9568
9565
  (showNumberOfFilters || showDefaultClearFilter || customLabelGroupContent) && (React.createElement(ToolbarGroup, { variant: "action-group-inline" },
9569
9566
  showNumberOfFilters && React.createElement(ToolbarItem, null, numberOfFiltersText(numberOfFilters)),
9570
9567
  showDefaultClearFilter && (React.createElement(ToolbarItem, null,
@@ -9627,7 +9624,7 @@ class Toolbar extends React.Component {
9627
9624
  const isExpanded = isToggleManaged ? isManagedToggleExpanded : isExpandedProp;
9628
9625
  const numberOfFilters = this.getNumberOfFilters();
9629
9626
  const showClearFiltersButton = numberOfFilters > 0;
9630
- return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbar, isFullHeight && styles$4.modifiers.fullHeight, isStatic && styles$4.modifiers.static, isSticky && styles$4.modifiers.sticky, formatBreakpointMods(inset, styles$4, '', getBreakpoint(width)), colorVariant === 'primary' && styles$4.modifiers.primary, colorVariant === 'secondary' && styles$4.modifiers.secondary, colorVariant === 'no-background' && styles$4.modifiers.noBackground, className), id: randomId }, getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId), props),
9627
+ return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css$1(styles$4.toolbar, isFullHeight && styles$4.modifiers.fullHeight, isStatic && styles$4.modifiers.static, isSticky && styles$4.modifiers.sticky, formatBreakpointMods(inset, styles$4, '', getBreakpoint(width)), colorVariant === 'primary' && styles$4.modifiers.primary, colorVariant === 'secondary' && styles$4.modifiers.secondary, colorVariant === 'no-background' && styles$4.modifiers.noBackground, className), id: randomId }, getOUIAProps(Toolbar.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId), props),
9631
9628
  React.createElement(ToolbarContext.Provider, { value: {
9632
9629
  isExpanded,
9633
9630
  toggleIsExpanded: isToggleManaged ? this.toggleIsExpanded : toggleIsExpanded,
@@ -9668,7 +9665,7 @@ class ToolbarContent extends React.Component {
9668
9665
  }
9669
9666
  render() {
9670
9667
  const _a = this.props, { className, children, isExpanded, toolbarId, visibility, alignItems, clearAllFilters, showClearFiltersButton, clearFiltersButtonText } = _a, props = __rest$1(_a, ["className", "children", "isExpanded", "toolbarId", "visibility", "alignItems", "clearAllFilters", "showClearFiltersButton", "clearFiltersButtonText"]);
9671
- return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css(styles$4.toolbarContent, formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), className), ref: this.expandableContentRef }, props),
9668
+ return (React.createElement(PageContext.Consumer, null, ({ width, getBreakpoint }) => (React.createElement("div", Object.assign({ className: css$1(styles$4.toolbarContent, formatBreakpointMods(visibility, styles$4, '', getBreakpoint(width)), className), ref: this.expandableContentRef }, props),
9672
9669
  React.createElement(ToolbarContext.Consumer, null, ({ clearAllFilters: clearAllFiltersContext, clearFiltersButtonText: clearFiltersButtonContext, showClearFiltersButton: showClearFiltersButtonContext, isExpanded: isExpandedContext, toolbarId: toolbarIdContext }) => {
9673
9670
  const expandableContentId = `${toolbarId || toolbarIdContext}-expandable-content-${ToolbarContent.currentId++}`;
9674
9671
  return (React.createElement(ToolbarContentContext.Provider, { value: {
@@ -9680,7 +9677,7 @@ class ToolbarContent extends React.Component {
9680
9677
  clearFiltersButtonText: clearFiltersButtonText || clearFiltersButtonContext,
9681
9678
  showClearFiltersButton: showClearFiltersButton || showClearFiltersButtonContext
9682
9679
  } },
9683
- React.createElement("div", { className: css(styles$4.toolbarContentSection, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline) }, children)));
9680
+ React.createElement("div", { className: css$1(styles$4.toolbarContentSection, alignItems === 'center' && styles$4.modifiers.alignItemsCenter, alignItems === 'start' && styles$4.modifiers.alignItemsStart, alignItems === 'baseline' && styles$4.modifiers.alignItemsBaseline) }, children)));
9684
9681
  })))));
9685
9682
  }
9686
9683
  }
@@ -9760,24 +9757,24 @@ const WizardNavItem = (_a) => {
9760
9757
  // eslint-disable-next-line no-console
9761
9758
  console.error('WizardNavItem: When using an anchor, please provide an href');
9762
9759
  }
9763
- return (React.createElement("li", Object.assign({ className: css(styles$3.wizardNavItem, isExpandable && styles$3.modifiers.expandable, isExpandable && isExpanded && styles$3.modifiers.expanded, className) }, props),
9760
+ return (React.createElement("li", Object.assign({ className: css$1(styles$3.wizardNavItem, isExpandable && styles$3.modifiers.expandable, isExpandable && isExpanded && styles$3.modifiers.expanded, className) }, props),
9764
9761
  React.createElement(NavItemComponent, Object.assign({}, (NavItemComponent === 'a'
9765
9762
  ? { tabIndex: isDisabled ? -1 : undefined, href, target }
9766
9763
  : { disabled: isDisabled }), (id && { id: id.toString() }), { onClick: (e) => {
9767
9764
  e.stopPropagation();
9768
9765
  isExpandable ? setIsExpanded(!isExpanded || isCurrent) : onClick === null || onClick === void 0 ? void 0 : onClick(e, stepIndex);
9769
- }, className: css(styles$3.wizardNavLink, isCurrent && styles$3.modifiers.current, isDisabled && styles$3.modifiers.disabled, status === WizardNavItemStatus.Error && styles$3.modifiers.danger, status === WizardNavItemStatus.Success && styles$3.modifiers.success), "aria-disabled": isDisabled ? true : null, "aria-current": isCurrent && !children ? 'step' : false }, (isExpandable && { 'aria-expanded': isExpanded }), ouiaProps),
9766
+ }, className: css$1(styles$3.wizardNavLink, isCurrent && styles$3.modifiers.current, isDisabled && styles$3.modifiers.disabled, status === WizardNavItemStatus.Error && styles$3.modifiers.danger, status === WizardNavItemStatus.Success && styles$3.modifiers.success), "aria-disabled": isDisabled ? true : null, "aria-current": isCurrent && !children ? 'step' : false }, (isExpandable && { 'aria-expanded': isExpanded }), ouiaProps),
9770
9767
  status !== WizardNavItemStatus.Default && (React.createElement(React.Fragment, null,
9771
9768
  React.createElement("span", { className: "pf-v6-screen-reader" },
9772
9769
  ", ",
9773
9770
  status),
9774
- React.createElement("span", { className: css(styles$3.wizardNavLinkStatusIcon) },
9771
+ React.createElement("span", { className: css$1(styles$3.wizardNavLinkStatusIcon) },
9775
9772
  status === WizardNavItemStatus.Error && React.createElement(ExclamationCircleIcon, null),
9776
9773
  status === WizardNavItemStatus.Success && React.createElement(CheckCircleIcon$1, null)))),
9777
- React.createElement("span", { className: css(styles$3.wizardNavLinkMain) }, isExpandable ? (React.createElement(React.Fragment, null,
9778
- React.createElement("span", { className: css(styles$3.wizardNavLinkText) }, content),
9779
- React.createElement("span", { className: css(styles$3.wizardNavLinkToggle) },
9780
- React.createElement("span", { className: css(styles$3.wizardNavLinkToggleIcon) },
9774
+ React.createElement("span", { className: css$1(styles$3.wizardNavLinkMain) }, isExpandable ? (React.createElement(React.Fragment, null,
9775
+ React.createElement("span", { className: css$1(styles$3.wizardNavLinkText) }, content),
9776
+ React.createElement("span", { className: css$1(styles$3.wizardNavLinkToggle) },
9777
+ React.createElement("span", { className: css$1(styles$3.wizardNavLinkToggleIcon) },
9781
9778
  React.createElement(AngleRightIcon, { "aria-label": `${isCurrent ? 'Collapse' : 'Expand'} step icon` }))))) : (React.createElement(React.Fragment, null, content)))),
9782
9779
  children));
9783
9780
  };
@@ -10338,14 +10335,14 @@ const l_flex_item_Order = {
10338
10335
  const Flex = (_a) => {
10339
10336
  var { children = null, className = '', component = 'div', spacer, spaceItems, gap, rowGap, columnGap, grow, shrink, flex, direction, alignItems, alignContent, alignSelf, align, justifyContent, display, fullWidth, flexWrap, order, style } = _a, props = __rest$1(_a, ["children", "className", "component", "spacer", "spaceItems", "gap", "rowGap", "columnGap", "grow", "shrink", "flex", "direction", "alignItems", "alignContent", "alignSelf", "align", "justifyContent", "display", "fullWidth", "flexWrap", "order", "style"]);
10340
10337
  const Component = component;
10341
- return (React.createElement(Component, Object.assign({ className: css(styles$2.flex, formatBreakpointMods(spacer, styles$2), formatBreakpointMods(spaceItems, styles$2), formatBreakpointMods(grow, styles$2), formatBreakpointMods(shrink, styles$2), formatBreakpointMods(flex, styles$2), formatBreakpointMods(direction, styles$2), formatBreakpointMods(alignItems, styles$2), formatBreakpointMods(alignContent, styles$2), formatBreakpointMods(alignSelf, styles$2), formatBreakpointMods(align, styles$2), formatBreakpointMods(justifyContent, styles$2), formatBreakpointMods(display, styles$2), formatBreakpointMods(fullWidth, styles$2), formatBreakpointMods(flexWrap, styles$2), formatBreakpointMods(gap, styles$2), formatBreakpointMods(rowGap, styles$2), formatBreakpointMods(columnGap, styles$2), className), style: style || order ? Object.assign(Object.assign({}, style), setBreakpointCssVars(order, l_flex_item_Order.name)) : undefined }, props), children));
10338
+ return (React.createElement(Component, Object.assign({ className: css$1(styles$2.flex, formatBreakpointMods(spacer, styles$2), formatBreakpointMods(spaceItems, styles$2), formatBreakpointMods(grow, styles$2), formatBreakpointMods(shrink, styles$2), formatBreakpointMods(flex, styles$2), formatBreakpointMods(direction, styles$2), formatBreakpointMods(alignItems, styles$2), formatBreakpointMods(alignContent, styles$2), formatBreakpointMods(alignSelf, styles$2), formatBreakpointMods(align, styles$2), formatBreakpointMods(justifyContent, styles$2), formatBreakpointMods(display, styles$2), formatBreakpointMods(fullWidth, styles$2), formatBreakpointMods(flexWrap, styles$2), formatBreakpointMods(gap, styles$2), formatBreakpointMods(rowGap, styles$2), formatBreakpointMods(columnGap, styles$2), className), style: style || order ? Object.assign(Object.assign({}, style), setBreakpointCssVars(order, l_flex_item_Order.name)) : undefined }, props), children));
10342
10339
  };
10343
10340
  Flex.displayName = 'Flex';
10344
10341
 
10345
10342
  const FlexItem = (_a) => {
10346
10343
  var { children = null, className = '', component = 'div', spacer, grow, shrink, flex, alignSelf, align, fullWidth, order, style } = _a, props = __rest$1(_a, ["children", "className", "component", "spacer", "grow", "shrink", "flex", "alignSelf", "align", "fullWidth", "order", "style"]);
10347
10344
  const Component = component;
10348
- return (React.createElement(Component, Object.assign({}, props, { className: css(formatBreakpointMods(spacer, styles$2), formatBreakpointMods(grow, styles$2), formatBreakpointMods(shrink, styles$2), formatBreakpointMods(flex, styles$2), formatBreakpointMods(alignSelf, styles$2), formatBreakpointMods(align, styles$2), formatBreakpointMods(fullWidth, styles$2), className), style: style || order ? Object.assign(Object.assign({}, style), setBreakpointCssVars(order, l_flex_item_Order.name)) : undefined }), children));
10345
+ return (React.createElement(Component, Object.assign({}, props, { className: css$1(formatBreakpointMods(spacer, styles$2), formatBreakpointMods(grow, styles$2), formatBreakpointMods(shrink, styles$2), formatBreakpointMods(flex, styles$2), formatBreakpointMods(alignSelf, styles$2), formatBreakpointMods(align, styles$2), formatBreakpointMods(fullWidth, styles$2), className), style: style || order ? Object.assign(Object.assign({}, style), setBreakpointCssVars(order, l_flex_item_Order.name)) : undefined }), children));
10349
10346
  };
10350
10347
  FlexItem.displayName = 'FlexItem';
10351
10348
 
@@ -10382,7 +10379,7 @@ const Gallery = (_a) => {
10382
10379
  value));
10383
10380
  }
10384
10381
  const widthStyles = Object.assign(Object.assign({}, minWidthStyles), maxWidthStyles);
10385
- return (React.createElement(Component, Object.assign({ className: css(styles$1.gallery, hasGutter && styles$1.modifiers.gutter, className) }, props, ((minWidths || maxWidths) && { style: Object.assign(Object.assign({}, widthStyles), props.style) })), children));
10382
+ return (React.createElement(Component, Object.assign({ className: css$1(styles$1.gallery, hasGutter && styles$1.modifiers.gutter, className) }, props, ((minWidths || maxWidths) && { style: Object.assign(Object.assign({}, widthStyles), props.style) })), children));
10386
10383
  };
10387
10384
  Gallery.displayName = 'Gallery';
10388
10385
 
@@ -10398,13 +10395,13 @@ var styles = {
10398
10395
  const Stack = (_a) => {
10399
10396
  var { hasGutter = false, className = '', children = null, component = 'div' } = _a, props = __rest$1(_a, ["hasGutter", "className", "children", "component"]);
10400
10397
  const Component = component;
10401
- return (React.createElement(Component, Object.assign({}, props, { className: css(styles.stack, hasGutter && styles.modifiers.gutter, className) }), children));
10398
+ return (React.createElement(Component, Object.assign({}, props, { className: css$1(styles.stack, hasGutter && styles.modifiers.gutter, className) }), children));
10402
10399
  };
10403
10400
  Stack.displayName = 'Stack';
10404
10401
 
10405
10402
  const StackItem = (_a) => {
10406
10403
  var { isFilled = false, className = '', children = null } = _a, props = __rest$1(_a, ["isFilled", "className", "children"]);
10407
- return (React.createElement("div", Object.assign({}, props, { className: css(styles.stackItem, isFilled && styles.modifiers.fill, className) }), children));
10404
+ return (React.createElement("div", Object.assign({}, props, { className: css$1(styles.stackItem, isFilled && styles.modifiers.fill, className) }), children));
10408
10405
  };
10409
10406
  StackItem.displayName = 'StackItem';
10410
10407
 
@@ -10459,6 +10456,36 @@ exports["default"] = exports.SearchIcon;
10459
10456
 
10460
10457
  var SearchIcon = /*@__PURE__*/getDefaultExportFromCjs(searchIcon);
10461
10458
 
10459
+ /** Joins args into a className string
10460
+ *
10461
+ * @param {any} args list of objects, string, or arrays to reduce
10462
+ */
10463
+ function css(...args) {
10464
+ // Adapted from https://github.com/JedWatson/classnames/blob/master/index.js
10465
+ const classes = [];
10466
+ const hasOwn = {}.hasOwnProperty;
10467
+ args.filter(Boolean).forEach((arg) => {
10468
+ const argType = typeof arg;
10469
+ if (argType === 'string' || argType === 'number') {
10470
+ classes.push(arg);
10471
+ }
10472
+ else if (Array.isArray(arg) && arg.length) {
10473
+ const inner = css(...arg);
10474
+ if (inner) {
10475
+ classes.push(inner);
10476
+ }
10477
+ }
10478
+ else if (argType === 'object') {
10479
+ for (const key in arg) {
10480
+ if (hasOwn.call(arg, key) && arg[key]) {
10481
+ classes.push(key);
10482
+ }
10483
+ }
10484
+ }
10485
+ });
10486
+ return classes.join(' ');
10487
+ }
10488
+
10462
10489
  function _extends() {
10463
10490
  _extends = Object.assign ? Object.assign.bind() : function (target) {
10464
10491
  for (var i = 1; i < arguments.length; i++) {