@patternfly/patternfly-doc-core 1.2.0 → 1.3.0

package/dist/server/chunks/PropsTables_D_v4KAMn.mjs

@@ -0,0 +1,1826 @@
+import { c as createComponent, a as createAstro, r as renderComponent, b as renderTemplate } from './astro/server_D4f31GMD.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';
+/* empty css                          */
+import { __rest } from 'tslib';
+import * as React from 'react';
+import React__default, { useRef, useEffect, forwardRef, useImperativeHandle, useState } from 'react';
+/* empty css                          */
+import mergeWith from 'lodash/mergeWith.js';
+import { createFocusTrap } from 'focus-trap';
+
+/**
+ * A `useEffect`-like hook that only triggers when a component unmounts. Does not require a dependency list, as the effect callback will always be kept up to date.
+ */
+function useUnmountEffect(effect) {
+    // Always use the latest effect callback so that it can reference the latest props and state.
+    const effectRef = useRef(effect);
+    effectRef.current = effect;
+    // Trigger the effect callback when the component unmounts.
+    useEffect(() => () => {
+        effectRef.current();
+    }, []);
+}
+
+const FocusTrap = forwardRef(function FocusTrap(_a, forwardedRef) {
+    var { active = true, paused = false, focusTrapOptions = {}, preventScrollOnDeactivate = false } = _a, props = __rest(_a, ["active", "paused", "focusTrapOptions", "preventScrollOnDeactivate"]);
+    // Fall back to internal ref if no forwarded ref is provided.
+    const ref = useRef(null);
+    useImperativeHandle(forwardedRef, () => ref.current);
+    // Create focus trap instance after rendering DOM.
+    const focusTrapRef = useRef(null);
+    useEffect(() => {
+        const focusTrap = createFocusTrap(ref.current, Object.assign(Object.assign({}, focusTrapOptions), { returnFocusOnDeactivate: false }));
+        focusTrapRef.current = focusTrap;
+        // Deactivate focus trap on cleanup.
+        return () => {
+            focusTrap.deactivate();
+        };
+    }, []);
+    // Handle activation status based on 'active' prop.
+    useEffect(() => {
+        const focusTrap = focusTrapRef.current;
+        active ? focusTrap === null || focusTrap === void 0 ? void 0 : focusTrap.activate() : focusTrap === null || focusTrap === void 0 ? void 0 : focusTrap.deactivate();
+    }, [active]);
+    // Handle pause status based on 'pause' prop.
+    useEffect(() => {
+        const focusTrap = focusTrapRef.current;
+        paused ? focusTrap === null || focusTrap === void 0 ? void 0 : focusTrap.pause() : focusTrap === null || focusTrap === void 0 ? void 0 : focusTrap.unpause();
+    }, [paused]);
+    // Store the currently active element to restore focus to later.
+    const previousElementRef = useRef(typeof document !== 'undefined' ? document.activeElement : null);
+    // Restore focus to the previously active element on unmount.
+    useUnmountEffect(() => {
+        if (focusTrapOptions.returnFocusOnDeactivate !== false && previousElementRef.current instanceof HTMLElement) {
+            previousElementRef.current.focus({
+                preventScroll: preventScrollOnDeactivate
+            });
+        }
+    });
+    return React__default.createElement("div", Object.assign({ ref: ref }, props));
+});
+FocusTrap.displayName = 'FocusTrap';
+
+const styles$5 = {
+  "actionList": "pf-v6-c-action-list",
+  "modifiers": {
+    "icons": "pf-m-icons"
+  }
+};
+
+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));
+};
+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));
+};
+ActionListItem.displayName = 'ActionListItem';
+
+const GripVerticalIconConfig = {
+  name: 'GripVerticalIcon',
+  height: 512,
+  width: 320,
+  svgPath: 'M96 32H32C14.33 32 0 46.33 0 64v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160H32c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zM288 32h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32V64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32zm0 160h-64c-17.67 0-32 14.33-32 32v64c0 17.67 14.33 32 32 32h64c17.67 0 32-14.33 32-32v-64c0-17.67-14.33-32-32-32z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const GripVerticalIcon = createIcon(GripVerticalIconConfig);
+
+const styles$4 = {
+  "modifiers": {
+    "noPadding": "pf-m-no-padding",
+    "widthAuto": "pf-m-width-auto",
+    "top": "pf-m-top",
+    "topLeft": "pf-m-top-left",
+    "topRight": "pf-m-top-right",
+    "bottom": "pf-m-bottom",
+    "bottomLeft": "pf-m-bottom-left",
+    "bottomRight": "pf-m-bottom-right",
+    "left": "pf-m-left",
+    "leftTop": "pf-m-left-top",
+    "leftBottom": "pf-m-left-bottom",
+    "right": "pf-m-right",
+    "rightTop": "pf-m-right-top",
+    "rightBottom": "pf-m-right-bottom",
+    "danger": "pf-m-danger",
+    "warning": "pf-m-warning",
+    "success": "pf-m-success",
+    "custom": "pf-m-custom",
+    "info": "pf-m-info"
+  },
+  "popover": "pf-v6-c-popover",
+  "popoverArrow": "pf-v6-c-popover__arrow",
+  "popoverBody": "pf-v6-c-popover__body",
+  "popoverClose": "pf-v6-c-popover__close",
+  "popoverContent": "pf-v6-c-popover__content",
+  "popoverFooter": "pf-v6-c-popover__footer",
+  "popoverHeader": "pf-v6-c-popover__header",
+  "popoverTitle": "pf-v6-c-popover__title",
+  "popoverTitleIcon": "pf-v6-c-popover__title-icon",
+  "popoverTitleText": "pf-v6-c-popover__title-text"
+};
+
+const PopoverContext = React.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));
+};
+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));
+};
+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));
+};
+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));
+};
+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))));
+};
+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));
+};
+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) }))));
+};
+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));
+};
+PopoverArrow.displayName = 'PopoverArrow';
+
+const c_popover_MaxWidth = {
+  "name": "--pf-v6-c-popover--MaxWidth",
+  "value": "none",
+  "var": "var(--pf-v6-c-popover--MaxWidth)"
+};
+
+const c_popover_MinWidth = {
+  "name": "--pf-v6-c-popover--MinWidth",
+  "value": "auto",
+  "var": "var(--pf-v6-c-popover--MinWidth)"
+};
+
+var PopoverPosition;
+(function (PopoverPosition) {
+    PopoverPosition["auto"] = "auto";
+    PopoverPosition["top"] = "top";
+    PopoverPosition["bottom"] = "bottom";
+    PopoverPosition["left"] = "left";
+    PopoverPosition["right"] = "right";
+    PopoverPosition["topStart"] = "top-start";
+    PopoverPosition["topEnd"] = "top-end";
+    PopoverPosition["bottomStart"] = "bottom-start";
+    PopoverPosition["bottomEnd"] = "bottom-end";
+    PopoverPosition["leftStart"] = "left-start";
+    PopoverPosition["leftEnd"] = "left-end";
+    PopoverPosition["rightStart"] = "right-start";
+    PopoverPosition["rightEnd"] = "right-end";
+})(PopoverPosition || (PopoverPosition = {}));
+const alertStyle = {
+    custom: styles$4.modifiers.custom,
+    info: styles$4.modifiers.info,
+    success: styles$4.modifiers.success,
+    warning: styles$4.modifiers.warning,
+    danger: styles$4.modifiers.danger
+};
+const Popover = (_a) => {
+    var { children, position = 'top', enableFlip = true, className = '', isVisible = null, shouldClose = () => null, shouldOpen = () => null, 'aria-label': ariaLabel = '', bodyContent, headerContent = null, headerComponent = 'h6', headerIcon = null, alertSeverityVariant, alertSeverityScreenReaderText, footerContent = null, appendTo = () => document.body, hideOnOutsideClick = true, onHide = () => null, onHidden = () => null, onShow = () => null, onShown = () => null, onMount = () => null, zIndex = 9999, triggerAction = 'click', minWidth = c_popover_MinWidth && c_popover_MinWidth.value, maxWidth = c_popover_MaxWidth && c_popover_MaxWidth.value, closeBtnAriaLabel = 'Close', showClose = true, distance = 25, flipBehavior = [
+        'top',
+        'bottom',
+        'left',
+        'right',
+        'top-start',
+        'top-end',
+        'bottom-start',
+        'bottom-end',
+        'left-start',
+        'left-end',
+        'right-start',
+        'right-end'
+    ], animationDuration = 300, id, withFocusTrap: propWithFocusTrap, triggerRef, hasNoPadding = false, hasAutoWidth = false, elementToFocus } = _a, rest = __rest(_a, ["children", "position", "enableFlip", "className", "isVisible", "shouldClose", "shouldOpen", 'aria-label', "bodyContent", "headerContent", "headerComponent", "headerIcon", "alertSeverityVariant", "alertSeverityScreenReaderText", "footerContent", "appendTo", "hideOnOutsideClick", "onHide", "onHidden", "onShow", "onShown", "onMount", "zIndex", "triggerAction", "minWidth", "maxWidth", "closeBtnAriaLabel", "showClose", "distance", "flipBehavior", "animationDuration", "id", "withFocusTrap", "triggerRef", "hasNoPadding", "hasAutoWidth", "elementToFocus"]);
+    // could make this a prop in the future (true | false | 'toggle')
+    // 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(() => {
+        onMount();
+    }, []);
+    React.useEffect(() => {
+        if (triggerManually) {
+            if (isVisible) {
+                show(undefined, true);
+            }
+            else {
+                hide();
+            }
+        }
+    }, [isVisible, triggerManually]);
+    const show = (event, withFocusTrap) => {
+        event && onShow(event);
+        setVisible(true);
+        propWithFocusTrap !== false && withFocusTrap && setFocusTrapActive(true);
+    };
+    const hide = (event) => {
+        event && onHide(event);
+        setVisible(false);
+    };
+    const positionModifiers = {
+        top: styles$4.modifiers.top,
+        bottom: styles$4.modifiers.bottom,
+        left: styles$4.modifiers.left,
+        right: styles$4.modifiers.right,
+        'top-start': styles$4.modifiers.topLeft,
+        'top-end': styles$4.modifiers.topRight,
+        'bottom-start': styles$4.modifiers.bottomLeft,
+        'bottom-end': styles$4.modifiers.bottomRight,
+        'left-start': styles$4.modifiers.leftTop,
+        'left-end': styles$4.modifiers.leftBottom,
+        'right-start': styles$4.modifiers.rightTop,
+        'right-end': styles$4.modifiers.rightBottom
+    };
+    const hasCustomMinWidth = minWidth !== c_popover_MinWidth.value;
+    const hasCustomMaxWidth = maxWidth !== c_popover_MaxWidth.value;
+    const onDocumentKeyDown = (event) => {
+        if (event.key === KeyTypes.Escape && visible) {
+            if (triggerManually) {
+                shouldClose(event, hide);
+            }
+            else {
+                hide(event);
+            }
+        }
+    };
+    const onDocumentClick = (event, triggerElement, popperElement) => {
+        if (hideOnOutsideClick && visible) {
+            const isFromChild = popperElement && popperElement.contains(event.target);
+            const isFromTrigger = triggerElement && triggerElement.contains(event.target);
+            if (isFromChild || isFromTrigger) {
+                // if clicked within the popper or on the trigger, ignore this event
+                return;
+            }
+            if (triggerManually) {
+                shouldClose(event, hide);
+            }
+            else {
+                hide(event);
+            }
+        }
+    };
+    const onTriggerClick = (event) => {
+        if (triggerManually) {
+            if (visible) {
+                shouldClose(event, hide);
+            }
+            else {
+                shouldOpen(event, show);
+            }
+        }
+        else {
+            if (visible) {
+                hide(event);
+            }
+            else {
+                show(event, true);
+            }
+        }
+    };
+    const onContentMouseDown = () => {
+        if (focusTrapActive) {
+            setFocusTrapActive(false);
+        }
+    };
+    const onMouseEnter = (event) => {
+        if (triggerManually) {
+            shouldOpen(event, show);
+        }
+        else {
+            show(event, false);
+        }
+    };
+    const onMouseLeave = (event) => {
+        if (triggerManually) {
+            shouldClose(event, hide);
+        }
+        else {
+            hide(event);
+        }
+    };
+    const onFocus = (event) => {
+        if (triggerManually) {
+            shouldOpen(event, show);
+        }
+        else {
+            show(event, false);
+        }
+    };
+    const onBlur = (event) => {
+        if (triggerManually) {
+            shouldClose(event, hide);
+        }
+        else {
+            hide(event);
+        }
+    };
+    const closePopover = (event) => {
+        event.stopPropagation();
+        if (triggerManually) {
+            shouldClose(event, hide);
+        }
+        else {
+            hide(event);
+        }
+    };
+    const content = (React.createElement(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.
+            // We want to prevent this in case false is ever passed in.
+            initialFocus: elementToFocus || undefined,
+            checkCanFocusTrap: (containers) => new Promise((resolve) => {
+                const interval = setInterval(() => {
+                    if (containers.every((container) => getComputedStyle(container).visibility !== 'hidden')) {
+                        resolve();
+                        clearInterval(interval);
+                    }
+                }, 10);
+            }),
+            tabbableOptions: { displayCheck: 'none' },
+            fallbackFocus: () => {
+                // If the popover's trigger is focused but scrolled out of view,
+                // FocusTrap will throw an error when the Enter button is used on the trigger.
+                // That is because the Popover is hidden when its trigger is out of view.
+                // Provide a fallback in that case.
+                let node = null;
+                if (document && document.activeElement) {
+                    node = document.activeElement;
+                }
+                return node;
+            }
+        }, 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) })));
+};
+Popover.displayName = 'Popover';
+
+const labelStyles = {
+  "label": "pf-v6-c-label",
+  "labelActions": "pf-v6-c-label__actions",
+  "labelContent": "pf-v6-c-label__content",
+  "labelIcon": "pf-v6-c-label__icon",
+  "labelText": "pf-v6-c-label__text",
+  "modifiers": {
+    "blue": "pf-m-blue",
+    "red": "pf-m-red",
+    "orange": "pf-m-orange",
+    "orangered": "pf-m-orangered",
+    "yellow": "pf-m-yellow",
+    "green": "pf-m-green",
+    "teal": "pf-m-teal",
+    "purple": "pf-m-purple",
+    "success": "pf-m-success",
+    "warning": "pf-m-warning",
+    "danger": "pf-m-danger",
+    "info": "pf-m-info",
+    "custom": "pf-m-custom",
+    "compact": "pf-m-compact",
+    "filled": "pf-m-filled",
+    "outline": "pf-m-outline",
+    "editable": "pf-m-editable",
+    "editableActive": "pf-m-editable-active",
+    "overflow": "pf-m-overflow",
+    "add": "pf-m-add",
+    "clickable": "pf-m-clickable",
+    "disabled": "pf-m-disabled"
+  }
+};
+
+const styles$3 = {
+  "modifiers": {
+    "editable": "pf-m-editable"}
+};
+
+const c_label__text_MaxWidth = {
+  "name": "--pf-v6-c-label__text--MaxWidth"};
+
+const colorStyles = {
+    blue: labelStyles.modifiers.blue,
+    teal: labelStyles.modifiers.teal,
+    green: labelStyles.modifiers.green,
+    orange: labelStyles.modifiers.orange,
+    purple: labelStyles.modifiers.purple,
+    red: labelStyles.modifiers.red,
+    orangered: labelStyles.modifiers.orangered,
+    yellow: labelStyles.modifiers.yellow,
+    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)
+};
+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"]);
+    const [isEditableActive, setIsEditableActive] = useState(false);
+    const [currValue, setCurrValue] = useState(children);
+    const editableButtonRef = React.useRef();
+    const editableInputRef = React.useRef();
+    const isOverflowLabel = variant === 'overflow';
+    const isAddLabel = variant === 'add';
+    const isClickable = (onLabelClick && !isOverflowLabel && !isAddLabel) || href;
+    let _icon;
+    if (status) {
+        _icon = statusIcons[status];
+    }
+    if (icon) {
+        _icon = icon;
+    }
+    React.useEffect(() => {
+        document.addEventListener('mousedown', onDocMouseDown);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('mousedown', onDocMouseDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    });
+    React.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.');
+        }
+        else if (onLabelClick && isEditable) {
+            // eslint-disable-next-line no-console
+            console.warn('Editable labels cannot have onClick passed, clicking starts the label edit process. Please remove either the isEditable or onClick prop.');
+        }
+    }, [onLabelClick, href, isEditable]);
+    const onDocMouseDown = (event) => {
+        if (isEditableActive &&
+            editableInputRef &&
+            editableInputRef.current &&
+            !editableInputRef.current.contains(event.target)) {
+            if (editableInputRef.current.value) {
+                onEditComplete && onEditComplete(event, editableInputRef.current.value);
+            }
+            setIsEditableActive(false);
+        }
+    };
+    const onKeyDown = (event) => {
+        var _a, _b;
+        const key = event.key;
+        if ((!isEditableActive &&
+            (!editableButtonRef ||
+                !editableButtonRef.current ||
+                !editableButtonRef.current.contains(event.target))) ||
+            (isEditableActive &&
+                (!editableInputRef || !editableInputRef.current || !editableInputRef.current.contains(event.target)))) {
+            return;
+        }
+        if (isEditableActive && (key === 'Enter' || key === 'Tab')) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            if (editableInputRef.current.value) {
+                onEditComplete && onEditComplete(event, editableInputRef.current.value);
+            }
+            setIsEditableActive(false);
+            (_a = editableButtonRef === null || editableButtonRef === void 0 ? void 0 : editableButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (isEditableActive && key === 'Escape') {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            // Reset div text to initial children prop - pre-edit
+            if (editableInputRef.current.value) {
+                editableInputRef.current.value = children;
+                onEditCancel && onEditCancel(event, children);
+            }
+            setIsEditableActive(false);
+            (_b = editableButtonRef === null || editableButtonRef === void 0 ? void 0 : editableButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+        if (!isEditableActive && key === 'Enter') {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+            setIsEditableActive(true);
+            // Set cursor position to end of text
+            const el = event.target;
+            const range = document.createRange();
+            const sel = window.getSelection();
+            range.selectNodeContents(el);
+            range.collapse(false);
+            sel.removeAllRanges();
+            sel.addRange(range);
+        }
+    };
+    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();
+    // ref to apply tooltip when rendered is used
+    const componentRef = React.useRef();
+    const [isTooltipVisible, setIsTooltipVisible] = React.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(() => {
+        if (isEditableActive && editableInputRef) {
+            editableInputRef.current && editableInputRef.current.focus();
+        }
+    }, [editableInputRef, isEditableActive]);
+    const updateVal = () => {
+        setCurrValue(editableInputRef.current.value);
+    };
+    let LabelComponentChildElement = 'span';
+    if (href) {
+        LabelComponentChildElement = 'a';
+    }
+    else if (isEditable || (onLabelClick && !isOverflowLabel && !isAddLabel)) {
+        LabelComponentChildElement = 'button';
+    }
+    const clickableLabelProps = {
+        type: 'button',
+        onClick: onLabelClick
+    };
+    const isButton = LabelComponentChildElement === 'button';
+    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) => {
+            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));
+    if (render) {
+        labelComponentChild = (React.createElement(React.Fragment, null,
+            isTooltipVisible && React.createElement(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));
+    }
+    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)))));
+};
+Label.displayName = 'Label';
+
+const styles$2 = {
+  "modifiers": {
+    "gutter": "pf-m-gutter"
+  },
+  "stack": "pf-v6-l-stack"};
+
+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));
+};
+Stack.displayName = 'Stack';
+
+const EllipsisVIconConfig = {
+  name: 'EllipsisVIcon',
+  height: 512,
+  width: 192,
+  svgPath: 'M96 184c39.8 0 72 32.2 72 72s-32.2 72-72 72-72-32.2-72-72 32.2-72 72-72zM24 80c0 39.8 32.2 72 72 72s72-32.2 72-72S135.8 8 96 8 24 40.2 24 80zm0 352c0 39.8 32.2 72 72 72s72-32.2 72-72-32.2-72-72-72-72 32.2-72 72z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const EllipsisVIcon = createIcon(EllipsisVIconConfig);
+
+const ActionsColumnBase = (_a) => {
+    var { items, isDisabled, rowData, extraData, actionsToggle, popperProps = {
+        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 onToggle = () => {
+        setIsOpen(!isOpen);
+    };
+    const onActionClick = (event, onClick) => {
+        // Only prevent default if onClick is provided.  This allows href support.
+        if (onClick) {
+            event.preventDefault();
+            // tslint:disable-next-line:no-unused-expression
+            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;
+                }
+            })))));
+};
+const ActionsColumn = React.forwardRef((props, ref) => (React.createElement(ActionsColumnBase, Object.assign({}, props, { innerRef: ref }))));
+ActionsColumn.displayName = 'ActionsColumn';
+
+const styles$1 = {
+  "modifiers": {
+    "fixed": "pf-m-fixed",
+    "stickyHeader": "pf-m-sticky-header",
+    "nestedColumnHeader": "pf-m-nested-column-header",
+    "striped": "pf-m-striped",
+    "expandable": "pf-m-expandable",
+    "stripedEven": "pf-m-striped-even",
+    "ghostRow": "pf-m-ghost-row",
+    "hidden": "pf-m-hidden",
+    "hiddenOnSm": "pf-m-hidden-on-sm",
+    "visibleOnSm": "pf-m-visible-on-sm",
+    "hiddenOnMd": "pf-m-hidden-on-md",
+    "visibleOnMd": "pf-m-visible-on-md",
+    "hiddenOnLg": "pf-m-hidden-on-lg",
+    "visibleOnLg": "pf-m-visible-on-lg",
+    "hiddenOnXl": "pf-m-hidden-on-xl",
+    "visibleOnXl": "pf-m-visible-on-xl",
+    "hiddenOn_2xl": "pf-m-hidden-on-2xl",
+    "visibleOn_2xl": "pf-m-visible-on-2xl",
+    "center": "pf-m-center",
+    "help": "pf-m-help",
+    "favorite": "pf-m-favorite",
+    "borderRight": "pf-m-border-right",
+    "borderLeft": "pf-m-border-left",
+    "noBorderRows": "pf-m-no-border-rows",
+    "expanded": "pf-m-expanded",
+    "clickable": "pf-m-clickable",
+    "selected": "pf-m-selected",
+    "firstCellOffsetReset": "pf-m-first-cell-offset-reset",
+    "dragOver": "pf-m-drag-over",
+    "truncate": "pf-m-truncate",
+    "wrap": "pf-m-wrap",
+    "nowrap": "pf-m-nowrap",
+    "fitContent": "pf-m-fit-content",
+    "breakWord": "pf-m-break-word",
+    "standalone": "pf-m-standalone",
+    "favorited": "pf-m-favorited",
+    "noPadding": "pf-m-no-padding",
+    "compact": "pf-m-compact",
+    "borderRow": "pf-m-border-row",
+    "width_10": "pf-m-width-10",
+    "width_15": "pf-m-width-15",
+    "width_20": "pf-m-width-20",
+    "width_25": "pf-m-width-25",
+    "width_30": "pf-m-width-30",
+    "width_35": "pf-m-width-35",
+    "width_40": "pf-m-width-40",
+    "width_45": "pf-m-width-45",
+    "width_50": "pf-m-width-50",
+    "width_60": "pf-m-width-60",
+    "width_70": "pf-m-width-70",
+    "width_80": "pf-m-width-80",
+    "width_90": "pf-m-width-90",
+    "width_100": "pf-m-width-100"
+  },
+  "table": "pf-v6-c-table",
+  "tableAction": "pf-v6-c-table__action",
+  "tableButton": "pf-v6-c-table__button",
+  "tableButtonContent": "pf-v6-c-table__button-content",
+  "tableCheck": "pf-v6-c-table__check",
+  "tableColumnHelp": "pf-v6-c-table__column-help",
+  "tableColumnHelpAction": "pf-v6-c-table__column-help-action",
+  "tableCompoundExpansionToggle": "pf-v6-c-table__compound-expansion-toggle",
+  "tableControlRow": "pf-v6-c-table__control-row",
+  "tableDraggable": "pf-v6-c-table__draggable",
+  "tableExpandableRow": "pf-v6-c-table__expandable-row",
+  "tableFavorite": "pf-v6-c-table__favorite",
+  "tableSort": "pf-v6-c-table__sort",
+  "tableSortIndicator": "pf-v6-c-table__sort-indicator",
+  "tableSubhead": "pf-v6-c-table__subhead",
+  "tableTbody": "pf-v6-c-table__tbody",
+  "tableTd": "pf-v6-c-table__td",
+  "tableText": "pf-v6-c-table__text",
+  "tableTh": "pf-v6-c-table__th",
+  "tableThead": "pf-v6-c-table__thead",
+  "tableToggle": "pf-v6-c-table__toggle",
+  "tableToggleIcon": "pf-v6-c-table__toggle-icon",
+  "tableTr": "pf-v6-c-table__tr"
+};
+
+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));
+};
+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 }) })));
+};
+DraggableCell.displayName = 'DraggableCell';
+
+const inlineStyles = {
+  "modifiers": {
+    "inlineEditable": "pf-m-inline-editable"}
+};
+
+const HelpIconConfig = {
+  name: 'HelpIcon',
+  height: 1024,
+  width: 1024,
+  svgPath: 'M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const HelpIcon = createIcon(HelpIconConfig);
+
+var TableTextVariant;
+(function (TableTextVariant) {
+    TableTextVariant["div"] = "div";
+    TableTextVariant["nav"] = "nav";
+})(TableTextVariant || (TableTextVariant = {}));
+var WrapModifier;
+(function (WrapModifier) {
+    WrapModifier["wrap"] = "wrap";
+    WrapModifier["nowrap"] = "nowrap";
+    WrapModifier["truncate"] = "truncate";
+    WrapModifier["breakWord"] = "breakWord";
+    WrapModifier["fitContent"] = "fitContent";
+})(WrapModifier || (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 onMouseEnter = (event) => {
+        if (event.target.offsetWidth < event.target.scrollWidth) {
+            setTooltip(tooltipProp || event.target.innerText);
+        }
+        else {
+            setTooltip('');
+        }
+        onMouseEnterProp(event);
+    };
+    const onFocus = (element) => {
+        if (element.offsetWidth < element.scrollWidth) {
+            setTooltip(tooltipProp || element.innerText);
+        }
+        else {
+            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(() => {
+        if (!tooltipHasDefaultBehavior) {
+            if (focused) {
+                onFocus(textRef.current);
+            }
+            else {
+                setTooltip('');
+            }
+        }
+    }, [focused, tooltipHasDefaultBehavior]);
+    return tooltip !== '' ? (React.createElement(Tooltip, Object.assign({ triggerRef: textRef, content: tooltip }, (!tooltipHasDefaultBehavior && { isVisible: true }), tooltipProps), 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) }))))));
+HeaderCellInfoWrapper.displayName = 'HeaderCellInfoWrapper';
+
+const stylesGrid = {
+  "modifiers": {
+    "grid": "pf-m-grid",
+    "expandable": "pf-m-expandable",
+    "expanded": "pf-m-expanded",
+    "selected": "pf-m-selected",
+    "compact": "pf-m-compact",
+    "noPadding": "pf-m-no-padding",
+    "hoverable": "pf-m-hoverable",
+    "nowrap": "pf-m-nowrap",
+    "fitContent": "pf-m-fit-content",
+    "truncate": "pf-m-truncate",
+    "gridMd": "pf-m-grid-md",
+    "gridLg": "pf-m-grid-lg",
+    "gridXl": "pf-m-grid-xl",
+    "grid_2xl": "pf-m-grid-2xl"
+  }};
+
+const treeViewStyles = {
+  "modifiers": {
+    "treeView": "pf-m-tree-view",
+    "noInset": "pf-m-no-inset",
+    "treeViewGrid": "pf-m-tree-view-grid",
+    "borderRight": "pf-m-border-right",
+    "treeViewDetailsExpanded": "pf-m-tree-view-details-expanded",
+    "treeViewGridMd": "pf-m-tree-view-grid-md",
+    "treeViewGridLg": "pf-m-tree-view-grid-lg",
+    "treeViewGridXl": "pf-m-tree-view-grid-xl",
+    "treeViewGrid_2xl": "pf-m-tree-view-grid-2xl"
+  },
+  "tableCheck": "pf-v6-c-table__check",
+  "tableToggle": "pf-v6-c-table__toggle",
+  "tableToggleIcon": "pf-v6-c-table__toggle-icon",
+  "tableTreeViewDetailsToggle": "pf-v6-c-table__tree-view-details-toggle",
+  "tableTreeViewIcon": "pf-v6-c-table__tree-view-icon",
+  "tableTreeViewMain": "pf-v6-c-table__tree-view-main",
+  "tableTreeViewText": "pf-v6-c-table__tree-view-text",
+  "tableTreeViewTitleCell": "pf-v6-c-table__tree-view-title-cell"
+};
+
+var RowSelectVariant;
+(function (RowSelectVariant) {
+    RowSelectVariant["radio"] = "radio";
+    RowSelectVariant["checkbox"] = "checkbox";
+})(RowSelectVariant || (RowSelectVariant = {}));
+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);
+};
+SelectColumn.displayName = 'SelectColumn';
+
+const selectable = (label, { rowIndex, columnIndex, rowData, column, property, tooltip }) => {
+    const { extraParams: { onSelect, selectVariant, allRowsSelected, isHeaderSelectDisabled } } = column;
+    const extraData = {
+        rowIndex,
+        columnIndex,
+        column,
+        property
+    };
+    if (rowData && rowData.hasOwnProperty('parent') && !rowData.showSelect && !rowData.fullWidth) {
+        return {
+            component: 'td',
+            isVisible: true
+        };
+    }
+    const rowId = rowIndex !== undefined ? rowIndex : -1;
+    /**
+     * @param {React.FormEvent} event - React form event
+     */
+    function selectClick(event) {
+        const selected = rowIndex === undefined ? event.currentTarget.checked : rowData && !rowData.selected;
+        // tslint:disable-next-line:no-unused-expression
+        onSelect && onSelect(event, selected, rowId, rowData, extraData);
+    }
+    const customProps = Object.assign(Object.assign(Object.assign({}, (rowId !== -1
+        ? {
+            checked: rowData && !!rowData.selected,
+            'aria-label': `Select row ${rowIndex}`
+        }
+        : {
+            checked: allRowsSelected,
+            'aria-label': 'Select all rows'
+        })), (rowData &&
+        (rowData.disableCheckbox || rowData.disableSelection) && {
+        disabled: true,
+        className: checkStyles.checkInput
+    })), (!rowData && isHeaderSelectDisabled && { disabled: true }));
+    let selectName = 'check-all';
+    if (rowId !== -1 && selectVariant === RowSelectVariant.checkbox) {
+        selectName = `checkrow${rowIndex}`;
+    }
+    else if (rowId !== -1) {
+        selectName = 'radioGroup';
+    }
+    return {
+        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))
+    };
+};
+
+const LongArrowAltUpIconConfig = {
+  name: 'LongArrowAltUpIcon',
+  height: 512,
+  width: 256,
+  svgPath: 'M88 166.059V468c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12V166.059h46.059c21.382 0 32.09-25.851 16.971-40.971l-86.059-86.059c-9.373-9.373-24.569-9.373-33.941 0l-86.059 86.059c-15.119 15.119-4.411 40.971 16.971 40.971H88z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const LongArrowAltUpIcon = createIcon(LongArrowAltUpIconConfig);
+
+const LongArrowAltDownIconConfig = {
+  name: 'LongArrowAltDownIcon',
+  height: 512,
+  width: 256,
+  svgPath: 'M168 345.941V44c0-6.627-5.373-12-12-12h-56c-6.627 0-12 5.373-12 12v301.941H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.569 9.373 33.941 0l86.059-86.059c15.119-15.119 4.411-40.971-16.971-40.971H168z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const LongArrowAltDownIcon = createIcon(LongArrowAltDownIconConfig);
+
+const ArrowsAltVIconConfig = {
+  name: 'ArrowsAltVIcon',
+  height: 512,
+  width: 256,
+  svgPath: 'M214.059 377.941H168V134.059h46.059c21.382 0 32.09-25.851 16.971-40.971L144.971 7.029c-9.373-9.373-24.568-9.373-33.941 0L24.971 93.088c-15.119 15.119-4.411 40.971 16.971 40.971H88v243.882H41.941c-21.382 0-32.09 25.851-16.971 40.971l86.059 86.059c9.373 9.373 24.568 9.373 33.941 0l86.059-86.059c15.12-15.119 4.412-40.971-16.97-40.971z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+const ArrowsAltVIcon = createIcon(ArrowsAltVIconConfig);
+
+var SortByDirection;
+(function (SortByDirection) {
+    SortByDirection["asc"] = "asc";
+    SortByDirection["desc"] = "desc";
+})(SortByDirection || (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);
+    if (isSortedBy) {
+        SortedByIcon = sortDirection === SortByDirection.asc ? LongArrowAltUpIcon : LongArrowAltDownIcon;
+    }
+    else {
+        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 (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)))));
+};
+SortColumn.displayName = 'SortColumn';
+
+const sortableFavorites = (sort) => () => {
+    var _a;
+    return sortable(React.createElement(StarIcon, { "aria-hidden": true }), {
+        columnIndex: sort.columnIndex,
+        className: styles$1.tableFavorite,
+        ariaLabel: (_a = sort.ariaLabel) !== null && _a !== void 0 ? _a : 'Sort favorites',
+        column: {
+            extraParams: {
+                sortBy: sort.sortBy,
+                onSort: sort.onSort,
+                favoriteButtonProps: sort.favoriteButtonProps
+            }
+        },
+        tooltip: sort.tooltip,
+        tooltipProps: sort.tooltipProps,
+        tooltipHasDefaultBehavior: true
+    });
+};
+const sortable = (label, { columnIndex, column, property, className, ariaLabel, tooltip, tooltipProps, tooltipHasDefaultBehavior }) => {
+    const { extraParams: { sortBy, onSort, favoriteButtonProps } } = column;
+    const extraData = {
+        columnIndex,
+        column,
+        property
+    };
+    const isSortedBy = sortBy && columnIndex === sortBy.index;
+    /**
+     * @param {React.MouseEvent} event - React mouse event
+     */
+    function sortClicked(event) {
+        let reversedDirection;
+        if (!isSortedBy) {
+            reversedDirection = sortBy.defaultDirection ? sortBy.defaultDirection : SortByDirection.asc;
+        }
+        else {
+            reversedDirection = sortBy.direction === SortByDirection.asc ? SortByDirection.desc : SortByDirection.asc;
+        }
+        // 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)) });
+};
+
+const resolveOrDefault = (resolver, defaultValue, rowData, extraData) => (defaultValue);
+const cellActions = (actions, actionResolver, areActionsDisabled) => (label, { rowData, column, rowIndex, columnIndex, column: { extraParams: { actionsToggle, actionsPopperProps } }, property }) => {
+    const extraData = {
+        rowIndex,
+        columnIndex,
+        column,
+        property
+    };
+    const resolvedActions = resolveOrDefault(actionResolver, actions);
+    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))
+        }
+        : {};
+    return Object.assign({ className: css(styles$1.tableAction), style: { paddingRight: 0 }, isVisible: true }, renderProps);
+};
+
+const camelize = (s) => s.toUpperCase().replace('-', '').replace('_', '');
+const toCamel = (s) => s.replace(/([-_][a-z])/gi, camelize);
+/**
+ * @param {string} input - String to capitalize
+ */
+function capitalize(input) {
+    return input[0].toUpperCase() + input.substring(1);
+}
+
+const cellWidth = (width) => () => ({
+    className: css(styles$1.modifiers[typeof width === 'number' ? `width_${width}` : `width${capitalize(width)}`])
+});
+
+const collapsible = (value, { rowIndex, columnIndex, rowData, column, property }) => {
+    const { extraParams: { onCollapse, rowLabeledBy = 'simple-node', expandId = 'expand-toggle', allRowsExpanded, collapseAllAriaLabel } } = column;
+    const extraData = {
+        rowIndex,
+        columnIndex,
+        column,
+        property
+    };
+    const rowId = rowIndex !== undefined ? rowIndex : -1;
+    const customProps = Object.assign({}, (rowId !== -1
+        ? {
+            isOpen: rowData === null || rowData === void 0 ? void 0 : rowData.isOpen,
+            'aria-labelledby': `${rowLabeledBy}${rowId} ${expandId}${rowId}`
+        }
+        : {
+            isOpen: allRowsExpanded,
+            'aria-label': collapseAllAriaLabel || 'Expand all rows'
+        }));
+    /**
+     * @param {React.MouseEvent} event - Mouse event
+     */
+    function onToggle(event) {
+        const open = rowData ? !rowData.isOpen : !allRowsExpanded;
+        // tslint:disable-next-line:no-unused-expression
+        onCollapse && onCollapse(event, rowIndex, open, rowData, extraData);
+    }
+    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))
+    };
+};
+
+const compoundExpand = (value, { rowIndex, columnIndex, rowData, column, property }) => {
+    if (!value) {
+        return null;
+    }
+    const { title, props } = value;
+    const { extraParams: { onExpand, expandId = 'expand-toggle' } } = column;
+    const extraData = {
+        rowIndex,
+        columnIndex,
+        column,
+        property
+    };
+    /**
+     * @param {React.MouseEvent} event - Mouse event
+     */
+    function onToggle(event) {
+        // tslint:disable-next-line:no-unused-expression
+        onExpand && onExpand(event, rowIndex, columnIndex, props.isOpen, rowData, extraData);
+    }
+    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)))
+    };
+};
+
+const visibilityModifiers = [
+    'hidden',
+    'hiddenOnSm',
+    'hiddenOnMd',
+    'hiddenOnLg',
+    'hiddenOnXl',
+    'hiddenOn_2xl',
+    'visibleOnSm',
+    'visibleOnMd',
+    'visibleOnLg',
+    'visibleOnXl',
+    'visibleOn_2xl'
+];
+const Visibility = visibilityModifiers
+    .filter((key) => styles$1.modifiers[key])
+    .reduce((acc, curr) => {
+    const key2 = curr.replace('_2xl', '2Xl');
+    acc[key2] = styles$1.modifiers[curr];
+    return acc;
+}, {});
+const classNames = (...classes) => () => ({
+    className: css(...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))
+    });
+    return infoObj;
+};
+
+const FavoritesCell = (_a) => {
+    var { className = '', onFavorite, isFavorited, rowIndex } = _a, props = __rest(_a, ["className", "onFavorite", "isFavorited", "rowIndex"]);
+    const ariaProps = rowIndex === undefined
+        ? {}
+        : {
+            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 }) })));
+};
+FavoritesCell.displayName = 'FavoritesCell';
+
+const favoritable = (value, { rowIndex, columnIndex, rowData, column, property }) => {
+    const { extraParams: { onFavorite } } = column;
+    const extraData = {
+        rowIndex,
+        columnIndex,
+        column,
+        property
+    };
+    // this is a child row which should not display the favorites icon
+    if (rowData && rowData.hasOwnProperty('parent') && !rowData.fullWidth) {
+        return {
+            component: 'td',
+            isVisible: true
+        };
+    }
+    /**
+     * @param {React.MouseEvent} event - Mouse event
+     */
+    function favoritesClick(event) {
+        // tslint:disable-next-line:no-unused-expression
+        onFavorite && onFavorite(event, rowData && !rowData.favorited, rowIndex, rowData, extraData);
+    }
+    const additionalProps = rowData.favoritesProps || {};
+    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)))
+    };
+};
+
+const EllipsisHIconConfig = {
+  name: 'EllipsisHIcon',
+  height: 512,
+  width: 512,
+  svgPath: 'M328 256c0 39.8-32.2 72-72 72s-72-32.2-72-72 32.2-72 72-72 72 32.2 72 72zm104-72c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72zm-352 0c-39.8 0-72 32.2-72 72s32.2 72 72 72 72-32.2 72-72-32.2-72-72-72z',
+  yOffset: 0,
+  xOffset: 0,
+};
+
+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 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)
+    };
+};
+
+var TableGridBreakpoint;
+(function (TableGridBreakpoint) {
+    TableGridBreakpoint["none"] = "";
+    TableGridBreakpoint["grid"] = "grid";
+    TableGridBreakpoint["gridMd"] = "grid-md";
+    TableGridBreakpoint["gridLg"] = "grid-lg";
+    TableGridBreakpoint["gridXl"] = "grid-xl";
+    TableGridBreakpoint["grid2xl"] = "grid-2xl";
+})(TableGridBreakpoint || (TableGridBreakpoint = {}));
+var TableVariant;
+(function (TableVariant) {
+    TableVariant["compact"] = "compact";
+})(TableVariant || (TableVariant = {}));
+
+const TableContext = React.createContext({
+    registerSelectableRow: () => { }
+});
+const TableBase = (_a) => {
+    var _b, _c;
+    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 tableRef = innerRef || ref;
+    const [hasSelectableRows, setHasSelectableRows] = React.useState(false);
+    const [tableCaption, setTableCaption] = React.useState();
+    React.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')) {
+            const tbody = tableRef.current.querySelector('tbody');
+            tbody && setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
+        }
+        return function cleanup() {
+            document.removeEventListener('keydown', handleKeys);
+        };
+    }, [tableRef, tableRef.current]);
+    React.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.")));
+        }
+        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."));
+        }
+    }, [selectableRowCaptionText]);
+    const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe);
+    const grid = (_b = stylesGrid.modifiers) === null || _b === void 0 ? void 0 : _b[toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl')];
+    const breakPointPrefix = `treeView${gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1)}`;
+    const treeGrid = (_c = treeViewStyles.modifiers) === null || _c === void 0 ? void 0 : _c[toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl')];
+    const handleKeys = (event) => {
+        if (isNested ||
+            !(tableRef && tableRef.current && tableRef.current.classList.contains(treeViewStyles.modifiers.treeView)) || // implements roving tab-index to tree tables only
+            (tableRef && tableRef.current !== event.target.closest(`.${styles$1.table}:not(.pf-m-nested)`))) {
+            return;
+        }
+        const activeElement = document.activeElement;
+        const key = event.key;
+        const rows = Array.from(tableRef.current.querySelectorAll('tbody tr')).filter((el) => !el.classList.contains('pf-m-disabled') && !el.hidden);
+        if (key === KeyTypes.Space || key === KeyTypes.Enter) {
+            activeElement.click();
+            event.preventDefault();
+        }
+        const getFocusableElement = (element) => element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
+        handleArrows(event, rows, (element) => element === activeElement.closest('tr'), getFocusableElement, ['button', 'input', 'a'], undefined, false, true, false);
+    };
+    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)));
+};
+const Table = React.forwardRef((props, ref) => (React.createElement(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('');
+    let onKeyDown = null;
+    if (onRowClick) {
+        onKeyDown = (e) => {
+            if (e.key === 'Enter' || e.key === ' ') {
+                onRowClick(e);
+                e.preventDefault();
+            }
+        };
+    }
+    const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);
+    const { registerSelectableRow } = React.useContext(TableContext);
+    React.useEffect(() => {
+        if (isSelectable && !rowIsHidden) {
+            setComputedAriaLabel(`${isRowSelected ? 'Row selected' : ''}`);
+            registerSelectableRow();
+        }
+        else {
+            setComputedAriaLabel(undefined);
+        }
+    }, [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)));
+};
+const Tr = React.forwardRef((props, ref) => (React.createElement(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));
+};
+const Thead = React.forwardRef((props, ref) => (React.createElement(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));
+};
+const Tbody = React.forwardRef((props, ref) => (React.createElement(TbodyBase, Object.assign({}, props, { innerRef: ref }))));
+Tbody.displayName = 'Tbody';
+
+const styles = {
+  "modifiers": {
+    "borderRight": "pf-m-border-right",
+    "borderLeft": "pf-m-border-left"},
+  "tableStickyCell": "pf-v6-c-table__sticky-cell"
+};
+
+const accessibleStyles = {
+  "screenReader": "pf-v6-u-screen-reader"};
+
+/**
+ * merge-props.js
+ *
+ * Forked from reactabular-table version 8.14.0
+ * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
+ */
+/**
+ * @param {any} props - Props
+ */
+function mergeProps(...props) {
+    const firstProps = props[0];
+    const restProps = props.slice(1);
+    if (!restProps.length) {
+        return mergeWith({}, firstProps);
+    }
+    // Avoid mutating the first prop collection
+    return mergeWith(mergeWith({}, firstProps), ...restProps, (a, b, key) => {
+        if (key === 'children') {
+            if (a && b) {
+                // compose the two
+                return React.cloneElement(a, {
+                    children: b
+                });
+            }
+            // Children have to be merged in reverse order for Reactabular
+            // logic to work.
+            return Object.assign(Object.assign({}, b), a);
+        }
+        if (key === 'className') {
+            // Process class names through classNames to merge properly
+            // as a string.
+            return css(a, b);
+        }
+        return undefined;
+    });
+}
+
+const c_table__sticky_cell_MinWidth = {
+  "name": "--pf-v6-c-table__sticky-cell--MinWidth"};
+
+const c_table__sticky_cell_InsetInlineStart = {
+  "name": "--pf-v6-c-table__sticky-cell--InsetInlineStart"};
+
+const c_table__sticky_cell_InsetInlineEnd = {
+  "name": "--pf-v6-c-table__sticky-cell--InsetInlineEnd"};
+
+const ThBase = (_a) => {
+    var _b;
+    var { children, className, component = 'th', dataLabel, scope = 'col', textCenter = false, sort = null, modifier, select = null, expand: collapse = null, tooltip = '', tooltipProps, onMouseEnter: onMouseEnterProp = () => { }, width, visibility, innerRef, info: infoProps, isStickyColumn = false, hasRightBorder = false, hasLeftBorder = false, stickyMinWidth = '120px', stickyLeftOffset, stickyRightOffset, isSubheader = false, screenReaderText, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["children", "className", "component", "dataLabel", "scope", "textCenter", "sort", "modifier", "select", "expand", "tooltip", "tooltipProps", "onMouseEnter", "width", "visibility", "innerRef", "info", "isStickyColumn", "hasRightBorder", "hasLeftBorder", "stickyMinWidth", "stickyLeftOffset", "stickyRightOffset", "isSubheader", "screenReaderText", 'aria-label']);
+    if (!children && !screenReaderText && !ariaLabel) {
+        // 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 onMouseEnter = (event) => {
+        if (event.target.offsetWidth < event.target.scrollWidth) {
+            !showTooltip && setShowTooltip(true);
+        }
+        else {
+            showTooltip && setShowTooltip(false);
+        }
+        onMouseEnterProp(event);
+    };
+    let sortParams = null;
+    if (sort) {
+        if (sort.isFavorites) {
+            sortParams = sortableFavorites({
+                onSort: sort.onSort,
+                columnIndex: sort.columnIndex,
+                sortBy: sort.sortBy,
+                tooltip: tooltip,
+                tooltipProps,
+                ariaLabel: sort['aria-label'],
+                favoriteButtonProps: sort.favoriteButtonProps
+            })();
+        }
+        else {
+            sortParams = sortable(children, {
+                columnIndex: sort.columnIndex,
+                column: {
+                    extraParams: {
+                        sortBy: sort.sortBy,
+                        onSort: sort === null || sort === void 0 ? void 0 : sort.onSort
+                    }
+                },
+                tooltip: tooltip,
+                tooltipProps
+            });
+        }
+    }
+    const selectParams = select
+        ? selectable(children, {
+            rowData: {
+                selected: select.isSelected,
+                disableSelection: select === null || select === void 0 ? void 0 : select.isDisabled,
+                props: select === null || select === void 0 ? void 0 : select.props
+            },
+            column: {
+                extraParams: {
+                    onSelect: select === null || select === void 0 ? void 0 : select.onSelect,
+                    selectVariant: 'checkbox',
+                    allRowsSelected: select.isSelected,
+                    isHeaderSelectDisabled: !!select.isHeaderSelectDisabled
+                }
+            },
+            tooltip: tooltip})
+        : null;
+    const collapseParams = collapse
+        ? collapsible(children, {
+            column: {
+                extraParams: {
+                    onCollapse: collapse === null || collapse === void 0 ? void 0 : collapse.onToggle,
+                    allRowsExpanded: !collapse.areAllExpanded,
+                    collapseAllAriaLabel: ''
+                }
+            }
+        })
+        : null;
+    const widthParams = width ? cellWidth(width)() : null;
+    const visibilityParams = visibility
+        ? classNames(...visibility.map((vis) => Visibility[vis]))()
+        : null;
+    let transformedChildren = (sortParams === null || sortParams === void 0 ? void 0 : sortParams.children) || (selectParams === null || selectParams === void 0 ? void 0 : selectParams.children) || (collapseParams === null || collapseParams === void 0 ? void 0 : collapseParams.children) || children;
+    // info can wrap other transformedChildren
+    let infoParams = null;
+    if (infoProps) {
+        infoParams = info(infoProps)(transformedChildren);
+        transformedChildren = infoParams.children;
+    }
+    const merged = mergeProps(sortParams, selectParams, collapseParams, widthParams, visibilityParams, infoParams);
+    const { 
+    // ignore the merged children since we transform them ourselves so we can wrap it with info
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    children: mergedChildren = null, 
+    // 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(() => {
+        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 && {
+        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))));
+    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);
+};
+const Th = React.forwardRef((props, ref) => (React.createElement(ThBase, Object.assign({}, props, { innerRef: ref }))));
+Th.displayName = 'Th';
+
+const draggable = (value, { rowData }) => {
+    const { id } = rowData;
+    return {
+        className: '',
+        children: React.createElement(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 onMouseEnter = (event) => {
+        if (event.target.offsetWidth < event.target.scrollWidth) {
+            !showTooltip && setShowTooltip(true);
+        }
+        else {
+            showTooltip && setShowTooltip(false);
+        }
+        onMouseEnterProp(event);
+    };
+    const selectParams = select
+        ? selectable(children, {
+            rowIndex: select.rowIndex,
+            rowData: {
+                selected: select.isSelected,
+                disableSelection: select === null || select === void 0 ? void 0 : select.isDisabled,
+                props: select === null || select === void 0 ? void 0 : select.props
+            },
+            column: {
+                extraParams: {
+                    onSelect: select === null || select === void 0 ? void 0 : select.onSelect,
+                    selectVariant: select.variant || 'checkbox'
+                }
+            }
+        })
+        : null;
+    const favoriteParams = favorites
+        ? favoritable(null, {
+            rowIndex: favorites === null || favorites === void 0 ? void 0 : favorites.rowIndex,
+            rowData: {
+                favorited: favorites.isFavorited,
+                favoritesProps: favorites === null || favorites === void 0 ? void 0 : favorites.props
+            },
+            column: {
+                extraParams: {
+                    onFavorite: favorites === null || favorites === void 0 ? void 0 : favorites.onFavorite
+                }
+            }
+        })
+        : null;
+    const draggableParams = draggableRowProp !== null
+        ? draggable(null, {
+            rowData: {
+                id: draggableRowProp.id
+            }
+        })
+        : null;
+    const actionParamsFunc = actions ? cellActions(actions.items, null, null) : null;
+    const actionParams = actionParamsFunc
+        ? actionParamsFunc(null, {
+            rowIndex: actions === null || actions === void 0 ? void 0 : actions.rowIndex,
+            rowData: {
+                disableActions: actions === null || actions === void 0 ? void 0 : actions.isDisabled
+            },
+            column: {
+                extraParams: {
+                    dropdownPosition: actions === null || actions === void 0 ? void 0 : actions.dropdownPosition,
+                    dropdownDirection: actions === null || actions === void 0 ? void 0 : actions.dropdownDirection,
+                    menuAppendTo: actions === null || actions === void 0 ? void 0 : actions.menuAppendTo,
+                    actionsToggle: actions === null || actions === void 0 ? void 0 : actions.actionsToggle
+                }
+            }
+        })
+        : null;
+    const expandableParams = expand !== null
+        ? collapsible(null, {
+            rowIndex: expand.rowIndex,
+            columnIndex: expand === null || expand === void 0 ? void 0 : expand.columnIndex,
+            rowData: {
+                isOpen: expand.isExpanded
+            },
+            column: {
+                extraParams: {
+                    onCollapse: expand === null || expand === void 0 ? void 0 : expand.onToggle,
+                    expandId: expand === null || expand === void 0 ? void 0 : expand.expandId
+                }
+            }
+        })
+        : null;
+    const compoundParams = compoundExpandProp !== null
+        ? compoundExpand({
+            title: children,
+            props: {
+                isOpen: compoundExpandProp.isExpanded
+            }
+        }, {
+            rowIndex: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.rowIndex,
+            columnIndex: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.columnIndex,
+            column: {
+                extraParams: {
+                    onExpand: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.onToggle,
+                    expandId: compoundExpandProp === null || compoundExpandProp === void 0 ? void 0 : compoundExpandProp.expandId
+                }
+            }
+        })
+        : null;
+    const widthParams = width ? cellWidth(width)() : null;
+    const visibilityParams = visibility
+        ? classNames(...visibility.map((vis) => Visibility[vis]))()
+        : null;
+    const treeRowParams = treeRowProp !== null
+        ? treeRow(treeRowProp.onCollapse, treeRowProp.onCheckChange, treeRowProp.onToggleRowDetails)({
+            title: children
+        }, {
+            rowIndex: treeRowProp.rowIndex,
+            rowData: {
+                props: treeRowProp.props
+            }
+        })
+        : null;
+    const merged = mergeProps(selectParams, actionParams, expandableParams, compoundParams, widthParams, visibilityParams, favoriteParams, treeRowParams, draggableParams);
+    const { 
+    // selectable adds this but we don't want it
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    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(() => {
+        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 && {
+        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));
+    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);
+};
+const Td = React.forwardRef((props, ref) => (React.createElement(TdBase, Object.assign({}, props, { innerRef: ref }))));
+Td.displayName = 'Td';
+
+const textStyles = {
+  "textColorRequired": "pf-v6-u-text-color-required",
+  "textColorSubtle": "pf-v6-u-text-color-subtle"};
+
+const PropsTable = ({
+  componentName,
+  headingLevel = "h3",
+  componentDescription,
+  componentProps
+}) => {
+  const SectionHeading = headingLevel;
+  const publicProps = componentProps?.filter((prop) => !prop.isHidden);
+  const hasPropsToRender = !!publicProps?.length;
+  const renderTagLabel = (componentProp) => {
+    const { name, isBeta, isDeprecated } = componentProp;
+    if (!isBeta && !isDeprecated) {
+      return null;
+    }
+    if (isBeta && isDeprecated) {
+      console.error(
+        `The ${name} prop for ${componentName} has both the isBeta and isDeprecated tag.`
+      );
+    }
+    return /* @__PURE__ */ jsx(Label, { color: `${isBeta ? "blue" : "grey"}`, isCompact: true, children: isBeta ? "Beta" : "Deprecated" });
+  };
+  const renderRequiredDescription = (isRequired) => {
+    if (!isRequired) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: css(textStyles.textColorRequired), children: "*" }),
+      /* @__PURE__ */ jsx("span", { className: css(accessibleStyles.screenReader), children: "required" })
+    ] });
+  };
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx(SectionHeading, { children: componentName }),
+    /* @__PURE__ */ jsxs(Stack, { hasGutter: true, children: [
+      componentDescription && /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-testid": "component-description",
+          className: css(textStyles.textColorSubtle),
+          children: componentDescription
+        }
+      ),
+      hasPropsToRender && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs("div", { id: `${componentName}-required-description`, children: [
+          /* @__PURE__ */ jsx("span", { className: css(textStyles.textColorRequired), children: "*" }),
+          " ",
+          /* @__PURE__ */ jsx("span", { className: css(textStyles.textColorSubtle), children: "indicates a required prop" })
+        ] }),
+        /* @__PURE__ */ jsxs(
+          Table,
+          {
+            variant: "compact",
+            "aria-label": `Props for ${componentName}`,
+            "aria-describedby": `${componentName}-required-description`,
+            gridBreakPoint: "grid-lg",
+            children: [
+              /* @__PURE__ */ jsx(Thead, { children: /* @__PURE__ */ jsxs(Tr, { children: [
+                /* @__PURE__ */ jsx(Th, { width: 20, children: "Name" }),
+                /* @__PURE__ */ jsx(Th, { width: 20, children: "Type" }),
+                /* @__PURE__ */ jsx(Th, { width: 10, children: "Default" }),
+                /* @__PURE__ */ jsx(Th, { children: "Description" })
+              ] }) }),
+              /* @__PURE__ */ jsx(Tbody, { children: publicProps.map((prop) => /* @__PURE__ */ jsxs(Tr, { children: [
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(TableText, { wrapModifier: "breakWord", children: [
+                  prop.name,
+                  renderRequiredDescription(prop.isRequired),
+                  " ",
+                  renderTagLabel(prop)
+                ] }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(TableText, { wrapModifier: "breakWord", children: prop.type || "No type info available" }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(TableText, { wrapModifier: "breakWord", children: prop.defaultValue || "-" }) }),
+                /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(TableText, { wrapModifier: "breakWord", children: prop.description || "No description available." }) })
+              ] }, prop.name)) })
+            ]
+          }
+        )
+      ] })
+    ] })
+  ] });
+};
+
+const $$Astro = createAstro();
+const $$PropsTables = createComponent(async ($$result, $$props, $$slots) => {
+  const Astro2 = $$result.createAstro($$Astro, $$props, $$slots);
+  Astro2.self = $$PropsTables;
+  async function getPropsData(propComponents2) {
+    if (!propComponents2 || propComponents2.length === 0) {
+      return [];
+    }
+    const url = new URL(`/props?components=${propComponents2}`, Astro2.url);
+    try {
+      const response = await fetch(url);
+      const propsData2 = await response.json();
+      return propsData2;
+    } catch (e) {
+      console.error(e);
+      return [];
+    }
+  }
+  const { propComponents } = Astro2.props;
+  const propsData = await getPropsData(propComponents);
+  return renderTemplate`${propsData.filter((comp) => !!comp).map((component) => renderTemplate`${renderComponent($$result, "PropsTable", PropsTable, { "key": component.name, "componentName": component.name, "componentDescription": component.description, "componentProps": component.props })}`)}`;
+}, "/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/PropsTables.astro", void 0);
+
+const $$file = "/home/runner/work/patternfly-doc-core/patternfly-doc-core/src/components/PropsTables.astro";
+const $$url = undefined;
+
+export { $$PropsTables as default, $$file as file, $$url as url };