@patternfly/patternfly-doc-core 1.5.0 → 1.7.0

package/dist/server/chunks/{angle-down-icon_BNJvzYv-.mjs → angle-down-icon_DtGGiMR5.mjs}

@@ -1,422 +1,10 @@
+import { r as getUniqueId, a as canUseDOM, w as getLanguageDirection, x as clearTimeouts, c as css, b as createIcon, K as KeyTypes, g as getDefaultOUIAId, e as getOUIAProps, B as Button, d as ExclamationCircleIcon, E as ExclamationTriangleIcon, C as CheckCircleIcon, l as formatBreakpointMods, u as useOUIAProps } from './Button_DVSwQ8oX.mjs';
 import { __rest } from 'tslib';
-import * as React from 'react';
-import React__default, { useMemo } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Component, useLayoutEffect, useEffect, useRef, useState, useMemo, useCallback, isValidElement, cloneElement, createRef, createContext, forwardRef, useContext } from 'react';
 /* empty css                          */
 import * as ReactDOM from 'react-dom';
 
-/** Joins args into a className string
- *
- * @param {any} args list of objects, string, or arrays to reduce
- */
-function css(...args) {
-    // Adapted from https://github.com/JedWatson/classnames/blob/master/index.js
-    const classes = [];
-    const hasOwn = {}.hasOwnProperty;
-    args.filter(Boolean).forEach((arg) => {
-        const argType = typeof arg;
-        if (argType === 'string' || argType === 'number') {
-            classes.push(arg);
-        }
-        else if (Array.isArray(arg) && arg.length) {
-            const inner = css(...arg);
-            if (inner) {
-                classes.push(inner);
-            }
-        }
-        else if (argType === 'object') {
-            for (const key in arg) {
-                if (hasOwn.call(arg, key) && arg[key]) {
-                    classes.push(key);
-                }
-            }
-        }
-    });
-    return classes.join(' ');
-}
-
-const t_global_breakpoint_sm = {
-  "value": "36rem"};
-
-const t_global_breakpoint_md = {
-  "value": "48rem"};
-
-const t_global_breakpoint_lg = {
-  "value": "62rem"};
-
-const t_global_breakpoint_xl = {
-  "value": "75rem"};
-
-const t_global_breakpoint_2xl = {
-  "value": "90.625rem"};
-
-const t_global_breakpoint_height_sm = {
-  "value": "0rem"};
-
-const t_global_breakpoint_height_md = {
-  "value": "40rem"};
-
-const t_global_breakpoint_height_lg = {
-  "value": "48rem"};
-
-const t_global_breakpoint_height_xl = {
-  "value": "60rem"};
-
-const t_global_breakpoint_height_2xl = {
-  "value": "80rem"};
-
-let currentId$1 = 0;
-/**
- * Factory to create Icon class components for consumers
- */
-function createIcon({ name, xOffset = 0, yOffset = 0, width, height, svgPath }) {
-    var _a;
-    return _a = class SVGIcon extends React.Component {
-            constructor() {
-                super(...arguments);
-                this.id = `icon-title-${currentId$1++}`;
-            }
-            render() {
-                const _b = this.props, { title, className } = _b, props = __rest(_b, ["title", "className"]);
-                const classes = className ? `pf-v6-svg ${className}` : 'pf-v6-svg';
-                const hasTitle = Boolean(title);
-                const viewBox = [xOffset, yOffset, width, height].join(' ');
-                return (React.createElement("svg", Object.assign({ className: classes, viewBox: viewBox, fill: "currentColor", "aria-labelledby": hasTitle ? this.id : null, "aria-hidden": hasTitle ? null : true, role: "img", width: "1em", height: "1em" }, props),
-                    hasTitle && React.createElement("title", { id: this.id }, title),
-                    React.createElement("path", { d: svgPath })));
-            }
-        },
-        _a.displayName = name,
-        _a;
-}
-
-const CheckCircleIconConfig = {
-  name: 'CheckCircleIcon',
-  height: 512,
-  width: 512,
-  svgPath: 'M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z',
-  yOffset: 0,
-  xOffset: 0,
-};
-
-const CheckCircleIcon = createIcon(CheckCircleIconConfig);
-
-const ExclamationCircleIconConfig = {
-  name: 'ExclamationCircleIcon',
-  height: 512,
-  width: 512,
-  svgPath: 'M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z',
-  yOffset: 0,
-  xOffset: 0,
-};
-
-const ExclamationCircleIcon = createIcon(ExclamationCircleIconConfig);
-
-const ExclamationTriangleIconConfig = {
-  name: 'ExclamationTriangleIcon',
-  height: 512,
-  width: 576,
-  svgPath: 'M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z',
-  yOffset: 0,
-  xOffset: 0,
-};
-
-const ExclamationTriangleIcon = createIcon(ExclamationTriangleIconConfig);
-
-const InfoCircleIconConfig = {
-  name: 'InfoCircleIcon',
-  height: 512,
-  width: 512,
-  svgPath: 'M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z',
-  yOffset: 0,
-  xOffset: 0,
-};
-
-const InfoCircleIcon = createIcon(InfoCircleIconConfig);
-
-const BellIconConfig = {
-  name: 'BellIcon',
-  height: 1024,
-  width: 896,
-  svgPath: 'M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z',
-  yOffset: 0,
-  xOffset: 0,
-};
-
-const BellIcon = createIcon(BellIconConfig);
-
-var ValidatedOptions;
-(function (ValidatedOptions) {
-    ValidatedOptions["success"] = "success";
-    ValidatedOptions["error"] = "error";
-    ValidatedOptions["warning"] = "warning";
-    ValidatedOptions["default"] = "default";
-})(ValidatedOptions || (ValidatedOptions = {}));
-const KeyTypes = {
-    Space: ' ',
-    Escape: 'Escape',
-    Enter: 'Enter'};
-const globalWidthBreakpoints = {
-    sm: parseInt(t_global_breakpoint_sm.value) * 16,
-    md: parseInt(t_global_breakpoint_md.value) * 16,
-    lg: parseInt(t_global_breakpoint_lg.value) * 16,
-    xl: parseInt(t_global_breakpoint_xl.value) * 16,
-    '2xl': parseInt(t_global_breakpoint_2xl.value) * 16
-};
-const globalHeightBreakpoints = {
-    sm: parseInt(t_global_breakpoint_height_sm.value) * 16,
-    md: parseInt(t_global_breakpoint_height_md.value) * 16,
-    lg: parseInt(t_global_breakpoint_height_lg.value) * 16,
-    xl: parseInt(t_global_breakpoint_height_xl.value) * 16,
-    '2xl': parseInt(t_global_breakpoint_height_2xl.value) * 16
-};
-const statusIcons = {
-    success: CheckCircleIcon,
-    danger: ExclamationCircleIcon,
-    warning: ExclamationTriangleIcon,
-    info: InfoCircleIcon,
-    custom: BellIcon
-};
-
-/**
- * @param {string} prefix - String to prefix ID with
- */
-function getUniqueId(prefix = 'pf') {
-    const uid = new Date().getTime() + Math.random().toString(36).slice(2);
-    return `${prefix}-${uid}`;
-}
-/**
- * This function is a helper for turning arrays of breakpointMod objects for flex and grid into style object
- *
- * @param {object} mods The modifiers object
- * @param {string} css-variable The appropriate css variable for the component
- */
-const setBreakpointCssVars = (mods, cssVar) => Object.entries(mods || {}).reduce((acc, [breakpoint, value]) => breakpoint === 'default' ? Object.assign(Object.assign({}, acc), { [cssVar]: value }) : Object.assign(Object.assign({}, acc), { [`${cssVar}-on-${breakpoint}`]: value }), {});
-/**
- * This function is a helper for turning arrays of breakpointMod objects for data toolbar and flex into classes
- *
- * @param {object} mods The modifiers object
- * @param {any} styles The appropriate styles object for the component
- */
-const formatBreakpointMods = (mods, styles, stylePrefix = '', breakpoint, vertical) => {
-    if (!mods) {
-        return '';
-    }
-    if (breakpoint && !vertical) {
-        if (breakpoint in mods) {
-            return styles.modifiers[toCamel(`${stylePrefix}${mods[breakpoint]}`)];
-        }
-        // the current breakpoint is not specified in mods, so we try to find the next nearest
-        const breakpointsOrder = ['2xl', 'xl', 'lg', 'md', 'sm', 'default'];
-        const breakpointsIndex = breakpointsOrder.indexOf(breakpoint);
-        for (let i = breakpointsIndex; i < breakpointsOrder.length; i++) {
-            if (breakpointsOrder[i] in mods) {
-                return styles.modifiers[toCamel(`${stylePrefix}${mods[breakpointsOrder[i]]}`)];
-            }
-        }
-        return '';
-    }
-    return Object.entries(mods || {})
-        .map(([breakpoint, mod]) => `${stylePrefix}${mod}${breakpoint !== 'default' ? `-on-${breakpoint}` : ''}${vertical && breakpoint !== 'default' ? '-height' : ''}`)
-        .map(toCamel)
-        .map((mod) => mod.replace(/-?(\dxl)/gi, (_res, group) => `_${group}`))
-        .map((modifierKey) => styles.modifiers[modifierKey])
-        .filter(Boolean)
-        .join(' ');
-};
-/**
- * Return the breakpoint for the given height
- *
- * @param {number | null} height The height to check
- * @returns {'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint
- */
-const getVerticalBreakpoint = (height) => {
-    if (height === null) {
-        return null;
-    }
-    if (height >= globalHeightBreakpoints['2xl']) {
-        return '2xl';
-    }
-    if (height >= globalHeightBreakpoints.xl) {
-        return 'xl';
-    }
-    if (height >= globalHeightBreakpoints.lg) {
-        return 'lg';
-    }
-    if (height >= globalHeightBreakpoints.md) {
-        return 'md';
-    }
-    if (height >= globalHeightBreakpoints.sm) {
-        return 'sm';
-    }
-    return 'default';
-};
-/**
- * Return the breakpoint for the given width
- *
- * @param {number | null} width The width to check
- * @returns {'default' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'} The breakpoint
- */
-const getBreakpoint = (width) => {
-    if (width === null) {
-        return null;
-    }
-    if (width >= globalWidthBreakpoints['2xl']) {
-        return '2xl';
-    }
-    if (width >= globalWidthBreakpoints.xl) {
-        return 'xl';
-    }
-    if (width >= globalWidthBreakpoints.lg) {
-        return 'lg';
-    }
-    if (width >= globalWidthBreakpoints.md) {
-        return 'md';
-    }
-    if (width >= globalWidthBreakpoints.sm) {
-        return 'sm';
-    }
-    return 'default';
-};
-const camelize = (s) => s.toUpperCase().replace('-', '').replace('_', '');
-/**
- *
- * @param {string} s string to make camelCased
- */
-const toCamel = (s) => s.replace(/([-_][a-z])/gi, camelize);
-/**
- * Copied from exenv
- */
-const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
-/**
- * Calculate the width of the text
- * Example:
- * getTextWidth('my text', node)
- *
- * @param {string} text The text to calculate the width for
- * @param {HTMLElement} node The HTML element
- */
-const getTextWidth = (text, node) => {
-    const computedStyle = getComputedStyle(node);
-    // Firefox returns the empty string for .font, so this function creates the .font property manually
-    const getFontFromComputedStyle = () => {
-        let computedFont = '';
-        // Firefox uses percentages for font-stretch, but Canvas does not accept percentages
-        // so convert to keywords, as listed at:
-        // https://developer.mozilla.org/en-US/docs/Web/CSS/font-stretch
-        const fontStretchLookupTable = {
-            '50%': 'ultra-condensed',
-            '62.5%': 'extra-condensed',
-            '75%': 'condensed',
-            '87.5%': 'semi-condensed',
-            '100%': 'normal',
-            '112.5%': 'semi-expanded',
-            '125%': 'expanded',
-            '150%': 'extra-expanded',
-            '200%': 'ultra-expanded'
-        };
-        // If the retrieved font-stretch percentage isn't found in the lookup table, use
-        // 'normal' as a last resort.
-        let fontStretch;
-        if (computedStyle.fontStretch in fontStretchLookupTable) {
-            fontStretch = fontStretchLookupTable[computedStyle.fontStretch];
-        }
-        else {
-            fontStretch = 'normal';
-        }
-        computedFont =
-            computedStyle.fontStyle +
-                ' ' +
-                computedStyle.fontVariant +
-                ' ' +
-                computedStyle.fontWeight +
-                ' ' +
-                fontStretch +
-                ' ' +
-                computedStyle.fontSize +
-                '/' +
-                computedStyle.lineHeight +
-                ' ' +
-                computedStyle.fontFamily;
-        return computedFont;
-    };
-    const canvas = document.createElement('canvas');
-    const context = canvas.getContext('2d');
-    context.font = computedStyle.font || getFontFromComputedStyle();
-    return context.measureText(text).width;
-};
-/**
- * Get the inner dimensions of an element
- *
- * @param {HTMLElement} node HTML element to calculate the inner dimensions for
- */
-const innerDimensions = (node) => {
-    const computedStyle = getComputedStyle(node);
-    let width = node.clientWidth; // width with padding
-    let height = node.clientHeight; // height with padding
-    height -= parseFloat(computedStyle.paddingTop) + parseFloat(computedStyle.paddingBottom);
-    width -= parseFloat(computedStyle.paddingLeft) + parseFloat(computedStyle.paddingRight);
-    return { height, width };
-};
-/**
- * This function is a helper for truncating text content on the left, leaving the right side of the content in view
- *
- * @param {HTMLElement} node HTML element
- * @param {string} value The original text value
- */
-const trimLeft = (node, value) => {
-    const availableWidth = innerDimensions(node).width;
-    let newValue = value;
-    if (getTextWidth(value, node) > availableWidth) {
-        // we have text overflow, trim the text to the left and add ... in the front until it fits
-        while (getTextWidth(`...${newValue}`, node) > availableWidth) {
-            newValue = newValue.substring(1);
-        }
-        // replace text with our truncated text
-        if (node.value) {
-            node.value = `...${newValue}`;
-        }
-        else {
-            node.innerText = `...${newValue}`;
-        }
-    }
-    else {
-        if (node.value) {
-            node.value = value;
-        }
-        else {
-            node.innerText = value;
-        }
-    }
-};
-/**
- * @param {React.RefObject<any>[]} timeoutRefs - Timeout refs to clear
- */
-const clearTimeouts = (timeoutRefs) => {
-    timeoutRefs.forEach((ref) => {
-        if (ref.current) {
-            clearTimeout(ref.current);
-        }
-    });
-};
-/**
- * Helper function to get the language direction of a given element, useful for figuring out if left-to-right
- * or right-to-left specific logic should be applied.
- *
- * @param {HTMLElement} targetElement  - Element the helper will get the language direction of
- * @param {'ltr' | 'rtl'} defaultDirection - Language direction to assume if one can't be determined, defaults to 'ltr'
- * @returns {'ltr' | 'rtl'} - The language direction of the target element
- */
-const getLanguageDirection = (targetElement, defaultDirection = 'ltr') => {
-    if (!targetElement) {
-        return defaultDirection;
-    }
-    const computedDirection = getComputedStyle(targetElement).getPropertyValue('direction');
-    if (['ltr', 'rtl'].includes(computedDirection)) {
-        return computedDirection;
-    }
-    return defaultDirection;
-};
-
 /** This Component can be used to wrap a functional component in order to generate a random ID
  * Example of how to use this component
  *
@@ -439,7 +27,7 @@ function getRandomId() {
         return getUniqueId();
     }
 }
-class GenerateId extends React.Component {
+class GenerateId extends Component {
     constructor() {
         super(...arguments);
         this.uniqueElement = this.props.isRandom ? getRandomId() : currentId++;
@@ -457,90 +45,6 @@ GenerateId.defaultProps = {
 
 const ASTERISK = '*';
 
-let uid = 0;
-const ouiaPrefix = 'OUIA-Generated-';
-const ouiaIdByRoute = {};
-/** Get props to conform to OUIA spec
- *
- * For functional components, use the useOUIAProps function instead
- *
- * In class based components, create a state variable ouiaStateId to create a static generated ID:
- * state = {
- *  ouiaStateId: getDefaultOUIAId(Chip.displayName)
- * }
- * This generated ID should remain alive as long as the component is not unmounted.
- *
- * Then add the attributes to the component
- * {...getOUIAProps('OverflowChip', this.props.ouiaId !== undefined ? this.props.ouiaId : this.state.ouiaStateId)}
- *
- * @param {string} componentType OUIA component type
- * @param {number|string} id OUIA component id
- * @param {boolean} ouiaSafe false if in animation
- */
-function getOUIAProps(componentType, id, ouiaSafe = true) {
-    return {
-        'data-ouia-component-type': `PF6/${componentType}`,
-        'data-ouia-safe': ouiaSafe,
-        'data-ouia-component-id': id
-    };
-}
-/**
- * Hooks version of the getOUIAProps function that also memoizes the generated ID
- * Can only be used in functional components
- *
- * @param {string} componentType OUIA component type
- * @param {number|string} id OUIA component id
- * @param {boolean} ouiaSafe false if in animation
- * @param {string} variant Optional variant to add to the generated ID
- */
-const useOUIAProps = (componentType, id, ouiaSafe = true, variant) => ({
-    'data-ouia-component-type': `PF6/${componentType}`,
-    'data-ouia-safe': ouiaSafe,
-    'data-ouia-component-id': useOUIAId(componentType, id, variant)
-});
-/**
- * Returns the ID or the memoized generated ID
- *
- * @param {string} componentType OUIA component type
- * @param {number|string} id OUIA component id
- * @param {string} variant Optional variant to add to the generated ID
- */
-const useOUIAId = (componentType, id, variant) => {
-    const defaultOUIAId = useMemo(() => getDefaultOUIAId(componentType, variant), [componentType, variant]);
-    return id !== null && id !== void 0 ? id : defaultOUIAId;
-};
-/**
- * Returns a generated id based on the URL location
- *
- * @param {string} componentType OUIA component type
- * @param {string} variant Optional variant to add to the generated ID
- */
-function getDefaultOUIAId(componentType, variant) {
-    /*
-    ouiaIdByRoute = {
-      [route+componentType]: [number]
-    }
-    */
-    try {
-        let key;
-        if (typeof window !== 'undefined') {
-            // browser environments
-            key = `${window.location.href}-${componentType}-${variant || ''}`;
-        }
-        else {
-            // node/SSR environments
-            key = `${componentType}-${variant || ''}`;
-        }
-        if (!ouiaIdByRoute[key]) {
-            ouiaIdByRoute[key] = 0;
-        }
-        return `${ouiaPrefix}${componentType}-${variant ? `${variant}-` : ''}${++ouiaIdByRoute[key]}`;
-    }
-    catch (exception) {
-        return `${ouiaPrefix}${componentType}-${variant ? `${variant}-` : ''}${++uid}`;
-    }
-}
-
 /**
  * @param element
  */
