@open-ui-kit/core 2.1.0 → 2.2.1

package/index.esm.js

@@ -10,7 +10,7 @@ import DoneIcon from '@mui/icons-material/Done';
 import CloseIcon from '@mui/icons-material/Close';
 import { Timeline as Timeline$1, TimelineItem, TimelineSeparator, TimelineConnector, TimelineContent } from '@mui/lab';
 import * as React from 'react';
-import React__default, { useCallback, Children, isValidElement, useState, useEffect, useMemo, useRef, createElement, Fragment as Fragment$1 } from 'react';
+import React__default, { useCallback, forwardRef, Children, isValidElement, useState, useEffect, useMemo, useRef, createElement, useLayoutEffect, Fragment as Fragment$1 } from 'react';
 import StarIcon from '@mui/icons-material/Star';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import WarningIcon from '@mui/icons-material/Warning';
@@ -6291,6 +6291,13 @@ const StyledButton$1 = styled(Button$1)(({ theme }) => ({
     textTransform: "none",
     transition: "none",
     borderRadius: "4px",
+    width: "max-content",
+    maxWidth: "100%",
+    whiteSpace: "normal",
+    overflowWrap: "break-word",
+    textAlign: "center",
+    alignItems: "center",
+    height: "auto",
     "& .MuiButton-startIcon": {
         marginLeft: "0px",
     },
@@ -6302,16 +6309,22 @@ const StyledButton$1 = styled(Button$1)(({ theme }) => ({
             padding: "8px",
             minWidth: "40px",
             width: "40px",
+            height: "40px",
+            minHeight: "40px",
         },
         "&.MuiButton-sizeMedium": {
             padding: "6px",
             minWidth: "32px",
             width: "32px",
+            height: "32px",
+            minHeight: "32px",
         },
         "&.MuiButton-sizeSmall": {
             padding: "2px",
             minWidth: "24px",
             width: "24px",
+            height: "24px",
+            minHeight: "24px",
         },
     },
     "&.MuiButton-sizeLarge": {
@@ -6319,7 +6332,8 @@ const StyledButton$1 = styled(Button$1)(({ theme }) => ({
         fontWeight: 600,
         fontSize: "16px",
         lineHeight: "125%",
-        height: "40px",
+        minHeight: "40px",
+        height: "auto",
         padding: "10px 16px",
     },
     "&.OuiButton-hasIcon.MuiButton-sizeLarge": {
@@ -6330,7 +6344,8 @@ const StyledButton$1 = styled(Button$1)(({ theme }) => ({
         fontWeight: 600,
         fontSize: "14px",
         lineHeight: "125%",
-        height: "32px",
+        minHeight: "32px",
+        height: "auto",
         padding: "7px 16px",
     },
     "&.MuiButton-sizeSmall": {
@@ -6338,7 +6353,8 @@ const StyledButton$1 = styled(Button$1)(({ theme }) => ({
         fontWeight: 600,
         fontSize: "14px",
         lineHeight: "125%",
-        height: "24px",
+        minHeight: "24px",
+        height: "auto",
         padding: "3px 12px",
     },
     "&.MuiButton-sizeLarge svg": {
@@ -6557,7 +6573,7 @@ const isIconOnlyChild = (children) => {
     }
     return child.props.children == null;
 };
-const Button = (_a) => {
+const Button = forwardRef((_a, ref) => {
     var { children, className, disableRipple = true, endIcon, startIcon } = _a, props = __rest(_a, ["children", "className", "disableRipple", "endIcon", "startIcon"]);
     const hasIcon = Boolean(startIcon || endIcon);
     const isIconOnly = !hasIcon && isIconOnlyChild(children);
@@ -6568,8 +6584,9 @@ const Button = (_a) => {
     ]
         .filter(Boolean)
         .join(" ");
-    return (jsx(StyledButton$1, Object.assign({ className: buttonClassName || undefined, disableRipple: disableRipple, endIcon: endIcon, startIcon: startIcon }, props, { children: children })));
-};
+    return (jsx(StyledButton$1, Object.assign({ ref: ref, className: buttonClassName || undefined, disableRipple: disableRipple, endIcon: endIcon, startIcon: startIcon }, props, { children: children })));
+});
+Button.displayName = "Button";
 
 const getSpinnerWrapperStyles = (size) => ({
     position: "relative",
@@ -7588,18 +7605,48 @@ const SelectNodeListItem = ({ isLeaf, isSelectable = true, listItemProps = {}, o
         }, children: [selectNodeElement, selectableLeavesCount && (jsx(Typography, { variant: "body2", sx: { cursor: "pointer", color: theme.palette.vars.baseTextWeak }, children: selectableLeavesCount }))] })));
 };
 
+const TOOLTIP_ARROW_WIDTH = 10;
+const TOOLTIP_ARROW_HEIGHT = 6;
 const baseTooltipStyles = (theme) => (Object.assign(Object.assign({}, theme.typography.captionMedium), { backgroundColor: theme.palette.vars.inactiveBackgroundActive, borderRadius: "4px", boxSizing: "border-box", color: theme.palette.vars.baseTextInverse, maxWidth: "none" }));
 const tooltipArrowStyles = (theme) => ({
     color: theme.palette.vars.inactiveBackgroundActive,
-    height: "6px",
-    width: "10px",
+    height: `${TOOLTIP_ARROW_HEIGHT}px`,
+    width: `${TOOLTIP_ARROW_WIDTH}px`,
     "&::before": {
         backgroundColor: "currentColor",
-        borderRadius: "1px",
-        height: "6px",
-        width: "10px",
+        display: "block",
+        height: "100%",
+        width: "100%",
     },
 });
+const tooltipPopperSx = {
+    [`&[data-popper-placement*="bottom"] .MuiTooltip-arrow`]: {
+        marginTop: `-${TOOLTIP_ARROW_HEIGHT}px`,
+    },
+    [`&[data-popper-placement*="top"] .MuiTooltip-arrow`]: {
+        marginBottom: `-${TOOLTIP_ARROW_HEIGHT}px`,
+    },
+    [`&[data-popper-placement*="left"] .MuiTooltip-arrow, &[data-popper-placement*="right"] .MuiTooltip-arrow`]: {
+        height: `${TOOLTIP_ARROW_WIDTH}px`,
+        width: `${TOOLTIP_ARROW_HEIGHT}px`,
+    },
+    [`&[data-popper-placement*="right"] .MuiTooltip-arrow`]: {
+        marginLeft: `-${TOOLTIP_ARROW_HEIGHT}px`,
+        marginRight: 0,
+    },
+    [`&[data-popper-placement*="left"] .MuiTooltip-arrow`]: {
+        marginRight: `-${TOOLTIP_ARROW_HEIGHT}px`,
+        marginLeft: 0,
+    },
+    '[dir="rtl"] &[data-popper-placement*="right"] .MuiTooltip-arrow': {
+        marginLeft: 0,
+        marginRight: `-${TOOLTIP_ARROW_HEIGHT}px`,
+    },
+    '[dir="rtl"] &[data-popper-placement*="left"] .MuiTooltip-arrow': {
+        marginRight: 0,
+        marginLeft: `-${TOOLTIP_ARROW_HEIGHT}px`,
+    },
+};
 const largeTooltipStyles = {
     height: "32px",
     padding: "8px 12px",
@@ -7624,12 +7671,7 @@ const tooltipPopper = {
             },
         },
     ],
-    sx: {
-        '&[data-popper-placement*="left"] .MuiTooltip-arrow, &[data-popper-placement*="right"] .MuiTooltip-arrow': {
-            height: "10px",
-            width: "6px",
-        },
-    },
+    sx: tooltipPopperSx,
 };
 const tooltipSlotProps = {
     [TooltipSize.Medium]: {
@@ -13095,44 +13137,604 @@ const PickerItem = (_a) => {
         ], children: [jsx(Box, { className: "picker-icon", "aria-hidden": true, children: icon }), jsx(Box, { component: "span", className: "picker-label", children: label })] })));
 };
 
+var PopoverPlacementSide;
+(function (PopoverPlacementSide) {
+    PopoverPlacementSide["Top"] = "top";
+    PopoverPlacementSide["Bottom"] = "bottom";
+    PopoverPlacementSide["Left"] = "left";
+    PopoverPlacementSide["Right"] = "right";
+})(PopoverPlacementSide || (PopoverPlacementSide = {}));
+var PopoverPlacementAlign;
+(function (PopoverPlacementAlign) {
+    PopoverPlacementAlign["Start"] = "start";
+    PopoverPlacementAlign["End"] = "end";
+    PopoverPlacementAlign["Center"] = "center";
+})(PopoverPlacementAlign || (PopoverPlacementAlign = {}));
+var PopoverPlacement;
+(function (PopoverPlacement) {
+    PopoverPlacement["Top"] = "top";
+    PopoverPlacement["TopStart"] = "top-start";
+    PopoverPlacement["TopEnd"] = "top-end";
+    PopoverPlacement["Bottom"] = "bottom";
+    PopoverPlacement["BottomStart"] = "bottom-start";
+    PopoverPlacement["BottomEnd"] = "bottom-end";
+    PopoverPlacement["Left"] = "left";
+    PopoverPlacement["LeftStart"] = "left-start";
+    PopoverPlacement["LeftEnd"] = "left-end";
+    PopoverPlacement["Right"] = "right";
+    PopoverPlacement["RightStart"] = "right-start";
+    PopoverPlacement["RightEnd"] = "right-end";
+})(PopoverPlacement || (PopoverPlacement = {}));
+const POPOVER_PLACEMENTS = [
+    PopoverPlacement.BottomStart,
+    PopoverPlacement.Bottom,
+    PopoverPlacement.BottomEnd,
+    PopoverPlacement.TopStart,
+    PopoverPlacement.Top,
+    PopoverPlacement.TopEnd,
+    PopoverPlacement.LeftStart,
+    PopoverPlacement.Left,
+    PopoverPlacement.LeftEnd,
+    PopoverPlacement.RightStart,
+    PopoverPlacement.Right,
+    PopoverPlacement.RightEnd,
+];
+var PopoverVerticalPlacement;
+(function (PopoverVerticalPlacement) {
+    PopoverVerticalPlacement["Above"] = "above";
+    PopoverVerticalPlacement["Below"] = "below";
+})(PopoverVerticalPlacement || (PopoverVerticalPlacement = {}));
+var PopoverHorizontalPlacement;
+(function (PopoverHorizontalPlacement) {
+    PopoverHorizontalPlacement["Left"] = "left";
+    PopoverHorizontalPlacement["Center"] = "center";
+    PopoverHorizontalPlacement["Right"] = "right";
+})(PopoverHorizontalPlacement || (PopoverHorizontalPlacement = {}));
+var PopoverSidePlacement;
+(function (PopoverSidePlacement) {
+    PopoverSidePlacement["Left"] = "left";
+    PopoverSidePlacement["Right"] = "right";
+})(PopoverSidePlacement || (PopoverSidePlacement = {}));
+var PopoverEdgeAlignment;
+(function (PopoverEdgeAlignment) {
+    PopoverEdgeAlignment["Top"] = "top";
+    PopoverEdgeAlignment["Center"] = "center";
+    PopoverEdgeAlignment["Bottom"] = "bottom";
+})(PopoverEdgeAlignment || (PopoverEdgeAlignment = {}));
+var PopoverArrowAxisAlign;
+(function (PopoverArrowAxisAlign) {
+    PopoverArrowAxisAlign["Left"] = "left";
+    PopoverArrowAxisAlign["Right"] = "right";
+    PopoverArrowAxisAlign["Top"] = "top";
+    PopoverArrowAxisAlign["Bottom"] = "bottom";
+    PopoverArrowAxisAlign["Center"] = "center";
+})(PopoverArrowAxisAlign || (PopoverArrowAxisAlign = {}));
+
+const VIEWPORT_MARGIN = 16;
+const POPOVER_ARROW_HEIGHT = 8;
+const POPOVER_ARROW_WIDTH = POPOVER_ARROW_HEIGHT;
+const CENTER_PLACEMENTS = new Set([
+    PopoverPlacement.Top,
+    PopoverPlacement.Bottom,
+    PopoverPlacement.Left,
+    PopoverPlacement.Right,
+]);
+const OPPOSITE_PLACEMENT_SIDE = {
+    [PopoverPlacementSide.Top]: PopoverPlacementSide.Bottom,
+    [PopoverPlacementSide.Bottom]: PopoverPlacementSide.Top,
+    [PopoverPlacementSide.Left]: PopoverPlacementSide.Right,
+    [PopoverPlacementSide.Right]: PopoverPlacementSide.Left,
+};
+const VERTICAL_CENTER_PLACEMENT = {
+    [PopoverPlacementSide.Top]: PopoverPlacement.Top,
+    [PopoverPlacementSide.Bottom]: PopoverPlacement.Bottom,
+};
+const SIDE_CENTER_PLACEMENT = {
+    [PopoverSidePlacement.Left]: PopoverPlacement.Left,
+    [PopoverSidePlacement.Right]: PopoverPlacement.Right,
+};
+
+const getOppositePlacementSide = (side) => OPPOSITE_PLACEMENT_SIDE[side];
+const getPlacementSide = (placement) => placement.split("-")[0];
+const getPlacementAlign = (placement) => {
+    if (CENTER_PLACEMENTS.has(placement)) {
+        return PopoverPlacementAlign.Center;
+    }
+    if (placement.endsWith(`-${PopoverPlacementAlign.Start}`)) {
+        return PopoverPlacementAlign.Start;
+    }
+    return PopoverPlacementAlign.End;
+};
+const getArrowAxisAlign = (placement) => {
+    const side = getPlacementSide(placement);
+    const align = getPlacementAlign(placement);
+    if (side === PopoverPlacementSide.Top ||
+        side === PopoverPlacementSide.Bottom) {
+        if (align === PopoverPlacementAlign.Start) {
+            return PopoverArrowAxisAlign.Left;
+        }
+        if (align === PopoverPlacementAlign.End) {
+            return PopoverArrowAxisAlign.Right;
+        }
+        return PopoverArrowAxisAlign.Center;
+    }
+    if (align === PopoverPlacementAlign.Start) {
+        return PopoverArrowAxisAlign.Top;
+    }
+    if (align === PopoverPlacementAlign.End) {
+        return PopoverArrowAxisAlign.Bottom;
+    }
+    return PopoverArrowAxisAlign.Center;
+};
+
+const toHorizontalOrigin = (align) => {
+    if (align === PopoverPlacementAlign.Start) {
+        return PopoverHorizontalPlacement.Left;
+    }
+    if (align === PopoverPlacementAlign.End) {
+        return PopoverHorizontalPlacement.Right;
+    }
+    return PopoverHorizontalPlacement.Center;
+};
+const toVerticalOrigin = (align) => {
+    if (align === PopoverPlacementAlign.Start) {
+        return PopoverEdgeAlignment.Top;
+    }
+    if (align === PopoverPlacementAlign.End) {
+        return PopoverEdgeAlignment.Bottom;
+    }
+    return PopoverEdgeAlignment.Center;
+};
+const getOriginsForPlacement = (placement) => {
+    const side = getPlacementSide(placement);
+    const align = getPlacementAlign(placement);
+    if (side === PopoverPlacementSide.Top) {
+        const horizontal = toHorizontalOrigin(align);
+        return {
+            anchorOrigin: {
+                vertical: PopoverPlacementSide.Top,
+                horizontal,
+            },
+            transformOrigin: {
+                vertical: PopoverPlacementSide.Bottom,
+                horizontal,
+            },
+        };
+    }
+    if (side === PopoverPlacementSide.Bottom) {
+        const horizontal = toHorizontalOrigin(align);
+        return {
+            anchorOrigin: {
+                vertical: PopoverPlacementSide.Bottom,
+                horizontal,
+            },
+            transformOrigin: {
+                vertical: PopoverPlacementSide.Top,
+                horizontal,
+            },
+        };
+    }
+    if (side === PopoverPlacementSide.Left) {
+        const vertical = toVerticalOrigin(align);
+        return {
+            anchorOrigin: {
+                vertical,
+                horizontal: PopoverPlacementSide.Left,
+            },
+            transformOrigin: {
+                vertical,
+                horizontal: PopoverPlacementSide.Right,
+            },
+        };
+    }
+    const vertical = toVerticalOrigin(align);
+    return {
+        anchorOrigin: {
+            vertical,
+            horizontal: PopoverPlacementSide.Right,
+        },
+        transformOrigin: {
+            vertical,
+            horizontal: PopoverPlacementSide.Left,
+        },
+    };
+};
+const getOriginsForVerticalPlacement = (placement, horizontal = PopoverHorizontalPlacement.Center) => {
+    if (placement === PopoverVerticalPlacement.Above) {
+        return {
+            anchorOrigin: {
+                vertical: PopoverPlacementSide.Top,
+                horizontal,
+            },
+            transformOrigin: {
+                vertical: PopoverPlacementSide.Bottom,
+                horizontal,
+            },
+        };
+    }
+    return {
+        anchorOrigin: {
+            vertical: PopoverPlacementSide.Bottom,
+            horizontal,
+        },
+        transformOrigin: {
+            vertical: PopoverPlacementSide.Top,
+            horizontal,
+        },
+    };
+};
+const getVerticalPreference = (anchorOrigin, transformOrigin) => {
+    if (transformOrigin.vertical === PopoverPlacementSide.Bottom &&
+        anchorOrigin.vertical === PopoverPlacementSide.Top) {
+        return PopoverVerticalPlacement.Above;
+    }
+    if (transformOrigin.vertical === PopoverPlacementSide.Top &&
+        anchorOrigin.vertical === PopoverPlacementSide.Bottom) {
+        return PopoverVerticalPlacement.Below;
+    }
+    return PopoverVerticalPlacement.Above;
+};
+const getHorizontalPreference = (anchorOrigin, transformOrigin) => {
+    var _a, _b;
+    const anchor = (_a = anchorOrigin.horizontal) !== null && _a !== void 0 ? _a : PopoverHorizontalPlacement.Center;
+    const transform = (_b = transformOrigin.horizontal) !== null && _b !== void 0 ? _b : PopoverHorizontalPlacement.Center;
+    if (anchor === PopoverHorizontalPlacement.Left &&
+        transform === PopoverHorizontalPlacement.Left) {
+        return PopoverHorizontalPlacement.Left;
+    }
+    if (anchor === PopoverHorizontalPlacement.Right &&
+        transform === PopoverHorizontalPlacement.Right) {
+        return PopoverHorizontalPlacement.Right;
+    }
+    return PopoverHorizontalPlacement.Center;
+};
+const getSidePreference = (placement) => getPlacementSide(placement) === PopoverPlacementSide.Right
+    ? PopoverSidePlacement.Right
+    : PopoverSidePlacement.Left;
+const getEdgeAlignmentPreference = (placement) => {
+    const align = getPlacementAlign(placement);
+    if (align === PopoverPlacementAlign.Start) {
+        return PopoverEdgeAlignment.Top;
+    }
+    if (align === PopoverPlacementAlign.End) {
+        return PopoverEdgeAlignment.Bottom;
+    }
+    return PopoverEdgeAlignment.Center;
+};
+
+const getPopoverHorizontalBounds = ({ anchorLeft, anchorRight, anchorWidth, popoverWidth, horizontal, }) => {
+    switch (horizontal) {
+        case PopoverHorizontalPlacement.Left:
+            return { left: anchorLeft, right: anchorLeft + popoverWidth };
+        case PopoverHorizontalPlacement.Right:
+            return { left: anchorRight - popoverWidth, right: anchorRight };
+        default: {
+            const center = anchorLeft + anchorWidth / 2;
+            return {
+                left: center - popoverWidth / 2,
+                right: center + popoverWidth / 2,
+            };
+        }
+    }
+};
+const getPopoverVerticalBounds = ({ anchorTop, anchorBottom, anchorHeight, popoverHeight, vertical, }) => {
+    switch (vertical) {
+        case PopoverEdgeAlignment.Top:
+            return { top: anchorTop, bottom: anchorTop + popoverHeight };
+        case PopoverEdgeAlignment.Bottom:
+            return { top: anchorBottom - popoverHeight, bottom: anchorBottom };
+        default: {
+            const center = anchorTop + anchorHeight / 2;
+            return {
+                top: center - popoverHeight / 2,
+                bottom: center + popoverHeight / 2,
+            };
+        }
+    }
+};
+
+const resolveVerticalPlacement = ({ preferAbove, spaceAbove, spaceBelow, popoverHeight, hasArrow, margin = VIEWPORT_MARGIN, }) => {
+    const clearance = hasArrow ? POPOVER_ARROW_HEIGHT : 0;
+    const required = popoverHeight + clearance;
+    const aboveRoom = spaceAbove - margin;
+    const belowRoom = spaceBelow - margin;
+    const fitsAbove = aboveRoom >= required;
+    const fitsBelow = belowRoom >= required;
+    if (preferAbove && fitsAbove)
+        return PopoverVerticalPlacement.Above;
+    if (!preferAbove && fitsBelow)
+        return PopoverVerticalPlacement.Below;
+    if (fitsAbove && !fitsBelow)
+        return PopoverVerticalPlacement.Above;
+    if (fitsBelow && !fitsAbove)
+        return PopoverVerticalPlacement.Below;
+    return aboveRoom >= belowRoom
+        ? PopoverVerticalPlacement.Above
+        : PopoverVerticalPlacement.Below;
+};
+const resolveHorizontalPlacement = ({ preferHorizontal, anchorLeft, anchorRight, anchorWidth, popoverWidth, margin = VIEWPORT_MARGIN, viewportWidth, }) => {
+    const fits = (horizontal) => {
+        const { left, right } = getPopoverHorizontalBounds({
+            anchorLeft,
+            anchorRight,
+            anchorWidth,
+            popoverWidth,
+            horizontal,
+        });
+        return left >= margin && right <= viewportWidth - margin;
+    };
+    if (fits(preferHorizontal))
+        return preferHorizontal;
+    const alternatives = (() => {
+        if (preferHorizontal === PopoverHorizontalPlacement.Center) {
+            const { left } = getPopoverHorizontalBounds({
+                anchorLeft,
+                anchorRight,
+                anchorWidth,
+                popoverWidth,
+                horizontal: PopoverHorizontalPlacement.Center,
+            });
+            return left < margin
+                ? [PopoverHorizontalPlacement.Left, PopoverHorizontalPlacement.Right]
+                : [PopoverHorizontalPlacement.Right, PopoverHorizontalPlacement.Left];
+        }
+        if (preferHorizontal === PopoverHorizontalPlacement.Left) {
+            return [
+                PopoverHorizontalPlacement.Right,
+                PopoverHorizontalPlacement.Center,
+            ];
+        }
+        return [PopoverHorizontalPlacement.Left, PopoverHorizontalPlacement.Center];
+    })();
+    for (const horizontal of alternatives) {
+        if (fits(horizontal))
+            return horizontal;
+    }
+    const overflow = (horizontal) => {
+        const { left, right } = getPopoverHorizontalBounds({
+            anchorLeft,
+            anchorRight,
+            anchorWidth,
+            popoverWidth,
+            horizontal,
+        });
+        const leftOverflow = Math.max(0, margin - left);
+        const rightOverflow = Math.max(0, right - (viewportWidth - margin));
+        return leftOverflow + rightOverflow;
+    };
+    const all = [
+        PopoverHorizontalPlacement.Left,
+        PopoverHorizontalPlacement.Center,
+        PopoverHorizontalPlacement.Right,
+    ];
+    return all.reduce((best, current) => overflow(current) < overflow(best) ? current : best);
+};
+const resolveSidePlacement = ({ preferSide, spaceLeft, spaceRight, popoverWidth, hasArrow, margin = VIEWPORT_MARGIN, }) => {
+    const clearance = POPOVER_ARROW_WIDTH ;
+    const required = popoverWidth + clearance;
+    const leftRoom = spaceLeft - margin;
+    const rightRoom = spaceRight - margin;
+    const fitsLeft = leftRoom >= required;
+    const fitsRight = rightRoom >= required;
+    if (preferSide === PopoverSidePlacement.Left && fitsLeft) {
+        return PopoverSidePlacement.Left;
+    }
+    if (preferSide === PopoverSidePlacement.Right && fitsRight) {
+        return PopoverSidePlacement.Right;
+    }
+    if (fitsLeft && !fitsRight)
+        return PopoverSidePlacement.Left;
+    if (fitsRight && !fitsLeft)
+        return PopoverSidePlacement.Right;
+    return leftRoom >= rightRoom
+        ? PopoverSidePlacement.Left
+        : PopoverSidePlacement.Right;
+};
+const resolveEdgeAlignment = ({ preferAlignment, anchorTop, anchorBottom, anchorHeight, popoverHeight, margin = VIEWPORT_MARGIN, viewportHeight, }) => {
+    const fits = (vertical) => {
+        const { top, bottom } = getPopoverVerticalBounds({
+            anchorTop,
+            anchorBottom,
+            anchorHeight,
+            popoverHeight,
+            vertical,
+        });
+        return top >= margin && bottom <= viewportHeight - margin;
+    };
+    if (fits(preferAlignment))
+        return preferAlignment;
+    const alternatives = (() => {
+        if (preferAlignment === PopoverEdgeAlignment.Center) {
+            const { top } = getPopoverVerticalBounds({
+                anchorTop,
+                anchorBottom,
+                anchorHeight,
+                popoverHeight,
+                vertical: PopoverEdgeAlignment.Center,
+            });
+            return top < margin
+                ? [PopoverEdgeAlignment.Top, PopoverEdgeAlignment.Bottom]
+                : [PopoverEdgeAlignment.Bottom, PopoverEdgeAlignment.Top];
+        }
+        if (preferAlignment === PopoverEdgeAlignment.Top) {
+            return [PopoverEdgeAlignment.Bottom, PopoverEdgeAlignment.Center];
+        }
+        return [PopoverEdgeAlignment.Top, PopoverEdgeAlignment.Center];
+    })();
+    for (const vertical of alternatives) {
+        if (fits(vertical))
+            return vertical;
+    }
+    const overflow = (vertical) => {
+        const { top, bottom } = getPopoverVerticalBounds({
+            anchorTop,
+            anchorBottom,
+            anchorHeight,
+            popoverHeight,
+            vertical,
+        });
+        const topOverflow = Math.max(0, margin - top);
+        const bottomOverflow = Math.max(0, bottom - (viewportHeight - margin));
+        return topOverflow + bottomOverflow;
+    };
+    const all = [
+        PopoverEdgeAlignment.Top,
+        PopoverEdgeAlignment.Center,
+        PopoverEdgeAlignment.Bottom,
+    ];
+    return all.reduce((best, current) => overflow(current) < overflow(best) ? current : best);
+};
+
+const placementSideToSidePlacement = (side) => side === PopoverPlacementSide.Right
+    ? PopoverSidePlacement.Right
+    : PopoverSidePlacement.Left;
+const formatVerticalPlacement = (side, align) => {
+    if (align === PopoverPlacementAlign.Center) {
+        return VERTICAL_CENTER_PLACEMENT[side];
+    }
+    return `${side}-${align}`;
+};
+const formatSidePlacement = (side, align) => {
+    if (align === PopoverPlacementAlign.Center) {
+        return SIDE_CENTER_PLACEMENT[side];
+    }
+    return `${side}-${align}`;
+};
+const horizontalToPlacementAlign = (horizontal) => {
+    if (horizontal === PopoverHorizontalPlacement.Left) {
+        return PopoverPlacementAlign.Start;
+    }
+    if (horizontal === PopoverHorizontalPlacement.Right) {
+        return PopoverPlacementAlign.End;
+    }
+    return PopoverPlacementAlign.Center;
+};
+const edgeToPlacementAlign = (edge) => {
+    if (edge === PopoverEdgeAlignment.Top) {
+        return PopoverPlacementAlign.Start;
+    }
+    if (edge === PopoverEdgeAlignment.Bottom) {
+        return PopoverPlacementAlign.End;
+    }
+    return PopoverPlacementAlign.Center;
+};
+const placementForVerticalPlacement = (placement, verticalPlacement) => {
+    const side = getPlacementSide(placement);
+    if (side !== PopoverPlacementSide.Top &&
+        side !== PopoverPlacementSide.Bottom) {
+        return placement;
+    }
+    const align = getPlacementAlign(placement);
+    return verticalPlacement === PopoverVerticalPlacement.Above
+        ? formatVerticalPlacement(PopoverPlacementSide.Top, align)
+        : formatVerticalPlacement(PopoverPlacementSide.Bottom, align);
+};
+const placementForHorizontalPlacement = (placement, horizontal) => {
+    const side = getPlacementSide(placement);
+    if (side !== PopoverPlacementSide.Top &&
+        side !== PopoverPlacementSide.Bottom) {
+        return placement;
+    }
+    return formatVerticalPlacement(side, horizontalToPlacementAlign(horizontal));
+};
+const placementForSidePlacement = (placement, side) => {
+    const placementSide = getPlacementSide(placement);
+    if (placementSide !== PopoverPlacementSide.Left &&
+        placementSide !== PopoverPlacementSide.Right) {
+        return placement;
+    }
+    return formatSidePlacement(side, getPlacementAlign(placement));
+};
+const placementForEdgeAlignment = (placement, align) => {
+    const side = getPlacementSide(placement);
+    if (side !== PopoverPlacementSide.Left &&
+        side !== PopoverPlacementSide.Right) {
+        return placement;
+    }
+    return formatSidePlacement(placementSideToSidePlacement(side), edgeToPlacementAlign(align));
+};
+
+const getArrowEdgeSide = (placement) => getOppositePlacementSide(getPlacementSide(placement));
 const ARROW_SIZE = 16;
 const ARROW_HALF = ARROW_SIZE / 2;
-const ARROW_HEIGHT = 8;
+const ARROW_HEIGHT = POPOVER_ARROW_HEIGHT;
 const ARROW_OFFSET = 12;
 const popoverWidthBySize = {
     medium: "228px",
     large: "360px",
 };
-const getArrowPadding = (position) => {
-    if (!position)
+const popoverContentLayoutBySize = {
+    medium: { padding: "12px 16px", gap: "16px" },
+    large: { padding: "16px 20px", gap: "20px" },
+};
+const getPaperArrowOffset = (placement, anchorOrigin = {
+    vertical: PopoverPlacementSide.Top,
+}, transformOrigin = {
+    vertical: PopoverPlacementSide.Top,
+}) => {
+    if (!placement)
         return {};
-    if (position.startsWith("top"))
-        return { paddingTop: `${ARROW_HEIGHT}px` };
-    return { paddingBottom: `${ARROW_HEIGHT}px` };
+    const side = getPlacementSide(placement);
+    if (side === PopoverPlacementSide.Top &&
+        anchorOrigin.vertical === PopoverPlacementSide.Top &&
+        transformOrigin.vertical === PopoverPlacementSide.Bottom) {
+        return { marginTop: `-${ARROW_HEIGHT}px` };
+    }
+    if (side === PopoverPlacementSide.Bottom &&
+        anchorOrigin.vertical === PopoverPlacementSide.Bottom &&
+        transformOrigin.vertical === PopoverPlacementSide.Top) {
+        return { marginTop: `${ARROW_HEIGHT}px` };
+    }
+    if (side === PopoverPlacementSide.Left &&
+        anchorOrigin.horizontal === PopoverPlacementSide.Left &&
+        transformOrigin.horizontal === PopoverPlacementSide.Right) {
+        return { marginLeft: `-${ARROW_HEIGHT}px` };
+    }
+    if (side === PopoverPlacementSide.Right &&
+        anchorOrigin.horizontal === PopoverPlacementSide.Right &&
+        transformOrigin.horizontal === PopoverPlacementSide.Left) {
+        return { marginLeft: `${ARROW_HEIGHT}px` };
+    }
+    return {};
 };
-const getArrowStyles = (position, bg) => {
+const getArrowStyles = (placement, bg) => {
+    const edgeSide = getArrowEdgeSide(placement);
+    const align = getArrowAxisAlign(placement);
     const base = {
         position: "absolute",
-        width: `${ARROW_SIZE}px`,
-        height: `${ARROW_HEIGHT}px`,
         background: bg,
-        zIndex: 1,
+        zIndex: 2,
+        pointerEvents: "none",
     };
-    const horizontal = position.endsWith("center")
+    const horizontal = align === PopoverArrowAxisAlign.Center
         ? { left: `calc(50% - ${ARROW_HALF}px)` }
-        : position.endsWith("left")
+        : align === PopoverArrowAxisAlign.Left
             ? { left: `${ARROW_OFFSET}px` }
             : { right: `${ARROW_OFFSET}px` };
-    if (position.startsWith("bottom")) {
-        return Object.assign(Object.assign(Object.assign({}, base), horizontal), { bottom: 0, clipPath: `polygon(50% 100%, 0 0, 100% 0)` });
+    const vertical = align === PopoverArrowAxisAlign.Center
+        ? { top: `calc(50% - ${ARROW_HALF}px)` }
+        : align === PopoverArrowAxisAlign.Top
+            ? { top: `${ARROW_OFFSET}px` }
+            : { bottom: `${ARROW_OFFSET}px` };
+    if (edgeSide === PopoverPlacementSide.Bottom) {
+        return Object.assign(Object.assign(Object.assign({}, base), horizontal), { width: `${ARROW_SIZE}px`, height: `${ARROW_HEIGHT}px`, bottom: `-${ARROW_HEIGHT}px`, clipPath: `polygon(50% 100%, 0 0, 100% 0)` });
+    }
+    if (edgeSide === PopoverPlacementSide.Top) {
+        return Object.assign(Object.assign(Object.assign({}, base), horizontal), { width: `${ARROW_SIZE}px`, height: `${ARROW_HEIGHT}px`, top: `-${ARROW_HEIGHT}px`, clipPath: `polygon(0 100%, 50% 0, 100% 100%)` });
     }
-    return Object.assign(Object.assign(Object.assign({}, base), horizontal), { top: 0, clipPath: `polygon(0 100%, 50% 0, 100% 100%)` });
+    if (edgeSide === PopoverPlacementSide.Left) {
+        return Object.assign(Object.assign(Object.assign({}, base), vertical), { width: `${ARROW_HEIGHT}px`, height: `${ARROW_SIZE}px`, left: `-${ARROW_HEIGHT}px`, clipPath: `polygon(0 50%, 100% 0, 100% 100%)` });
+    }
+    return Object.assign(Object.assign(Object.assign({}, base), vertical), { width: `${ARROW_HEIGHT}px`, height: `${ARROW_SIZE}px`, right: `-${ARROW_HEIGHT}px`, clipPath: `polygon(100% 50%, 0 0, 0 100%)` });
 };
 const getPopoverPaperStyles = (theme, size = "medium") => {
     var _a;
-    return ({
+    const width = popoverWidthBySize[size];
+    return {
         boxSizing: "border-box",
-        width: popoverWidthBySize[size],
+        width,
+        minWidth: width,
+        maxWidth: width,
         background: (_a = theme.palette.vars) === null || _a === void 0 ? void 0 : _a.controlBackgroundDefault,
         borderRadius: "6px",
         boxShadow: "none",
@@ -13140,25 +13742,34 @@ const getPopoverPaperStyles = (theme, size = "medium") => {
             ? `drop-shadow(${darkModeCardFloating})`
             : `drop-shadow(${lightModeCardFloating})`,
         overflow: "visible",
-    });
+        overflowX: "visible",
+        overflowY: "visible",
+    };
+};
+const popoverSurfaceStyles = {
+    position: "relative",
+    boxSizing: "border-box",
+    width: "100%",
+    overflow: "visible",
 };
-const getPopoverContentStyles = (theme, featureHighlight = false) => {
+const getPopoverContentStyles = (theme, featureHighlight = false, size = "medium") => {
     var _a, _b;
-    return ({
+    const layout = popoverContentLayoutBySize[size];
+    return {
         boxSizing: "border-box",
         display: "flex",
         flexDirection: "row",
         justifyContent: "flex-end",
         alignItems: "flex-start",
-        gap: "16px",
-        padding: "12px 16px",
+        gap: layout.gap,
+        padding: layout.padding,
         width: "100%",
         background: (_a = theme.palette.vars) === null || _a === void 0 ? void 0 : _a.controlBackgroundDefault,
         border: featureHighlight
             ? `2px solid ${(_b = theme.palette.vars) === null || _b === void 0 ? void 0 : _b.controlBorderActive}`
             : "0px solid transparent",
         borderRadius: "6px",
-    });
+    };
 };
 const popoverColumnStyles = {
     display: "flex",
@@ -13210,10 +13821,15 @@ const popoverBodyStyles = (theme) => {
 const popoverActionsStyles = {
     display: "flex",
     flexDirection: "row",
+    flexWrap: "wrap",
     justifyContent: "flex-end",
     alignItems: "center",
     gap: "12px",
     width: "100%",
+    "& .MuiButton-root": {
+        flexShrink: 0,
+        whiteSpace: "nowrap",
+    },
 };
 const closeButtonStyles = {
     padding: "2px",
@@ -13221,21 +13837,174 @@ const closeButtonStyles = {
     flexShrink: 0,
 };
 
+const resolveAnchorRect = (anchorEl) => {
+    var _a, _b;
+    if (!anchorEl)
+        return null;
+    const resolved = typeof anchorEl === "function" ? anchorEl() : anchorEl;
+    return (_b = (_a = resolved === null || resolved === void 0 ? void 0 : resolved.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(resolved)) !== null && _b !== void 0 ? _b : null;
+};
+const resolvePlacementState = ({ anchorOrigin, transformOrigin, placement, }) => {
+    if (placement) {
+        const origins = getOriginsForPlacement(placement);
+        return {
+            anchorOrigin: origins.anchorOrigin,
+            transformOrigin: origins.transformOrigin,
+            placement,
+        };
+    }
+    return { anchorOrigin, transformOrigin, placement };
+};
+const isSameResolvedState = (current, next) => current.placement === next.placement &&
+    current.anchorOrigin.vertical === next.anchorOrigin.vertical &&
+    current.anchorOrigin.horizontal === next.anchorOrigin.horizontal &&
+    current.transformOrigin.vertical === next.transformOrigin.vertical &&
+    current.transformOrigin.horizontal === next.transformOrigin.horizontal;
+const getPreferenceOrigins = ({ anchorOrigin, transformOrigin, placement, }) => placement
+    ? getOriginsForPlacement(placement)
+    : { anchorOrigin, transformOrigin };
+const useResolvedPopoverPlacement = ({ open, anchorEl, anchorOrigin, transformOrigin, placement, }) => {
+    const paperRef = useRef(null);
+    const [resolved, setResolved] = useState(() => resolvePlacementState({ anchorOrigin, transformOrigin, placement }));
+    const updateResolved = (next) => {
+        setResolved((current) => isSameResolvedState(current, next) ? current : next);
+    };
+    useLayoutEffect(() => {
+        if (!open) {
+            updateResolved(resolvePlacementState({ anchorOrigin, transformOrigin, placement }));
+            return;
+        }
+        const anchorRect = resolveAnchorRect(anchorEl);
+        if (!anchorRect)
+            return;
+        const { anchorOrigin: preferenceAnchorOrigin, transformOrigin: preferenceTransformOrigin, } = getPreferenceOrigins({ anchorOrigin, transformOrigin, placement });
+        const measure = () => {
+            const paper = paperRef.current;
+            if (!paper)
+                return;
+            if (placement) {
+                const placementSide = getPlacementSide(placement);
+                if (placementSide === PopoverPlacementSide.Top ||
+                    placementSide === PopoverPlacementSide.Bottom) {
+                    const preferAbove = getVerticalPreference(preferenceAnchorOrigin, preferenceTransformOrigin) === "above";
+                    const preferHorizontal = getHorizontalPreference(preferenceAnchorOrigin, preferenceTransformOrigin);
+                    const verticalPlacement = resolveVerticalPlacement({
+                        preferAbove,
+                        spaceAbove: anchorRect.top,
+                        spaceBelow: window.innerHeight - anchorRect.bottom,
+                        popoverHeight: paper.offsetHeight,
+                        hasArrow: true,
+                    });
+                    const horizontalPlacement = resolveHorizontalPlacement({
+                        preferHorizontal,
+                        anchorLeft: anchorRect.left,
+                        anchorRight: anchorRect.right,
+                        anchorWidth: anchorRect.width,
+                        popoverWidth: paper.offsetWidth,
+                        viewportWidth: window.innerWidth,
+                    });
+                    const nextPlacement = placementForHorizontalPlacement(placementForVerticalPlacement(placement, verticalPlacement), horizontalPlacement);
+                    const origins = getOriginsForPlacement(nextPlacement);
+                    updateResolved({
+                        anchorOrigin: origins.anchorOrigin,
+                        transformOrigin: origins.transformOrigin,
+                        placement: nextPlacement,
+                    });
+                    return;
+                }
+                const preferSide = getSidePreference(placement);
+                const preferAlignment = getEdgeAlignmentPreference(placement);
+                const sidePlacement = resolveSidePlacement({
+                    preferSide,
+                    spaceLeft: anchorRect.left,
+                    spaceRight: window.innerWidth - anchorRect.right,
+                    popoverWidth: paper.offsetWidth,
+                    hasArrow: true,
+                });
+                const edgeAlignment = resolveEdgeAlignment({
+                    preferAlignment,
+                    anchorTop: anchorRect.top,
+                    anchorBottom: anchorRect.bottom,
+                    anchorHeight: anchorRect.height,
+                    popoverHeight: paper.offsetHeight,
+                    viewportHeight: window.innerHeight,
+                });
+                const nextPlacement = placementForEdgeAlignment(placementForSidePlacement(placement, sidePlacement), edgeAlignment);
+                const origins = getOriginsForPlacement(nextPlacement);
+                updateResolved({
+                    anchorOrigin: origins.anchorOrigin,
+                    transformOrigin: origins.transformOrigin,
+                    placement: nextPlacement,
+                });
+                return;
+            }
+            const preferAbove = getVerticalPreference(preferenceAnchorOrigin, preferenceTransformOrigin) === "above";
+            const verticalPlacement = resolveVerticalPlacement({
+                preferAbove,
+                spaceAbove: anchorRect.top,
+                spaceBelow: window.innerHeight - anchorRect.bottom,
+                popoverHeight: paper.offsetHeight,
+                hasArrow: false,
+            });
+            const horizontalPlacement = resolveHorizontalPlacement({
+                preferHorizontal: getHorizontalPreference(preferenceAnchorOrigin, preferenceTransformOrigin),
+                anchorLeft: anchorRect.left,
+                anchorRight: anchorRect.right,
+                anchorWidth: anchorRect.width,
+                popoverWidth: paper.offsetWidth,
+                viewportWidth: window.innerWidth,
+            });
+            const origins = getOriginsForVerticalPlacement(verticalPlacement, horizontalPlacement);
+            updateResolved({
+                anchorOrigin: origins.anchorOrigin,
+                transformOrigin: origins.transformOrigin,
+                placement,
+            });
+        };
+        const frame = requestAnimationFrame(measure);
+        return () => cancelAnimationFrame(frame);
+    }, [open, anchorEl, anchorOrigin, transformOrigin, placement]);
+    const paperOffsetSx = getPaperArrowOffset(resolved.placement, resolved.anchorOrigin, resolved.transformOrigin);
+    return {
+        paperRef,
+        anchorOrigin: resolved.anchorOrigin,
+        transformOrigin: resolved.transformOrigin,
+        placement: resolved.placement,
+        paperOffsetSx,
+    };
+};
+
+const DEFAULT_POPOVER_ANCHOR_ORIGIN = {
+    vertical: PopoverPlacementSide.Top,
+    horizontal: PopoverHorizontalPlacement.Left,
+};
+const DEFAULT_POPOVER_TRANSFORM_ORIGIN = {
+    vertical: PopoverPlacementSide.Top,
+    horizontal: PopoverHorizontalPlacement.Left,
+};
 const Popover = (_a) => {
-    var { title, body, actions, icon, showCloseButton = false, featureHighlight = false, size = "medium", arrowPosition, paperSx, onClose, children } = _a, props = __rest(_a, ["title", "body", "actions", "icon", "showCloseButton", "featureHighlight", "size", "arrowPosition", "paperSx", "onClose", "children"]);
+    var { title, body, actions, icon, showCloseButton = false, featureHighlight = false, size = "medium", placement, paperSx, onClose, children, anchorOrigin = DEFAULT_POPOVER_ANCHOR_ORIGIN, transformOrigin = DEFAULT_POPOVER_TRANSFORM_ORIGIN, open = false, disableScrollLock = true } = _a, props = __rest(_a, ["title", "body", "actions", "icon", "showCloseButton", "featureHighlight", "size", "placement", "paperSx", "onClose", "children", "anchorOrigin", "transformOrigin", "open", "disableScrollLock"]);
     const theme = useTheme();
+    const { paperRef, anchorOrigin: resolvedAnchorOrigin, transformOrigin: resolvedTransformOrigin, placement: resolvedPlacement, paperOffsetSx, } = useResolvedPopoverPlacement({
+        open,
+        anchorEl: props.anchorEl,
+        anchorOrigin,
+        transformOrigin,
+        placement,
+    });
     const bg = featureHighlight
         ? theme.palette.vars.controlBorderActive
         : theme.palette.vars.controlBackgroundDefault;
-    return (jsxs(Popover$1, Object.assign({}, props, { onClose: onClose, slotProps: {
+    return (jsx(Popover$1, Object.assign({}, props, { open: open, disableScrollLock: disableScrollLock, marginThreshold: null, anchorOrigin: resolvedAnchorOrigin, transformOrigin: resolvedTransformOrigin, onClose: onClose, slotProps: {
             paper: {
+                ref: paperRef,
                 sx: [
                     getPopoverPaperStyles(theme, size),
-                    getArrowPadding(arrowPosition),
+                    paperOffsetSx,
                     ...(Array.isArray(paperSx) ? paperSx : paperSx ? [paperSx] : []),
                 ],
             },
-        }, children: [arrowPosition && (jsx(Box, { "aria-hidden": true, "data-slot": "popover-arrow", sx: getArrowStyles(arrowPosition, bg) })), children !== null && children !== void 0 ? children : (jsxs(Box, { sx: getPopoverContentStyles(theme, featureHighlight), children: [icon && jsx(Box, { sx: popoverIconStyles, children: icon }), jsxs(Box, { sx: popoverColumnStyles, children: [(title || body || showCloseButton) && (jsxs(Box, { sx: popoverTextStyles, children: [(title || showCloseButton) && (jsxs(Box, { sx: popoverHeaderStyles, children: [title && (jsx(Typography, { component: "div", sx: popoverTitleStyles(theme), children: title })), showCloseButton && (jsx(IconButton, { "aria-label": "Close popover", size: "small", onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose({}, "escapeKeyDown"), sx: closeButtonStyles, children: jsx(CloseIcon, { fontSize: "small" }) }))] })), body && (jsx(Typography, { component: "div", sx: popoverBodyStyles(theme), children: body }))] })), actions && jsx(Box, { sx: popoverActionsStyles, children: actions })] })] }))] })));
+        }, children: jsxs(Box, { sx: popoverSurfaceStyles, children: [resolvedPlacement && (jsx(Box, { "aria-hidden": true, "data-slot": "popover-arrow", sx: getArrowStyles(resolvedPlacement, bg) })), children !== null && children !== void 0 ? children : (jsxs(Box, { sx: getPopoverContentStyles(theme, featureHighlight, size), children: [icon && jsx(Box, { sx: popoverIconStyles, children: icon }), jsxs(Box, { sx: popoverColumnStyles, children: [(title || body || showCloseButton) && (jsxs(Box, { sx: popoverTextStyles, children: [(title || showCloseButton) && (jsxs(Box, { sx: popoverHeaderStyles, children: [title && (jsx(Typography, { component: "div", sx: popoverTitleStyles(theme), children: title })), showCloseButton && (jsx(IconButton, { "aria-label": "Close popover", size: "small", onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose({}, "escapeKeyDown"), sx: closeButtonStyles, children: jsx(CloseIcon, { fontSize: "small" }) }))] })), body && (jsx(Typography, { component: "div", sx: popoverBodyStyles(theme), children: body }))] })), actions && jsx(Box, { sx: popoverActionsStyles, children: actions })] })] }))] }) })));
 };
 
 const getRadioButtonStyles = (theme) => ({
@@ -16450,5 +17219,5 @@ const gradientsPalette = {
     },
 };
 
-export { Accordion, StyledAccordionSummary as AccordionSummary, ActionsDialog, ActivityTimeline, ActivityTimelineStepStatus, AddDomain, AddRepos, AnchorLinkMenu, AttackPathAnalysis, AttackPathAnalysisWalkThrough, Avatar, AvatarGroup, Backdrop, Badge, Banner, BarChart, BarGraph, BasePage, Breadcrumbs, Button, Card, CardActionArea, CardActions, CardContent, CardDescription, CardHeader, CardSubheader, Celebration, ChartType, ChartTypeComponents, ChartWidget, Checkbox, CiCd, Cloud, CloudSimple, CodeBlock, CopyButton, CreateTableInstance, Dashboard, Data, DatePicker, DateRangePicker, DateTimePicker, Dialog, DialogActions, DialogContent, DialogContentText, DialogSubtitle, DialogTitle, Divider, DonutChart, EMPTY_FUNCTION, EmptyData, EmptyState, FiltersBar, FiltersDrawer, FloatingButton, Footer, GaugeChart, GeneralSize, Git, GitSimple, GlobalSearchInput, Header, HorizontalBarChart, Icon, IconPosition, index as Icons, IndicatorBadge, Info, InputField, KeyValuePairs, Kubernetes, LabelAndChildrenTooltipContent, Layout, LineChart, Link, LinkColorEnum, LinkType, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, LoadingErrorState, LoadingStates, Menu, MenuItem, StyledMenuSubheader as MenuSubheader, Message, Navigation, NavigationDrawer, NavigationSubNavigation, Negative, NestedMenu, NestedMenuListbox, NoData, OS_LIGHT_COLORS, OverflowTooltip, PageTitle, Pagination, PathDisplay, PickerItem, Popover, Positive, RadioButton, RadioGroup, Recon, RemainingTags, SEVERITY_VALUE, ScrollArea, SearchInput, Select, SelectNode, SelectNodeListItem, Sent, Severity, SeverityBadge, SeverityBadgeLabel, SeverityBar, Shield, SideDrawer, Skeleton, Slider, SpiderChart, Spinner, StaticDatePicker, StaticDateTimePicker, StepperModal, StepperPanel, Success, Tab, Table, Tabs, Tag, TagAvatarSize, TagBackgroundColorVariants, TagStatus, Tags, ThemeMode, ThemeProvider, TimePicker, Toast, Toaster, Toggle, Tooltip, TooltipSize, Upload, ViewSwitcher, Warning, Widget, agentcyBlue, agentcyDarkBlue, agentcyYellow, augmentTreeData, blue100, blue200, blue300, blue400, blue50, blue500, blue600, blue700, blue800, blue900, blueAlpha10, blueAlpha40, blueFocusRingStrong, blueFocusRingWeak, bluePalette, brandColors, capitalize, darkModeCardFloating, darkModeCardLifted, darkModeCardRaised, darkModeCardSubtle, darkModeFooterBottom, darkModeSideDrawerLeft, darkModeSideDrawerRight, darkVars, deepCopyTree, flattenSelectTree, flattenSelectTreeWithSearch, flattenSelectTreeWithoutSearch, formatNodeValue, getAllSelectedLeaves, getAllSelectedParents, getChildrenOfTopLevelNode, getColorBySeverity, getLeafCounts, getTagStyle, gradientStopColors, gradientsPalette, green10, green100, green200, green300, green40, green400, green50, green500, green600, green700, green800, green900, greenPalette, grey0, grey100, grey200, grey300, grey400, grey50, grey500, grey600, grey700, grey800, grey900, greyAlpha10, greyAlpha40, greyPalette, illustrationGradientEnd, illustrationGradientStart, illustrationInfoGradientEnd, illustrationInfoGradientMiddle, illustrationInfoGradientStart, illustrationNegativeGradientStart, illustrationPositiveGradientEnd, illustrationPositiveGradientMiddle, illustrationPositiveGradientStart, illustrationRing, illustrationShell, illustrationStroke, illustrationSurface, illustrationSurfaceSubtle, illustrationWarningGradientEnd, illustrationWarningGradientStart, iocVars, isLeaf, lavender10, lavender100, lavender200, lavender300, lavender400, lavender50, lavender500, lavender600, lavender700, lavender800, lavender900, lavenderPalette, lightAlphaOrange10, lightAlphaOrange40, lightBlue100, lightBlue200, lightBlue300, lightBlue400, lightBlue50, lightBlue500, lightBlue600, lightBlue700, lightBlue800, lightBlue900, lightBlueAlpha10, lightBlueAlpha40, lightBluePalette, lightModeCardFloating, lightModeCardLifted, lightModeCardRaised, lightModeCardSubtle, lightModeFooterBottom, lightModeSideDrawer, lightModeSideDrawerLeft, lightModeSideDrawerRight, lightOrange100, lightOrange200, lightOrange300, lightOrange400, lightOrange50, lightOrange500, lightOrange600, lightOrange700, lightOrange800, lightOrange900, lightOrangePalette, lightVars, lime10, lime100, lime200, lime300, lime400, lime50, lime500, lime600, lime700, lime800, lime900, limePalette, mergeNodeChildrenValueToText, night10, night100, night200, night300, night400, night50, night500, night600, night700, night800, night900, nightPalette, normalizeSeverity, orange100, orange200, orange300, orange400, orange50, orange500, orange600, orange700, orange800, orange900, orangeAlpha10, orangeAlpha40, orangePalette, outshiftBlue, outshiftLogoDark, outshiftLogoGreen, outshiftLogoLightBlue, outshiftLogoLightOrange, outshiftLogoOrange, outshiftLogoWhite, outshiftMidnightBlue, outshiftOrange, pink10, pink100, pink200, pink300, pink400, pink50, pink500, pink600, pink700, pink800, pink900, pinkPalette, purple100, purple200, purple300, purple400, purple50, purple500, purple600, purple700, purple800, purple900, purpleAlpha10, purpleAlpha40, purplePalette, red100, red200, red300, red400, red50, red500, red600, red700, red800, red900, redAlpha10, redAlpha40, redPalette, selectTagStyle, setSelectedMainSkillCategories, sortBySeverity, sunset10, sunset100, sunset200, sunset300, sunset400, sunset50, sunset500, sunset600, sunset700, sunset800, sunset900, sunsetPalette, surfaceDark100, surfaceDark200, surfaceDark300, surfaceDark400, surfaceDark50, surfaceDark500, surfaceDark600, surfaceDark700, surfaceDark800, surfaceDark800Alpha40, surfaceDark900, surfaceDark900Alpha10, surfaceDark900Alpha40, surfaceDarkPalette, surfaceLight100, surfaceLight200, surfaceLight300, surfaceLight400, surfaceLight50, surfaceLight500, surfaceLight50Alpha40, surfaceLight600, surfaceLight700, surfaceLight800, surfaceLight800Alpha40, surfaceLight900, surfaceLight900Alpha10, surfaceLight900Alpha40, surfaceLightPalette, teal10, teal100, teal200, teal300, teal400, teal50, teal500, teal600, teal700, teal800, teal900, tealPalette, toast, upwardsPush, useNestedMenu, useThemeMode, yellow100, yellow200, yellow300, yellow400, yellow50, yellow500, yellow600, yellow700, yellow800, yellow900, yellowAlpha10, yellowAlpha40, yellowPalette };
+export { Accordion, StyledAccordionSummary as AccordionSummary, ActionsDialog, ActivityTimeline, ActivityTimelineStepStatus, AddDomain, AddRepos, AnchorLinkMenu, AttackPathAnalysis, AttackPathAnalysisWalkThrough, Avatar, AvatarGroup, Backdrop, Badge, Banner, BarChart, BarGraph, BasePage, Breadcrumbs, Button, Card, CardActionArea, CardActions, CardContent, CardDescription, CardHeader, CardSubheader, Celebration, ChartType, ChartTypeComponents, ChartWidget, Checkbox, CiCd, Cloud, CloudSimple, CodeBlock, CopyButton, CreateTableInstance, Dashboard, Data, DatePicker, DateRangePicker, DateTimePicker, Dialog, DialogActions, DialogContent, DialogContentText, DialogSubtitle, DialogTitle, Divider, DonutChart, EMPTY_FUNCTION, EmptyData, EmptyState, FiltersBar, FiltersDrawer, FloatingButton, Footer, GaugeChart, GeneralSize, Git, GitSimple, GlobalSearchInput, Header, HorizontalBarChart, Icon, IconPosition, index as Icons, IndicatorBadge, Info, InputField, KeyValuePairs, Kubernetes, LabelAndChildrenTooltipContent, Layout, LineChart, Link, LinkColorEnum, LinkType, List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader, LoadingErrorState, LoadingStates, Menu, MenuItem, StyledMenuSubheader as MenuSubheader, Message, Navigation, NavigationDrawer, NavigationSubNavigation, Negative, NestedMenu, NestedMenuListbox, NoData, OS_LIGHT_COLORS, OverflowTooltip, POPOVER_PLACEMENTS, PageTitle, Pagination, PathDisplay, PickerItem, Popover, PopoverPlacement, PopoverPlacementAlign, PopoverPlacementSide, Positive, RadioButton, RadioGroup, Recon, RemainingTags, SEVERITY_VALUE, ScrollArea, SearchInput, Select, SelectNode, SelectNodeListItem, Sent, Severity, SeverityBadge, SeverityBadgeLabel, SeverityBar, Shield, SideDrawer, Skeleton, Slider, SpiderChart, Spinner, StaticDatePicker, StaticDateTimePicker, StepperModal, StepperPanel, Success, Tab, Table, Tabs, Tag, TagAvatarSize, TagBackgroundColorVariants, TagStatus, Tags, ThemeMode, ThemeProvider, TimePicker, Toast, Toaster, Toggle, Tooltip, TooltipSize, Upload, ViewSwitcher, Warning, Widget, agentcyBlue, agentcyDarkBlue, agentcyYellow, augmentTreeData, blue100, blue200, blue300, blue400, blue50, blue500, blue600, blue700, blue800, blue900, blueAlpha10, blueAlpha40, blueFocusRingStrong, blueFocusRingWeak, bluePalette, brandColors, capitalize, darkModeCardFloating, darkModeCardLifted, darkModeCardRaised, darkModeCardSubtle, darkModeFooterBottom, darkModeSideDrawerLeft, darkModeSideDrawerRight, darkVars, deepCopyTree, flattenSelectTree, flattenSelectTreeWithSearch, flattenSelectTreeWithoutSearch, formatNodeValue, getAllSelectedLeaves, getAllSelectedParents, getChildrenOfTopLevelNode, getColorBySeverity, getLeafCounts, getTagStyle, gradientStopColors, gradientsPalette, green10, green100, green200, green300, green40, green400, green50, green500, green600, green700, green800, green900, greenPalette, grey0, grey100, grey200, grey300, grey400, grey50, grey500, grey600, grey700, grey800, grey900, greyAlpha10, greyAlpha40, greyPalette, illustrationGradientEnd, illustrationGradientStart, illustrationInfoGradientEnd, illustrationInfoGradientMiddle, illustrationInfoGradientStart, illustrationNegativeGradientStart, illustrationPositiveGradientEnd, illustrationPositiveGradientMiddle, illustrationPositiveGradientStart, illustrationRing, illustrationShell, illustrationStroke, illustrationSurface, illustrationSurfaceSubtle, illustrationWarningGradientEnd, illustrationWarningGradientStart, iocVars, isLeaf, lavender10, lavender100, lavender200, lavender300, lavender400, lavender50, lavender500, lavender600, lavender700, lavender800, lavender900, lavenderPalette, lightAlphaOrange10, lightAlphaOrange40, lightBlue100, lightBlue200, lightBlue300, lightBlue400, lightBlue50, lightBlue500, lightBlue600, lightBlue700, lightBlue800, lightBlue900, lightBlueAlpha10, lightBlueAlpha40, lightBluePalette, lightModeCardFloating, lightModeCardLifted, lightModeCardRaised, lightModeCardSubtle, lightModeFooterBottom, lightModeSideDrawer, lightModeSideDrawerLeft, lightModeSideDrawerRight, lightOrange100, lightOrange200, lightOrange300, lightOrange400, lightOrange50, lightOrange500, lightOrange600, lightOrange700, lightOrange800, lightOrange900, lightOrangePalette, lightVars, lime10, lime100, lime200, lime300, lime400, lime50, lime500, lime600, lime700, lime800, lime900, limePalette, mergeNodeChildrenValueToText, night10, night100, night200, night300, night400, night50, night500, night600, night700, night800, night900, nightPalette, normalizeSeverity, orange100, orange200, orange300, orange400, orange50, orange500, orange600, orange700, orange800, orange900, orangeAlpha10, orangeAlpha40, orangePalette, outshiftBlue, outshiftLogoDark, outshiftLogoGreen, outshiftLogoLightBlue, outshiftLogoLightOrange, outshiftLogoOrange, outshiftLogoWhite, outshiftMidnightBlue, outshiftOrange, pink10, pink100, pink200, pink300, pink400, pink50, pink500, pink600, pink700, pink800, pink900, pinkPalette, purple100, purple200, purple300, purple400, purple50, purple500, purple600, purple700, purple800, purple900, purpleAlpha10, purpleAlpha40, purplePalette, red100, red200, red300, red400, red50, red500, red600, red700, red800, red900, redAlpha10, redAlpha40, redPalette, selectTagStyle, setSelectedMainSkillCategories, sortBySeverity, sunset10, sunset100, sunset200, sunset300, sunset400, sunset50, sunset500, sunset600, sunset700, sunset800, sunset900, sunsetPalette, surfaceDark100, surfaceDark200, surfaceDark300, surfaceDark400, surfaceDark50, surfaceDark500, surfaceDark600, surfaceDark700, surfaceDark800, surfaceDark800Alpha40, surfaceDark900, surfaceDark900Alpha10, surfaceDark900Alpha40, surfaceDarkPalette, surfaceLight100, surfaceLight200, surfaceLight300, surfaceLight400, surfaceLight50, surfaceLight500, surfaceLight50Alpha40, surfaceLight600, surfaceLight700, surfaceLight800, surfaceLight800Alpha40, surfaceLight900, surfaceLight900Alpha10, surfaceLight900Alpha40, surfaceLightPalette, teal10, teal100, teal200, teal300, teal400, teal50, teal500, teal600, teal700, teal800, teal900, tealPalette, toast, upwardsPush, useNestedMenu, useThemeMode, yellow100, yellow200, yellow300, yellow400, yellow50, yellow500, yellow600, yellow700, yellow800, yellow900, yellowAlpha10, yellowAlpha40, yellowPalette };
 //# sourceMappingURL=index.esm.js.map