@patternfly/patternfly-doc-core 1.4.0 → 1.6.0

package/dist/server/chunks/{PropsTables_D_v4KAMn.mjs → PropsTables_IgCNCQTX.mjs}

@@ -1,12 +1,11 @@
-import { c as createComponent, a as createAstro, r as renderComponent, b as renderTemplate } from './astro/server_D4f31GMD.mjs';
+import { c as createComponent, a as createAstro, r as renderComponent, b as renderTemplate } from './astro/server_Cl9jPh4p.mjs';
 import 'kleur/colors';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { c as css, b as createIcon, B as Button, T as TimesIcon, F as getUniqueId, P as Popper, K as KeyTypes, H as useIsomorphicLayoutEffect, I as Tooltip, J as BellIcon, L as InfoCircleIcon, d as ExclamationCircleIcon, E as ExclamationTriangleIcon, C as CheckCircleIcon, x as Dropdown, M as MenuToggle, y as DropdownList, D as Divider, z as DropdownItem, k as AngleDownIcon, N as checkStyles, O as StarIcon, Q as Checkbox, R as setTabIndex, u as useOUIAProps, U as handleArrows } from './angle-down-icon_BNJvzYv-.mjs';
+import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { c as css, b as createIcon, B as Button, T as TimesIcon, F as getUniqueId, P as Popper, K as KeyTypes, H as useIsomorphicLayoutEffect, I as Tooltip, J as BellIcon, L as InfoCircleIcon, d as ExclamationCircleIcon, E as ExclamationTriangleIcon, C as CheckCircleIcon, x as Dropdown, M as MenuToggle, y as DropdownList, D as Divider, z as DropdownItem, k as AngleDownIcon, N as checkStyles, O as StarIcon, Q as Checkbox, R as setTabIndex, u as useOUIAProps, U as handleArrows } from './angle-down-icon_C5YQ7k8s.mjs';
 /* empty css                          */
 import { __rest } from 'tslib';
-import * as React from 'react';
-import React__default, { useRef, useEffect, forwardRef, useImperativeHandle, useState } from 'react';
-/* empty css                          */
+/* empty css                         */
+import { useRef, useEffect, forwardRef, useImperativeHandle, createContext, useState, createRef, Fragment, createElement, cloneElement, useContext } from 'react';
 import mergeWith from 'lodash/mergeWith.js';
 import { createFocusTrap } from 'focus-trap';
 
@@ -58,7 +57,7 @@ const FocusTrap = forwardRef(function FocusTrap(_a, forwardedRef) {
             });
         }
     });
-    return React__default.createElement("div", Object.assign({ ref: ref }, props));
+    return jsx("div", Object.assign({ ref: ref }, props));
 });
 FocusTrap.displayName = 'FocusTrap';
 
@@ -71,13 +70,13 @@ const styles$5 = {
 
 const ActionList = (_a) => {
     var { children, isIconList, className } = _a, props = __rest(_a, ["children", "isIconList", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$5.actionList, isIconList && styles$5.modifiers.icons, className) }, props), children));
+    return (jsx("div", Object.assign({ className: css(styles$5.actionList, isIconList && styles$5.modifiers.icons, className) }, props, { children: children })));
 };
 ActionList.displayName = 'ActionList';
 
 const ActionListItem = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(`${styles$5.actionList}__item`, className) }, props), children));
+    return (jsx("div", Object.assign({ className: css(`${styles$5.actionList}__item`, className) }, props, { children: children })));
 };
 ActionListItem.displayName = 'ActionListItem';
 
@@ -126,60 +125,54 @@ const styles$4 = {
   "popoverTitleText": "pf-v6-c-popover__title-text"
 };
 
-const PopoverContext = React.createContext({});
+const PopoverContext = createContext({});
 
 const PopoverContent = (_a) => {
     var { className = null, children } = _a, props = __rest(_a, ["className", "children"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$4.popoverContent, className) }, props), children));
+    return (jsx("div", Object.assign({ className: css(styles$4.popoverContent, className) }, props, { children: children })));
 };
 PopoverContent.displayName = 'PopoverContent';
 
 const PopoverBody = (_a) => {
     var { children, id, className } = _a, props = __rest(_a, ["children", "id", "className"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$4.popoverBody, className), id: id }, props), children));
+    return (jsx("div", Object.assign({ className: css(styles$4.popoverBody, className), id: id }, props, { children: children })));
 };
 PopoverBody.displayName = 'PopoverBody';
 
 const PopoverHeaderIcon = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("span", Object.assign({ className: css(styles$4.popoverTitleIcon, className) }, props), children));
+    return (jsx("span", Object.assign({ className: css(styles$4.popoverTitleIcon, className) }, props, { children: children })));
 };
 PopoverHeaderIcon.displayName = 'PopoverHeaderIcon';
 
 const PopoverHeaderText = (_a) => {
     var { children, className, headingLevel } = _a, props = __rest(_a, ["children", "className", "headingLevel"]);
     const HeadingLevel = headingLevel;
-    return (React.createElement(HeadingLevel, Object.assign({ className: css(styles$4.popoverTitleText, className) }, props), children));
+    return (jsx(HeadingLevel, Object.assign({ className: css(styles$4.popoverTitleText, className) }, props, { children: children })));
 };
 PopoverHeaderText.displayName = 'PopoverHeaderText';
 
 const PopoverHeader = (_a) => {
     var { children, icon, className, titleHeadingLevel = 'h6', alertSeverityVariant, id, alertSeverityScreenReaderText } = _a, props = __rest(_a, ["children", "icon", "className", "titleHeadingLevel", "alertSeverityVariant", "id", "alertSeverityScreenReaderText"]);
-    return (React.createElement("header", Object.assign({ className: css(styles$4.popoverHeader, className) }, props),
-        React.createElement("div", { className: css(styles$4.popoverTitle), id: id },
-            icon && React.createElement(PopoverHeaderIcon, null, icon),
-            React.createElement(PopoverHeaderText, { headingLevel: titleHeadingLevel },
-                alertSeverityVariant && alertSeverityScreenReaderText && (React.createElement("span", { className: "pf-v6-screen-reader" }, alertSeverityScreenReaderText)),
-                children))));
+    return (jsx("header", Object.assign({ className: css(styles$4.popoverHeader, className) }, props, { children: jsxs("div", { className: css(styles$4.popoverTitle), id: id, children: [icon && jsx(PopoverHeaderIcon, { children: icon }), jsxs(PopoverHeaderText, { headingLevel: titleHeadingLevel, children: [alertSeverityVariant && alertSeverityScreenReaderText && (jsx("span", { className: "pf-v6-screen-reader", children: alertSeverityScreenReaderText })), children] })] }) })));
 };
 PopoverHeader.displayName = 'PopoverHeader';
 
 const PopoverFooter = (_a) => {
     var { children, className = '' } = _a, props = __rest(_a, ["children", "className"]);
-    return (React.createElement("footer", Object.assign({ className: css(styles$4.popoverFooter, className) }, props), children));
+    return (jsx("footer", Object.assign({ className: css(styles$4.popoverFooter, className) }, props, { children: children })));
 };
 PopoverFooter.displayName = 'PopoverFooter';
 
 const PopoverCloseButton = (_a) => {
     var { onClose = () => undefined } = _a, props = __rest(_a, ["onClose"]);
-    return (React.createElement("div", { className: css(styles$4.popoverClose) },
-        React.createElement(Button, Object.assign({ onClick: onClose, variant: "plain", "aria-label": true }, props, { style: { pointerEvents: 'auto' }, icon: React.createElement(TimesIcon, null) }))));
+    return (jsx("div", { className: css(styles$4.popoverClose), children: jsx(Button, Object.assign({ onClick: onClose, variant: "plain", "aria-label": true }, props, { style: { pointerEvents: 'auto' }, icon: jsx(TimesIcon, {}) })) }));
 };
 PopoverCloseButton.displayName = 'PopoverCloseButton';
 
 const PopoverArrow = (_a) => {
     var { className = '' } = _a, props = __rest(_a, ["className"]);
-    return React.createElement("div", Object.assign({ className: css(styles$4.popoverArrow, className) }, props));
+    return jsx("div", Object.assign({ className: css(styles$4.popoverArrow, className) }, props));
 };
 PopoverArrow.displayName = 'PopoverArrow';
 