@@ -2092,7 +1596,7 @@ const createPopper = popperGenerator({ defaultModifiers });
 /**
  * Small wrapper around `useLayoutEffect` to get rid of the warning on SSR envs
  */
-const useIsomorphicLayoutEffect = canUseDOM ? React.useLayoutEffect : React.useEffect;
+const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
 
 /* eslint-disable @typescript-eslint/consistent-type-definitions */
 const isEqual = (a, b) => JSON.stringify(a) === JSON.stringify(b);
@@ -2105,14 +1609,14 @@ const fromEntries = (entries) => entries.reduce((acc, [key, value]) => {
 }, {});
 const EMPTY_MODIFIERS = [];
 const usePopper = (referenceElement, popperElement, options = {}) => {
-    const prevOptions = React.useRef(null);
+    const prevOptions = useRef(null);
     const optionsWithDefaults = {
         onFirstUpdate: options.onFirstUpdate,
         placement: options.placement || 'bottom',
         strategy: options.strategy || 'absolute',
         modifiers: options.modifiers || EMPTY_MODIFIERS
     };
-    const [state, setState] = React.useState({
+    const [state, setState] = useState({
         styles: {
             popper: {
                 position: optionsWithDefaults.strategy,
@@ -2122,7 +1626,7 @@ const usePopper = (referenceElement, popperElement, options = {}) => {
         },
         attributes: {}
     });
-    const updateStateModifier = React.useMemo(() => ({
+    const updateStateModifier = useMemo(() => ({
         name: 'updateState',
         enabled: true,
         phase: 'write',
@@ -2136,7 +1640,7 @@ const usePopper = (referenceElement, popperElement, options = {}) => {
         },
         requires: ['computeStyles']
     }), []);
-    const popperOptions = React.useMemo(() => {
+    const popperOptions = useMemo(() => {
         const newOptions = {
             onFirstUpdate: optionsWithDefaults.onFirstUpdate,
             placement: optionsWithDefaults.placement,
@@ -2157,7 +1661,7 @@ const usePopper = (referenceElement, popperElement, options = {}) => {
         optionsWithDefaults.modifiers,
         updateStateModifier
     ]);
-    const popperInstanceRef = React.useRef();
+    const popperInstanceRef = useRef(undefined);
     useIsomorphicLayoutEffect(() => {
         if (popperInstanceRef && popperInstanceRef.current) {
             popperInstanceRef.current.setOptions(popperOptions);
@@ -2202,22 +1706,22 @@ const getOppositePlacement = (placement) => placement.replace(/left|right|bottom
 const getOpacityTransition = (animationDuration) => `opacity ${animationDuration}ms cubic-bezier(.54, 1.5, .38, 1.11)`;
 const Popper = ({ trigger, popper, direction = 'down', position = 'start', placement, width, minWidth = 'trigger', maxWidth, appendTo = () => document.body, zIndex = 9999, isVisible = true, positionModifiers, distance = 0, onMouseEnter, onMouseLeave, onFocus, onBlur, onDocumentClick, onTriggerClick, onTriggerEnter, onPopperClick, onPopperMouseEnter, onPopperMouseLeave, onDocumentKeyDown, enableFlip = true, flipBehavior = 'flip', triggerRef, popperRef, animationDuration = 0, entryDelay = 0, exitDelay = 0, onHidden = () => { }, onHide = () => { }, onMount = () => { }, onShow = () => { }, onShown = () => { }, preventOverflow = false }) => {
     var _a;
-    const [triggerElement, setTriggerElement] = React.useState(null);
-    const [refElement, setRefElement] = React.useState(null);
-    const [popperElement, setPopperElement] = React.useState(null);
-    const [popperContent, setPopperContent] = React.useState(null);
-    const [ready, setReady] = React.useState(false);
-    const [opacity, setOpacity] = React.useState(0);
-    const [internalIsVisible, setInternalIsVisible] = React.useState(isVisible);
-    const transitionTimerRef = React.useRef(null);
-    const showTimerRef = React.useRef(null);
-    const hideTimerRef = React.useRef(null);
-    const prevExitDelayRef = React.useRef();
+    const [triggerElement, setTriggerElement] = useState(null);
+    const [refElement, setRefElement] = useState(null);
+    const [popperElement, setPopperElement] = useState(null);
+    const [popperContent, setPopperContent] = useState(null);
+    const [ready, setReady] = useState(false);
+    const [opacity, setOpacity] = useState(0);
+    const [internalIsVisible, setInternalIsVisible] = useState(isVisible);
+    const transitionTimerRef = useRef(null);
+    const showTimerRef = useRef(null);
+    const hideTimerRef = useRef(null);
+    const prevExitDelayRef = useRef(undefined);
     const refOrTrigger = refElement || triggerElement;
     const showPopper = isVisible || internalIsVisible;
     const triggerParent = (_a = ((triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) || triggerElement)) === null || _a === void 0 ? void 0 : _a.parentElement;
     const languageDirection = getLanguageDirection(triggerParent);
-    const internalPosition = React.useMemo(() => {
+    const internalPosition = useMemo(() => {
         const fixedPositions = { left: 'left', right: 'right', center: 'center' };
         const positionMap = {
             ltr: Object.assign({ start: 'left', end: 'right' }, fixedPositions),
@@ -2225,16 +1729,16 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
         };
         return positionMap[languageDirection][position];
     }, [position, languageDirection]);
-    const onDocumentClickCallback = React.useCallback((event) => onDocumentClick(event, refOrTrigger, popperElement), [showPopper, triggerElement, refElement, popperElement, onDocumentClick]);
-    React.useEffect(() => {
+    const onDocumentClickCallback = useCallback((event) => onDocumentClick(event, refOrTrigger, popperElement), [showPopper, triggerElement, refElement, popperElement, onDocumentClick]);
+    useEffect(() => {
         setReady(true);
         onMount();
     }, []);
     // Cancel all timers on unmount
-    React.useEffect(() => () => {
+    useEffect(() => () => {
         clearTimeouts([transitionTimerRef, hideTimerRef, showTimerRef]);
     }, []);
-    React.useEffect(() => {
+    useEffect(() => {
         if (triggerRef) {
             if (triggerRef.current) {
                 setRefElement(triggerRef.current);
@@ -2244,7 +1748,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
             }
         }
     }, [triggerRef, trigger]);
-    React.useEffect(() => {
+    useEffect(() => {
         // When the popperRef is defined or the popper visibility changes, ensure the popper element is up to date
         if (popperRef) {
             if (popperRef.current) {
@@ -2255,7 +1759,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
             }
         }
     }, [showPopper, popperRef]);
-    React.useEffect(() => {
+    useEffect(() => {
         // Trigger a Popper update when content changes.
         const observer = new MutationObserver(() => {
             update && update();
@@ -2275,7 +1779,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
             element.removeEventListener(event, listener, { capture });
         }
     };
-    React.useEffect(() => {
+    useEffect(() => {
         addEventListener(onMouseEnter, refOrTrigger, 'mouseenter');
         addEventListener(onMouseLeave, refOrTrigger, 'mouseleave');
         addEventListener(onFocus, refOrTrigger, 'focus');
@@ -2326,9 +1830,9 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
         }
         return convertedPlacement;
     };
-    const getPlacementMemo = React.useMemo(getPlacement, [direction, internalPosition, placement]);
-    const getOppositePlacementMemo = React.useMemo(() => getOppositePlacement(getPlacement()), [direction, internalPosition, placement]);
-    const widthMods = React.useMemo(() => ({
+    const getPlacementMemo = useMemo(getPlacement, [direction, internalPosition, placement]);
+    const getOppositePlacementMemo = useMemo(() => getOppositePlacement(getPlacement()), [direction, internalPosition, placement]);
+    const widthMods = useMemo(() => ({
         name: 'widthMods',
         enabled: width !== undefined || minWidth !== undefined || maxWidth !== undefined,
         phase: 'beforeWrite',
@@ -2390,7 +1894,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
     /** We want to forceUpdate only when a tooltip's content is dynamically updated.
      * TODO: Investigate into 3rd party libraries for a less limited/specific solution
      */
-    React.useEffect(() => {
+    useEffect(() => {
         var _a, _b, _c, _d, _e, _f, _g;
         // currentPopperContent = {tooltip children} || {dropdown children}
         const currentPopperContent = ((_d = (_c = (_b = (_a = popper === null || popper === void 0 ? void 0 : popper.props) === null || _a === void 0 ? void 0 : _a.children) === null || _b === void 0 ? void 0 : _b[1]) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.children) || ((_g = (_f = (_e = popper === null || popper === void 0 ? void 0 : popper.props) === null || _e === void 0 ? void 0 : _e.children) === null || _f === void 0 ? void 0 : _f.props) === null || _g === void 0 ? void 0 : _g.children);
@@ -2399,7 +1903,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
             forceUpdate && forceUpdate();
         }
     }, [popper]);
-    React.useEffect(() => {
+    useEffect(() => {
         if (prevExitDelayRef.current < exitDelay) {
             clearTimeouts([transitionTimerRef, hideTimerRef]);
             hideTimerRef.current = setTimeout(() => {
@@ -2430,7 +1934,7 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
             }, animationDuration);
         }, exitDelay);
     };
-    React.useEffect(() => {
+    useEffect(() => {
         if (isVisible) {
             show();
         }
@@ -2450,8 +1954,10 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
     const options = Object.assign({ className: css(popper.props && popper.props.className, positionModifiers && modifierFromPopperPosition()), style: Object.assign(Object.assign(Object.assign({}, ((popper.props && popper.props.style) || {})), popperStyles.popper), { zIndex,
             opacity, transition: getOpacityTransition(animationDuration) }) }, attributes.popper);
     const getMenuWithPopper = () => {
-        const localPopper = React.cloneElement(popper, options);
-        return popperRef ? (localPopper) : (React.createElement("div", { style: { display: 'contents' }, ref: (node) => setPopperElement(node === null || node === void 0 ? void 0 : node.firstElementChild) }, localPopper));
+        const localPopper = cloneElement(popper, options);
+        return popperRef ? (localPopper) : (jsx("div", { style: { display: 'contents' }, ref: (node) => {
+                setPopperElement(node === null || node === void 0 ? void 0 : node.firstElementChild);
+            }, children: localPopper }));
     };
     const getPopper = () => {
         if (appendTo === 'inline') {
@@ -2462,10 +1968,9 @@ const Popper = ({ trigger, popper, direction = 'down', position = 'start', place
             return ReactDOM.createPortal(getMenuWithPopper(), target);
         }
     };
-    return (React.createElement(React.Fragment, null,
-        !triggerRef && trigger && React.isValidElement(trigger) && (React.createElement("div", { style: { display: 'contents' }, ref: (node) => setTriggerElement(node === null || node === void 0 ? void 0 : node.firstElementChild) }, trigger)),
-        triggerRef && trigger && React.isValidElement(trigger) && trigger,
-        ready && showPopper && getPopper()));
+    return (jsxs(Fragment, { children: [!triggerRef && trigger && isValidElement(trigger) && (jsx("div", { style: { display: 'contents' }, ref: (node) => {
+                    setTriggerElement(node === null || node === void 0 ? void 0 : node.firstElementChild);
+                }, children: trigger })), triggerRef && trigger && isValidElement(trigger) && trigger, ready && showPopper && getPopper()] }));
 };
 Popper.displayName = 'Popper';
 
@@ -2617,7 +2122,7 @@ const onToggleArrowKeydownDefault = (event, menuRef) => {
     }
     focusableElement && focusableElement.focus();
 };
-class KeyboardHandler extends React.Component {
+class KeyboardHandler extends Component {
     constructor() {
         super(...arguments);
         this.keyHandler = (event) => {
@@ -2629,7 +2134,7 @@ class KeyboardHandler extends React.Component {
             const { isActiveElement, getFocusableElement, noVerticalArrowHandling, noHorizontalArrowHandling, noEnterHandling, noSpaceHandling, updateTabIndex, validSiblingTags, additionalKeyHandler, createNavigableElements, onlyTraverseSiblings } = this.props;
             // Pass the event off to be handled by any custom handler
             additionalKeyHandler && additionalKeyHandler(event);
-            // Initalize navigableElements from the createNavigableElements callback
+            // Initialize navigableElements from the createNavigableElements callback
             const navigableElements = createNavigableElements();
             if (!navigableElements) {
                 // eslint-disable-next-line no-console
@@ -2690,151 +2195,6 @@ KeyboardHandler.defaultProps = {
     noSpaceHandling: false
 };
 
-const styles$4 = {
-  "button": "pf-v6-c-button",
-  "buttonCount": "pf-v6-c-button__count",
-  "buttonIcon": "pf-v6-c-button__icon",
-  "buttonProgress": "pf-v6-c-button__progress",
-  "modifiers": {
-    "primary": "pf-m-primary",
-    "unread": "pf-m-unread",
-    "secondary": "pf-m-secondary",
-    "danger": "pf-m-danger",
-    "tertiary": "pf-m-tertiary",
-    "link": "pf-m-link",
-    "inline": "pf-m-inline",
-    "displayLg": "pf-m-display-lg",
-    "warning": "pf-m-warning",
-    "control": "pf-m-control",
-    "stateful": "pf-m-stateful",
-    "read": "pf-m-read",
-    "attention": "pf-m-attention",
-    "plain": "pf-m-plain",
-    "noPadding": "pf-m-no-padding",
-    "block": "pf-m-block",
-    "small": "pf-m-small",
-    "clicked": "pf-m-clicked",
-    "disabled": "pf-m-disabled",
-    "ariaDisabled": "pf-m-aria-disabled",
-    "progress": "pf-m-progress",
-    "inProgress": "pf-m-in-progress",
-    "start": "pf-m-start",
-    "end": "pf-m-end"
-  }};
-
-const styles$3 = {
-  "modifiers": {
-    "inline": "pf-m-inline",
-    "sm": "pf-m-sm",
-    "md": "pf-m-md",
-    "lg": "pf-m-lg",
-    "xl": "pf-m-xl"
-  },
-  "spinner": "pf-v6-c-spinner",
-  "spinnerPath": "pf-v6-c-spinner__path"
-};
-
-const c_spinner_diameter = {
-  "name": "--pf-v6-c-spinner--diameter"};
-
-var spinnerSize;
-(function (spinnerSize) {
-    spinnerSize["sm"] = "sm";
-    spinnerSize["md"] = "md";
-    spinnerSize["lg"] = "lg";
-    spinnerSize["xl"] = "xl";
-})(spinnerSize || (spinnerSize = {}));
-const Spinner = (_a) => {
-    var { className = '', size = 'xl', 'aria-valuetext': ariaValueText = 'Loading...', diameter, isInline = false, 'aria-label': ariaLabel, 'aria-labelledBy': ariaLabelledBy } = _a, props = __rest(_a, ["className", "size", 'aria-valuetext', "diameter", "isInline", 'aria-label', 'aria-labelledBy']);
-    return (React.createElement("svg", Object.assign({ className: css(styles$3.spinner, isInline ? styles$3.modifiers.inline : styles$3.modifiers[size], className), role: "progressbar", "aria-valuetext": ariaValueText, viewBox: "0 0 100 100" }, (diameter && { style: { [c_spinner_diameter.name]: diameter } }), (ariaLabel && { 'aria-label': ariaLabel }), (ariaLabelledBy && { 'aria-labelledBy': ariaLabelledBy }), (!ariaLabel && !ariaLabelledBy && { 'aria-label': 'Contents' }), props),
-        React.createElement("circle", { className: styles$3.spinnerPath, cx: "50", cy: "50", r: "45", fill: "none" })));
-};
-Spinner.displayName = 'Spinner';
-
-const styles$2 = {
-  "badge": "pf-v6-c-badge",
-  "modifiers": {
-    "read": "pf-m-read",
-    "unread": "pf-m-unread",
-    "disabled": "pf-m-disabled"
-  }
-};
-
-const Badge = (_a) => {
-    var { isRead = false, isDisabled = false, className = '', children = '', screenReaderText } = _a, props = __rest(_a, ["isRead", "isDisabled", "className", "children", "screenReaderText"]);
-    return (React.createElement("span", Object.assign({}, props, { className: css(styles$2.badge, (isRead ? styles$2.modifiers.read : styles$2.modifiers.unread), isDisabled && styles$2.modifiers.disabled, className) }),
-        children,
-        screenReaderText && React.createElement("span", { className: "pf-v6-screen-reader" }, screenReaderText)));
-};
-Badge.displayName = 'Badge';
-
-var ButtonVariant;
-(function (ButtonVariant) {
-    ButtonVariant["primary"] = "primary";
-    ButtonVariant["secondary"] = "secondary";
-    ButtonVariant["tertiary"] = "tertiary";
-    ButtonVariant["danger"] = "danger";
-    ButtonVariant["warning"] = "warning";
-    ButtonVariant["link"] = "link";
-    ButtonVariant["plain"] = "plain";
-    ButtonVariant["control"] = "control";
-    ButtonVariant["stateful"] = "stateful";
-})(ButtonVariant || (ButtonVariant = {}));
-var ButtonType;
-(function (ButtonType) {
-    ButtonType["button"] = "button";
-    ButtonType["submit"] = "submit";
-    ButtonType["reset"] = "reset";
-})(ButtonType || (ButtonType = {}));
-var ButtonSize;
-(function (ButtonSize) {
-    ButtonSize["default"] = "default";
-    ButtonSize["sm"] = "sm";
-    ButtonSize["lg"] = "lg";
-})(ButtonSize || (ButtonSize = {}));
-var ButtonState;
-(function (ButtonState) {
-    ButtonState["read"] = "read";
-    ButtonState["unread"] = "unread";
-    ButtonState["attention"] = "attention";
-})(ButtonState || (ButtonState = {}));
-const ButtonBase = (_a) => {
-    var { children = null, className = '', component = 'button', isClicked = false, isBlock = false, isDisabled = false, isAriaDisabled = false, isLoading = null, isDanger = false, spinnerAriaValueText, spinnerAriaLabelledBy, spinnerAriaLabel, size = ButtonSize.default, inoperableEvents = ['onClick', 'onKeyPress'], isInline = false, type = ButtonType.button, variant = ButtonVariant.primary, state = ButtonState.unread, hasNoPadding = false, iconPosition = 'start', 'aria-label': ariaLabel = null, icon = null, role, ouiaId, ouiaSafe = true, tabIndex = null, innerRef, countOptions } = _a, props = __rest(_a, ["children", "className", "component", "isClicked", "isBlock", "isDisabled", "isAriaDisabled", "isLoading", "isDanger", "spinnerAriaValueText", "spinnerAriaLabelledBy", "spinnerAriaLabel", "size", "inoperableEvents", "isInline", "type", "variant", "state", "hasNoPadding", "iconPosition", 'aria-label', "icon", "role", "ouiaId", "ouiaSafe", "tabIndex", "innerRef", "countOptions"]);
-    const ouiaProps = useOUIAProps(Button.displayName, ouiaId, ouiaSafe, variant);
-    const Component = component;
-    const isButtonElement = Component === 'button';
-    const isInlineSpan = isInline && Component === 'span';
-    const isIconAlignedAtEnd = iconPosition === 'end' || iconPosition === 'right';
-    const preventedEvents = inoperableEvents.reduce((handlers, eventToPrevent) => (Object.assign(Object.assign({}, handlers), { [eventToPrevent]: (event) => {
-            event.preventDefault();
-        } })), {});
-    const getDefaultTabIdx = () => {
-        if (isDisabled) {
-            return isButtonElement ? null : -1;
-        }
-        else if (isAriaDisabled) {
-            return null;
-        }
-        else if (isInlineSpan) {
-            return 0;
-        }
-    };
-    const _icon = icon && (React.createElement("span", { className: css(styles$4.buttonIcon, children && styles$4.modifiers[isIconAlignedAtEnd ? 'end' : 'start']) }, icon));
-    const _children = children && React.createElement("span", { className: css('pf-v6-c-button__text') }, children);
-    return (React.createElement(Component, Object.assign({}, props, (isAriaDisabled ? preventedEvents : null), { "aria-disabled": isAriaDisabled || (!isButtonElement && isDisabled), "aria-label": ariaLabel, className: css(styles$4.button, styles$4.modifiers[variant], isBlock && styles$4.modifiers.block, isDisabled && !isButtonElement && styles$4.modifiers.disabled, isAriaDisabled && styles$4.modifiers.ariaDisabled, isClicked && styles$4.modifiers.clicked, isInline && variant === ButtonVariant.link && styles$4.modifiers.inline, isDanger && (variant === ButtonVariant.secondary || variant === ButtonVariant.link) && styles$4.modifiers.danger, isLoading !== null && variant !== ButtonVariant.plain && styles$4.modifiers.progress, isLoading && styles$4.modifiers.inProgress, hasNoPadding && variant === ButtonVariant.plain && styles$4.modifiers.noPadding, variant === ButtonVariant.stateful && styles$4.modifiers[state], size === ButtonSize.sm && styles$4.modifiers.small, size === ButtonSize.lg && styles$4.modifiers.displayLg, className), disabled: isButtonElement ? isDisabled : null, tabIndex: tabIndex !== null ? tabIndex : getDefaultTabIdx(), type: isButtonElement || isInlineSpan ? type : null, role: isInlineSpan ? 'button' : role, ref: innerRef }, ouiaProps),
-        isLoading && (React.createElement("span", { className: css(styles$4.buttonProgress) },
-            React.createElement(Spinner, { size: spinnerSize.md, isInline: isInline, "aria-valuetext": spinnerAriaValueText, "aria-label": spinnerAriaLabel, "aria-labelledby": spinnerAriaLabelledBy }))),
-        isIconAlignedAtEnd ? (React.createElement(React.Fragment, null,
-            _children,
-            _icon)) : (React.createElement(React.Fragment, null,
-            _icon,
-            _children)),
-        countOptions && (React.createElement("span", { className: css(styles$4.buttonCount, countOptions.className) },
-            React.createElement(Badge, { isRead: countOptions.isRead, isDisabled: isDisabled }, countOptions.count)))));
-};
-const Button = React.forwardRef((props, ref) => (React.createElement(ButtonBase, Object.assign({ innerRef: ref }, props))));
-Button.displayName = 'Button';
-
 const TimesIconConfig = {
   name: 'TimesIcon',
   height: 512,
@@ -2869,13 +2229,13 @@ const styles$1 = {
 
 const TooltipContent = (_a) => {
     var { className, children, isLeftAligned } = _a, props = __rest(_a, ["className", "children", "isLeftAligned"]);
-    return (React.createElement("div", Object.assign({ className: css(styles$1.tooltipContent, isLeftAligned && styles$1.modifiers.textAlignLeft, className) }, props), children));
+    return (jsx("div", Object.assign({ className: css(styles$1.tooltipContent, isLeftAligned && styles$1.modifiers.textAlignLeft, className) }, props, { children: children })));
 };
 TooltipContent.displayName = 'TooltipContent';
 
 const TooltipArrow = (_a) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return React.createElement("div", Object.assign({ className: css(styles$1.tooltipArrow, className) }, props));
+    return jsx("div", Object.assign({ className: css(styles$1.tooltipArrow, className) }, props));
 };
 TooltipArrow.displayName = 'TooltipArrow';
 
@@ -2908,8 +2268,8 @@ const Tooltip = (_a) => {
     const triggerOnFocus = trigger.includes('focus');
     const triggerOnClick = trigger.includes('click');
     const triggerManually = trigger === 'manual';
-    const [visible, setVisible] = React.useState(false);
-    const popperRef = React.createRef();
+    const [visible, setVisible] = useState(false);
+    const popperRef = createRef();
     const onDocumentKeyDown = (event) => {
         if (!triggerManually) {
             if (event.key === KeyTypes.Escape && visible) {
@@ -2927,7 +2287,7 @@ const Tooltip = (_a) => {
             }
         }
     };
-    React.useEffect(() => {
+    useEffect(() => {
         if (isVisible) {
             show();
         }
@@ -2956,11 +2316,9 @@ const Tooltip = (_a) => {
         'right-end': styles$1.modifiers.rightBottom
     };
     const hasCustomMaxWidth = maxWidth !== c_tooltip_MaxWidth.value;
-    const content = (React.createElement("div", Object.assign({ "aria-live": ariaLive, className: css(styles$1.tooltip, className), role: "tooltip", id: id, style: {
+    const content = (jsxs("div", Object.assign({ "aria-live": ariaLive, className: css(styles$1.tooltip, className), role: "tooltip", id: id, style: {
             maxWidth: hasCustomMaxWidth ? maxWidth : null
-        }, ref: popperRef }, rest),
-        React.createElement(TooltipArrow, null),
-        React.createElement(TooltipContent, { isLeftAligned: isContentLeftAligned }, bodyContent)));
+        }, ref: popperRef }, rest, { children: [jsx(TooltipArrow, {}), jsx(TooltipContent, { isLeftAligned: isContentLeftAligned, children: bodyContent })] })));
     const onDocumentClick = (event, triggerElement) => {
         // event.currentTarget = document
         // event.target could be triggerElement or something else
@@ -2976,14 +2334,14 @@ const Tooltip = (_a) => {
     };
     const addAriaToTrigger = () => {
         if (aria === 'describedby' && children && children.props && !children.props['aria-describedby']) {
-            return React.cloneElement(children, { 'aria-describedby': id });
+            return cloneElement(children, { 'aria-describedby': id });
         }
         else if (aria === 'labelledby' && children.props && !children.props['aria-labelledby']) {
-            return React.cloneElement(children, { 'aria-labelledby': id });
+            return cloneElement(children, { 'aria-labelledby': id });
         }
         return children;
     };
-    return (React.createElement(Popper, { trigger: aria !== 'none' && visible ? addAriaToTrigger() : children, triggerRef: triggerRef, popper: content, popperRef: popperRef, minWidth: minWidth !== undefined ? minWidth : 'revert', appendTo: appendTo, isVisible: visible, positionModifiers: positionModifiers, distance: distance, placement: position, onMouseEnter: triggerOnMouseenter && show, onMouseLeave: triggerOnMouseenter && hide, onPopperMouseEnter: triggerOnMouseenter && show, onPopperMouseLeave: triggerOnMouseenter && hide, onFocus: triggerOnFocus && show, onBlur: triggerOnFocus && hide, onDocumentClick: triggerOnClick && onDocumentClick, onDocumentKeyDown: triggerManually ? null : onDocumentKeyDown, onTriggerEnter: triggerManually ? null : onTriggerEnter, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior, animationDuration: animationDuration, entryDelay: entryDelay, exitDelay: exitDelay, onHidden: onTooltipHidden }));
+    return (jsx(Popper, { trigger: aria !== 'none' && visible ? addAriaToTrigger() : children, triggerRef: triggerRef, popper: content, popperRef: popperRef, minWidth: minWidth !== undefined ? minWidth : 'revert', appendTo: appendTo, isVisible: visible, positionModifiers: positionModifiers, distance: distance, placement: position, onMouseEnter: triggerOnMouseenter && show, onMouseLeave: triggerOnMouseenter && hide, onPopperMouseEnter: triggerOnMouseenter && show, onPopperMouseLeave: triggerOnMouseenter && hide, onFocus: triggerOnFocus && show, onBlur: triggerOnFocus && hide, onDocumentClick: triggerOnClick && onDocumentClick, onDocumentKeyDown: triggerManually ? null : onDocumentKeyDown, onTriggerEnter: triggerManually ? null : onTriggerEnter, enableFlip: enableFlip, zIndex: zIndex, flipBehavior: flipBehavior, animationDuration: animationDuration, entryDelay: entryDelay, exitDelay: exitDelay, onHidden: onTooltipHidden }));
 };
 Tooltip.displayName = 'Tooltip';
 
@@ -3038,7 +2396,7 @@ const menuStyles = {
   }
 };
 
-const MenuContext = React.createContext({
+const MenuContext = createContext({
     menuId: null,
     parentMenu: null,
     onActionClick: () => null,
@@ -3055,15 +2413,15 @@ const MenuContext = React.createContext({
     disableHover: false,
     role: 'menu'
 });
-const MenuItemContext = React.createContext({
+const MenuItemContext = createContext({
     itemId: null,
     isDisabled: false
 });
 
-class MenuBase extends React.Component {
+class MenuBase extends Component {
     constructor(props) {
         super(props);
-        this.menuRef = React.createRef();
+        this.menuRef = createRef();
         this.activeMenu = null;
         this.state = {
             ouiaStateId: getDefaultOUIAId(Menu.displayName),
@@ -3190,7 +2548,7 @@ class MenuBase extends React.Component {
         /* eslint-enable @typescript-eslint/no-unused-vars */
         props = __rest(_a, ["id", "children", "className", "onSelect", "selected", "onActionClick", "ouiaId", "ouiaSafe", "containsFlyout", "containsDrilldown", "isMenuDrilledIn", "isPlain", "isScrollable", "drilldownItemPath", "drilledInMenus", "onDrillIn", "onDrillOut", "onGetMenuHeight", "parentMenu", "activeItemId", "innerRef", "isRootMenu", "activeMenu", "role", "isNavFlyout"]);
         const _isMenuDrilledIn = isMenuDrilledIn || (drilledInMenus && drilledInMenus.includes(id)) || false;
-        return (React.createElement(MenuContext.Provider, { value: {
+        return (jsxs(MenuContext.Provider, { value: {
                 menuId: id,
                 parentMenu: parentMenu || id,
                 onSelect,
@@ -3206,22 +2564,20 @@ class MenuBase extends React.Component {
                 setFlyoutRef: (flyoutRef) => this.setState({ flyoutRef }),
                 disableHover: this.state.disableHover,
                 role
-            } },
-            isRootMenu && (React.createElement(KeyboardHandler, { containerRef: this.menuRef || null, additionalKeyHandler: this.handleExtraKeys, createNavigableElements: this.createNavigableElements, isActiveElement: (element) => document.activeElement.closest('li') === element || // if element is a basic MenuItem
-                    document.activeElement.parentElement === element ||
-                    document.activeElement.closest(`.${menuStyles.menuSearch}`) === element || // if element is a MenuSearch
-                    (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element), getFocusableElement: (navigableElement) => {
-                    var _a, _b;
-                    return ((navigableElement === null || navigableElement === void 0 ? void 0 : navigableElement.tagName) === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
-                        (((_a = navigableElement.firstChild) === null || _a === void 0 ? void 0 : _a.tagName) === 'LABEL' &&
-                            navigableElement.querySelector('input')) || // for MenuItem checkboxes
-                        (((_b = navigableElement.firstChild) === null || _b === void 0 ? void 0 : _b.tagName) === 'DIV' &&
-                            navigableElement.querySelector('a, button, input')) || // For aria-disabled element that is rendered inside a div with "display: contents" styling
-                        navigableElement.firstChild;
-                }, noHorizontalArrowHandling: document.activeElement &&
-                    (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
-                        document.activeElement.tagName === 'INPUT'), noEnterHandling: true, noSpaceHandling: true })),
-            React.createElement("div", Object.assign({ id: id, className: css(menuStyles.menu, isPlain && menuStyles.modifiers.plain, isScrollable && menuStyles.modifiers.scrollable, containsFlyout && menuStyles.modifiers.flyout, isNavFlyout && 'pf-m-nav', containsDrilldown && menuStyles.modifiers.drilldown, _isMenuDrilledIn && menuStyles.modifiers.drilledIn, className), ref: this.menuRef }, getOUIAProps(Menu.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props), children)));
+            }, children: [isRootMenu && (jsx(KeyboardHandler, { containerRef: this.menuRef || null, additionalKeyHandler: this.handleExtraKeys, createNavigableElements: this.createNavigableElements, isActiveElement: (element) => document.activeElement.closest('li') === element || // if element is a basic MenuItem
+                        document.activeElement.parentElement === element ||
+                        document.activeElement.closest(`.${menuStyles.menuSearch}`) === element || // if element is a MenuSearch
+                        (document.activeElement.closest('ol') && document.activeElement.closest('ol').firstChild === element), getFocusableElement: (navigableElement) => {
+                        var _a, _b;
+                        return ((navigableElement === null || navigableElement === void 0 ? void 0 : navigableElement.tagName) === 'DIV' && navigableElement.querySelector('input')) || // for MenuSearchInput
+                            (((_a = navigableElement.firstChild) === null || _a === void 0 ? void 0 : _a.tagName) === 'LABEL' &&
+                                navigableElement.querySelector('input')) || // for MenuItem checkboxes
+                            (((_b = navigableElement.firstChild) === null || _b === void 0 ? void 0 : _b.tagName) === 'DIV' &&
+                                navigableElement.querySelector('a, button, input')) || // For aria-disabled element that is rendered inside a div with "display: contents" styling
+                            navigableElement.firstChild;
+                    }, noHorizontalArrowHandling: document.activeElement &&
+                        (document.activeElement.classList.contains(breadcrumbStyles.breadcrumbLink) ||
+                            document.activeElement.tagName === 'INPUT'), noEnterHandling: true, noSpaceHandling: true })), jsx("div", Object.assign({ id: id, className: css(menuStyles.menu, isPlain && menuStyles.modifiers.plain, isScrollable && menuStyles.modifiers.scrollable, containsFlyout && menuStyles.modifiers.flyout, isNavFlyout && 'pf-m-nav', containsDrilldown && menuStyles.modifiers.drilldown, _isMenuDrilledIn && menuStyles.modifiers.drilledIn, className), ref: this.menuRef }, getOUIAProps(Menu.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe), props, { children: children }))] }));
     }
 }
 MenuBase.displayName = 'Menu';
@@ -3233,7 +2589,7 @@ MenuBase.defaultProps = {
     isScrollable: false,
     role: 'menu'
 };
-const Menu = React.forwardRef((props, ref) => (React.createElement(MenuBase, Object.assign({}, props, { innerRef: ref }))));
+const Menu = forwardRef((props, ref) => (jsx(MenuBase, Object.assign({}, props, { innerRef: ref }))));
 Menu.displayName = 'Menu';
 
 const c_menu__content_Height = {
@@ -3242,9 +2598,9 @@ const c_menu__content_Height = {
 const c_menu__content_MaxHeight = {
   "name": "--pf-v6-c-menu__content--MaxHeight"};
 
-const MenuContent = React.forwardRef((props, ref) => {
+const MenuContent = forwardRef((props, ref) => {
     const { getHeight, children, menuHeight, maxMenuHeight } = props, rest = __rest(props, ["getHeight", "children", "menuHeight", "maxMenuHeight"]);
-    const menuContentRef = React.createRef();
+    const menuContentRef = createRef();
     const refCallback = (el, menuId, onGetMenuHeight) => {
         if (el) {
             let clientHeight = el.clientHeight;
@@ -3269,7 +2625,9 @@ const MenuContent = React.forwardRef((props, ref) => {
         }
         return ref || menuContentRef;
     };
-    return (React.createElement(MenuContext.Consumer, null, ({ menuId, onGetMenuHeight }) => (React.createElement("div", Object.assign({}, rest, { className: css(menuStyles.menuContent, props.className), ref: (el) => refCallback(el, menuId, onGetMenuHeight), style: Object.assign(Object.assign({}, (menuHeight && { [c_menu__content_Height.name]: menuHeight })), (maxMenuHeight && { [c_menu__content_MaxHeight.name]: maxMenuHeight })) }), children))));
+    return (jsx(MenuContext.Consumer, { children: ({ menuId, onGetMenuHeight }) => (jsx("div", Object.assign({}, rest, { className: css(menuStyles.menuContent, props.className), ref: (el) => {
+                refCallback(el, menuId, onGetMenuHeight);
+            }, style: Object.assign(Object.assign({}, (menuHeight && { [c_menu__content_Height.name]: menuHeight })), (maxMenuHeight && { [c_menu__content_MaxHeight.name]: maxMenuHeight })), children: children }))) }));
 });
 MenuContent.displayName = 'MenuContent';
 
@@ -3330,7 +2688,7 @@ const checkStyles = {
 
 // tslint:disable-next-line:no-empty
 const defaultOnChange = () => { };
-class Checkbox extends React.Component {
+class Checkbox extends Component {
     constructor(props) {
         super(props);
         this.handleChange = (event) => {
@@ -3356,22 +2714,15 @@ class Checkbox extends React.Component {
         if ([false, true].includes(defaultChecked)) {
             checkedProps.defaultChecked = defaultChecked;
         }
-        const inputRendered = (React.createElement("input", Object.assign({}, props, { className: css(checkStyles.checkInput, inputClassName), type: "checkbox", onChange: this.handleChange, "aria-invalid": !isValid, "aria-label": ariaLabel, disabled: isDisabled, required: isRequired, ref: (elem) => elem && (elem.indeterminate = isChecked === null) }, checkedProps, getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
+        const inputRendered = (jsx("input", Object.assign({}, props, { className: css(checkStyles.checkInput, inputClassName), type: "checkbox", onChange: this.handleChange, "aria-invalid": !isValid, "aria-label": ariaLabel, disabled: isDisabled, required: isRequired, ref: (elem) => {
+                elem && (elem.indeterminate = isChecked === null);
+            } }, checkedProps, getOUIAProps(Checkbox.displayName, ouiaId !== undefined ? ouiaId : this.state.ouiaStateId, ouiaSafe))));
         const wrapWithLabel = (isLabelWrapped && !component) || component === 'label';
         const Label = wrapWithLabel ? 'span' : 'label';
-        const labelRendered = label ? (React.createElement(Label, { className: css(checkStyles.checkLabel, isDisabled && checkStyles.modifiers.disabled), htmlFor: !wrapWithLabel ? props.id : undefined },
-            label,
-            isRequired && (React.createElement("span", { className: css(checkStyles.checkLabelRequired), "aria-hidden": "true" }, ASTERISK)))) : null;
+        const labelRendered = label ? (jsxs(Label, { className: css(checkStyles.checkLabel, isDisabled && checkStyles.modifiers.disabled), htmlFor: !wrapWithLabel ? props.id : undefined, children: [label, isRequired && (jsx("span", { className: css(checkStyles.checkLabelRequired), "aria-hidden": "true", children: ASTERISK }))] })) : null;
         const Component = component !== null && component !== void 0 ? component : (wrapWithLabel ? 'label' : 'div');
         checkedProps.checked = checkedProps.checked === null ? false : checkedProps.checked;
-        return (React.createElement(Component, { className: css(checkStyles.check, !label && checkStyles.modifiers.standalone, className), htmlFor: wrapWithLabel ? props.id : undefined },
-            labelPosition === 'start' ? (React.createElement(React.Fragment, null,
-                labelRendered,
-                inputRendered)) : (React.createElement(React.Fragment, null,
-                inputRendered,
-                labelRendered)),
-            description && React.createElement("span", { className: css(checkStyles.checkDescription) }, description),
-            body && React.createElement("span", { className: css(checkStyles.checkBody) }, body)));
+        return (jsxs(Component, { className: css(checkStyles.check, !label && checkStyles.modifiers.standalone, className), htmlFor: wrapWithLabel ? props.id : undefined, children: [labelPosition === 'start' ? (jsxs(Fragment, { children: [labelRendered, inputRendered] })) : (jsxs(Fragment, { children: [inputRendered, labelRendered] })), description && jsx("span", { className: css(checkStyles.checkDescription), children: description }), body && jsx("span", { className: css(checkStyles.checkBody), children: body })] }));
     }
 }
 Checkbox.displayName = 'Checkbox';
@@ -3399,34 +2750,35 @@ const StarIcon = createIcon(StarIconConfig);
 
 const MenuItemActionBase = (_a) => {
     var { className, icon, onClick, 'aria-label': ariaLabel, isFavorited = null, isDisabled, actionId, innerRef } = _a, props = __rest(_a, ["className", "icon", "onClick", 'aria-label', "isFavorited", "isDisabled", "actionId", "innerRef"]);
-    return (React.createElement(MenuContext.Consumer, null, ({ onActionClick }) => (React.createElement(MenuItemContext.Consumer, null, ({ itemId, isDisabled: isDisabledContext }) => {
-        const onClickButton = (event) => {
-            // event specified on the MenuItemAction
-            onClick && onClick(event);
-            // event specified on the Menu
-            onActionClick && onActionClick(event, itemId, actionId);
-        };
-        return (React.createElement("div", Object.assign({ className: css(menuStyles.menuItemAction, isFavorited !== null && 'pf-m-favorite', isFavorited && menuStyles.modifiers.favorited, className) }, props),
-            React.createElement(Button, { "aria-label": ariaLabel, onClick: onClickButton, ref: innerRef, role: "menuitem", variant: "plain", tabIndex: -1, isDisabled: isDisabled || isDisabledContext, icon: icon === 'favorites' || isFavorited !== null ? React.createElement(StarIcon, { "aria-hidden": true }) : icon })));
-    }))));
+    return (jsx(MenuContext.Consumer, { children: ({ onActionClick }) => (jsx(MenuItemContext.Consumer, { children: ({ itemId, isDisabled: isDisabledContext }) => {
+                const onClickButton = (event) => {
+                    // event specified on the MenuItemAction
+                    onClick && onClick(event);
+                    // event specified on the Menu
+                    onActionClick && onActionClick(event, itemId, actionId);
+                };
+                return (jsx("div", Object.assign({ className: css(menuStyles.menuItemAction, isFavorited !== null && 'pf-m-favorite', isFavorited && menuStyles.modifiers.favorited, className) }, props, { children: jsx(Button, { "aria-label": ariaLabel, onClick: onClickButton, ref: innerRef, role: "menuitem", variant: "plain", tabIndex: -1, isDisabled: isDisabled || isDisabledContext, icon: icon === 'favorites' || isFavorited !== null ? jsx(StarIcon, {}) : icon }) })));
+            } })) }));
 };
-const MenuItemAction = React.forwardRef((props, ref) => (React.createElement(MenuItemActionBase, Object.assign({}, props, { innerRef: ref }))));
+const MenuItemAction = forwardRef((props, ref) => (jsx(MenuItemActionBase, Object.assign({}, props, { innerRef: ref }))));
 MenuItemAction.displayName = 'MenuItemAction';
 
-const FlyoutContext = React.createContext({
+const FlyoutContext = createContext({
     direction: 'right'
 });
 const MenuItemBase = (_a) => {
     var { children, className, itemId = null, to, hasCheckbox = false, isActive = null, isFavorited = null, isLoadButton = false, isLoading = false, flyoutMenu, direction, description = null, onClick = () => { }, component = 'button', isDisabled = false, isAriaDisabled = false, isExternalLink = false, isSelected = null, isFocused, isDanger = false, icon, actions, onShowFlyout, drilldownMenu, isOnPath, innerRef, id, 'aria-label': ariaLabel, tooltipProps, rel, target, download } = _a, props = __rest(_a, ["children", "className", "itemId", "to", "hasCheckbox", "isActive", "isFavorited", "isLoadButton", "isLoading", "flyoutMenu", "direction", "description", "onClick", "component", "isDisabled", "isAriaDisabled", "isExternalLink", "isSelected", "isFocused", "isDanger", "icon", "actions", "onShowFlyout", "drilldownMenu", "isOnPath", "innerRef", "id", 'aria-label', "tooltipProps", "rel", "target", "download"]);
-    const { menuId, parentMenu, onSelect, onActionClick, activeItemId, selected, drilldownItemPath, onDrillIn, onDrillOut, flyoutRef, setFlyoutRef, disableHover, role: menuRole } = React.useContext(MenuContext);
+    const { menuId, parentMenu, onSelect, onActionClick, activeItemId, selected, drilldownItemPath, onDrillIn, onDrillOut, flyoutRef, setFlyoutRef, disableHover, role: menuRole } = useContext(MenuContext);
     let Component = (to ? 'a' : component);
     if (hasCheckbox && !to) {
         Component = 'label';
     }
-    const [flyoutTarget, setFlyoutTarget] = React.useState(null);
-    const flyoutContext = React.useContext(FlyoutContext);
-    const [flyoutXDirection, setFlyoutXDirection] = React.useState(flyoutContext.direction);
-    const ref = React.useRef();
+    const [flyoutTarget, setFlyoutTarget] = useState(null);
+    const flyoutContext = useContext(FlyoutContext);
+    const [flyoutXDirection, setFlyoutXDirection] = useState(flyoutContext.direction);
+    const ref = useRef(undefined);
+    const privateRef = useRef(undefined);
+    const innerComponentRef = innerRef || privateRef;
     const flyoutVisible = ref === flyoutRef;
     const hasFlyout = flyoutMenu !== undefined;
     const showFlyout = (show) => {
@@ -3477,10 +2829,10 @@ const MenuItemBase = (_a) => {
             }
         }
     }, [flyoutVisible, flyoutMenu]);
-    React.useEffect(() => {
+    useEffect(() => {
         setFlyoutXDirection(flyoutContext.direction);
     }, [flyoutContext]);
-    React.useEffect(() => {
+    useEffect(() => {
         if (flyoutTarget) {
             if (flyoutVisible) {
                 const flyoutMenu = flyoutTarget.nextElementSibling;
@@ -3591,7 +2943,7 @@ const MenuItemBase = (_a) => {
             setFlyoutRef(null);
         }
     };
-    React.useEffect(() => {
+    useEffect(() => {
         if (isFocused && ref.current) {
             const itemEl = ref.current;
             const parentListEl = itemEl.parentElement;
@@ -3605,53 +2957,31 @@ const MenuItemBase = (_a) => {
         }
     }, [isFocused]);
     const isSelectMenu = menuRole === 'listbox';
-    const renderItem = (React.createElement(React.Fragment, null,
-        React.createElement(GenerateId, null, (randomId) => (React.createElement(Component, Object.assign({ id: id, tabIndex: -1, className: css(menuStyles.menuItem, getIsSelected() && !hasCheckbox && menuStyles.modifiers.selected, className), "aria-current": getAriaCurrent() }, (!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel }), (!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' }), (!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() }), { ref: innerRef }, (!hasCheckbox && {
-            onClick: (event) => {
-                if (!isAriaDisabled) {
-                    onItemSelect(event, onSelect);
-                    drill && drill(event);
-                    flyoutMenu && handleFlyout(event);
-                }
-                else {
-                    event.preventDefault();
-                }
-            }
-        }), (hasCheckbox && { htmlFor: randomId }), additionalProps),
-            React.createElement("span", { className: css(menuStyles.menuItemMain) },
-                direction === 'up' && (React.createElement("span", { className: css(menuStyles.menuItemToggleIcon) },
-                    React.createElement(AngleLeftIcon, { "aria-hidden": true }))),
-                icon && React.createElement("span", { className: css(menuStyles.menuItemIcon) }, icon),
-                hasCheckbox && (React.createElement("span", { className: css(menuStyles.menuItemCheck) },
-                    React.createElement(Checkbox, { id: randomId, component: "span", isChecked: isSelected || false, onChange: (event) => onItemSelect(event, onSelect), isDisabled: isDisabled, "aria-disabled": isAriaDisabled }))),
-                React.createElement("span", { className: css(menuStyles.menuItemText) }, children),
-                isExternalLink && (React.createElement("span", { className: css(menuStyles.menuItemExternalIcon) },
-                    React.createElement(ExternalLinkAltIcon, { "aria-hidden": true }))),
-                (flyoutMenu || direction === 'down') && (React.createElement("span", { className: css(menuStyles.menuItemToggleIcon) },
-                    React.createElement(AngleRightIcon, { "aria-hidden": true }))),
-                getIsSelected() && (React.createElement("span", { className: css(menuStyles.menuItemSelectIcon) },
-                    React.createElement(CheckIcon, { "aria-hidden": true })))),
-            description && direction !== 'up' && (React.createElement("span", { className: css(menuStyles.menuItemDescription) },
-                React.createElement("span", null, description)))))),
-        flyoutVisible && (React.createElement(MenuContext.Provider, { value: { disableHover } },
-            React.createElement(FlyoutContext.Provider, { value: { direction: flyoutXDirection } }, flyoutMenu))),
-        typeof drilldownMenu === 'function' ? drilldownMenu() : drilldownMenu,
-        React.createElement(MenuItemContext.Provider, { value: { itemId, isDisabled } },
-            actions,
-            isFavorited !== null && (React.createElement(MenuItemAction, { icon: "favorites", isFavorited: isFavorited, "aria-label": isFavorited ? 'starred' : 'not starred', onClick: (event) => onActionClick(event, itemId), tabIndex: -1, actionId: "fav" })))));
-    return (React.createElement("li", Object.assign({ className: css(menuStyles.menuListItem, isDisabled && menuStyles.modifiers.disabled, isAriaDisabled && menuStyles.modifiers.ariaDisabled, _isOnPath && menuStyles.modifiers.currentPath, isLoadButton && menuStyles.modifiers.load, isLoading && menuStyles.modifiers.loading, isFocused && 'pf-m-focus', isDanger && menuStyles.modifiers.danger, className), onMouseOver: () => {
-            if (!isAriaDisabled) {
-                onMouseOver();
-            }
-        } }, (flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout }), { ref: ref, role: !hasCheckbox ? 'none' : 'menuitem' }, (hasCheckbox && { 'aria-label': ariaLabel }), props), tooltipProps ? React.createElement(Tooltip, Object.assign({}, tooltipProps), renderItem) : renderItem));
+    const renderItem = (jsxs(Fragment, { children: [jsx(GenerateId, { children: (randomId) => (jsxs(Component, Object.assign({ id: id, tabIndex: -1, className: css(menuStyles.menuItem, getIsSelected() && !hasCheckbox && menuStyles.modifiers.selected, className), "aria-current": getAriaCurrent() }, (!hasCheckbox && { disabled: isDisabled, 'aria-label': ariaLabel }), (!hasCheckbox && !flyoutMenu && { role: isSelectMenu ? 'option' : 'menuitem' }), (!hasCheckbox && !flyoutMenu && isSelectMenu && { 'aria-selected': getIsSelected() }), { ref: innerComponentRef }, (!hasCheckbox && {
+                    onClick: (event) => {
+                        if (!isAriaDisabled) {
+                            onItemSelect(event, onSelect);
+                            drill && drill(event);
+                            flyoutMenu && handleFlyout(event);
+                        }
+                        else {
+                            event.preventDefault();
+                        }
+                    }
+                }), (hasCheckbox && { htmlFor: randomId }), additionalProps, { children: [jsxs("span", { className: css(menuStyles.menuItemMain), children: [direction === 'up' && (jsx("span", { className: css(menuStyles.menuItemToggleIcon), children: jsx(AngleLeftIcon, {}) })), icon && jsx("span", { className: css(menuStyles.menuItemIcon), children: icon }), hasCheckbox && (jsx("span", { className: css(menuStyles.menuItemCheck), children: jsx(Checkbox, { id: randomId, component: "span", isChecked: isSelected || false, onChange: (event) => onItemSelect(event, onSelect), isDisabled: isDisabled, "aria-disabled": isAriaDisabled }) })), jsx("span", { className: css(menuStyles.menuItemText), children: children }), isExternalLink && (jsx("span", { className: css(menuStyles.menuItemExternalIcon), children: jsx(ExternalLinkAltIcon, {}) })), (flyoutMenu || direction === 'down') && (jsx("span", { className: css(menuStyles.menuItemToggleIcon), children: jsx(AngleRightIcon, {}) })), getIsSelected() && (jsx("span", { className: css(menuStyles.menuItemSelectIcon), children: jsx(CheckIcon, {}) }))] }), description && direction !== 'up' && (jsx("span", { className: css(menuStyles.menuItemDescription), children: jsx("span", { children: description }) }))] }))) }), flyoutVisible && (jsx(MenuContext.Provider, { value: { disableHover }, children: jsx(FlyoutContext.Provider, { value: { direction: flyoutXDirection }, children: flyoutMenu }) })), typeof drilldownMenu === 'function' ? drilldownMenu() : drilldownMenu, jsxs(MenuItemContext.Provider, { value: { itemId, isDisabled }, children: [actions, isFavorited !== null && (jsx(MenuItemAction, { icon: "favorites", isFavorited: isFavorited, "aria-label": isFavorited ? 'starred' : 'not starred', onClick: (event) => onActionClick(event, itemId), tabIndex: -1, actionId: "fav" }))] })] }));
+    return (jsxs(Fragment, { children: [jsx("li", Object.assign({ className: css(menuStyles.menuListItem, isDisabled && menuStyles.modifiers.disabled, isAriaDisabled && menuStyles.modifiers.ariaDisabled, _isOnPath && menuStyles.modifiers.currentPath, isLoadButton && menuStyles.modifiers.load, isLoading && menuStyles.modifiers.loading, isFocused && 'pf-m-focus', isDanger && menuStyles.modifiers.danger, className), onMouseOver: () => {
+                    if (!isAriaDisabled) {
+                        onMouseOver();
+                    }
+                } }, (flyoutMenu && !isAriaDisabled && { onKeyDown: handleFlyout }), { ref: ref, role: !hasCheckbox ? 'none' : 'menuitem' }, (hasCheckbox && { 'aria-label': ariaLabel }), props, { children: renderItem })), tooltipProps && jsx(Tooltip, Object.assign({}, tooltipProps, { triggerRef: innerComponentRef }))] }));
 };
-const MenuItem = React.forwardRef((props, ref) => (React.createElement(MenuItemBase, Object.assign({}, props, { innerRef: ref }))));
+const MenuItem = forwardRef((props, ref) => (jsx(MenuItemBase, Object.assign({}, props, { innerRef: ref }))));
 MenuItem.displayName = 'MenuItem';
 
 const MenuList = (_a) => {
     var { children = null, className, isAriaMultiselectable = false, 'aria-label': ariaLabel } = _a, props = __rest(_a, ["children", "className", "isAriaMultiselectable", 'aria-label']);
-    const { role } = React.useContext(MenuContext);
-    return (React.createElement("ul", Object.assign({ role: role }, (role === 'listbox' && { 'aria-multiselectable': isAriaMultiselectable }), { className: css(menuStyles.menuList, className), "aria-label": ariaLabel }, props), children));
+    const { role } = useContext(MenuContext);
+    return (jsx("ul", Object.assign({ role: role }, (role === 'listbox' && { 'aria-multiselectable': isAriaMultiselectable }), { className: css(menuStyles.menuList, className), "aria-label": ariaLabel }, props, { children: children })));
 };
 MenuList.displayName = 'MenuList';
 
@@ -3706,7 +3036,7 @@ var MenuToggleSize;
     MenuToggleSize["default"] = "default";
     MenuToggleSize["sm"] = "sm";
 })(MenuToggleSize || (MenuToggleSize = {}));
-class MenuToggleBase extends React.Component {
+class MenuToggleBase extends Component {
     constructor() {
         super(...arguments);
         this.displayName = 'MenuToggleBase';
@@ -3724,38 +3054,27 @@ class MenuToggleBase extends React.Component {
         if (!statusIcon) {
             switch (status) {
                 case MenuToggleStatus.success:
-                    _statusIcon = React.createElement(CheckCircleIcon, { "aria-hidden": "true" });
+                    _statusIcon = jsx(CheckCircleIcon, {});
                     break;
                 case MenuToggleStatus.warning:
-                    _statusIcon = React.createElement(ExclamationTriangleIcon, { "aria-hidden": "true" });
+                    _statusIcon = jsx(ExclamationTriangleIcon, {});
                     break;
                 case MenuToggleStatus.danger:
-                    _statusIcon = React.createElement(ExclamationCircleIcon, { "aria-hidden": "true" });
+                    _statusIcon = jsx(ExclamationCircleIcon, {});
                     break;
             }
         }
-        const toggleControls = (React.createElement("span", { className: css(styles.menuToggleControls) },
-            status !== undefined && React.createElement("span", { className: css(styles.menuToggleStatusIcon) }, _statusIcon),
-            React.createElement("span", { className: css(styles.menuToggleToggleIcon) },
-                React.createElement(CaretDownIcon, { "aria-hidden": true }))));
-        const content = (React.createElement(React.Fragment, null,
-            icon && React.createElement("span", { className: css(styles.menuToggleIcon) }, icon),
-            isTypeahead ? children : children && React.createElement("span", { className: css(styles.menuToggleText) }, children),
-            React.isValidElement(badge) && React.createElement("span", { className: css(styles.menuToggleCount) }, badge),
-            isTypeahead ? (React.createElement("button", Object.assign({ type: "button", className: css(styles.menuToggleButton), "aria-expanded": isExpanded, onClick: onClick, "aria-label": ariaLabel || 'Menu toggle', tabIndex: -1 }, ouiaProps), toggleControls)) : (!isPlain && toggleControls)));
+        const toggleControls = (jsxs("span", { className: css(styles.menuToggleControls), children: [status !== undefined && jsx("span", { className: css(styles.menuToggleStatusIcon), children: _statusIcon }), jsx("span", { className: css(styles.menuToggleToggleIcon), children: jsx(CaretDownIcon, {}) })] }));
+        const content = (jsxs(Fragment, { children: [icon && jsx("span", { className: css(styles.menuToggleIcon), children: icon }), isTypeahead ? children : children && jsx("span", { className: css(styles.menuToggleText), children: children }), isValidElement(badge) && jsx("span", { className: css(styles.menuToggleCount), children: badge }), isTypeahead ? (jsx("button", Object.assign({ type: "button", className: css(styles.menuToggleButton), "aria-expanded": isExpanded, onClick: onClick, "aria-label": ariaLabel || 'Menu toggle', tabIndex: -1 }, ouiaProps, { children: toggleControls }))) : (!isPlain && toggleControls)] }));
         const commonStyles = css(styles.menuToggle, isExpanded && styles.modifiers.expanded, variant === 'primary' && styles.modifiers.primary, variant === 'secondary' && styles.modifiers.secondary, status && styles.modifiers[status], (isPlain || isPlainText) && styles.modifiers.plain, isPlainText && 'pf-m-text', isFullHeight && styles.modifiers.fullHeight, isFullWidth && styles.modifiers.fullWidth, isDisabled && styles.modifiers.disabled, isPlaceholder && styles.modifiers.placeholder, size === MenuToggleSize.sm && styles.modifiers.small, className);
         const componentProps = Object.assign(Object.assign({ children: content }, (isDisabled && { disabled: true })), otherProps);
         if (isTypeahead) {
-            return (React.createElement("div", Object.assign({ ref: innerRef, className: css(commonStyles, styles.modifiers.typeahead) }, componentProps)));
+            return (jsx("div", Object.assign({ ref: innerRef, className: css(commonStyles, styles.modifiers.typeahead) }, componentProps)));
         }
         if (splitButtonItems) {
-            return (React.createElement("div", { ref: innerRef, className: css(commonStyles, styles.modifiers.splitButton) },
-                splitButtonItems,
-                React.createElement("button", Object.assign({ className: css(styles.menuToggleButton, children && styles.modifiers.text), type: "button", "aria-expanded": isExpanded, "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick }, otherProps, ouiaProps),
-                    children && React.createElement("span", { className: css(styles.menuToggleText) }, children),
-                    toggleControls)));
+            return (jsxs("div", { ref: innerRef, className: css(commonStyles, styles.modifiers.splitButton), children: [splitButtonItems, jsxs("button", Object.assign({ className: css(styles.menuToggleButton, children && styles.modifiers.text), type: "button", "aria-expanded": isExpanded, "aria-label": ariaLabel, disabled: isDisabled, onClick: onClick }, otherProps, ouiaProps, { children: [children && jsx("span", { className: css(styles.menuToggleText), children: children }), toggleControls] }))] }));
         }
-        return (React.createElement("button", Object.assign({ className: css(commonStyles), type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, ref: innerRef, disabled: isDisabled, onClick: onClick }, componentProps, ouiaProps)));
+        return (jsx("button", Object.assign({ className: css(commonStyles), type: "button", "aria-label": ariaLabel, "aria-expanded": isExpanded, ref: innerRef, disabled: isDisabled, onClick: onClick }, componentProps, ouiaProps)));
     }
 }
 MenuToggleBase.defaultProps = {
@@ -3768,7 +3087,7 @@ MenuToggleBase.defaultProps = {
     size: 'default',
     ouiaSafe: true
 };
-const MenuToggle = React.forwardRef((props, ref) => (React.createElement(MenuToggleBase, Object.assign({ innerRef: ref }, props))));
+const MenuToggle = forwardRef((props, ref) => (jsx(MenuToggleBase, Object.assign({ innerRef: ref }, props))));
 MenuToggle.displayName = 'MenuToggle';
 
 const dividerStyles = {
@@ -3857,21 +3176,21 @@ var DividerVariant;
 const Divider = (_a) => {
     var { className, component = DividerVariant.hr, inset, orientation } = _a, props = __rest(_a, ["className", "component", "inset", "orientation"]);
     const Component = component;
-    return (React.createElement(Component, Object.assign({ className: css(dividerStyles.divider, formatBreakpointMods(inset, dividerStyles), formatBreakpointMods(orientation, dividerStyles), className) }, (component !== 'hr' && { role: 'separator' }), props)));
+    return (jsx(Component, Object.assign({ className: css(dividerStyles.divider, formatBreakpointMods(inset, dividerStyles), formatBreakpointMods(orientation, dividerStyles), className) }, (component !== 'hr' && { role: 'separator' }), props)));
 };
 Divider.displayName = 'Divider';
 
 const DropdownBase = (_a) => {
     var { children, className, onSelect, isOpen, toggle, shouldFocusToggleOnSelect = false, onOpenChange, onToggleKeydown, isPlain, isScrollable, innerRef, ouiaId, ouiaSafe = true, zIndex = 9999, popperProps, onOpenChangeKeys = ['Escape', 'Tab'], menuHeight, maxMenuHeight, shouldFocusFirstItemOnOpen = false, shouldPreventScrollOnItemFocus = true, focusTimeoutDelay = 0 } = _a, props = __rest(_a, ["children", "className", "onSelect", "isOpen", "toggle", "shouldFocusToggleOnSelect", "onOpenChange", "onToggleKeydown", "isPlain", "isScrollable", "innerRef", "ouiaId", "ouiaSafe", "zIndex", "popperProps", "onOpenChangeKeys", "menuHeight", "maxMenuHeight", "shouldFocusFirstItemOnOpen", "shouldPreventScrollOnItemFocus", "focusTimeoutDelay"]);
-    const localMenuRef = React__default.useRef();
-    const localToggleRef = React__default.useRef();
+    const localMenuRef = useRef(undefined);
+    const localToggleRef = useRef(undefined);
     const ouiaProps = useOUIAProps(Dropdown.displayName, ouiaId, ouiaSafe);
     const menuRef = innerRef || localMenuRef;
     const toggleRef = typeof toggle === 'function' || (typeof toggle !== 'function' && !toggle.toggleRef)
         ? localToggleRef
         : toggle === null || toggle === void 0 ? void 0 : toggle.toggleRef;
-    const prevIsOpen = React__default.useRef(isOpen);
-    React__default.useEffect(() => {
+    const prevIsOpen = useRef(isOpen);
+    useEffect(() => {
         // menu was opened, focus on first menu item
         if (prevIsOpen.current === false && isOpen === true && shouldFocusFirstItemOnOpen) {
             setTimeout(() => {
@@ -3883,7 +3202,7 @@ const DropdownBase = (_a) => {
         prevIsOpen.current = isOpen;
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [isOpen]);
-    React__default.useEffect(() => {
+    useEffect(() => {
         const handleMenuKeys = (event) => {
             var _a, _b, _c, _d;
             // Close the menu on tab or escape if onOpenChange is provided
@@ -3931,28 +3250,27 @@ const DropdownBase = (_a) => {
         focusTimeoutDelay
     ]);
     const scrollable = maxMenuHeight !== undefined || menuHeight !== undefined || isScrollable;
-    const menu = (React__default.createElement(Menu, Object.assign({ className: css(className), ref: menuRef, onSelect: (event, value) => {
+    const menu = (jsx(Menu, Object.assign({ className: css(className), ref: menuRef, onSelect: (event, value) => {
             var _a;
             onSelect && onSelect(event, value);
             shouldFocusToggleOnSelect && ((_a = toggleRef.current) === null || _a === void 0 ? void 0 : _a.focus());
-        }, isPlain: isPlain, isScrollable: scrollable }, props, ouiaProps),
-        React__default.createElement(MenuContent, { menuHeight: menuHeight, maxMenuHeight: maxMenuHeight }, children)));
-    return (React__default.createElement(Popper, Object.assign({ trigger: typeof toggle === 'function' ? toggle(toggleRef) : toggle.toggleNode, triggerRef: toggleRef, popper: menu, popperRef: menuRef, isVisible: isOpen, zIndex: zIndex }, popperProps)));
+        }, isPlain: isPlain, isScrollable: scrollable }, props, ouiaProps, { children: jsx(MenuContent, { menuHeight: menuHeight, maxMenuHeight: maxMenuHeight, children: children }) })));
+    return (jsx(Popper, Object.assign({ trigger: typeof toggle === 'function' ? toggle(toggleRef) : toggle.toggleNode, triggerRef: toggleRef, popper: menu, popperRef: menuRef, isVisible: isOpen, zIndex: zIndex }, popperProps)));
 };
-const Dropdown = React__default.forwardRef((props, ref) => (React__default.createElement(DropdownBase, Object.assign({ innerRef: ref }, props))));
+const Dropdown = forwardRef((props, ref) => (jsx(DropdownBase, Object.assign({ innerRef: ref }, props))));
 Dropdown.displayName = 'Dropdown';
 
 const DropdownItemBase = (_a) => {
     var { children, className, description, isDisabled, isAriaDisabled, value, onClick, ouiaId, ouiaSafe, innerRef, tooltipProps } = _a, props = __rest(_a, ["children", "className", "description", "isDisabled", "isAriaDisabled", "value", "onClick", "ouiaId", "ouiaSafe", "innerRef", "tooltipProps"]);
     const ouiaProps = useOUIAProps(DropdownItem.displayName, ouiaId, ouiaSafe);
-    return (React__default.createElement(MenuItem, Object.assign({ className: css(className), description: description, isDisabled: isDisabled, isAriaDisabled: isAriaDisabled, itemId: value, onClick: onClick, tooltipProps: tooltipProps, ref: innerRef }, ouiaProps, props), children));
+    return (jsx(MenuItem, Object.assign({ className: css(className), description: description, isDisabled: isDisabled, isAriaDisabled: isAriaDisabled, itemId: value, onClick: onClick, tooltipProps: tooltipProps, ref: innerRef }, ouiaProps, props, { children: children })));
 };
-const DropdownItem = React__default.forwardRef((props, ref) => (React__default.createElement(DropdownItemBase, Object.assign({}, props, { innerRef: ref }))));
+const DropdownItem = forwardRef((props, ref) => (jsx(DropdownItemBase, Object.assign({}, props, { innerRef: ref }))));
 DropdownItem.displayName = 'DropdownItem';
 
 const DropdownList = (_a) => {
     var { children, className } = _a, props = __rest(_a, ["children", "className"]);
-    return (React__default.createElement(MenuList, Object.assign({ className: css(className) }, props), children));
+    return (jsx(MenuList, Object.assign({ className: css(className) }, props, { children: children })));
 };
 DropdownList.displayName = 'DropdownList';
 
@@ -3967,4 +3285,4 @@ const AngleDownIconConfig = {
 
 const AngleDownIcon = createIcon(AngleDownIconConfig);
 
-export { ASTERISK as A, Button as B, CheckCircleIcon as C, Divider as D, ExclamationTriangleIcon as E, getUniqueId as F, GenerateId as G, useIsomorphicLayoutEffect as H, Tooltip as I, BellIcon as J, KeyTypes as K, InfoCircleIcon as L, MenuToggle as M, checkStyles as N, StarIcon as O, Popper as P, Checkbox as Q, setTabIndex as R, Spinner as S, TimesIcon as T, handleArrows as U, ValidatedOptions as V, canUseDOM as a, createIcon as b, css as c, ExclamationCircleIcon as d, getOUIAProps as e, statusIcons as f, getDefaultOUIAId as g, ButtonVariant as h, CaretDownIcon as i, Badge as j, AngleDownIcon as k, getVerticalBreakpoint as l, menuStyles as m, getBreakpoint as n, formatBreakpointMods as o, t_global_breakpoint_2xl as p, t_global_breakpoint_xl as q, t_global_breakpoint_lg as r, setBreakpointCssVars as s, trimLeft as t, useOUIAProps as u, t_global_breakpoint_md as v, toCamel as w, Dropdown as x, DropdownList as y, DropdownItem as z };
+export { ASTERISK as A, CaretDownIcon as C, Divider as D, GenerateId as G, MenuToggle as M, Popper as P, StarIcon as S, TimesIcon as T, AngleDownIcon as a, Dropdown as b, DropdownList as c, DropdownItem as d, Tooltip as e, checkStyles as f, Checkbox as g, handleArrows as h, menuStyles as m, setTabIndex as s, useIsomorphicLayoutEffect as u };