@open-ui-kit/core 2.0.4 → 2.2.0

package/index.umd.js

@@ -6265,6 +6265,13 @@
         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",
         },
@@ -6276,16 +6283,22 @@
                 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": {
@@ -6293,7 +6306,8 @@
             fontWeight: 600,
             fontSize: "16px",
             lineHeight: "125%",
-            height: "40px",
+            minHeight: "40px",
+            height: "auto",
             padding: "10px 16px",
         },
         "&.OuiButton-hasIcon.MuiButton-sizeLarge": {
@@ -6304,7 +6318,8 @@
             fontWeight: 600,
             fontSize: "14px",
             lineHeight: "125%",
-            height: "32px",
+            minHeight: "32px",
+            height: "auto",
             padding: "7px 16px",
         },
         "&.MuiButton-sizeSmall": {
@@ -6312,7 +6327,8 @@
             fontWeight: 600,
             fontSize: "14px",
             lineHeight: "125%",
-            height: "24px",
+            minHeight: "24px",
+            height: "auto",
             padding: "3px 12px",
         },
         "&.MuiButton-sizeLarge svg": {
@@ -6531,7 +6547,7 @@
         }
         return child.props.children == null;
     };
-    const Button = (_a) => {
+    const Button = React.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);
@@ -6542,8 +6558,9 @@
         ]
             .filter(Boolean)
             .join(" ");
-        return (jsxRuntime.jsx(StyledButton$1, Object.assign({ className: buttonClassName || undefined, disableRipple: disableRipple, endIcon: endIcon, startIcon: startIcon }, props, { children: children })));
-    };
+        return (jsxRuntime.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",
@@ -7562,18 +7579,48 @@
             }, children: [selectNodeElement, selectableLeavesCount && (jsxRuntime.jsx(material.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",
@@ -7598,12 +7645,7 @@
                 },
             },
         ],
-        sx: {
-            '&[data-popper-placement*="left"] .MuiTooltip-arrow, &[data-popper-placement*="right"] .MuiTooltip-arrow': {
-                height: "10px",
-                width: "6px",
-            },
-        },
+        sx: tooltipPopperSx,
     };
     const tooltipSlotProps = {
         [exports.TooltipSize.Medium]: {
@@ -10430,7 +10472,7 @@
         darkModeFooterBottom,
         ...Array(17).fill("none"),
     ];
-    const palette$1 = {
+    const palette$2 = {
         mode: "dark",
         primary: bluePalette,
         secondary: Object.assign(Object.assign({}, surfaceDarkPalette), { main: surfaceDarkPalette[500] }),
@@ -10460,7 +10502,7 @@
     };
     const theme$1 = material.createTheme({
         breakpoints,
-        palette: palette$1,
+        palette: palette$2,
         typography,
         mixins: commonMixins,
     });
@@ -10497,6 +10539,519 @@
     };
     const darkTheme = material.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 = material.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 = material.createTheme(baseTheme, iocThemeOptions);
+    iocTheme.palette.vars = iocVars;
+
     const lightVars = {
         brandOrange: lightOrangePalette[500],
         brandOrangeDark: lightOrangePalette[900],
@@ -10876,6 +11431,7 @@
     (function (ThemeMode) {
         ThemeMode["Light"] = "light";
         ThemeMode["Dark"] = "dark";
+        ThemeMode["IoC"] = "ioc";
     })(exports.ThemeMode || (exports.ThemeMode = {}));
     const ThemeModeContext = React.createContext(null);
     function useThemeMode() {
@@ -10885,17 +11441,23 @@
         }
         return ctx;
     }
+    function resolveBuiltInTheme(mode) {
+        if (mode === exports.ThemeMode.IoC) {
+            return iocTheme;
+        }
+        return mode === exports.ThemeMode.Dark ? darkTheme : lightTheme;
+    }
     const ThemeProvider = ({ children, defaultMode, customTheme, }) => {
         const [mode, setMode] = React.useState(defaultMode !== null && defaultMode !== void 0 ? defaultMode : exports.ThemeMode.Light);
-        const toggleTheme = React.useCallback(() => {
-            setMode((prev) => prev === exports.ThemeMode.Dark ? exports.ThemeMode.Light : exports.ThemeMode.Dark);
+        const setTheme = React.useCallback((theme) => {
+            setMode(theme);
         }, []);
-        const resolvedTheme = customTheme !== null && customTheme !== void 0 ? customTheme : (mode === exports.ThemeMode.Dark ? darkTheme : lightTheme);
+        const resolvedTheme = customTheme !== null && customTheme !== void 0 ? customTheme : resolveBuiltInTheme(mode);
         const themeModeValue = React.useMemo(() => ({
             mode,
             setMode,
-            toggleTheme,
-        }), [mode, toggleTheme]);
+            setTheme,
+        }), [mode, setTheme]);
         return (jsxRuntime.jsx(ThemeModeContext.Provider, { value: themeModeValue, children: jsxRuntime.jsxs(material.ThemeProvider, { theme: resolvedTheme, children: [jsxRuntime.jsx(material.CssBaseline, {}), children] }) }));
     };
 