@@ -237,13 +230,13 @@ const Popover = (_a) => {
     // const hideOnClick = true;
     const uniqueId = id || getUniqueId();
     const triggerManually = isVisible !== null;
-    const [visible, setVisible] = React.useState(false);
-    const [focusTrapActive, setFocusTrapActive] = React.useState(Boolean(propWithFocusTrap));
-    const popoverRef = React.useRef(null);
-    React.useEffect(() => {
+    const [visible, setVisible] = useState(false);
+    const [focusTrapActive, setFocusTrapActive] = useState(Boolean(propWithFocusTrap));
+    const popoverRef = useRef(null);
+    useEffect(() => {
         onMount();
     }, []);
-    React.useEffect(() => {
+    useEffect(() => {
         if (triggerManually) {
             if (isVisible) {
                 show(undefined, true);
@@ -368,7 +361,7 @@ const Popover = (_a) => {
             hide(event);
         }
     };
-    const content = (React.createElement(FocusTrap, Object.assign({ ref: popoverRef, active: focusTrapActive, focusTrapOptions: {
+    const content = (jsxs(FocusTrap, Object.assign({ ref: popoverRef, active: focusTrapActive, focusTrapOptions: {
             returnFocusOnDeactivate: propWithFocusTrap !== false,
             clickOutsideDeactivates: true,
             // FocusTrap's initialFocus can accept false as a value to prevent initial focus.
@@ -397,15 +390,8 @@ const Popover = (_a) => {
         }, preventScrollOnDeactivate: true, className: css(styles$4.popover, alertSeverityVariant && alertStyle[alertSeverityVariant], hasNoPadding && styles$4.modifiers.noPadding, hasAutoWidth && styles$4.modifiers.widthAuto, className), role: "dialog", "aria-modal": "true", "aria-label": headerContent ? undefined : ariaLabel, "aria-labelledby": headerContent ? `popover-${uniqueId}-header` : undefined, "aria-describedby": `popover-${uniqueId}-body`, onMouseDown: onContentMouseDown, style: {
             minWidth: hasCustomMinWidth ? minWidth : null,
             maxWidth: hasCustomMaxWidth ? maxWidth : null
-        } }, rest),
-        React.createElement(PopoverArrow, null),
-        React.createElement(PopoverContent, null,
-            showClose && triggerAction === 'click' && (React.createElement(PopoverCloseButton, { onClose: closePopover, "aria-label": closeBtnAriaLabel })),
-            headerContent && (React.createElement(PopoverHeader, { id: `popover-${uniqueId}-header`, icon: headerIcon, alertSeverityVariant: alertSeverityVariant, alertSeverityScreenReaderText: alertSeverityScreenReaderText || `${alertSeverityVariant} alert:`, titleHeadingLevel: headerComponent }, typeof headerContent === 'function' ? headerContent(hide) : headerContent)),
-            React.createElement(PopoverBody, { id: `popover-${uniqueId}-body` }, typeof bodyContent === 'function' ? bodyContent(hide) : bodyContent),
-            footerContent && (React.createElement(PopoverFooter, { id: `popover-${uniqueId}-footer` }, typeof footerContent === 'function' ? footerContent(hide) : footerContent)))));
-    return (React.createElement(PopoverContext.Provider, { value: { headerComponent } },
-        React.createElement(Popper, { trigger: children, triggerRef: triggerRef, popper: content, popperRef: popoverRef, minWidth: minWidth, appendTo: appendTo, isVisible: visible, onMouseEnter: triggerAction === 'hover' && onMouseEnter, onMouseLeave: triggerAction === 'hover' && onMouseLeave, onPopperMouseEnter: triggerAction === 'hover' && onMouseEnter, onPopperMouseLeave: triggerAction === 'hover' && onMouseLeave, onFocus: triggerAction === 'hover' && onFocus, onBlur: triggerAction === 'hover' && onBlur, positionModifiers: positionModifiers, distance: distance, placement: position, onTriggerClick: triggerAction === 'click' && onTriggerClick, onDocumentClick: onDocumentClick, onDocumentKeyDown: onDocumentKeyDown, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior, animationDuration: animationDuration, onHidden: onHidden, onShown: onShown, onHide: () => setFocusTrapActive(false) })));
+        } }, rest, { children: [jsx(PopoverArrow, {}), jsxs(PopoverContent, { children: [showClose && triggerAction === 'click' && (jsx(PopoverCloseButton, { onClose: closePopover, "aria-label": closeBtnAriaLabel })), headerContent && (jsx(PopoverHeader, { id: `popover-${uniqueId}-header`, icon: headerIcon, alertSeverityVariant: alertSeverityVariant, alertSeverityScreenReaderText: alertSeverityScreenReaderText || `${alertSeverityVariant} alert:`, titleHeadingLevel: headerComponent, children: typeof headerContent === 'function' ? headerContent(hide) : headerContent })), jsx(PopoverBody, { id: `popover-${uniqueId}-body`, children: typeof bodyContent === 'function' ? bodyContent(hide) : bodyContent }), footerContent && (jsx(PopoverFooter, { id: `popover-${uniqueId}-footer`, children: typeof footerContent === 'function' ? footerContent(hide) : footerContent }))] })] })));
+    return (jsx(PopoverContext.Provider, { value: { headerComponent }, children: jsx(Popper, { trigger: children, triggerRef: triggerRef, popper: content, popperRef: popoverRef, minWidth: minWidth, appendTo: appendTo, isVisible: visible, onMouseEnter: triggerAction === 'hover' && onMouseEnter, onMouseLeave: triggerAction === 'hover' && onMouseLeave, onPopperMouseEnter: triggerAction === 'hover' && onMouseEnter, onPopperMouseLeave: triggerAction === 'hover' && onMouseLeave, onFocus: triggerAction === 'hover' && onFocus, onBlur: triggerAction === 'hover' && onBlur, positionModifiers: positionModifiers, distance: distance, placement: position, onTriggerClick: triggerAction === 'click' && onTriggerClick, onDocumentClick: onDocumentClick, onDocumentKeyDown: onDocumentKeyDown, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior, animationDuration: animationDuration, onHidden: onHidden, onShown: onShown, onHide: () => setFocusTrapActive(false) }) }));
 };
 Popover.displayName = 'Popover';
 
@@ -461,21 +447,21 @@ const colorStyles = {
     grey: ''
 };
 const statusIcons = {
-    success: React.createElement(CheckCircleIcon, null),
-    warning: React.createElement(ExclamationTriangleIcon, null),
-    danger: React.createElement(ExclamationCircleIcon, null),
-    info: React.createElement(InfoCircleIcon, null),
-    custom: React.createElement(BellIcon, null)
+    success: jsx(CheckCircleIcon, {}),
+    warning: jsx(ExclamationTriangleIcon, {}),
+    danger: jsx(ExclamationCircleIcon, {}),
+    info: jsx(InfoCircleIcon, {}),
+    custom: jsx(BellIcon, {})
 };
 const Label = (_a) => {
-    var { children, className = '', color = 'grey', variant = 'filled', status, isCompact = false, isDisabled = false, isEditable = false, editableProps, textMaxWidth, tooltipPosition, icon, onClose, onClick: onLabelClick, onEditCancel, onEditComplete, closeBtn, closeBtnAriaLabel, closeBtnProps, href, render } = _a, props = __rest(_a, ["children", "className", "color", "variant", "status", "isCompact", "isDisabled", "isEditable", "editableProps", "textMaxWidth", "tooltipPosition", "icon", "onClose", "onClick", "onEditCancel", "onEditComplete", "closeBtn", "closeBtnAriaLabel", "closeBtnProps", "href", "render"]);
+    var { children, className = '', color = 'grey', variant = 'filled', status, isCompact = false, isDisabled = false, isEditable = false, isClickable: isClickableProp = false, editableProps, textMaxWidth, tooltipPosition, icon, onClose, onClick: onLabelClick, onEditCancel, onEditComplete, closeBtn, closeBtnAriaLabel, closeBtnProps, href, render } = _a, props = __rest(_a, ["children", "className", "color", "variant", "status", "isCompact", "isDisabled", "isEditable", "isClickable", "editableProps", "textMaxWidth", "tooltipPosition", "icon", "onClose", "onClick", "onEditCancel", "onEditComplete", "closeBtn", "closeBtnAriaLabel", "closeBtnProps", "href", "render"]);
     const [isEditableActive, setIsEditableActive] = useState(false);
     const [currValue, setCurrValue] = useState(children);
-    const editableButtonRef = React.useRef();
-    const editableInputRef = React.useRef();
+    const editableButtonRef = useRef(undefined);
+    const editableInputRef = useRef(undefined);
     const isOverflowLabel = variant === 'overflow';
     const isAddLabel = variant === 'add';
-    const isClickable = (onLabelClick && !isOverflowLabel && !isAddLabel) || href;
+    const isClickable = isClickableProp || (onLabelClick && !isOverflowLabel && !isAddLabel) || href;
     let _icon;
     if (status) {
         _icon = statusIcons[status];
@@ -483,7 +469,7 @@ const Label = (_a) => {
     if (icon) {
         _icon = icon;
     }
-    React.useEffect(() => {
+    useEffect(() => {
         document.addEventListener('mousedown', onDocMouseDown);
         document.addEventListener('keydown', onKeyDown);
         return () => {
@@ -491,7 +477,7 @@ const Label = (_a) => {
             document.removeEventListener('keydown', onKeyDown);
         };
     });
-    React.useEffect(() => {
+    useEffect(() => {
         if (onLabelClick && href) {
             // eslint-disable-next-line no-console
             console.warn('Link labels cannot have onClick passed, this results in invalid HTML. Please remove either the href or onClick prop.');
@@ -558,26 +544,24 @@ const Label = (_a) => {
         }
     };
     const isClickableDisabled = (href || onLabelClick) && isDisabled;
-    const defaultCloseButton = (React.createElement(Button, Object.assign({ type: "button", variant: "plain", hasNoPadding: true, onClick: onClose, "aria-label": closeBtnAriaLabel || `Close ${children}` }, (isClickableDisabled && { isDisabled: true }), closeBtnProps, { icon: React.createElement(TimesIcon, null) })));
-    const closeButton = React.createElement("span", { className: css(labelStyles.labelActions) }, closeBtn || defaultCloseButton);
-    const textRef = React.createRef();
+    const defaultCloseButton = (jsx(Button, Object.assign({ type: "button", variant: "plain", hasNoPadding: true, onClick: onClose, "aria-label": closeBtnAriaLabel || `Close ${children}` }, (isClickableDisabled && { isDisabled: true }), closeBtnProps, { icon: jsx(TimesIcon, {}) })));
+    const closeButton = jsx("span", { className: css(labelStyles.labelActions), children: closeBtn || defaultCloseButton });
+    const textRef = createRef();
     // ref to apply tooltip when rendered is used
-    const componentRef = React.useRef();
-    const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
+    const componentRef = useRef(undefined);
+    const [isTooltipVisible, setIsTooltipVisible] = useState(false);
     useIsomorphicLayoutEffect(() => {
         const currTextRef = isEditable ? editableButtonRef : textRef;
         if (!isEditableActive) {
             setIsTooltipVisible(currTextRef.current && currTextRef.current.offsetWidth < currTextRef.current.scrollWidth);
         }
     }, [isEditableActive]);
-    const content = (React.createElement(React.Fragment, null,
-        _icon && React.createElement("span", { className: css(labelStyles.labelIcon) }, _icon),
-        React.createElement("span", Object.assign({ ref: textRef, className: css(labelStyles.labelText) }, (textMaxWidth && {
-            style: {
-                [c_label__text_MaxWidth.name]: textMaxWidth
-            }
-        })), children)));
-    React.useEffect(() => {
+    const content = (jsxs(Fragment, { children: [_icon && jsx("span", { className: css(labelStyles.labelIcon), children: _icon }), jsx("span", Object.assign({ ref: textRef, className: css(labelStyles.labelText) }, (textMaxWidth && {
+                style: {
+                    [c_label__text_MaxWidth.name]: textMaxWidth
+                }
+            }), { children: children }))] }));
+    useEffect(() => {
         if (isEditableActive && editableInputRef) {
             editableInputRef.current && editableInputRef.current.focus();
         }
@@ -601,24 +585,19 @@ const Label = (_a) => {
             setIsEditableActive(true);
             e.stopPropagation();
         } }, editableProps))), (isClickableDisabled && isButton && { disabled: true })), (isClickableDisabled && href && { tabIndex: -1, 'aria-disabled': true }));
-    let labelComponentChild = (React.createElement(LabelComponentChildElement, Object.assign({}, labelComponentChildProps), content));
+    let labelComponentChild = (jsx(LabelComponentChildElement, Object.assign({}, labelComponentChildProps, { children: content })));
     if (render) {
-        labelComponentChild = (React.createElement(React.Fragment, null,
-            isTooltipVisible && React.createElement(Tooltip, { triggerRef: componentRef, content: children, position: tooltipPosition }),
-            render({
-                className: labelStyles.labelContent,
-                content,
-                componentRef
-            })));
+        labelComponentChild = (jsxs(Fragment, { children: [isTooltipVisible && jsx(Tooltip, { triggerRef: componentRef, content: children, position: tooltipPosition }), render({
+                    className: labelStyles.labelContent,
+                    content,
+                    componentRef
+                })] }));
     }
     else if (isTooltipVisible) {
-        labelComponentChild = (React.createElement(Tooltip, { content: children, position: tooltipPosition }, labelComponentChild));
+        labelComponentChild = (jsx(Tooltip, { content: children, position: tooltipPosition, children: labelComponentChild }));
     }
     const LabelComponent = (isOverflowLabel ? 'button' : 'span');
-    return (React.createElement(LabelComponent, Object.assign({}, props, { className: css(labelStyles.label, isClickableDisabled && labelStyles.modifiers.disabled, colorStyles[color], variant === 'filled' && labelStyles.modifiers.filled, variant === 'outline' && labelStyles.modifiers.outline, status && labelStyles.modifiers[status], isOverflowLabel && labelStyles.modifiers.overflow, isCompact && labelStyles.modifiers.compact, isEditable && styles$3.modifiers.editable, isEditableActive && labelStyles.modifiers.editableActive, isClickable && labelStyles.modifiers.clickable, isAddLabel && labelStyles.modifiers.add, className), onClick: isOverflowLabel || isAddLabel ? onLabelClick : undefined }, (LabelComponent === 'button' && { type: 'button' })),
-        !isEditableActive && labelComponentChild,
-        !isEditableActive && onClose && closeButton,
-        isEditableActive && (React.createElement("input", Object.assign({ className: css(labelStyles.labelContent), type: "text", id: "editable-input", ref: editableInputRef, value: currValue, onChange: updateVal }, editableProps)))));
+    return (jsxs(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$3.modifiers.editable, isEditableActive && labelStyles.modifiers.editableActive, isClickable && labelStyles.modifiers.clickable, isAddLabel && labelStyles.modifiers.add, className), onClick: isOverflowLabel || isAddLabel ? onLabelClick : undefined }, (LabelComponent === 'button' && { type: 'button' }), { children: [!isEditableActive && labelComponentChild, !isEditableActive && onClose && closeButton, isEditableActive && (jsx("input", Object.assign({ className: css(labelStyles.labelContent), type: "text", id: "editable-input", ref: editableInputRef, value: currValue, onChange: updateVal }, editableProps)))] })));
 };
 Label.displayName = 'Label';
 
@@ -631,7 +610,7 @@ const styles$2 = {
 const Stack = (_a) => {
     var { hasGutter = false, className = '', children = null, component = 'div' } = _a, props = __rest(_a, ["hasGutter", "className", "children", "component"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({}, props, { className: css(styles$2.stack, hasGutter && styles$2.modifiers.gutter, className) }), children));
+    return (jsx(Component, Object.assign({}, props, { className: css(styles$2.stack, hasGutter && styles$2.modifiers.gutter, className), children: children })));
 };
 Stack.displayName = 'Stack';
 
@@ -651,7 +630,7 @@ const ActionsColumnBase = (_a) => {
         position: 'end',
         direction: 'down'
     }, innerRef, firstActionItemRef, isOnOpenChangeDisabled = false } = _a, props = __rest(_a, ["items", "isDisabled", "rowData", "extraData", "actionsToggle", "popperProps", "innerRef", "firstActionItemRef", "isOnOpenChangeDisabled"]);
-    const [isOpen, setIsOpen] = React.useState(false);
+    const [isOpen, setIsOpen] = useState(false);
     const onToggle = () => {
         setIsOpen(!isOpen);
     };
@@ -663,35 +642,32 @@ const ActionsColumnBase = (_a) => {
             onClick(event, extraData && extraData.rowIndex, rowData, extraData);
         }
     };
-    return (React.createElement(React.Fragment, null,
-        items
-            .filter((item) => item.isOutsideDropdown)
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            .map((_a, key) => {
-            var { title, itemKey, onClick, isOutsideDropdown } = _a, props = __rest(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
-            return typeof title === 'string' ? (React.createElement(Button, Object.assign({ onClick: (event) => onActionClick(event, onClick) }, props, { isDisabled: isDisabled, key: itemKey || `outside_dropdown_${key}`, "data-key": itemKey || `outside_dropdown_${key}` }), title)) : (React.cloneElement(title, Object.assign({ onClick, isDisabled }, props)));
-        }),
-        React.createElement(Dropdown, Object.assign({ isOpen: isOpen, onOpenChange: !isOnOpenChangeDisabled ? (isOpen) => setIsOpen(isOpen) : undefined, toggle: (toggleRef) => actionsToggle ? (actionsToggle({ onToggle, isOpen, isDisabled, toggleRef })) : (React.createElement(MenuToggle, { "aria-label": "Kebab toggle", ref: toggleRef, onClick: onToggle, isExpanded: isOpen, isDisabled: isDisabled, variant: "plain", icon: React.createElement(EllipsisVIcon, null) })) }, (rowData && rowData.actionProps), { ref: innerRef }, props, { popperProps: popperProps }),
-            React.createElement(DropdownList, null, items
-                .filter((item) => !item.isOutsideDropdown)
-                .map((_a, index) => {
-                var { title, itemKey, onClick, tooltipProps, isSeparator, shouldCloseOnClick = true } = _a, props = __rest(_a, ["title", "itemKey", "onClick", "tooltipProps", "isSeparator", "shouldCloseOnClick"]);
-                if (isSeparator) {
-                    return React.createElement(Divider, { key: itemKey || index, "data-key": itemKey || index });
-                }
-                const item = (React.createElement(DropdownItem, Object.assign({ onClick: (event) => {
-                        onActionClick(event, onClick);
-                        shouldCloseOnClick && onToggle();
-                    } }, props, { key: itemKey || index, "data-key": itemKey || index, ref: index === 0 ? firstActionItemRef : undefined }), title));
-                if (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) {
-                    return (React.createElement(Tooltip, Object.assign({ key: itemKey || index }, tooltipProps), item));
-                }
-                else {
-                    return item;
-                }
-            })))));
+    return (jsxs(Fragment, { children: [items
+                .filter((item) => item.isOutsideDropdown)
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                .map((_a, key) => {
+                var { title, itemKey, onClick, isOutsideDropdown } = _a, props = __rest(_a, ["title", "itemKey", "onClick", "isOutsideDropdown"]);
+                return typeof title === 'string' ? (createElement(Button, Object.assign({ onClick: (event) => onActionClick(event, onClick) }, props, { isDisabled: isDisabled, key: itemKey || `outside_dropdown_${key}`, "data-key": itemKey || `outside_dropdown_${key}` }), title)) : (cloneElement(title, Object.assign({ onClick, isDisabled }, props)));
+            }), jsx(Dropdown, Object.assign({ isOpen: isOpen, onOpenChange: !isOnOpenChangeDisabled ? (isOpen) => setIsOpen(isOpen) : undefined, toggle: (toggleRef) => actionsToggle ? (actionsToggle({ onToggle, isOpen, isDisabled, toggleRef })) : (jsx(MenuToggle, { "aria-label": "Kebab toggle", ref: toggleRef, onClick: onToggle, isExpanded: isOpen, isDisabled: isDisabled, variant: "plain", icon: jsx(EllipsisVIcon, {}) })) }, (rowData && rowData.actionProps), { ref: innerRef }, props, { popperProps: popperProps, children: jsx(DropdownList, { children: items
+                        .filter((item) => !item.isOutsideDropdown)
+                        .map((_a, index) => {
+                        var { title, itemKey, onClick, tooltipProps, isSeparator, shouldCloseOnClick = true } = _a, props = __rest(_a, ["title", "itemKey", "onClick", "tooltipProps", "isSeparator", "shouldCloseOnClick"]);
+                        if (isSeparator) {
+                            return jsx(Divider, { "data-key": itemKey || index }, itemKey || index);
+                        }
+                        const item = (createElement(DropdownItem, Object.assign({ onClick: (event) => {
+                                onActionClick(event, onClick);
+                                shouldCloseOnClick && onToggle();
+                            } }, props, { key: itemKey || index, "data-key": itemKey || index, ref: index === 0 ? firstActionItemRef : undefined }), title));
+                        if (tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.content) {
+                            return (jsx(Tooltip, Object.assign({}, tooltipProps, { children: item }), itemKey || index));
+                        }
+                        else {
+                            return item;
+                        }
+                    }) }) }))] }));
 };
-const ActionsColumn = React.forwardRef((props, ref) => (React.createElement(ActionsColumnBase, Object.assign({}, props, { innerRef: ref }))));
+const ActionsColumn = forwardRef((props, ref) => (jsx(ActionsColumnBase, Object.assign({}, props, { innerRef: ref }))));
 ActionsColumn.displayName = 'ActionsColumn';
 
 const styles$1 = {
@@ -777,16 +753,13 @@ const styles$1 = {
 
 const CollapseColumn = (_a) => {
     var { className = '', children = null, isOpen, onToggle } = _a, props = __rest(_a, ["className", "children", "isOpen", "onToggle"]);
-    return (React.createElement(React.Fragment, null,
-        isOpen !== undefined && (React.createElement(Button, Object.assign({ className: css(className, isOpen && styles$1.modifiers.expanded) }, props, { variant: "plain", "aria-label": props['aria-label'] || 'Details', onClick: onToggle, "aria-expanded": isOpen, icon: React.createElement("div", { className: css(styles$1.tableToggleIcon) },
-                React.createElement(AngleDownIcon, null)) }))),
-        children));
+    return (jsxs(Fragment, { children: [isOpen !== undefined && (jsx(Button, Object.assign({ className: css(className, isOpen && styles$1.modifiers.expanded) }, props, { variant: "plain", "aria-label": props['aria-label'] || 'Details', onClick: onToggle, "aria-expanded": isOpen, icon: jsx("div", { className: css(styles$1.tableToggleIcon), children: jsx(AngleDownIcon, {}) }) }))), children] }));
 };
 CollapseColumn.displayName = 'CollapseColumn';
 
 const DraggableCell = (_a) => {
     var { className, onClick, 'aria-label': ariaLabel, id } = _a, props = __rest(_a, ["className", "onClick", 'aria-label', "id"]);
-    return (React.createElement(Button, Object.assign({ id: id, variant: "plain", className: className, type: "button", "aria-label": ariaLabel || `Draggable row draggable button`, onClick: onClick }, props, { icon: React.createElement(GripVerticalIcon, { "aria-hidden": true }) })));
+    return (jsx(Button, Object.assign({ id: id, variant: "plain", className: className, type: "button", "aria-label": ariaLabel || `Draggable row draggable button`, onClick: onClick }, props, { icon: jsx(GripVerticalIcon, {}) })));
 };
 DraggableCell.displayName = 'DraggableCell';
 
@@ -822,8 +795,8 @@ var WrapModifier;
 const TableText = (_a) => {
     var { children = null, className = '', variant = 'span', wrapModifier = null, tooltip: tooltipProp = '', tooltipProps = {}, onMouseEnter: onMouseEnterProp = () => { }, focused = false, tooltipHasDefaultBehavior = false } = _a, props = __rest(_a, ["children", "className", "variant", "wrapModifier", "tooltip", "tooltipProps", "onMouseEnter", "focused", "tooltipHasDefaultBehavior"]);
     const Component = variant;
-    const textRef = React.createRef();
-    const [tooltip, setTooltip] = React.useState(tooltipProp);
+    const textRef = createRef();
+    const [tooltip, setTooltip] = useState(tooltipProp);
     const onMouseEnter = (event) => {
         if (event.target.offsetWidth < event.target.scrollWidth) {
             setTooltip(tooltipProp || event.target.innerText);
@@ -841,8 +814,8 @@ const TableText = (_a) => {
             setTooltip('');
         }
     };
-    const text = (React.createElement(Component, Object.assign({ ref: textRef, onMouseEnter: !tooltipHasDefaultBehavior ? onMouseEnter : undefined, className: css(className, wrapModifier && styles$1.modifiers[wrapModifier], styles$1.tableText) }, props), children));
-    React.useEffect(() => {
+    const text = (jsx(Component, Object.assign({ ref: textRef, onMouseEnter: !tooltipHasDefaultBehavior ? onMouseEnter : undefined, className: css(className, wrapModifier && styles$1.modifiers[wrapModifier], styles$1.tableText) }, props, { children: children })));
+    useEffect(() => {
         if (!tooltipHasDefaultBehavior) {
             if (focused) {
                 onFocus(textRef.current);
@@ -852,15 +825,11 @@ const TableText = (_a) => {
             }
         }
     }, [focused, tooltipHasDefaultBehavior]);
-    return tooltip !== '' ? (React.createElement(Tooltip, Object.assign({ triggerRef: textRef, content: tooltip }, (!tooltipHasDefaultBehavior && { isVisible: true }), tooltipProps), text)) : (text);
+    return tooltip !== '' ? (jsx(Tooltip, Object.assign({ triggerRef: textRef, content: tooltip }, (!tooltipHasDefaultBehavior && { isVisible: true }), tooltipProps, { children: text }))) : (text);
 };
 TableText.displayName = 'TableText';
 
-const HeaderCellInfoWrapper = ({ children, info, className, variant = 'tooltip', popoverProps, tooltipProps, ariaLabel }) => (React.createElement("div", { className: css(styles$1.tableColumnHelp, className) },
-    typeof children === 'string' ? React.createElement(TableText, null, children) : children,
-    React.createElement("span", { className: css(styles$1.tableColumnHelpAction) }, variant === 'tooltip' ? (React.createElement(Tooltip, Object.assign({ content: info }, tooltipProps),
-        React.createElement(Button, { variant: "plain", hasNoPadding: true, "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info', icon: React.createElement(HelpIcon, null) }))) : (React.createElement(Popover, Object.assign({ bodyContent: info }, popoverProps),
-        React.createElement(Button, { variant: "plain", hasNoPadding: true, "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info', icon: React.createElement(HelpIcon, null) }))))));
+const HeaderCellInfoWrapper = ({ children, info, className, variant = 'tooltip', popoverProps, tooltipProps, ariaLabel }) => (jsxs("div", { className: css(styles$1.tableColumnHelp, className), children: [typeof children === 'string' ? jsx(TableText, { children: children }) : children, jsx("span", { className: css(styles$1.tableColumnHelpAction), children: variant === 'tooltip' ? (jsx(Tooltip, Object.assign({ content: info }, tooltipProps, { children: jsx(Button, { variant: "plain", hasNoPadding: true, "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info', icon: jsx(HelpIcon, {}) }) }))) : (jsx(Popover, Object.assign({ bodyContent: info }, popoverProps, { children: jsx(Button, { variant: "plain", hasNoPadding: true, "aria-label": ariaLabel || (typeof info === 'string' && info) || 'More info', icon: jsx(HelpIcon, {}) }) }))) })] }));
 HeaderCellInfoWrapper.displayName = 'HeaderCellInfoWrapper';
 
 const stylesGrid = {
@@ -912,12 +881,9 @@ const SelectColumn = (_a) => {
     var { children = null, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     className, onSelect = null, selectVariant, tooltip, tooltipProps } = _a, props = __rest(_a, ["children", "className", "onSelect", "selectVariant", "tooltip", "tooltipProps"]);
-    const inputRef = React.createRef();
-    const content = (React.createElement(React.Fragment, null,
-        React.createElement("label", null,
-            React.createElement("input", Object.assign({}, props, { ref: inputRef, type: selectVariant, onChange: onSelect }))),
-        children));
-    return tooltip ? (React.createElement(Tooltip, Object.assign({ triggerRef: inputRef, content: tooltip }, tooltipProps), content)) : (content);
+    const inputRef = createRef();
+    const content = (jsxs(Fragment, { children: [jsx("label", { children: jsx("input", Object.assign({}, props, { ref: inputRef, type: selectVariant, onChange: onSelect })) }), children] }));
+    return tooltip ? (jsx(Tooltip, Object.assign({ triggerRef: inputRef, content: tooltip }, tooltipProps, { children: content }))) : (content);
 };
 SelectColumn.displayName = 'SelectColumn';
 
@@ -968,7 +934,7 @@ const selectable = (label, { rowIndex, columnIndex, rowData, column, property, t
         className: css(styles$1.tableCheck),
         component: rowId !== -1 ? 'td' : 'th',
         isVisible: !rowData || !rowData.fullWidth,
-        children: (React.createElement(SelectColumn, Object.assign({}, customProps, { selectVariant: selectVariant, onSelect: selectClick, name: selectName, tooltip: tooltip }), label))
+        children: (jsx(SelectColumn, Object.assign({}, customProps, { selectVariant: selectVariant, onSelect: selectClick, name: selectName, tooltip: tooltip, children: label })))
     };
 };
 
@@ -1013,7 +979,7 @@ var SortByDirection;
 const SortColumn = (_a) => {
     var { children = null, className = '', isSortedBy = false, onSort = null, sortDirection = '', type = 'button', tooltip, tooltipProps, tooltipHasDefaultBehavior, favoriteButtonProps } = _a, props = __rest(_a, ["children", "className", "isSortedBy", "onSort", "sortDirection", "type", "tooltip", "tooltipProps", "tooltipHasDefaultBehavior", "favoriteButtonProps"]);
     let SortedByIcon;
-    const [focused, setFocused] = React.useState(false);
+    const [focused, setFocused] = useState(false);
     if (isSortedBy) {
         SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon : LongArrowAltDownIcon;
     }
@@ -1021,24 +987,15 @@ const SortColumn = (_a) => {
         SortedByIcon = ArrowsAltVIcon;
     }
     if (favoriteButtonProps) {
-        return (React.createElement(ActionList, { isIconList: true },
-            React.createElement(ActionListItem, null,
-                React.createElement(Button, Object.assign({ variant: "plain", icon: React.createElement(StarIcon, null) }, favoriteButtonProps))),
-            React.createElement(ActionListItem, null,
-                React.createElement(Button, Object.assign({ variant: "plain", icon: React.createElement("span", { className: css(styles$1.tableSortIndicator) },
-                        React.createElement(SortedByIcon, null)), onClick: (event) => onSort && onSort(event) }, props)))));
+        return (jsxs(ActionList, { isIconList: true, children: [jsx(ActionListItem, { children: jsx(Button, Object.assign({ variant: "plain", icon: jsx(StarIcon, {}) }, favoriteButtonProps)) }), jsx(ActionListItem, { children: jsx(Button, Object.assign({ variant: "plain", icon: jsx("span", { className: css(styles$1.tableSortIndicator), children: jsx(SortedByIcon, {}) }), onClick: (event) => onSort && onSort(event) }, props)) })] }));
     }
-    return (React.createElement("button", Object.assign({}, props, { type: type, className: css(className, styles$1.tableButton), onClick: (event) => onSort && onSort(event), onFocus: () => setFocused(true), onBlur: () => setFocused(false) }),
-        React.createElement("div", { className: css(className, styles$1.tableButtonContent) },
-            React.createElement(TableText, { tooltip: tooltip, tooltipProps: tooltipProps, tooltipHasDefaultBehavior: tooltipHasDefaultBehavior, focused: focused }, children),
-            React.createElement("span", { className: css(styles$1.tableSortIndicator) },
-                React.createElement(SortedByIcon, null)))));
+    return (jsx("button", Object.assign({}, props, { type: type, className: css(className, styles$1.tableButton), onClick: (event) => onSort && onSort(event), onFocus: () => setFocused(true), onBlur: () => setFocused(false), children: jsxs("div", { className: css(className, styles$1.tableButtonContent), children: [jsx(TableText, { tooltip: tooltip, tooltipProps: tooltipProps, tooltipHasDefaultBehavior: tooltipHasDefaultBehavior, focused: focused, children: children }), jsx("span", { className: css(styles$1.tableSortIndicator), children: jsx(SortedByIcon, {}) })] }) })));
 };
 SortColumn.displayName = 'SortColumn';
 
 const sortableFavorites = (sort) => () => {
     var _a;
-    return sortable(React.createElement(StarIcon, { "aria-hidden": true }), {
+    return sortable(jsx(StarIcon, {}), {
         columnIndex: sort.columnIndex,
         className: styles$1.tableFavorite,
         ariaLabel: (_a = sort.ariaLabel) !== null && _a !== void 0 ? _a : 'Sort favorites',
@@ -1076,7 +1033,7 @@ const sortable = (label, { columnIndex, column, property, className, ariaLabel,
         // tslint:disable-next-line:no-unused-expression
         onSort && onSort(event, columnIndex, reversedDirection, extraData);
     }
-    return Object.assign(Object.assign({ className: css(styles$1.tableSort, isSortedBy && styles$1.modifiers.selected, className) }, (isSortedBy && { 'aria-sort': `${sortBy.direction}ending` })), { children: (React.createElement(SortColumn, { isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortBy.direction : '', onSort: sortClicked, "aria-label": ariaLabel, tooltip: tooltip, tooltipProps: tooltipProps, tooltipHasDefaultBehavior: tooltipHasDefaultBehavior, favoriteButtonProps: favoriteButtonProps }, label)) });
+    return Object.assign(Object.assign({ className: css(styles$1.tableSort, isSortedBy && styles$1.modifiers.selected, className) }, (isSortedBy && { 'aria-sort': `${sortBy.direction}ending` })), { children: (jsx(SortColumn, { isSortedBy: isSortedBy, sortDirection: isSortedBy ? sortBy.direction : '', onSort: sortClicked, "aria-label": ariaLabel, tooltip: tooltip, tooltipProps: tooltipProps, tooltipHasDefaultBehavior: tooltipHasDefaultBehavior, favoriteButtonProps: favoriteButtonProps, children: label })) });
 };
 
 const resolveOrDefault = (resolver, defaultValue, rowData, extraData) => (defaultValue);
@@ -1091,7 +1048,7 @@ const cellActions = (actions, actionResolver, areActionsDisabled) => (label, { r
     const resolvedIsDisabled = resolveOrDefault(areActionsDisabled, rowData && rowData.disableActions);
     const renderProps = resolvedActions && resolvedActions.length > 0
         ? {
-            children: (React.createElement(ActionsColumn, { items: resolvedActions, isDisabled: resolvedIsDisabled, rowData: rowData, extraData: extraData, actionsToggle: actionsToggle, popperProps: actionsPopperProps }, label))
+            children: (jsx(ActionsColumn, { items: resolvedActions, isDisabled: resolvedIsDisabled, rowData: rowData, extraData: extraData, actionsToggle: actionsToggle, popperProps: actionsPopperProps, children: label }))
         }
         : {};
     return Object.assign({ className: css(styles$1.tableAction), style: { paddingRight: 0 }, isVisible: true }, renderProps);
@@ -1139,7 +1096,7 @@ const collapsible = (value, { rowIndex, columnIndex, rowData, column, property }
     return {
         className: ((rowData === null || rowData === void 0 ? void 0 : rowData.isOpen) !== undefined || rowId === -1) && css(styles$1.tableToggle),
         isVisible: !(rowData === null || rowData === void 0 ? void 0 : rowData.fullWidth),
-        children: (React.createElement(CollapseColumn, Object.assign({ "aria-labelledby": `${rowLabeledBy}${rowId} ${expandId}${rowId}`, onToggle: onToggle, id: expandId + rowId }, customProps), value))
+        children: (jsx(CollapseColumn, Object.assign({ "aria-labelledby": `${rowLabeledBy}${rowId} ${expandId}${rowId}`, onToggle: onToggle, id: expandId + rowId }, customProps, { children: value })))
     };
 };
 
@@ -1164,8 +1121,7 @@ const compoundExpand = (value, { rowIndex, columnIndex, rowData, column, propert
     }
     return {
         className: css(styles$1.tableCompoundExpansionToggle, props.isOpen && styles$1.modifiers.expanded),
-        children: props.isOpen !== undefined && (React.createElement("button", { type: "button", className: css(styles$1.tableButton), onClick: onToggle, "aria-expanded": props.isOpen, "aria-controls": props.ariaControls, id: `${expandId}-${rowIndex}-${columnIndex}` },
-            React.createElement(TableText, null, title)))
+        children: props.isOpen !== undefined && (jsx("button", { type: "button", className: css(styles$1.tableButton), onClick: onToggle, "aria-expanded": props.isOpen, "aria-controls": props.ariaControls, id: `${expandId}-${rowIndex}-${columnIndex}`, children: jsx(TableText, { children: title }) }))
     };
 };
 
@@ -1196,7 +1152,7 @@ const classNames = (...classes) => () => ({
 const info = ({ tooltip, tooltipProps, popover, popoverProps, className, ariaLabel }) => {
     const infoObj = (value) => ({
         className: styles$1.modifiers.help,
-        children: tooltip ? (React.createElement(HeaderCellInfoWrapper, { variant: "tooltip", info: tooltip, tooltipProps: tooltipProps, ariaLabel: ariaLabel, className: className }, value)) : (React.createElement(HeaderCellInfoWrapper, { variant: "popover", info: popover, popoverProps: popoverProps, ariaLabel: ariaLabel, className: className }, value))
+        children: tooltip ? (jsx(HeaderCellInfoWrapper, { variant: "tooltip", info: tooltip, tooltipProps: tooltipProps, ariaLabel: ariaLabel, className: className, children: value })) : (jsx(HeaderCellInfoWrapper, { variant: "popover", info: popover, popoverProps: popoverProps, ariaLabel: ariaLabel, className: className, children: value }))
     });
     return infoObj;
 };
@@ -1209,7 +1165,7 @@ const FavoritesCell = (_a) => {
             id: `favorites-button-${rowIndex}`,
             'aria-labelledby': `favorites-button-${rowIndex}`
         };
-    return (React.createElement(Button, Object.assign({ variant: "plain", className: className, type: "button", "aria-label": isFavorited ? 'Starred' : 'Not starred', onClick: onFavorite }, ariaProps, props, { icon: React.createElement(StarIcon, { "aria-hidden": true }) })));
+    return (jsx(Button, Object.assign({ variant: "plain", className: className, type: "button", "aria-label": isFavorited ? 'Starred' : 'Not starred', onClick: onFavorite }, ariaProps, props, { icon: jsx(StarIcon, {}) })));
 };
 FavoritesCell.displayName = 'FavoritesCell';
 
@@ -1239,7 +1195,7 @@ const favoritable = (value, { rowIndex, columnIndex, rowData, column, property }
     return {
         className: css(styles$1.tableFavorite, rowData && rowData.favorited && styles$1.modifiers.favorited),
         isVisible: !rowData || !rowData.fullWidth,
-        children: (React.createElement(FavoritesCell, Object.assign({ rowIndex: rowIndex, onFavorite: favoritesClick, isFavorited: rowData && rowData.favorited }, additionalProps)))
+        children: (jsx(FavoritesCell, Object.assign({ rowIndex: rowIndex, onFavorite: favoritesClick, isFavorited: rowData && rowData.favorited }, additionalProps)))
     };
 };
 
@@ -1257,26 +1213,14 @@ const EllipsisHIcon = createIcon(EllipsisHIconConfig);
 const treeRow = (onCollapse, onCheckChange, onToggleRowDetails) => (value, { rowIndex, rowData }) => {
     const { isExpanded, isDetailsExpanded, 'aria-level': level, 'aria-setsize': setsize, toggleAriaLabel, checkAriaLabel, showDetailsAriaLabel, isChecked, checkboxId, icon } = rowData.props;
     const content = value.title || value;
-    const text = (React.createElement("div", { className: css(treeViewStyles.tableTreeViewText), key: "tree-view-text" },
-        icon && (React.createElement("span", { className: css(treeViewStyles.tableTreeViewIcon), key: "tree-view-text-icon" }, icon)),
-        React.createElement("span", { className: styles$1.tableText, key: "table-text" }, content)));
+    const text = (jsxs("div", { className: css(treeViewStyles.tableTreeViewText), children: [icon && (jsx("span", { className: css(treeViewStyles.tableTreeViewIcon), children: icon }, "tree-view-text-icon")), jsx("span", { className: styles$1.tableText, children: content }, "table-text")] }, "tree-view-text"));
     const onChange = (isChecked, event) => {
         onCheckChange(event, isChecked, rowIndex, content, rowData);
     };
     return {
         component: 'th',
         className: treeViewStyles.tableTreeViewTitleCell,
-        children: level !== undefined ? (React.createElement("div", { className: css(treeViewStyles.tableTreeViewMain) },
-            setsize > 0 && (React.createElement("span", { className: css(treeViewStyles.tableToggle), key: "table-toggle" },
-                React.createElement(Button, { variant: "plain", onClick: (event) => onCollapse && onCollapse(event, rowIndex, content, rowData), className: css(isExpanded && styles$1.modifiers.expanded), "aria-expanded": isExpanded, "aria-label": toggleAriaLabel || `${isExpanded ? 'Collapse' : 'Expand'} row ${rowIndex}`, icon: React.createElement("div", { className: css(treeViewStyles.tableToggleIcon) },
-                        React.createElement(AngleDownIcon, { "aria-hidden": "true" })) }))),
-            !!onCheckChange && (React.createElement("span", { className: css(treeViewStyles.tableCheck), key: "table-check" },
-                React.createElement("label", { htmlFor: checkboxId || `checkbox_${rowIndex}` },
-                    React.createElement(Checkbox, { id: checkboxId || `checkbox_${rowIndex}`, "aria-label": checkAriaLabel || `Row ${rowIndex} checkbox`, isChecked: isChecked, onChange: (event, checked) => onChange(checked, event) })))),
-            text,
-            !!onToggleRowDetails && (React.createElement("span", { className: css(treeViewStyles.tableTreeViewDetailsToggle), key: "view-details-toggle" },
-                React.createElement(Button, { variant: "plain", "aria-expanded": isDetailsExpanded, "aria-label": showDetailsAriaLabel || 'Show row details', onClick: (event) => onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData), icon: React.createElement("span", { className: `${styles$1.table}__details-toggle-icon` },
-                        React.createElement(EllipsisHIcon, { "aria-hidden": true })) }))))) : (text)
+        children: level !== undefined ? (jsxs("div", { className: css(treeViewStyles.tableTreeViewMain), children: [setsize > 0 && (jsx("span", { className: css(treeViewStyles.tableToggle), children: jsx(Button, { variant: "plain", onClick: (event) => onCollapse && onCollapse(event, rowIndex, content, rowData), className: css(isExpanded && styles$1.modifiers.expanded), "aria-expanded": isExpanded, "aria-label": toggleAriaLabel || `${isExpanded ? 'Collapse' : 'Expand'} row ${rowIndex}`, icon: jsx("div", { className: css(treeViewStyles.tableToggleIcon), children: jsx(AngleDownIcon, {}) }) }) }, "table-toggle")), !!onCheckChange && (jsx("span", { className: css(treeViewStyles.tableCheck), children: jsx("label", { htmlFor: checkboxId || `checkbox_${rowIndex}`, children: jsx(Checkbox, { id: checkboxId || `checkbox_${rowIndex}`, "aria-label": checkAriaLabel || `Row ${rowIndex} checkbox`, isChecked: isChecked, onChange: (event, checked) => onChange(checked, event) }) }) }, "table-check")), text, !!onToggleRowDetails && (jsx("span", { className: css(treeViewStyles.tableTreeViewDetailsToggle), children: jsx(Button, { variant: "plain", "aria-expanded": isDetailsExpanded, "aria-label": showDetailsAriaLabel || 'Show row details', onClick: (event) => onToggleRowDetails && onToggleRowDetails(event, rowIndex, content, rowData), icon: jsx("span", { className: `${styles$1.table}__details-toggle-icon`, children: jsx(EllipsisHIcon, {}) }) }) }, "view-details-toggle"))] })) : (text)
     };
 };
 
@@ -1294,7 +1238,7 @@ var TableVariant;
     TableVariant["compact"] = "compact";
 })(TableVariant || (TableVariant = {}));
 
-const TableContext = React.createContext({
+const TableContext = createContext({
     registerSelectableRow: () => { }
 });
 const TableBase = (_a) => {
@@ -1302,11 +1246,11 @@ const TableBase = (_a) => {
     var { children, className, variant, borders = true, isStickyHeader = false, gridBreakPoint = TableGridBreakpoint.gridMd, 'aria-label': ariaLabel, role = 'grid', innerRef, ouiaId, ouiaSafe = true, isTreeTable = false, isNested = false, isStriped = false, isExpandable = false, hasNoInset = false, 
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     nestedHeaderColumnSpans, selectableRowCaptionText } = _a, props = __rest(_a, ["children", "className", "variant", "borders", "isStickyHeader", "gridBreakPoint", 'aria-label', "role", "innerRef", "ouiaId", "ouiaSafe", "isTreeTable", "isNested", "isStriped", "isExpandable", "hasNoInset", "nestedHeaderColumnSpans", "selectableRowCaptionText"]);
-    const ref = React.useRef(null);
+    const ref = useRef(null);
     const tableRef = innerRef || ref;
-    const [hasSelectableRows, setHasSelectableRows] = React.useState(false);
-    const [tableCaption, setTableCaption] = React.useState();
-    React.useEffect(() => {
+    const [hasSelectableRows, setHasSelectableRows] = useState(false);
+    const [tableCaption, setTableCaption] = useState();
+    useEffect(() => {
         document.addEventListener('keydown', handleKeys);
         // sets up roving tab-index to tree tables only
         if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
@@ -1317,14 +1261,12 @@ const TableBase = (_a) => {
             document.removeEventListener('keydown', handleKeys);
         };
     }, [tableRef, tableRef.current]);
-    React.useEffect(() => {
+    useEffect(() => {
         if (selectableRowCaptionText) {
-            setTableCaption(React.createElement("caption", null,
-                selectableRowCaptionText,
-                React.createElement("div", { className: "pf-v6-screen-reader" }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter.")));
+            setTableCaption(jsxs("caption", { children: [selectableRowCaptionText, jsx("div", { className: "pf-v6-screen-reader", children: "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter." })] }));
         }
         else {
-            setTableCaption(React.createElement("caption", { className: "pf-v6-screen-reader" }, "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter."));
+            setTableCaption(jsx("caption", { className: "pf-v6-screen-reader", children: "This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space or enter." }));
         }
     }, [selectableRowCaptionText]);
     const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe);
@@ -1350,18 +1292,15 @@ const TableBase = (_a) => {
     const registerSelectableRow = () => {
         !hasSelectableRows && setHasSelectableRows(true);
     };
-    return (React.createElement(TableContext.Provider, { value: { registerSelectableRow } },
-        React.createElement("table", Object.assign({ "aria-label": ariaLabel, role: role, className: css(className, styles$1.table, isTreeTable ? treeGrid : grid, styles$1.modifiers[variant], !borders && styles$1.modifiers.noBorderRows, isStickyHeader && styles$1.modifiers.stickyHeader, isTreeTable && treeViewStyles.modifiers.treeView, isStriped && styles$1.modifiers.striped, isExpandable && styles$1.modifiers.expandable, hasNoInset && treeViewStyles.modifiers.noInset, isNested && 'pf-m-nested'), ref: tableRef }, (isTreeTable && { role: 'treegrid' }), ouiaProps, props),
-            hasSelectableRows && tableCaption,
-            children)));
+    return (jsx(TableContext.Provider, { value: { registerSelectableRow }, children: jsxs("table", Object.assign({ "aria-label": ariaLabel, role: role, className: css(className, styles$1.table, isTreeTable ? treeGrid : grid, styles$1.modifiers[variant], !borders && styles$1.modifiers.noBorderRows, isStickyHeader && styles$1.modifiers.stickyHeader, isTreeTable && treeViewStyles.modifiers.treeView, isStriped && styles$1.modifiers.striped, isExpandable && styles$1.modifiers.expandable, hasNoInset && treeViewStyles.modifiers.noInset, isNested && 'pf-m-nested'), ref: tableRef }, (isTreeTable && { role: 'treegrid' }), ouiaProps, props, { children: [hasSelectableRows && tableCaption, children] })) }));
 };
-const Table = React.forwardRef((props, ref) => (React.createElement(TableBase, Object.assign({}, props, { innerRef: ref }))));
+const Table = forwardRef((props, ref) => (jsx(TableBase, Object.assign({}, props, { innerRef: ref }))));
 Table.displayName = 'Table';
 
 const TrBase = (_a) => {
     var { children, className, isExpanded, isEditable, isHidden = false, isClickable = false, isRowSelected = false, isStriped = false, isBorderRow = false, isControlRow = false, innerRef, ouiaId, ouiaSafe = true, resetOffset = false, onRowClick, isSelectable, 'aria-label': passedAriaLabel } = _a, props = __rest(_a, ["children", "className", "isExpanded", "isEditable", "isHidden", "isClickable", "isRowSelected", "isStriped", "isBorderRow", "isControlRow", "innerRef", "ouiaId", "ouiaSafe", "resetOffset", "onRowClick", "isSelectable", 'aria-label']);
     const ouiaProps = useOUIAProps('TableRow', ouiaId, ouiaSafe);
-    const [computedAriaLabel, setComputedAriaLabel] = React.useState('');
+    const [computedAriaLabel, setComputedAriaLabel] = useState('');
     let onKeyDown = null;
     if (onRowClick) {
         onKeyDown = (e) => {
@@ -1372,8 +1311,8 @@ const TrBase = (_a) => {
         };
     }
     const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);
-    const { registerSelectableRow } = React.useContext(TableContext);
-    React.useEffect(() => {
+    const { registerSelectableRow } = useContext(TableContext);
+    useEffect(() => {
         if (isSelectable && !rowIsHidden) {
             setComputedAriaLabel(`${isRowSelected ? 'Row selected' : ''}`);
             registerSelectableRow();
@@ -1383,24 +1322,23 @@ const TrBase = (_a) => {
         }
     }, [isRowSelected, isSelectable, registerSelectableRow, rowIsHidden]);
     const ariaLabel = passedAriaLabel || computedAriaLabel;
-    return (React.createElement(React.Fragment, null,
-        React.createElement("tr", Object.assign({ className: css(styles$1.tableTr, className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isClickable && styles$1.modifiers.clickable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, isBorderRow && styles$1.modifiers.borderRow, isControlRow && styles$1.tableControlRow, resetOffset && styles$1.modifiers.firstCellOffsetReset), hidden: rowIsHidden }, (isClickable && { tabIndex: 0 }), { "aria-label": ariaLabel, ref: innerRef }, (onRowClick && { onClick: onRowClick, onKeyDown }), ouiaProps, props), children)));
+    return (jsx(Fragment$1, { children: jsx("tr", Object.assign({ className: css(styles$1.tableTr, className, isExpanded !== undefined && styles$1.tableExpandableRow, isExpanded && styles$1.modifiers.expanded, isEditable && inlineStyles.modifiers.inlineEditable, isClickable && styles$1.modifiers.clickable, isRowSelected && styles$1.modifiers.selected, isStriped && styles$1.modifiers.striped, isBorderRow && styles$1.modifiers.borderRow, isControlRow && styles$1.tableControlRow, resetOffset && styles$1.modifiers.firstCellOffsetReset), hidden: rowIsHidden }, (isClickable && { tabIndex: 0 }), { "aria-label": ariaLabel, ref: innerRef }, (onRowClick && { onClick: onRowClick, onKeyDown }), ouiaProps, props, { children: children })) }));
 };
-const Tr = React.forwardRef((props, ref) => (React.createElement(TrBase, Object.assign({}, props, { innerRef: ref }))));
+const Tr = forwardRef((props, ref) => (jsx(TrBase, Object.assign({}, props, { innerRef: ref }))));
 Tr.displayName = 'Tr';
 
 const TheadBase = (_a) => {
     var { children, className, noWrap = false, innerRef, hasNestedHeader } = _a, props = __rest(_a, ["children", "className", "noWrap", "innerRef", "hasNestedHeader"]);
-    return (React.createElement("thead", Object.assign({ className: css(styles$1.tableThead, className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader), ref: innerRef }, props), children));
+    return (jsx("thead", Object.assign({ className: css(styles$1.tableThead, className, noWrap && styles$1.modifiers.nowrap, hasNestedHeader && styles$1.modifiers.nestedColumnHeader), ref: innerRef }, props, { children: children })));
 };
-const Thead = React.forwardRef((props, ref) => (React.createElement(TheadBase, Object.assign({}, props, { innerRef: ref }))));
+const Thead = forwardRef((props, ref) => (jsx(TheadBase, Object.assign({}, props, { innerRef: ref }))));
 Thead.displayName = 'Thead';
 
 const TbodyBase = (_a) => {
     var { children, className, isExpanded, innerRef, isEvenStriped = false, isOddStriped = false } = _a, props = __rest(_a, ["children", "className", "isExpanded", "innerRef", "isEvenStriped", "isOddStriped"]);
-    return (React.createElement("tbody", Object.assign({ role: "rowgroup", className: css(styles$1.tableTbody, className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven), ref: innerRef }, props), children));
+    return (jsx("tbody", Object.assign({ role: "rowgroup", className: css(styles$1.tableTbody, className, isExpanded && styles$1.modifiers.expanded, isOddStriped && styles$1.modifiers.striped, isEvenStriped && styles$1.modifiers.stripedEven), ref: innerRef }, props, { children: children })));
 };
-const Tbody = React.forwardRef((props, ref) => (React.createElement(TbodyBase, Object.assign({}, props, { innerRef: ref }))));
+const Tbody = forwardRef((props, ref) => (jsx(TbodyBase, Object.assign({}, props, { innerRef: ref }))));
 Tbody.displayName = 'Tbody';
 
 const styles = {
@@ -1433,7 +1371,7 @@ function mergeProps(...props) {
         if (key === 'children') {
             if (a && b) {
                 // compose the two
-                return React.cloneElement(a, {
+                return cloneElement(a, {
                     children: b
                 });
             }
@@ -1466,9 +1404,9 @@ const ThBase = (_a) => {
         // eslint-disable-next-line no-console
         console.warn('Th: Table headers must have an accessible name. If the Th is intended to be visually empty, pass in screenReaderText. If the Th contains only non-text, interactive content such as a checkbox or expand toggle, pass in an aria-label.');
     }
-    const [showTooltip, setShowTooltip] = React.useState(false);
-    const [truncated, setTruncated] = React.useState(false);
-    const cellRef = innerRef ? innerRef : React.createRef();
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [truncated, setTruncated] = useState(false);
+    const cellRef = innerRef ? innerRef : createRef();
     const onMouseEnter = (event) => {
         if (event.target.offsetWidth < event.target.scrollWidth) {
             !showTooltip && setShowTooltip(true);
@@ -1552,36 +1490,34 @@ const ThBase = (_a) => {
     // selectable adds this but we don't want it
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     isVisible = null, className: mergedClassName = '', component: MergedComponent = component } = merged, mergedProps = __rest(merged, ["children", "isVisible", "className", "component"]);
-    React.useEffect(() => {
+    useEffect(() => {
         setTruncated(cellRef.current.offsetWidth <
             cellRef.current.scrollWidth);
     }, [cellRef]);
-    const cell = (React.createElement(MergedComponent, Object.assign({ tabIndex: sort || select || !truncated ? -1 : 0, onFocus: tooltip !== null ? onMouseEnter : onMouseEnterProp, onBlur: () => setShowTooltip(false), "data-label": dataLabel, onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp, scope: component === 'th' ? scope : null, ref: cellRef, "aria-label": ariaLabel, className: css(styles$1.tableTh, className, textCenter && styles$1.modifiers.center, isSubheader && styles$1.tableSubhead, isStickyColumn && styles.tableStickyCell, hasRightBorder && styles.modifiers.borderRight, hasLeftBorder && styles.modifiers.borderLeft, modifier && styles$1.modifiers[modifier], ((_b = sort === null || sort === void 0 ? void 0 : sort.favoriteButtonProps) === null || _b === void 0 ? void 0 : _b.favorited) && styles$1.modifiers.favorited, mergedClassName) }, mergedProps, props, (isStickyColumn && {
+    const cell = (jsx(MergedComponent, Object.assign({ tabIndex: sort || select || !truncated ? -1 : 0, onFocus: tooltip !== null ? onMouseEnter : onMouseEnterProp, onBlur: () => setShowTooltip(false), "data-label": dataLabel, onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp, scope: component === 'th' ? scope : null, ref: cellRef, "aria-label": ariaLabel, className: css(styles$1.tableTh, className, textCenter && styles$1.modifiers.center, isSubheader && styles$1.tableSubhead, isStickyColumn && styles.tableStickyCell, hasRightBorder && styles.modifiers.borderRight, hasLeftBorder && styles.modifiers.borderLeft, modifier && styles$1.modifiers[modifier], ((_b = sort === null || sort === void 0 ? void 0 : sort.favoriteButtonProps) === null || _b === void 0 ? void 0 : _b.favorited) && styles$1.modifiers.favorited, mergedClassName) }, mergedProps, props, (isStickyColumn && {
         style: Object.assign({ [c_table__sticky_cell_MinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined, [c_table__sticky_cell_InsetInlineStart.name]: stickyLeftOffset ? stickyLeftOffset : 0, [c_table__sticky_cell_InsetInlineEnd.name]: stickyRightOffset ? stickyRightOffset : 0 }, props.style)
-    })), transformedChildren ||
-        (screenReaderText && React.createElement("span", { className: accessibleStyles.screenReader }, screenReaderText))));
+    }), { children: transformedChildren ||
+            (screenReaderText && jsx("span", { className: accessibleStyles.screenReader, children: screenReaderText })) })));
     const canMakeDefaultTooltip = tooltip === '' ? typeof transformedChildren === 'string' : true;
     const childControlsTooltip = sortParams || selectParams;
-    return tooltip !== null && canMakeDefaultTooltip && !childControlsTooltip && showTooltip ? (React.createElement(React.Fragment, null,
-        cell,
-        React.createElement(Tooltip, Object.assign({ triggerRef: cellRef, content: tooltip || (tooltip === '' && children), isVisible: true }, tooltipProps)))) : (cell);
+    return tooltip !== null && canMakeDefaultTooltip && !childControlsTooltip && showTooltip ? (jsxs(Fragment$1, { children: [cell, jsx(Tooltip, Object.assign({ triggerRef: cellRef, content: tooltip || (tooltip === '' && children), isVisible: true }, tooltipProps))] })) : (cell);
 };
-const Th = React.forwardRef((props, ref) => (React.createElement(ThBase, Object.assign({}, props, { innerRef: ref }))));
+const Th = forwardRef((props, ref) => (jsx(ThBase, Object.assign({}, props, { innerRef: ref }))));
 Th.displayName = 'Th';
 
 const draggable = (value, { rowData }) => {
     const { id } = rowData;
     return {
         className: '',
-        children: React.createElement(DraggableCell, { id: id })
+        children: jsx(DraggableCell, { id: id })
     };
 };
 
 const TdBase = (_a) => {
     var { children, className, isActionCell = false, component = 'td', dataLabel, textCenter = false, modifier, select = null, actions = null, expand = null, treeRow: treeRowProp = null, compoundExpand: compoundExpandProp = null, noPadding, width, visibility, innerRef, favorites = null, draggableRow: draggableRowProp = null, tooltip = '', onMouseEnter: onMouseEnterProp = () => { }, isStickyColumn = false, hasRightBorder = false, hasLeftBorder = false, stickyMinWidth = '120px', stickyLeftOffset, stickyRightOffset } = _a, props = __rest(_a, ["children", "className", "isActionCell", "component", "dataLabel", "textCenter", "modifier", "select", "actions", "expand", "treeRow", "compoundExpand", "noPadding", "width", "visibility", "innerRef", "favorites", "draggableRow", "tooltip", "onMouseEnter", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset"]);
-    const [showTooltip, setShowTooltip] = React.useState(false);
-    const [truncated, setTruncated] = React.useState(false);
-    const cellRef = innerRef ? innerRef : React.createRef();
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [truncated, setTruncated] = useState(false);
+    const cellRef = innerRef ? innerRef : createRef();
     const onMouseEnter = (event) => {
         if (event.target.offsetWidth < event.target.scrollWidth) {
             !showTooltip && setShowTooltip(true);
@@ -1698,19 +1634,17 @@ const TdBase = (_a) => {
     isVisible = null, children: mergedChildren = null, className: mergedClassName = '', component: MergedComponent = component } = merged, mergedProps = __rest(merged, ["isVisible", "children", "className", "component"]);
     const treeTableTitleCell = (className && className.includes(treeViewStyles.tableTreeViewTitleCell)) ||
         (mergedClassName && mergedClassName.includes(treeViewStyles.tableTreeViewTitleCell));
-    React.useEffect(() => {
+    useEffect(() => {
         setTruncated(cellRef.current.offsetWidth <
             cellRef.current.scrollWidth);
     }, [cellRef]);
-    const cell = (React.createElement(MergedComponent, Object.assign({ tabIndex: (select || !truncated) && modifier !== 'truncate' ? -1 : 0 }, (!treeTableTitleCell && { 'data-label': dataLabel }), { onFocus: tooltip !== null ? onMouseEnter : onMouseEnterProp, onBlur: () => setShowTooltip(false), onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp, className: css(styles$1.tableTd, className, isActionCell && styles$1.tableAction, textCenter && styles$1.modifiers.center, noPadding && styles$1.modifiers.noPadding, isStickyColumn && styles.tableStickyCell, hasRightBorder && styles.modifiers.borderRight, hasLeftBorder && styles.modifiers.borderLeft, styles$1.modifiers[modifier], draggableParams && styles$1.tableDraggable, mergedClassName), ref: cellRef }, mergedProps, props, (isStickyColumn && {
+    const cell = (jsx(MergedComponent, Object.assign({ tabIndex: (select || !truncated) && modifier !== 'truncate' ? -1 : 0 }, (!treeTableTitleCell && { 'data-label': dataLabel }), { onFocus: tooltip !== null ? onMouseEnter : onMouseEnterProp, onBlur: () => setShowTooltip(false), onMouseEnter: tooltip !== null ? onMouseEnter : onMouseEnterProp, className: css(styles$1.tableTd, className, isActionCell && styles$1.tableAction, textCenter && styles$1.modifiers.center, noPadding && styles$1.modifiers.noPadding, isStickyColumn && styles.tableStickyCell, hasRightBorder && styles.modifiers.borderRight, hasLeftBorder && styles.modifiers.borderLeft, styles$1.modifiers[modifier], draggableParams && styles$1.tableDraggable, mergedClassName), ref: cellRef }, mergedProps, props, (isStickyColumn && {
         style: Object.assign({ [c_table__sticky_cell_MinWidth.name]: stickyMinWidth ? stickyMinWidth : undefined, [c_table__sticky_cell_InsetInlineStart.name]: stickyLeftOffset ? stickyLeftOffset : 0, [c_table__sticky_cell_InsetInlineEnd.name]: stickyRightOffset ? stickyRightOffset : 0 }, props.style)
-    })), mergedChildren || children));
+    }), { children: mergedChildren || children })));
     const canMakeDefaultTooltip = tooltip === '' ? typeof children === 'string' : true;
-    return tooltip !== null && canMakeDefaultTooltip && showTooltip ? (React.createElement(React.Fragment, null,
-        cell,
-        React.createElement(Tooltip, { triggerRef: cellRef, content: tooltip || (tooltip === '' && children), isVisible: true }))) : (cell);
+    return tooltip !== null && canMakeDefaultTooltip && showTooltip ? (jsxs(Fragment$1, { children: [cell, jsx(Tooltip, { triggerRef: cellRef, content: tooltip || (tooltip === '' && children), isVisible: true })] })) : (cell);
 };
-const Td = React.forwardRef((props, ref) => (React.createElement(TdBase, Object.assign({}, props, { innerRef: ref }))));
+const Td = forwardRef((props, ref) => (jsx(TdBase, Object.assign({}, props, { innerRef: ref }))));
 Td.displayName = 'Td';
 
 const textStyles = {
@@ -1742,7 +1676,7 @@ const PropsTable = ({
     if (!isRequired) {
       return null;
     }
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: css(textStyles.textColorRequired), children: "*" }),
       /* @__PURE__ */ jsx("span", { className: css(accessibleStyles.screenReader), children: "required" })
     ] });
@@ -1758,7 +1692,7 @@ const PropsTable = ({
           children: componentDescription
         }
       ),
-      hasPropsToRender && /* @__PURE__ */ jsxs(Fragment, { children: [
+      hasPropsToRender && /* @__PURE__ */ jsxs(Fragment$1, { children: [
         /* @__PURE__ */ jsxs("div", { id: `${componentName}-required-description`, children: [
           /* @__PURE__ */ jsx("span", { className: css(textStyles.textColorRequired), children: "*" }),
           " ",