@open-ui-kit/core 2.0.4 → 2.2.0

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]: {
@@ -10456,7 +10498,7 @@ const shadows$1 = [
     darkModeFooterBottom,
     ...Array(17).fill("none"),
 ];
-const palette$1 = {
+const palette$2 = {
     mode: "dark",
     primary: bluePalette,
     secondary: Object.assign(Object.assign({}, surfaceDarkPalette), { main: surfaceDarkPalette[500] }),
@@ -10486,7 +10528,7 @@ const palette$1 = {
 };
 const theme$1 = createTheme({
     breakpoints,
-    palette: palette$1,
+    palette: palette$2,
     typography,
     mixins: commonMixins,
 });
@@ -10523,6 +10565,519 @@ const darkThemeOptions = {
 };
 const darkTheme = createTheme(theme$1, darkThemeOptions);
 
+const iocSurface50 = "rgba(255, 255, 255, 0.02)";
+const iocSurface100 = "rgba(255, 255, 255, 0.035)";
+const iocSurface200 = "rgba(255, 255, 255, 0.06)";
+const iocSurface300 = "rgba(255, 255, 255, 0.09)";
+const iocSurface400 = "rgba(255, 255, 255, 0.12)";
+const iocSurface500 = "rgba(255, 255, 255, 0.16)";
+const iocSurfacePalette = {
+    50: iocSurface50,
+    100: iocSurface100,
+    200: iocSurface200,
+    300: iocSurface300,
+    400: iocSurface400,
+    500: iocSurface500,
+};
+const iocBackdrop900 = "#020508";
+const iocBackdrop800 = "#03080F";
+const iocBackdrop700 = "#050C18";
+const iocBackdrop600 = "#07111F";
+const iocBackdrop500 = "#091428";
+const iocBackdropPalette = {
+    900: iocBackdrop900,
+    800: iocBackdrop800,
+    700: iocBackdrop700,
+    600: iocBackdrop600,
+    500: iocBackdrop500};
+const iocTeal50 = "#E6F9FE";
+const iocTeal100 = "#B3EEFB";
+const iocTeal200 = "#7DE0F8";
+const iocTeal300 = "#40D0F4";
+const iocTeal400 = "#1AC6F0";
+const iocTeal500 = "#00BCEB";
+const iocTeal600 = "#00A0D1";
+const iocTeal700 = "#0082AD";
+const iocTeal800 = "#006B8A";
+const iocTeal900 = "#003D54";
+const iocTealAlpha40 = "rgba(0, 188, 235, 0.40)";
+const iocTealAlpha20 = "rgba(0, 188, 235, 0.20)";
+const iocTealAlpha10 = "rgba(0, 188, 235, 0.10)";
+const iocTealAlpha05 = "rgba(0, 188, 235, 0.05)";
+const iocTealPalette = {
+    50: iocTeal50,
+    100: iocTeal100,
+    200: iocTeal200,
+    300: iocTeal300,
+    400: iocTeal400,
+    500: iocTeal500,
+    600: iocTeal600,
+    700: iocTeal700,
+    800: iocTeal800,
+    900: iocTeal900,
+    alpha40: iocTealAlpha40,
+    alpha20: iocTealAlpha20,
+    alpha10: iocTealAlpha10,
+    alpha05: iocTealAlpha05,
+};
+const iocBlue500 = "#2B82F6";
+const iocBlue400 = "#3B92FF";
+const iocBlue600 = "#1E6FD9";
+const iocBluePalette = {
+    400: iocBlue400,
+    500: iocBlue500,
+    600: iocBlue600,
+};
+const iocBorder100 = "rgba(255, 255, 255, 0.05)";
+const iocBorder200 = "rgba(255, 255, 255, 0.07)";
+const iocBorder300 = "rgba(255, 255, 255, 0.09)";
+const iocBorder500 = "rgba(255, 255, 255, 0.18)";
+const iocBorderPalette = {
+    100: iocBorder100,
+    200: iocBorder200,
+    300: iocBorder300,
+    500: iocBorder500,
+};
+const iocTextPrimary = "rgba(255, 255, 255, 0.94)";
+const iocTextSecondary = "rgba(255, 255, 255, 0.55)";
+const iocTextTertiary = "rgba(255, 255, 255, 0.32)";
+const iocTextDisabled = "rgba(255, 255, 255, 0.22)";
+const iocPageBackground = `
+  radial-gradient(ellipse 130% 90% at -15% -5%, rgba(0, 70, 160, 0.50) 0%, rgba(0, 40, 100, 0.15) 45%, transparent 65%),
+  radial-gradient(ellipse  80% 60% at 60% 110%, rgba(0, 30,  80, 0.30) 0%, transparent 60%),
+  linear-gradient(160deg, #07111F 0%, #050C18 40%, #030810 100%)
+`;
+const iocShadowSm = "0 2px 8px rgba(0, 0, 0, 0.30)";
+const iocShadowMd = "0 4px 16px rgba(0, 0, 0, 0.40)";
+const iocShadowLg = "0 8px 32px rgba(0, 0, 0, 0.50)";
+`linear-gradient(180deg, ${iocTealPalette[400]} 0%, ${iocTealPalette[600]} 100%)`;
+`linear-gradient(180deg, ${iocBluePalette[500]} 0%, ${iocBluePalette[600]} 100%)`;
+`linear-gradient(180deg, ${redPalette[400]} 0%, ${redPalette[500]} 100%)`;
+`linear-gradient(135deg, ${iocTealPalette[400]} 0%, ${iocBluePalette[500]} 100%)`;
+`0 0 6px ${iocTealPalette[500]}CC, 0 0 16px ${iocTealPalette[500]}77, 0 0 28px ${iocTealPalette[500]}33`;
+`0 0 6px ${iocBluePalette[500]}CC, 0 0 16px ${iocBluePalette[500]}77, 0 0 28px ${iocBluePalette[500]}33`;
+`0 0 6px ${greenPalette[500]}CC, 0 0 16px ${greenPalette[500]}77, 0 0 28px ${greenPalette[500]}33`;
+`0 0 6px ${lightOrangePalette[500]}CC, 0 0 16px ${lightOrangePalette[500]}77, 0 0 28px ${lightOrangePalette[500]}33`;
+`0 0 6px ${redPalette[500]}CC, 0 0 16px ${redPalette[500]}77, 0 0 28px ${redPalette[500]}33`;
+`0 0 6px ${orangePalette[500]}CC, 0 0 16px ${orangePalette[500]}77, 0 0 28px ${orangePalette[500]}33`;
+`0 0 6px ${lightBluePalette[500]}CC, 0 0 16px ${lightBluePalette[500]}77, 0 0 28px ${lightBluePalette[500]}33`;
+`0 0 6px ${iocTealPalette[600]}99, 0 0 14px ${iocTealPalette[600]}44`;
+
+const iocVars = {
+    brandOrange: lightOrangePalette[500],
+    brandOrangeDark: lightOrangePalette[900],
+    brandBlue: iocTealPalette[500],
+    brandMidnightBlue: iocBackdropPalette[500],
+    agentcyYellow: lightOrangePalette[500],
+    agentcyBlue: iocTealPalette[500],
+    agentcyDarkBlue: iocBackdropPalette[900],
+    baseTextDark: iocBackdropPalette[900],
+    baseTextStrong: iocTextPrimary,
+    baseTextDefault: iocTextSecondary,
+    baseTextMedium: iocTextTertiary,
+    baseTextWeak: iocTextDisabled,
+    baseTextInverse: iocBackdropPalette[900],
+    baseTextDisabled: iocTextDisabled,
+    baseBackgroundStrong: iocBackdropPalette[600],
+    baseBackgroundMedium: iocSurfacePalette[200],
+    baseBackgroundWeak: iocSurfacePalette[100],
+    baseBackgroundHover: iocSurfacePalette[300],
+    baseBorderDefault: iocBorderPalette[300],
+    baseBorderStrong: iocBorderPalette[500],
+    baseBorderMedium: iocBorderPalette[200],
+    baseBorderWeak: iocBorderPalette[100],
+    brandIconPrimaryDefault: iocTealPalette[500],
+    brandIconPrimaryWeak: iocTealPalette[200],
+    brandIconPrimaryMedium: iocTealPalette[400],
+    brandIconPrimaryStrong: iocTealPalette[700],
+    brandIconSecondaryDefault: iocBluePalette[500],
+    brandIconSecondaryWeak: iocBluePalette[400],
+    brandIconSecondaryMedium: iocBluePalette[500],
+    brandIconTertiaryDefault: lightOrangePalette[500],
+    brandIconTertiaryWeak: lightOrangePalette[200],
+    brandIconTertiaryMedium: lightOrangePalette[400],
+    brandBackgroundPrimaryDefault: iocTealPalette[500],
+    brandBackgroundPrimaryWeak: iocTealPalette.alpha10,
+    brandBackgroundPrimaryMedium: iocTealPalette.alpha20,
+    brandBackgroundSecondaryDefault: iocBluePalette[500],
+    brandLogoPrimary: iocTealPalette[400],
+    brandLogoSecondary: iocTextPrimary,
+    brandTextPrimary: iocTealPalette[400],
+    brandTextSecondary: iocTextPrimary,
+    brandTextTertiary: lightOrangePalette[500],
+    controlBackgroundDefault: iocSurfacePalette[200],
+    controlBackgroundDisabled: iocSurfacePalette[50],
+    controlBackgroundWeak: iocSurfacePalette[300],
+    controlBackgroundMedium: iocSurfacePalette[500],
+    controlBorderDefault: iocBorderPalette[300],
+    controlBorderStrong: iocBorderPalette[500],
+    controlBorderMedium: iocBorderPalette[200],
+    controlBorderWeak: iocBorderPalette[100],
+    controlBorderHover: iocTealPalette[500],
+    controlBorderActive: iocTealPalette[600],
+    controlBorderNegative: redPalette[500],
+    controlBorderDisabled: iocBorderPalette[100],
+    controlIconDefault: iocTextSecondary,
+    controlIconStrong: iocTextPrimary,
+    controlIconMedium: iocTextTertiary,
+    controlIconWeak: iocTextDisabled,
+    controlIconHover: iocTealPalette[400],
+    controlIconActive: iocTealPalette[500],
+    controlIconDisabled: iocTextDisabled,
+    controlFocusRingWeak: iocTealPalette.alpha10,
+    controlFocusRingStrong: iocTealPalette.alpha20,
+    interactivePrimaryDefaultDefault: iocTealPalette[500],
+    interactivePrimaryDefaultHover: iocTealPalette[400],
+    interactivePrimaryDefaultActive: iocTealPalette[600],
+    interactivePrimaryDefaultDisabled: iocTealPalette.alpha40,
+    interactivePrimaryWeakDefault: iocTealPalette.alpha10,
+    interactivePrimaryWeakHover: iocTealPalette.alpha20,
+    interactivePrimaryWeakActive: iocTealPalette.alpha40,
+    interactivePrimaryWeakDisabled: iocTealPalette.alpha05,
+    interactiveSecondaryDefaultDefault: iocBluePalette[500],
+    interactiveSecondaryDefaultHover: iocBluePalette[400],
+    interactiveSecondaryDefaultActive: iocBluePalette[600],
+    interactiveSecondaryDefaultDisabled: "rgba(43,130,246,0.40)",
+    interactiveSecondaryWeakDefault: iocSurfacePalette[200],
+    interactiveSecondaryWeakHover: iocSurfacePalette[300],
+    interactiveSecondaryWeakActive: iocSurfacePalette[400],
+    interactiveSecondaryWeakDisabled: iocSurfacePalette[100],
+    interactiveInverseBackgroundDefault: "rgba(255,255,255,0.90)",
+    interactiveInverseBackgroundHover: "rgba(255,255,255,0.95)",
+    interactiveInverseBackgroundActive: "rgba(255,255,255,0.85)",
+    interactiveInverseBackgroundDisabled: "rgba(255,255,255,0.40)",
+    interactiveInverseTextDefault: iocBackdropPalette[900],
+    interactiveInverseTextHover: iocBackdropPalette[700],
+    interactiveInverseTextActive: iocBackdropPalette[800],
+    interactiveInverseTextDisabled: "rgba(0,0,0,0.30)",
+    interactiveTextInDefault: iocTextPrimary,
+    interactiveTextInHover: iocTextPrimary,
+    interactiveTextInActive: iocTextPrimary,
+    interactiveTextInDisabled: iocTextDisabled,
+    interactiveTertiaryDefault: lightOrangePalette[500],
+    interactiveTertiaryHover: lightOrangePalette[400],
+    interactiveTertiaryActive: lightOrangePalette[600],
+    interactiveTertiaryDisabled: lightOrangePalette["alpha40"],
+    successBackgroundDefault: greenPalette[500],
+    successBackgroundDisabled: greenPalette[40],
+    successBackgroundHover: greenPalette[400],
+    successBackgroundActive: greenPalette[600],
+    successBackgroundWeak: "rgba(0, 185, 141, 0.10)",
+    successIconActive: greenPalette[600],
+    successIconDisabled: greenPalette[40],
+    successIconHover: greenPalette[400],
+    successIconDefault: greenPalette[500],
+    successTextActive: greenPalette[300],
+    successTextHover: greenPalette[200],
+    successTextDefault: greenPalette[300],
+    successTextInDisabled: greenPalette[10],
+    successTextInDefault: greyPalette[900],
+    successBorderDisabled: greenPalette[40],
+    successBorderActive: greenPalette[600],
+    successBorderHover: greenPalette[400],
+    successBorderDefault: greenPalette[500],
+    successBorderWeak: "rgba(0, 185, 141, 0.30)",
+    successIconInDisabled: greenPalette[10],
+    successIconInActive: greenPalette[200],
+    successIconInHover: greenPalette[100],
+    successIconInDefault: greenPalette[50],
+    negativeBackgroundHover: redPalette[400],
+    negativeBackgroundActive: redPalette[600],
+    negativeBackgroundDisabled: redPalette["alpha40"],
+    negativeBackgroundDefault: redPalette[500],
+    negativeBackgroundWeak: "rgba(198, 41, 83, 0.10)",
+    negativeTextDefault: redPalette[300],
+    negativeTextHover: redPalette[200],
+    negativeTextActive: redPalette[400],
+    negativeBorderActive: redPalette[600],
+    negativeBorderHover: redPalette[400],
+    negativeBorderDisabled: redPalette["alpha40"],
+    negativeBorderDefault: redPalette[500],
+    negativeBorderWeak: "rgba(198, 41, 83, 0.30)",
+    negativeIconDisabled: redPalette["alpha40"],
+    negativeIconActive: redPalette[600],
+    negativeIconHover: redPalette[400],
+    negativeIconDefault: redPalette[500],
+    negativeTextInDefault: redPalette[50],
+    negativeTextInDisabled: redPalette["alpha10"],
+    negativeIconInDefault: redPalette[50],
+    negativeIconInHover: redPalette[100],
+    negativeIconInActive: redPalette[200],
+    negativeIconInDisabled: redPalette["alpha10"],
+    excellentBackgroundDefault: lightBluePalette[600],
+    excellentBackgroundWeak: "rgba(31, 210, 255, 0.10)",
+    excellentBackgroundDisabled: lightBluePalette["alpha40"],
+    excellentBackgroundHover: lightBluePalette[500],
+    excellentBackgroundActive: lightBluePalette[700],
+    excellentTextDefault: lightBluePalette[200],
+    excellentTextHover: lightBluePalette[100],
+    excellentTextActive: lightBluePalette[300],
+    excellentTextInDefault: greyPalette[900],
+    excellentTextInDisabled: lightBluePalette["alpha10"],
+    excellentBorderDefault: lightBluePalette[600],
+    excellentBorderHover: lightBluePalette[500],
+    excellentBorderActive: lightBluePalette[700],
+    excellentBorderDisabled: lightBluePalette["alpha40"],
+    excellentBorderWeak: "rgba(31, 210, 255, 0.30)",
+    excellentIconDefault: lightBluePalette[500],
+    excellentIconHover: lightBluePalette[400],
+    excellentIconActive: lightBluePalette[600],
+    excellentIconDisabled: lightBluePalette["alpha40"],
+    excellentIconInDefault: lightBluePalette[50],
+    excellentIconInHover: lightBluePalette[100],
+    excellentIconInActive: lightBluePalette[200],
+    excellentIconInDisabled: lightBluePalette["alpha10"],
+    neutralBackgroundDefault: iocTealPalette[600],
+    neutralBackgroundWeak: iocTealPalette.alpha10,
+    neutralBackgroundDisabled: iocTealPalette.alpha40,
+    neutralBackgroundHover: iocTealPalette[500],
+    neutralBackgroundActive: iocTealPalette[700],
+    neutralTextDefault: iocTealPalette[200],
+    neutralTextHover: iocTealPalette[100],
+    neutralTextActive: iocTealPalette[300],
+    neutralTextInDefault: greyPalette[900],
+    neutralTextInDisabled: iocTealPalette.alpha10,
+    neutralBorderDefault: iocTealPalette[600],
+    neutralBorderHover: iocTealPalette[500],
+    neutralBorderActive: iocTealPalette[700],
+    neutralBorderDisabled: iocTealPalette.alpha40,
+    neutralBorderWeak: iocTealPalette.alpha20,
+    neutralIconDefault: iocTealPalette[500],
+    neutralIconHover: iocTealPalette[400],
+    neutralIconActive: iocTealPalette[600],
+    neutralIconDisabled: iocTealPalette.alpha40,
+    neutralIconInDefault: iocTealPalette[50],
+    neutralIconInHover: iocTealPalette[100],
+    neutralIconInActive: iocTealPalette[200],
+    neutralIconInDisabled: iocTealPalette.alpha10,
+    infoBackgroundDefault: iocBluePalette[600],
+    infoBackgroundWeak: "rgba(43,130,246,0.10)",
+    infoBackgroundDisabled: "rgba(43,130,246,0.40)",
+    infoBackgroundHover: iocBluePalette[500],
+    infoBackgroundActive: iocBluePalette[600],
+    infoTextDefault: "#93C5FD",
+    infoTextHover: "#BFDBFE",
+    infoTextActive: "#60A5FA",
+    infoTextInDefault: greyPalette[900],
+    infoTextInDisabled: "rgba(43,130,246,0.10)",
+    infoBorderDefault: iocBluePalette[600],
+    infoBorderHover: iocBluePalette[500],
+    infoBorderActive: iocBluePalette[600],
+    infoBorderDisabled: "rgba(43,130,246,0.40)",
+    infoBorderWeak: "rgba(43,130,246,0.20)",
+    infoIconDefault: iocBluePalette[500],
+    infoIconHover: iocBluePalette[400],
+    infoIconActive: iocBluePalette[600],
+    infoIconDisabled: "rgba(43,130,246,0.40)",
+    infoIconInDefault: "#EFF6FF",
+    infoIconInHover: "#BFDBFE",
+    infoIconInActive: "#93C5FD",
+    infoIconInDisabled: "rgba(43,130,246,0.10)",
+    inactiveBackgroundDefault: greyPalette[600],
+    inactiveBackgroundWeak: "rgba(60, 69, 81, 0.10)",
+    inactiveBackgroundDisabled: greyPalette["alpha40"],
+    inactiveBackgroundHover: greyPalette[500],
+    inactiveBackgroundActive: greyPalette[700],
+    inactiveTextDefault: greyPalette[200],
+    inactiveTextHover: greyPalette[100],
+    inactiveTextActive: greyPalette[300],
+    inactiveTextInDefault: greyPalette[50],
+    inactiveTextInDisabled: greyPalette["alpha40"],
+    inactiveBorderDefault: greyPalette[600],
+    inactiveBorderHover: greyPalette[500],
+    inactiveBorderActive: greyPalette[700],
+    inactiveBorderDisabled: greyPalette["alpha40"],
+    inactiveBorderWeak: "rgba(60, 69, 81, 0.30)",
+    inactiveIconDefault: greyPalette[400],
+    inactiveIconHover: greyPalette[300],
+    inactiveIconActive: greyPalette[500],
+    inactiveIconDisabled: greyPalette["alpha40"],
+    inactiveIconInDefault: greyPalette[0],
+    inactiveIconInHover: greyPalette[50],
+    inactiveIconInActive: greyPalette[100],
+    inactiveIconInDisabled: greyPalette["alpha10"],
+    warningBackgroundDefault: lightOrangePalette[500],
+    warningBackgroundWeak: "rgba(251, 175, 69, 0.10)",
+    warningBackgroundHover: lightOrangePalette[400],
+    warningBackgroundActive: lightOrangePalette[600],
+    warningBackgroundDisabled: lightOrangePalette["alpha40"],
+    warningTextDefault: lightOrangePalette[200],
+    warningTextHover: lightOrangePalette[100],
+    warningTextActive: lightOrangePalette[300],
+    warningTextInDefault: greyPalette[900],
+    warningTextInDisabled: lightOrangePalette["alpha10"],
+    warningBorderDefault: lightOrangePalette[500],
+    warningBorderHover: lightOrangePalette[400],
+    warningBorderActive: lightOrangePalette[600],
+    warningBorderDisabled: lightOrangePalette["alpha40"],
+    warningBorderWeak: "rgba(251, 175, 69, 0.30)",
+    warningIconDefault: lightOrangePalette[500],
+    warningIconHover: lightOrangePalette[400],
+    warningIconActive: lightOrangePalette[600],
+    warningIconDisabled: lightOrangePalette["alpha40"],
+    warningIconInDefault: lightOrangePalette[50],
+    warningIconInHover: lightOrangePalette[100],
+    warningIconInActive: lightOrangePalette[200],
+    warningIconInDisabled: lightOrangePalette["alpha10"],
+    severeWarningBackgroundDefault: orangePalette[500],
+    severeWarningBackgroundWeak: "rgba(242, 100, 61, 0.10)",
+    severeWarningBackgroundHover: orangePalette[400],
+    severeWarningBackgroundActive: orangePalette[600],
+    severeWarningBackgroundDisabled: orangePalette["alpha40"],
+    severeWarningTextDefault: orangePalette[200],
+    severeWarningTextHover: orangePalette[100],
+    severeWarningTextActive: orangePalette[300],
+    severeWarningTextInDefault: greyPalette[900],
+    severeWarningTextInDisabled: orangePalette["alpha10"],
+    severeWarningBorderDefault: orangePalette[500],
+    severeWarningBorderHover: orangePalette[400],
+    severeWarningBorderActive: orangePalette[600],
+    severeWarningBorderDisabled: orangePalette["alpha40"],
+    severeWarningBorderWeak: "rgba(242, 100, 61, 0.30)",
+    severeWarningIconDefault: orangePalette[500],
+    severeWarningIconHover: orangePalette[400],
+    severeWarningIconActive: orangePalette[600],
+    severeWarningIconDisabled: orangePalette["alpha40"],
+    severeWarningIconInDefault: orangePalette[50],
+    severeWarningIconInHover: orangePalette[100],
+    severeWarningIconInActive: orangePalette[200],
+    severeWarningIconInDisabled: orangePalette["alpha10"],
+    moderateBackgroundDefault: yellowPalette[500],
+    moderateBackgroundWeak: "rgba(255, 230, 89, 0.10)",
+    moderateBackgroundHover: yellowPalette[400],
+    moderateBackgroundActive: yellowPalette[600],
+    moderateBackgroundDisabled: yellowPalette["alpha40"],
+    moderateTextDefault: yellowPalette[900],
+    moderateTextHover: yellowPalette[800],
+    moderateTextActive: yellowPalette[700],
+    moderateTextInDefault: greyPalette[900],
+    moderateTextInDisabled: yellowPalette["alpha10"],
+    moderateBorderDefault: yellowPalette[500],
+    moderateBorderHover: yellowPalette[400],
+    moderateBorderActive: yellowPalette[600],
+    moderateBorderDisabled: yellowPalette["alpha40"],
+    moderateBorderWeak: "rgba(255, 230, 89, 0.30)",
+    moderateIconDefault: yellowPalette[700],
+    moderateIconHover: yellowPalette[600],
+    moderateIconActive: yellowPalette[800],
+    moderateIconDisabled: yellowPalette["alpha40"],
+    moderateIconInDefault: yellowPalette[900],
+    moderateIconInHover: yellowPalette[800],
+    moderateIconInActive: yellowPalette[700],
+    moderateIconInDisabled: yellowPalette["alpha10"],
+    accentADefault: lavenderPalette[400],
+    accentAWeak: "rgba(140, 149, 255, 0.15)",
+    accentBDefault: sunsetPalette[300],
+    accentBWeak: "rgba(233, 106, 141, 0.15)",
+    accentCDefault: sunsetPalette[100],
+    accentCWeak: "rgba(243, 172, 162, 0.15)",
+    accentDDefault: purplePalette[400],
+    accentDWeak: "rgba(192, 128, 255, 0.15)",
+    accentEDefault: limePalette[400],
+    accentEWeak: "rgba(164, 197, 71, 0.15)",
+    accentFDefault: orangePalette[400],
+    accentFWeak: "rgba(244, 123, 90, 0.15)",
+    accentGDefault: nightPalette[200],
+    accentGWeak: "rgba(70, 170, 206, 0.15)",
+    accentHDefault: iocTealPalette[400],
+    accentHWeak: iocTealPalette.alpha10,
+    accentIDefault: pinkPalette[400],
+    accentIWeak: "rgba(242, 99, 140, 0.15)",
+    accentJDefault: tealPalette[400],
+    accentJWeak: "rgba(62, 203, 209, 0.15)",
+};
+
+const iocShadows = [
+    "none",
+    iocShadowSm,
+    iocShadowMd,
+    iocShadowLg,
+    iocShadowLg,
+    iocShadowLg,
+    ...Array(19).fill("none"),
+];
+const palette$1 = {
+    mode: "dark",
+    primary: Object.assign(Object.assign({}, iocTealPalette), { main: iocTealPalette[500], light: iocTealPalette[300], dark: iocTealPalette[700], contrastText: iocBackdropPalette[900] }),
+    secondary: {
+        main: iocBluePalette[500],
+        light: iocBluePalette[400],
+        dark: iocBluePalette[600],
+        contrastText: "#ffffff",
+    },
+    tertiary: lightOrangePalette,
+    error: redPalette,
+    warning: lightOrangePalette,
+    info: iocBluePalette,
+    success: greenPalette,
+    negative: redPalette,
+    orange: orangePalette,
+    grey: greyPalette,
+    vars: iocVars,
+    text: {
+        primary: iocTextPrimary,
+        secondary: iocTextSecondary,
+        disabled: iocTextDisabled,
+    },
+    background: {
+        paper: iocSurfacePalette[100],
+        default: iocBackdropPalette[600],
+    },
+    action: {
+        hoverOpacity: 0.08,
+        selectedOpacity: 0.14,
+        focusOpacity: 0.1,
+    },
+};
+const baseTheme = createTheme({
+    breakpoints,
+    palette: palette$1,
+    typography,
+    mixins: commonMixins,
+});
+const iocCssBaselineComponent = {
+    MuiCssBaseline: {
+        styleOverrides: {
+            html: {
+                scrollbarWidth: "thin",
+                scrollbarColor: `${baseTheme.palette.vars.baseTextMedium} ${baseTheme.palette.background.default}`,
+            },
+            body: {
+                background: iocPageBackground,
+                backgroundAttachment: "fixed",
+                minHeight: "100vh",
+            },
+            "*::-webkit-scrollbar": { width: "12px", height: "12px" },
+            "*::-webkit-scrollbar-track": {
+                backgroundColor: baseTheme.palette.background.default,
+                borderRadius: 8,
+            },
+            "*::-webkit-scrollbar-thumb": {
+                backgroundColor: baseTheme.palette.vars.controlIconMedium,
+                borderRadius: 8,
+                border: "2px solid transparent",
+                backgroundClip: "content-box",
+            },
+            "*::-webkit-scrollbar-thumb:hover": {
+                backgroundColor: baseTheme.palette.vars.baseTextMedium,
+            },
+            "*::-webkit-scrollbar-corner": {
+                backgroundColor: baseTheme.palette.background.default,
+            },
+            "::selection": {
+                backgroundColor: baseTheme.palette.vars.controlFocusRingStrong,
+                color: baseTheme.palette.vars.baseTextStrong,
+            },
+        },
+    },
+};
+const iocThemeOptions = {
+    shadows: iocShadows,
+    components: Object.assign(Object.assign(Object.assign(Object.assign({}, buttonComponent(baseTheme)), inputComponents(baseTheme)), snackbarComponent(baseTheme)), iocCssBaselineComponent),
+};
+const iocTheme = createTheme(baseTheme, iocThemeOptions);
+iocTheme.palette.vars = iocVars;
+
 const lightVars = {
     brandOrange: lightOrangePalette[500],
     brandOrangeDark: lightOrangePalette[900],
@@ -10902,6 +11457,7 @@ var ThemeMode;
 (function (ThemeMode) {
     ThemeMode["Light"] = "light";
     ThemeMode["Dark"] = "dark";
+    ThemeMode["IoC"] = "ioc";
 })(ThemeMode || (ThemeMode = {}));
 const ThemeModeContext = React__default.createContext(null);
 function useThemeMode() {
@@ -10911,17 +11467,23 @@ function useThemeMode() {
     }
     return ctx;
 }
+function resolveBuiltInTheme(mode) {
+    if (mode === ThemeMode.IoC) {
+        return iocTheme;
+    }
+    return mode === ThemeMode.Dark ? darkTheme : lightTheme;
+}
 const ThemeProvider = ({ children, defaultMode, customTheme, }) => {
     const [mode, setMode] = React__default.useState(defaultMode !== null && defaultMode !== void 0 ? defaultMode : ThemeMode.Light);
-    const toggleTheme = React__default.useCallback(() => {
-        setMode((prev) => prev === ThemeMode.Dark ? ThemeMode.Light : ThemeMode.Dark);
+    const setTheme = React__default.useCallback((theme) => {
+        setMode(theme);
     }, []);
-    const resolvedTheme = customTheme !== null && customTheme !== void 0 ? customTheme : (mode === ThemeMode.Dark ? darkTheme : lightTheme);
+    const resolvedTheme = customTheme !== null && customTheme !== void 0 ? customTheme : resolveBuiltInTheme(mode);
     const themeModeValue = React__default.useMemo(() => ({
         mode,
         setMode,
-        toggleTheme,
-    }), [mode, toggleTheme]);
+        setTheme,
+    }), [mode, setTheme]);
     return (jsx(ThemeModeContext.Provider, { value: themeModeValue, children: jsxs(ThemeProvider$1, { theme: resolvedTheme, children: [jsx(CssBaseline, {}), children] }) }));
 };
 
@@ -12575,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",
@@ -12620,25 +13742,34 @@ const getPopoverPaperStyles = (theme, size = "medium") => {
             ? `drop-shadow(${darkModeCardFloating})`
             : `drop-shadow(${lightModeCardFloating})`,
         overflow: "visible",
-    });
+        overflowX: "visible",
+        overflowY: "visible",
+    };
 };
-const getPopoverContentStyles = (theme, featureHighlight = false) => {
+const popoverSurfaceStyles = {
+    position: "relative",
+    boxSizing: "border-box",
+    width: "100%",
+    overflow: "visible",
+};
+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",
@@ -12690,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",
@@ -12701,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) => ({
@@ -15930,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, 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