@@ -12549,44 +13111,604 @@
             ], children: [jsxRuntime.jsx(material.Box, { className: "picker-icon", "aria-hidden": true, children: icon }), jsxRuntime.jsx(material.Box, { component: "span", className: "picker-label", children: label })] })));
     };
 
+    exports.PopoverPlacementSide = void 0;
+    (function (PopoverPlacementSide) {
+        PopoverPlacementSide["Top"] = "top";
+        PopoverPlacementSide["Bottom"] = "bottom";
+        PopoverPlacementSide["Left"] = "left";
+        PopoverPlacementSide["Right"] = "right";
+    })(exports.PopoverPlacementSide || (exports.PopoverPlacementSide = {}));
+    exports.PopoverPlacementAlign = void 0;
+    (function (PopoverPlacementAlign) {
+        PopoverPlacementAlign["Start"] = "start";
+        PopoverPlacementAlign["End"] = "end";
+        PopoverPlacementAlign["Center"] = "center";
+    })(exports.PopoverPlacementAlign || (exports.PopoverPlacementAlign = {}));
+    exports.PopoverPlacement = void 0;
+    (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";
+    })(exports.PopoverPlacement || (exports.PopoverPlacement = {}));
+    const POPOVER_PLACEMENTS = [
+        exports.PopoverPlacement.BottomStart,
+        exports.PopoverPlacement.Bottom,
+        exports.PopoverPlacement.BottomEnd,
+        exports.PopoverPlacement.TopStart,
+        exports.PopoverPlacement.Top,
+        exports.PopoverPlacement.TopEnd,
+        exports.PopoverPlacement.LeftStart,
+        exports.PopoverPlacement.Left,
+        exports.PopoverPlacement.LeftEnd,
+        exports.PopoverPlacement.RightStart,
+        exports.PopoverPlacement.Right,
+        exports.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([
+        exports.PopoverPlacement.Top,
+        exports.PopoverPlacement.Bottom,
+        exports.PopoverPlacement.Left,
+        exports.PopoverPlacement.Right,
+    ]);
+    const OPPOSITE_PLACEMENT_SIDE = {
+        [exports.PopoverPlacementSide.Top]: exports.PopoverPlacementSide.Bottom,
+        [exports.PopoverPlacementSide.Bottom]: exports.PopoverPlacementSide.Top,
+        [exports.PopoverPlacementSide.Left]: exports.PopoverPlacementSide.Right,
+        [exports.PopoverPlacementSide.Right]: exports.PopoverPlacementSide.Left,
+    };
+    const VERTICAL_CENTER_PLACEMENT = {
+        [exports.PopoverPlacementSide.Top]: exports.PopoverPlacement.Top,
+        [exports.PopoverPlacementSide.Bottom]: exports.PopoverPlacement.Bottom,
+    };
+    const SIDE_CENTER_PLACEMENT = {
+        [PopoverSidePlacement.Left]: exports.PopoverPlacement.Left,
+        [PopoverSidePlacement.Right]: exports.PopoverPlacement.Right,
+    };
+
+    const getOppositePlacementSide = (side) => OPPOSITE_PLACEMENT_SIDE[side];
+    const getPlacementSide = (placement) => placement.split("-")[0];
+    const getPlacementAlign = (placement) => {
+        if (CENTER_PLACEMENTS.has(placement)) {
+            return exports.PopoverPlacementAlign.Center;
+        }
+        if (placement.endsWith(`-${exports.PopoverPlacementAlign.Start}`)) {
+            return exports.PopoverPlacementAlign.Start;
+        }
+        return exports.PopoverPlacementAlign.End;
+    };
+    const getArrowAxisAlign = (placement) => {
+        const side = getPlacementSide(placement);
+        const align = getPlacementAlign(placement);
+        if (side === exports.PopoverPlacementSide.Top ||
+            side === exports.PopoverPlacementSide.Bottom) {
+            if (align === exports.PopoverPlacementAlign.Start) {
+                return PopoverArrowAxisAlign.Left;
+            }
+            if (align === exports.PopoverPlacementAlign.End) {
+                return PopoverArrowAxisAlign.Right;
+            }
+            return PopoverArrowAxisAlign.Center;
+        }
+        if (align === exports.PopoverPlacementAlign.Start) {
+            return PopoverArrowAxisAlign.Top;
+        }
+        if (align === exports.PopoverPlacementAlign.End) {
+            return PopoverArrowAxisAlign.Bottom;
+        }
+        return PopoverArrowAxisAlign.Center;
+    };
+
+    const toHorizontalOrigin = (align) => {
+        if (align === exports.PopoverPlacementAlign.Start) {
+            return PopoverHorizontalPlacement.Left;
+        }
+        if (align === exports.PopoverPlacementAlign.End) {
+            return PopoverHorizontalPlacement.Right;
+        }
+        return PopoverHorizontalPlacement.Center;
+    };
+    const toVerticalOrigin = (align) => {
+        if (align === exports.PopoverPlacementAlign.Start) {
+            return PopoverEdgeAlignment.Top;
+        }
+        if (align === exports.PopoverPlacementAlign.End) {
+            return PopoverEdgeAlignment.Bottom;
+        }
+        return PopoverEdgeAlignment.Center;
+    };
+    const getOriginsForPlacement = (placement) => {
+        const side = getPlacementSide(placement);
+        const align = getPlacementAlign(placement);
+        if (side === exports.PopoverPlacementSide.Top) {
+            const horizontal = toHorizontalOrigin(align);
+            return {
+                anchorOrigin: {
+                    vertical: exports.PopoverPlacementSide.Top,
+                    horizontal,
+                },
+                transformOrigin: {
+                    vertical: exports.PopoverPlacementSide.Bottom,
+                    horizontal,
+                },
+            };
+        }
+        if (side === exports.PopoverPlacementSide.Bottom) {
+            const horizontal = toHorizontalOrigin(align);
+            return {
+                anchorOrigin: {
+                    vertical: exports.PopoverPlacementSide.Bottom,
+                    horizontal,
+                },
+                transformOrigin: {
+                    vertical: exports.PopoverPlacementSide.Top,
+                    horizontal,
+                },
+            };
+        }
+        if (side === exports.PopoverPlacementSide.Left) {
+            const vertical = toVerticalOrigin(align);
+            return {
+                anchorOrigin: {
+                    vertical,
+                    horizontal: exports.PopoverPlacementSide.Left,
+                },
+                transformOrigin: {
+                    vertical,
+                    horizontal: exports.PopoverPlacementSide.Right,
+                },
+            };
+        }
+        const vertical = toVerticalOrigin(align);
+        return {
+            anchorOrigin: {
+                vertical,
+                horizontal: exports.PopoverPlacementSide.Right,
+            },
+            transformOrigin: {
+                vertical,
+                horizontal: exports.PopoverPlacementSide.Left,
+            },
+        };
+    };
+    const getOriginsForVerticalPlacement = (placement, horizontal = PopoverHorizontalPlacement.Center) => {
+        if (placement === PopoverVerticalPlacement.Above) {
+            return {
+                anchorOrigin: {
+                    vertical: exports.PopoverPlacementSide.Top,
+                    horizontal,
+                },
+                transformOrigin: {
+                    vertical: exports.PopoverPlacementSide.Bottom,
+                    horizontal,
+                },
+            };
+        }
+        return {
+            anchorOrigin: {
+                vertical: exports.PopoverPlacementSide.Bottom,
+                horizontal,
+            },
+            transformOrigin: {
+                vertical: exports.PopoverPlacementSide.Top,
+                horizontal,
+            },
+        };
+    };
+    const getVerticalPreference = (anchorOrigin, transformOrigin) => {
+        if (transformOrigin.vertical === exports.PopoverPlacementSide.Bottom &&
+            anchorOrigin.vertical === exports.PopoverPlacementSide.Top) {
+            return PopoverVerticalPlacement.Above;
+        }
+        if (transformOrigin.vertical === exports.PopoverPlacementSide.Top &&
+            anchorOrigin.vertical === exports.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) === exports.PopoverPlacementSide.Right
+        ? PopoverSidePlacement.Right
+        : PopoverSidePlacement.Left;
+    const getEdgeAlignmentPreference = (placement) => {
+        const align = getPlacementAlign(placement);
+        if (align === exports.PopoverPlacementAlign.Start) {
+            return PopoverEdgeAlignment.Top;
+        }
+        if (align === exports.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 === exports.PopoverPlacementSide.Right
+        ? PopoverSidePlacement.Right
+        : PopoverSidePlacement.Left;
+    const formatVerticalPlacement = (side, align) => {
+        if (align === exports.PopoverPlacementAlign.Center) {
+            return VERTICAL_CENTER_PLACEMENT[side];
+        }
+        return `${side}-${align}`;
+    };
+    const formatSidePlacement = (side, align) => {
+        if (align === exports.PopoverPlacementAlign.Center) {
+            return SIDE_CENTER_PLACEMENT[side];
+        }
+        return `${side}-${align}`;
+    };
+    const horizontalToPlacementAlign = (horizontal) => {
+        if (horizontal === PopoverHorizontalPlacement.Left) {
+            return exports.PopoverPlacementAlign.Start;
+        }
+        if (horizontal === PopoverHorizontalPlacement.Right) {
+            return exports.PopoverPlacementAlign.End;
+        }
+        return exports.PopoverPlacementAlign.Center;
+    };
+    const edgeToPlacementAlign = (edge) => {
+        if (edge === PopoverEdgeAlignment.Top) {
+            return exports.PopoverPlacementAlign.Start;
+        }
+        if (edge === PopoverEdgeAlignment.Bottom) {
+            return exports.PopoverPlacementAlign.End;
+        }
+        return exports.PopoverPlacementAlign.Center;
+    };
+    const placementForVerticalPlacement = (placement, verticalPlacement) => {
+        const side = getPlacementSide(placement);
+        if (side !== exports.PopoverPlacementSide.Top &&
+            side !== exports.PopoverPlacementSide.Bottom) {
+            return placement;
+        }
+        const align = getPlacementAlign(placement);
+        return verticalPlacement === PopoverVerticalPlacement.Above
+            ? formatVerticalPlacement(exports.PopoverPlacementSide.Top, align)
+            : formatVerticalPlacement(exports.PopoverPlacementSide.Bottom, align);
+    };
+    const placementForHorizontalPlacement = (placement, horizontal) => {
+        const side = getPlacementSide(placement);
+        if (side !== exports.PopoverPlacementSide.Top &&
+            side !== exports.PopoverPlacementSide.Bottom) {
+            return placement;
+        }
+        return formatVerticalPlacement(side, horizontalToPlacementAlign(horizontal));
+    };
+    const placementForSidePlacement = (placement, side) => {
+        const placementSide = getPlacementSide(placement);
+        if (placementSide !== exports.PopoverPlacementSide.Left &&
+            placementSide !== exports.PopoverPlacementSide.Right) {
+            return placement;
+        }
+        return formatSidePlacement(side, getPlacementAlign(placement));
+    };
+    const placementForEdgeAlignment = (placement, align) => {
+        const side = getPlacementSide(placement);
+        if (side !== exports.PopoverPlacementSide.Left &&
+            side !== exports.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: exports.PopoverPlacementSide.Top,
+    }, transformOrigin = {
+        vertical: exports.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 === exports.PopoverPlacementSide.Top &&
+            anchorOrigin.vertical === exports.PopoverPlacementSide.Top &&
+            transformOrigin.vertical === exports.PopoverPlacementSide.Bottom) {
+            return { marginTop: `-${ARROW_HEIGHT}px` };
+        }
+        if (side === exports.PopoverPlacementSide.Bottom &&
+            anchorOrigin.vertical === exports.PopoverPlacementSide.Bottom &&
+            transformOrigin.vertical === exports.PopoverPlacementSide.Top) {
+            return { marginTop: `${ARROW_HEIGHT}px` };
+        }
+        if (side === exports.PopoverPlacementSide.Left &&
+            anchorOrigin.horizontal === exports.PopoverPlacementSide.Left &&
+            transformOrigin.horizontal === exports.PopoverPlacementSide.Right) {
+            return { marginLeft: `-${ARROW_HEIGHT}px` };
+        }
+        if (side === exports.PopoverPlacementSide.Right &&
+            anchorOrigin.horizontal === exports.PopoverPlacementSide.Right &&
+            transformOrigin.horizontal === exports.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 === exports.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 === exports.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 === exports.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",
@@ -12594,25 +13716,34 @@
                 ? `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",
@@ -12664,10 +13795,15 @@
     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",
@@ -12675,21 +13811,174 @@
         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 = React.useRef(null);
+        const [resolved, setResolved] = React.useState(() => resolvePlacementState({ anchorOrigin, transformOrigin, placement }));
+        const updateResolved = (next) => {
+            setResolved((current) => isSameResolvedState(current, next) ? current : next);
+        };
+        React.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 === exports.PopoverPlacementSide.Top ||
+                        placementSide === exports.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: exports.PopoverPlacementSide.Top,
+        horizontal: PopoverHorizontalPlacement.Left,
+    };
+    const DEFAULT_POPOVER_TRANSFORM_ORIGIN = {
+        vertical: exports.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 = material.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 (jsxRuntime.jsxs(material.Popover, Object.assign({}, props, { onClose: onClose, slotProps: {
+        return (jsxRuntime.jsx(material.Popover, 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 && (jsxRuntime.jsx(material.Box, { "aria-hidden": true, "data-slot": "popover-arrow", sx: getArrowStyles(arrowPosition, bg) })), children !== null && children !== void 0 ? children : (jsxRuntime.jsxs(material.Box, { sx: getPopoverContentStyles(theme, featureHighlight), children: [icon && jsxRuntime.jsx(material.Box, { sx: popoverIconStyles, children: icon }), jsxRuntime.jsxs(material.Box, { sx: popoverColumnStyles, children: [(title || body || showCloseButton) && (jsxRuntime.jsxs(material.Box, { sx: popoverTextStyles, children: [(title || showCloseButton) && (jsxRuntime.jsxs(material.Box, { sx: popoverHeaderStyles, children: [title && (jsxRuntime.jsx(material.Typography, { component: "div", sx: popoverTitleStyles(theme), children: title })), showCloseButton && (jsxRuntime.jsx(material.IconButton, { "aria-label": "Close popover", size: "small", onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose({}, "escapeKeyDown"), sx: closeButtonStyles, children: jsxRuntime.jsx(CloseIcon, { fontSize: "small" }) }))] })), body && (jsxRuntime.jsx(material.Typography, { component: "div", sx: popoverBodyStyles(theme), children: body }))] })), actions && jsxRuntime.jsx(material.Box, { sx: popoverActionsStyles, children: actions })] })] }))] })));
+            }, children: jsxRuntime.jsxs(material.Box, { sx: popoverSurfaceStyles, children: [resolvedPlacement && (jsxRuntime.jsx(material.Box, { "aria-hidden": true, "data-slot": "popover-arrow", sx: getArrowStyles(resolvedPlacement, bg) })), children !== null && children !== void 0 ? children : (jsxRuntime.jsxs(material.Box, { sx: getPopoverContentStyles(theme, featureHighlight, size), children: [icon && jsxRuntime.jsx(material.Box, { sx: popoverIconStyles, children: icon }), jsxRuntime.jsxs(material.Box, { sx: popoverColumnStyles, children: [(title || body || showCloseButton) && (jsxRuntime.jsxs(material.Box, { sx: popoverTextStyles, children: [(title || showCloseButton) && (jsxRuntime.jsxs(material.Box, { sx: popoverHeaderStyles, children: [title && (jsxRuntime.jsx(material.Typography, { component: "div", sx: popoverTitleStyles(theme), children: title })), showCloseButton && (jsxRuntime.jsx(material.IconButton, { "aria-label": "Close popover", size: "small", onClick: () => onClose === null || onClose === void 0 ? void 0 : onClose({}, "escapeKeyDown"), sx: closeButtonStyles, children: jsxRuntime.jsx(CloseIcon, { fontSize: "small" }) }))] })), body && (jsxRuntime.jsx(material.Typography, { component: "div", sx: popoverBodyStyles(theme), children: body }))] })), actions && jsxRuntime.jsx(material.Box, { sx: popoverActionsStyles, children: actions })] })] }))] }) })));
     };
 
     const getRadioButtonStyles = (theme) => ({
@@ -16038,6 +17327,7 @@
     exports.NoData = NoData;
     exports.OS_LIGHT_COLORS = OS_LIGHT_COLORS;
     exports.OverflowTooltip = OverflowTooltip;
+    exports.POPOVER_PLACEMENTS = POPOVER_PLACEMENTS;
     exports.PageTitle = PageTitle;
     exports.Pagination = Pagination;
     exports.PathDisplay = PathDisplay;
@@ -16169,6 +17459,7 @@
     exports.illustrationSurfaceSubtle = illustrationSurfaceSubtle;
     exports.illustrationWarningGradientEnd = illustrationWarningGradientEnd;
     exports.illustrationWarningGradientStart = illustrationWarningGradientStart;
+    exports.iocVars = iocVars;
     exports.isLeaf = isLeaf;
     exports.lavender10 = lavender10;
     exports.lavender100 = lavender100;