@uniformdev/design-system 20.60.2 → 20.61.1-alpha.11

package/dist/esm/index.js

@@ -1198,8 +1198,8 @@ var buttonSoftAccentPrimary = css10`
 import { css as css14 } from "@emotion/react";
 
 // src/components/Button/Button.tsx
-import { Button as BaseButton } from "@ariakit/react";
-import * as React2 from "react";
+import { Button as BaseUIButton } from "@base-ui/react/button";
+import * as React3 from "react";
 
 // src/components/Shortcuts/util/isMacLike.ts
 var isMacLike = /(Mac|iPhone|iPod|iPad)/i.test(
@@ -1533,18 +1533,24 @@ function useShortcut({
 }
 
 // src/components/Tooltip/Tooltip.tsx
-import {
-  Tooltip as AriakitTooltip,
-  TooltipAnchor,
-  TooltipArrow,
-  TooltipProvider,
-  useTooltipStore
-} from "@ariakit/react";
+import { Tooltip as BaseUITooltip } from "@base-ui/react/tooltip";
+import { useState } from "react";
+
+// src/components/types.ts
+function parsePlacement(placement) {
+  const [side, alignment] = placement.split("-");
+  return {
+    side,
+    alignment: alignment != null ? alignment : "center"
+  };
+}
 
 // src/components/Tooltip/Tooltip.styles.ts
 import { css as css12 } from "@emotion/react";
-var TooltipContainer = css12`
+var TooltipPositionerStyles = css12`
   z-index: var(--z-tooltip);
+`;
+var TooltipContainer = css12`
   border: 2px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: var(--spacing-xs) var(--spacing-sm);
@@ -1554,13 +1560,65 @@ var TooltipContainer = css12`
   position: relative;
 `;
 var TooltipArrowStyles = css12`
-  svg {
-    fill: var(--gray-300);
+  display: flex;
+
+  &[data-side='top'] {
+    bottom: -7px;
+    rotate: 180deg;
+  }
+
+  &[data-side='bottom'] {
+    top: -7px;
+    rotate: 0deg;
   }
+
+  &[data-side='left'] {
+    right: -12px;
+    rotate: 90deg;
+  }
+
+  &[data-side='right'] {
+    left: -12px;
+    rotate: -90deg;
+  }
+`;
+var TooltipArrowFill = css12`
+  fill: var(--gray-300);
+`;
+var TooltipArrowOuterStroke = css12`
+  fill: var(--gray-300);
+`;
+var TooltipArrowInnerStroke = css12`
+  fill: var(--gray-300);
 `;
 
 // src/components/Tooltip/Tooltip.tsx
 import { jsx as jsx12, jsxs as jsxs6 } from "@emotion/react/jsx-runtime";
+var ToolTipArrow = (props) => {
+  return /* @__PURE__ */ jsxs6("svg", { width: "20", height: "8", viewBox: "0 0 20 8", fill: "none", ...props, children: [
+    /* @__PURE__ */ jsx12(
+      "path",
+      {
+        d: "M9.442 0.867356L7.91833 3.45918C7.71941 3.80355 7.4933 4 7.2422 4H6V5H14V4H12.7578C12.5067 4 12.2806 3.80355 12.0817 3.45918L10.558 0.867356C10.4382 0.663827 10.2221 0.663819 10.1023 0.867356Z",
+        css: TooltipArrowFill
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      "path",
+      {
+        d: "M9.26586 0.543486C9.58533 -0.0606339 10.2547 -0.0606441 10.5742 0.543493L12.0979 3.13531C12.3054 3.50903 12.5581 3.7 12.8172 3.7H12.0074L10.558 0.867356C10.4382 0.663819 10.2221 0.663819 10.1023 0.867356L8.65295 3.7H7.84281C8.10193 3.7 8.35459 3.50903 8.56206 3.13531L9.26586 0.543486Z",
+        css: TooltipArrowOuterStroke
+      }
+    ),
+    /* @__PURE__ */ jsx12(
+      "path",
+      {
+        d: "M10 1.22533L8.47636 3.81715C8.18616 4.33519 7.87363 4.5 7.2422 4.5H6V4H7.2422C7.4933 4 7.71941 3.80355 7.91833 3.45918L9.442 0.867356C9.56185 0.663819 9.77789 0.663827 9.89775 0.867356L11.4214 3.45918C11.6203 3.80355 11.8464 4 12.0975 4H14V4.5H12.7578C12.1264 4.5 11.8138 4.33519 11.5236 3.81715L10 1.22533Z",
+        css: TooltipArrowInnerStroke
+      }
+    )
+  ] });
+};
 function Tooltip({
   children,
   title,
@@ -1568,18 +1626,56 @@ function Tooltip({
   visible,
   withoutPortal = false,
   timeout = 0,
-  ...tooltipProps
+  gutter = 10,
+  ...popupProps
 }) {
-  const tooltip = useTooltipStore({ placement, open: visible });
-  return !title ? children : /* @__PURE__ */ jsxs6(TooltipProvider, { store: tooltip, timeout, children: [
-    /* @__PURE__ */ jsx12(TooltipAnchor, { store: tooltip, render: children }),
-    /* @__PURE__ */ jsxs6(AriakitTooltip, { store: tooltip, ...tooltipProps, portal: !withoutPortal, css: TooltipContainer, children: [
-      /* @__PURE__ */ jsx12(TooltipArrow, { store: tooltip, css: TooltipArrowStyles }),
-      title
-    ] })
+  const [inlineContainer, setInlineContainer] = useState(null);
+  if (!title) {
+    return children;
+  }
+  const { side, alignment } = parsePlacement(placement);
+  const positionerContent = /* @__PURE__ */ jsx12(BaseUITooltip.Positioner, { side, align: alignment, sideOffset: gutter, css: TooltipPositionerStyles, children: /* @__PURE__ */ jsxs6(BaseUITooltip.Popup, { css: TooltipContainer, ...popupProps, children: [
+    /* @__PURE__ */ jsx12(BaseUITooltip.Arrow, { css: TooltipArrowStyles, children: /* @__PURE__ */ jsx12(ToolTipArrow, {}) }),
+    title
+  ] }) });
+  return /* @__PURE__ */ jsxs6(BaseUITooltip.Root, { open: visible != null ? visible : popupProps.open, children: [
+    /* @__PURE__ */ jsx12(BaseUITooltip.Trigger, { render: children, delay: timeout }),
+    withoutPortal && /* @__PURE__ */ jsx12(
+      "span",
+      {
+        ref: setInlineContainer,
+        style: { position: "absolute", width: 0, height: 0, overflow: "visible" }
+      }
+    ),
+    /* @__PURE__ */ jsx12(BaseUITooltip.Portal, { container: withoutPortal ? inlineContainer : void 0, children: positionerContent })
   ] });
 }
 
+// src/components/utils/nativeButton.ts
+import * as React2 from "react";
+function markNativeButton(component) {
+  component.renderNativeButton = true;
+  return component;
+}
+function isNativeButtonTrigger(element) {
+  var _a;
+  if (!React2.isValidElement(element)) {
+    return false;
+  }
+  if (element.type === "button") {
+    return true;
+  }
+  if (typeof element.type !== "string") {
+    if (element.type.renderNativeButton) {
+      return true;
+    }
+    if (((_a = element.props) == null ? void 0 : _a.type) === "button") {
+      return true;
+    }
+  }
+  return false;
+}
+
 // src/components/Button/hooks/useButtonStyles.ts
 var btnSize = {
   zero: "padding: 0; font-size: var(--fs-sm);",
@@ -1634,47 +1730,51 @@ var useButtonStyles = getButtonStyles;
 
 // src/components/Button/Button.tsx
 import { Fragment as Fragment2, jsx as jsx13 } from "@emotion/react/jsx-runtime";
-var Button = React2.forwardRef(
-  ({
-    buttonType = "primary",
-    size = "md",
-    children,
-    shortcut,
-    tooltip,
-    tooltipOptions,
-    onClick,
-    disabled: disabled2,
-    ...props
-  }, ref) => {
-    const { btnSize: btnSize2, buttonTheme: buttonTheme3 } = useButtonStyles({
-      theme: buttonType,
-      size,
-      ..."variant" in props ? { variant: props.variant } : {}
-    });
-    const clickHandler = onClick != null ? onClick : shortcut == null ? void 0 : shortcut.handler;
-    const disabledValue = disabled2 != null ? disabled2 : shortcut == null ? void 0 : shortcut.disabled;
-    const buttonContent = /* @__PURE__ */ jsx13(
-      BaseButton,
-      {
-        ref,
-        css: [button, buttonTheme3, btnSize2, disabledValue && buttonDisabled],
-        ...props,
-        onClick: clickHandler,
-        disabled: disabledValue,
-        children
+var Button = markNativeButton(
+  React3.forwardRef(
+    ({
+      buttonType = "primary",
+      size = "md",
+      type = "button",
+      children,
+      shortcut,
+      tooltip,
+      tooltipOptions,
+      onClick,
+      disabled: disabled2,
+      ...props
+    }, ref) => {
+      const { btnSize: btnSize2, buttonTheme: buttonTheme3 } = useButtonStyles({
+        theme: buttonType,
+        size,
+        ..."variant" in props ? { variant: props.variant } : {}
+      });
+      const clickHandler = onClick != null ? onClick : shortcut == null ? void 0 : shortcut.handler;
+      const disabledValue = disabled2 != null ? disabled2 : shortcut == null ? void 0 : shortcut.disabled;
+      const buttonContent = /* @__PURE__ */ jsx13(
+        BaseUIButton,
+        {
+          ref,
+          css: [button, buttonTheme3, btnSize2, disabledValue && buttonDisabled],
+          ...props,
+          type,
+          onClick: clickHandler,
+          disabled: disabledValue,
+          children
+        }
+      );
+      const tip = tooltip != null ? tooltip : shortcut && !disabledValue ? getFormattedShortcut(shortcut.shortcut) : void 0;
+      if (tip) {
+        return /* @__PURE__ */ jsx13(Tooltip, { ...tooltipOptions, title: /* @__PURE__ */ jsx13(Fragment2, { children: tip }), children: /* @__PURE__ */ jsx13("span", { children: buttonContent }) });
       }
-    );
-    const tip = tooltip != null ? tooltip : shortcut && !disabledValue ? getFormattedShortcut(shortcut.shortcut) : void 0;
-    if (tip) {
-      return /* @__PURE__ */ jsx13(Tooltip, { ...tooltipOptions, title: /* @__PURE__ */ jsx13(Fragment2, { children: tip }), children: /* @__PURE__ */ jsx13("span", { children: buttonContent }) });
+      return buttonContent;
     }
-    return buttonContent;
-  }
+  )
 );
 
 // src/components/Button/LinkButton.tsx
-import { Button as BaseButton2 } from "@ariakit/react";
-import * as React3 from "react";
+import { Button as BaseUIButton2 } from "@base-ui/react/button";
+import * as React4 from "react";
 
 // src/components/Button/LinkButton.styles.ts
 import { css as css13 } from "@emotion/react";
@@ -1719,10 +1819,10 @@ var linkButtonTruncated = css13`
 
 // src/components/Button/LinkButton.tsx
 import { jsx as jsx14 } from "@emotion/react/jsx-runtime";
-var LinkButton = React3.forwardRef(
+var LinkButton = React4.forwardRef(
   ({ children, disabled: disabled2, truncated, ...props }, ref) => {
     return /* @__PURE__ */ jsx14(
-      BaseButton2,
+      BaseUIButton2,
       {
         ref,
         css: [
@@ -1978,16 +2078,16 @@ var accessibleHidden = css15`
 `;
 
 // src/hooks/useImageLoadFallback.ts
-import { useEffect as useEffect2, useState } from "react";
+import { useEffect as useEffect2, useState as useState2 } from "react";
 function useImageLoadFallback({
   src,
   srcSet,
   errorFallbackSrc,
   logContext
 }) {
-  const [currentSrc, setCurrentSrc] = useState(src);
-  const [currentSrcSet, setCurrentSrcSet] = useState(srcSet);
-  const [usedFallback, setUsedFallback] = useState(false);
+  const [currentSrc, setCurrentSrc] = useState2(src);
+  const [currentSrcSet, setCurrentSrcSet] = useState2(srcSet);
+  const [usedFallback, setUsedFallback] = useState2(false);
   useEffect2(() => {
     setCurrentSrc(src);
     setCurrentSrcSet(srcSet);
@@ -2206,7 +2306,7 @@ import { GenIcon } from "@react-icons/all-files";
 import { MdSettings } from "@react-icons/all-files/md/MdSettings";
 
 // src/components/Icons/Icon.tsx
-import React4 from "react";
+import React5 from "react";
 
 // src/components/Icons/Icon.styles.ts
 import { css as css17 } from "@emotion/react";
@@ -2255,7 +2355,7 @@ var IconColorUtilitySuccess = css17`
 `;
 
 // src/components/Icons/IconsProvider.tsx
-import { createContext, useContext, useEffect as useEffect3, useState as useState2 } from "react";
+import { createContext, useContext, useEffect as useEffect3, useState as useState3 } from "react";
 import { jsx as jsx16 } from "@emotion/react/jsx-runtime";
 var IconContext = createContext({
   /** object mapping of available icons */
@@ -2267,8 +2367,8 @@ function useIconContext() {
   return useContext(IconContext);
 }
 function IconsProvider({ children }) {
-  const [isLoading, setIsLoading] = useState2(true);
-  const [iconsMap, setIconsMap] = useState2({});
+  const [isLoading, setIsLoading] = useState3(true);
+  const [iconsMap, setIconsMap] = useState3({});
   const initializeIconsMap = async () => {
     const { importedIcons } = await import("./importedIcons-NFIA4IOK.js");
     setIconsMap({ ...importedIcons, ...customIcons });
@@ -2319,7 +2419,7 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
     }
   );
 };
-var Icon = React4.memo(IconInner);
+var Icon = React5.memo(IconInner);
 
 // src/components/Icons/customIcons.tsx
 import { jsx as jsx18 } from "@emotion/react/jsx-runtime";
@@ -4059,7 +4159,7 @@ var UniformLogoLarge = ({ ...props }) => {
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
 import { CgChevronDown as CgChevronDown3 } from "@react-icons/all-files/cg/CgChevronDown";
 import { MdCheckCircle } from "@react-icons/all-files/md/MdCheckCircle";
-import { useEffect as useEffect5, useRef as useRef3, useState as useState6 } from "react";
+import { useEffect as useEffect5, useRef as useRef3, useState as useState8 } from "react";
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
 import { css as css23 } from "@emotion/react";
@@ -4465,28 +4565,40 @@ var outlineButtonStyle = css24`
     border-color: var(--gray-300);
   }
 `;
-var DropdownStyleMenuTrigger = forwardRef3(
-  ({ bgColor = "var(--white)", variant = "ghost", children, ...buttonProps }, ref) => {
+var DropdownStyleMenuTrigger = markNativeButton(
+  forwardRef3(function DropdownStyleMenuTrigger2({ bgColor = "var(--white)", variant = "ghost", children, ...buttonProps }, ref) {
+    var _a;
     const buttonVariantStyle = variant === "ghost" ? ghostButtonStyle : outlineButtonStyle;
-    return /* @__PURE__ */ jsx25("button", { ref, ...buttonProps, css: [buttonStyle(bgColor), buttonVariantStyle], type: "button", children: /* @__PURE__ */ jsxs14(HorizontalRhythm, { align: "center", gap: "xs", children: [
-      /* @__PURE__ */ jsx25("div", { children }),
-      /* @__PURE__ */ jsx25(CgChevronDown, { size: "1rem" })
-    ] }) });
-  }
+    return /* @__PURE__ */ jsx25(
+      "button",
+      {
+        ref,
+        ...buttonProps,
+        css: [buttonStyle(bgColor), buttonVariantStyle],
+        type: (_a = buttonProps.type) != null ? _a : "button",
+        children: /* @__PURE__ */ jsxs14(HorizontalRhythm, { align: "center", gap: "xs", children: [
+          /* @__PURE__ */ jsx25("div", { children }),
+          /* @__PURE__ */ jsx25(CgChevronDown, { size: "1rem" })
+        ] })
+      }
+    );
+  })
 );
-DropdownStyleMenuTrigger.displayName = "DropdownStyleMenuTrigger";
 
 // src/components/Menu/Menu.tsx
-import {
-  Menu as BaseMenu,
-  MenuButton,
-  MenuProvider,
-  useMenuStore
-} from "@ariakit/react";
-import * as React6 from "react";
+import { Menu as BaseUIMenu } from "@base-ui/react/menu";
+import * as React7 from "react";
+import { createContext as createContext3, useContext as useContext3, useState as useState4 } from "react";
+
+// src/components/Modal/ModalPortalContext.ts
+import { createContext as createContext2, useContext as useContext2 } from "react";
+var ModalPortalContext = createContext2(null);
+function useModalPortalContainer() {
+  return useContext2(ModalPortalContext);
+}
 
 // src/components/Menu/filterMenuSeparators.ts
-import React5, { isValidElement } from "react";
+import React6, { isValidElement as isValidElement2 } from "react";
 
 // src/components/Menu/MenuGroup.styles.ts
 import { css as css25 } from "@emotion/react";
@@ -4557,7 +4669,7 @@ var menuItem = (textTheme, forceActive) => css26`
 
   &:hover,
   &:focus,
-  &[data-active-item] {
+  &[data-highlighted] {
     ${typeof forceActive === "undefined" ? activeMenuItem : ""}
 
     svg {
@@ -4648,10 +4760,10 @@ function filterMenuSeparators(children, context) {
   return filteredList;
 }
 function isSubgroup(child) {
-  return isValidElement(child) && (child.type === React5.Fragment || child.type === MenuGroup);
+  return isValidElement2(child) && (child.type === React6.Fragment || child.type === MenuGroup);
 }
 function isMenuSeparator(child) {
-  return isValidElement(child) && child.type === MenuItemSeparator;
+  return isValidElement2(child) && child.type === MenuItemSeparator;
 }
 
 // src/components/Menu/Menu.styles.ts
@@ -4675,7 +4787,6 @@ var menuStyles = (maxMenuHeight) => css27`
   padding: var(--spacing-sm);
   outline: none;
   position: relative;
-  z-index: var(--z-tooltip);
   &:focus {
     outline: none;
   }
@@ -4686,7 +4797,7 @@ var menuStyles = (maxMenuHeight) => css27`
   ${maxMenuHeight ? `
   overflow-x: hidden;
   overflow-y: auto;
-  max-height: min(${maxMenuHeight}, var(--popover-available-height));
+  max-height: min(${maxMenuHeight}, var(--available-height));
   scroll-snap-align: start;
   scroll-snap-stop: always;
   ${scrollbarStyles}
@@ -4749,7 +4860,12 @@ var menuSelectSizeStyles = {
 // src/components/Menu/Menu.tsx
 import { jsx as jsx28, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
 var legacyPlacements = ["auto", "auto-start", "auto-end"];
-var Menu = React6.forwardRef(function Menu2({
+var MenuNestingContext = createContext3({ isNested: false });
+var SubmenuTriggerModeContext = createContext3(false);
+function useIsSubmenuTriggerMode() {
+  return useContext3(SubmenuTriggerModeContext);
+}
+var Menu = React7.forwardRef(function Menu2({
   menuTrigger,
   children,
   placement,
@@ -4761,83 +4877,168 @@ var Menu = React6.forwardRef(function Menu2({
   portalElement,
   size = "base",
   disabled: disabled2,
-  ...props
+  open: controlledOpen,
+  onClose,
+  onOpenChange: onOpenChangeProp,
+  gutter,
+  shift,
+  getAnchorRect,
+  updatePosition,
+  portal,
+  id,
+  style
 }, ref) {
+  const { isNested } = useContext3(MenuNestingContext);
+  const modalContainer = useModalPortalContainer();
+  const [inlineContainer, setInlineContainer] = useState4(null);
   const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
-  const menu = useMenuStore({ placement: placementOverride });
-  return /* @__PURE__ */ jsxs16(MenuProvider, { store: menu, children: [
-    /* @__PURE__ */ jsx28(MenuButton, { ref, render: menuTrigger, disabled: disabled2 }),
+  const defaultSide = isNested ? "right" : "bottom";
+  const defaultAlignment = isNested ? "start" : "center";
+  const { side, alignment } = placementOverride ? parsePlacement(placementOverride) : { side: defaultSide, alignment: defaultAlignment };
+  const anchor = getAnchorRect ? {
+    getBoundingClientRect: () => {
+      var _a, _b, _c, _d;
+      const rect = getAnchorRect(null);
+      return DOMRect.fromRect({
+        x: (_a = rect == null ? void 0 : rect.x) != null ? _a : 0,
+        y: (_b = rect == null ? void 0 : rect.y) != null ? _b : 0,
+        width: (_c = rect == null ? void 0 : rect.width) != null ? _c : 0,
+        height: (_d = rect == null ? void 0 : rect.height) != null ? _d : 0
+      });
+    }
+  } : void 0;
+  const handleOpenChange = (newOpen, eventDetails) => {
+    var _a, _b;
+    if (!newOpen && !isNested && (eventDetails == null ? void 0 : eventDetails.reason) === "sibling-open") {
+      (_a = eventDetails.cancel) == null ? void 0 : _a.call(eventDetails);
+      return;
+    }
+    if (!newOpen && isNested && (eventDetails == null ? void 0 : eventDetails.reason) === "focus-out") {
+      (_b = eventDetails.cancel) == null ? void 0 : _b.call(eventDetails);
+      return;
+    }
+    if (!newOpen) {
+      onClose == null ? void 0 : onClose();
+    }
+    onOpenChangeProp == null ? void 0 : onOpenChangeProp(newOpen);
+  };
+  const shouldPortal = portal !== void 0 ? portal : !withoutPortal;
+  const portalContainer = shouldPortal ? portalElement || modalContainer || void 0 : inlineContainer;
+  const isPortaledToBody = shouldPortal && !portalElement && !modalContainer;
+  const positionMethod = isPortaledToBody ? "fixed" : "absolute";
+  const processedChildren = disableAutoSeparatorManagement ? children : filterMenuSeparators(children);
+  const submenuTriggerElement = isNested && React7.isValidElement(menuTrigger) ? React7.cloneElement(menuTrigger, { hideMenuOnClick: false }) : menuTrigger;
+  const menuContent = /* @__PURE__ */ jsx28(
+    BaseUIMenu.Positioner,
+    {
+      side,
+      align: alignment,
+      positionMethod,
+      sideOffset: gutter != null ? gutter : 0,
+      alignOffset: shift != null ? shift : isNested ? -4 : 0,
+      anchor,
+      disableAnchorTracking: !!updatePosition,
+      style: { zIndex: "var(--z-tooltip)" },
+      children: /* @__PURE__ */ jsx28(
+        BaseUIMenu.Popup,
+        {
+          ref,
+          css: [
+            size === "small" ? menuSmallVariables : menuBaseVariables,
+            menuStyles(maxMenuHeight),
+            typeof menuItemsContainerCssClasses === "object" ? menuItemsContainerCssClasses : void 0
+          ],
+          className: typeof menuItemsContainerCssClasses === "string" ? menuItemsContainerCssClasses : "",
+          "data-testid": testId != null ? testId : "more-menu",
+          id,
+          style,
+          children: /* @__PURE__ */ jsx28(MenuNestingContext.Provider, { value: { isNested: true }, children: processedChildren })
+        }
+      )
+    }
+  );
+  if (isNested) {
+    return /* @__PURE__ */ jsxs16(BaseUIMenu.SubmenuRoot, { open: controlledOpen, onOpenChange: handleOpenChange, disabled: disabled2, children: [
+      /* @__PURE__ */ jsx28(SubmenuTriggerModeContext.Provider, { value: true, children: /* @__PURE__ */ jsx28(BaseUIMenu.SubmenuTrigger, { render: submenuTriggerElement, disabled: disabled2, closeDelay: 100 }) }),
+      /* @__PURE__ */ jsx28(BaseUIMenu.Portal, { container: portalContainer, children: menuContent })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs16(BaseUIMenu.Root, { open: controlledOpen, onOpenChange: handleOpenChange, disabled: disabled2, modal: false, children: [
     /* @__PURE__ */ jsx28(
-      BaseMenu,
+      BaseUIMenu.Trigger,
       {
-        portal: !withoutPortal,
-        portalElement,
-        unmountOnHide: true,
-        gutter: 0,
-        shift: menu.parent ? -4 : 0,
-        ...props,
-        css: [
-          size === "small" ? menuSmallVariables : menuBaseVariables,
-          menuStyles(maxMenuHeight),
-          typeof menuItemsContainerCssClasses === "object" ? menuItemsContainerCssClasses : void 0
-        ],
-        className: typeof menuItemsContainerCssClasses === "string" ? menuItemsContainerCssClasses : "",
-        "data-testid": testId != null ? testId : "more-menu",
-        hideOnHoverOutside: (event) => {
-          var _a;
-          if (!menu.parent) return false;
-          const { contentElement, anchorElement } = menu.getState();
-          const [target] = event.composedPath();
-          if (!target) return false;
-          const activeElement = (_a = target.ownerDocument) == null ? void 0 : _a.activeElement;
-          if (anchorElement == null ? void 0 : anchorElement.contains(target)) return false;
-          if (contentElement == null ? void 0 : contentElement.contains(target)) return false;
-          if (activeElement && target.contains(activeElement)) return false;
-          return true;
-        },
-        children: disableAutoSeparatorManagement ? children : filterMenuSeparators(children)
+        render: menuTrigger,
+        disabled: disabled2,
+        nativeButton: isNativeButtonTrigger(menuTrigger)
       }
-    )
+    ),
+    !shouldPortal && /* @__PURE__ */ jsx28(
+      "div",
+      {
+        ref: setInlineContainer,
+        style: { position: "absolute", width: 0, height: 0, overflow: "visible" }
+      }
+    ),
+    /* @__PURE__ */ jsx28(BaseUIMenu.Portal, { container: portalContainer, children: menuContent })
   ] });
 });
 
 // src/components/Menu/MenuItem.tsx
-import { MenuItem as BaseMenuItem } from "@ariakit/react";
-import * as React7 from "react";
+import { Menu as BaseUIMenu2 } from "@base-ui/react/menu";
+import * as React8 from "react";
 import { jsx as jsx29, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
-var renderAsButton = (renderProps) => /* @__PURE__ */ jsx29("button", { type: "button", ...renderProps });
-var MenuItem = React7.forwardRef(
+var MenuItem = React8.forwardRef(
   ({
     children,
     className,
-    hideMenuOnClick = true,
+    hideMenuOnClick,
+    hideOnClick,
     icon,
     textColor: textColor2 = "base",
     active: active2,
     shortcut,
     onClick,
     disabled: disabled2,
+    render = /* @__PURE__ */ jsx29("button", { type: "button" }),
     ...props
   }, ref) => {
+    var _a;
+    const resolvedCloseOnClick = (_a = hideMenuOnClick != null ? hideMenuOnClick : hideOnClick) != null ? _a : true;
     const resolvedChildren = typeof children === "function" ? children(props) : children;
     const onClickHandler = onClick != null ? onClick : shortcut == null ? void 0 : shortcut.handler;
     const disabledValue = disabled2 != null ? disabled2 : shortcut == null ? void 0 : shortcut.disabled;
+    const childContent = shortcut ? /* @__PURE__ */ jsxs17("div", { css: menuItemShortcutWrapper, children: [
+      /* @__PURE__ */ jsx29(HorizontalRhythm, { gap: "xs", align: "center", children: icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren }),
+      renderShortcut(shortcut)
+    ] }) : icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren;
+    const isSubmenuTrigger = useIsSubmenuTriggerMode();
+    if (isSubmenuTrigger) {
+      return /* @__PURE__ */ jsx29(
+        "div",
+        {
+          ref,
+          "data-testid": "menu-item",
+          css: [menuItem(textColor2, active2), typeof className === "object" ? className : void 0],
+          className: typeof className === "string" ? className : void 0,
+          ...props,
+          ...onClickHandler ? { onClick: onClickHandler } : {},
+          children: childContent
+        }
+      );
+    }
     return /* @__PURE__ */ jsx29(
-      BaseMenuItem,
+      BaseUIMenu2.Item,
       {
         ref,
         "data-testid": "menu-item",
-        hideOnClick: hideMenuOnClick,
+        closeOnClick: resolvedCloseOnClick,
         css: [menuItem(textColor2, active2), typeof className === "object" ? className : void 0],
         className: typeof className === "string" ? className : void 0,
-        render: renderAsButton,
+        render,
         ...props,
         onClick: onClickHandler,
         disabled: disabledValue,
-        children: shortcut ? /* @__PURE__ */ jsxs17("div", { css: menuItemShortcutWrapper, children: [
-          /* @__PURE__ */ jsx29(HorizontalRhythm, { gap: "xs", align: "center", children: icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren }),
-          renderShortcut(shortcut)
-        ] }) : icon ? renderWithIcon(resolvedChildren, icon) : resolvedChildren
+        children: childContent
       }
     );
   }
@@ -4889,16 +5090,19 @@ function renderShortcut(shortcut) {
 // src/components/Menu/MenuTrigger.tsx
 import { forwardRef as forwardRef6 } from "react";
 import { jsx as jsx30, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
-var MenuButton2 = forwardRef6(({ children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx30("button", { ref, type: "button", ...props, children });
-});
-var MenuThreeDots = forwardRef6(
-  ({ buttonTitle = "More options", iconSize: iconSize2 = "1rem", ...props }, ref) => {
-    return /* @__PURE__ */ jsx30(MenuButton2, { css: menuTriggerStyles, ref, "aria-label": buttonTitle, title: buttonTitle, ...props, children: /* @__PURE__ */ jsx30(Icon, { icon: "more-alt", size: iconSize2, iconColor: "currentColor" }) });
-  }
+var MenuButton = markNativeButton(
+  forwardRef6(function MenuButton2({ children, ...props }, ref) {
+    var _a;
+    return /* @__PURE__ */ jsx30("button", { ref, ...props, type: (_a = props.type) != null ? _a : "button", children });
+  })
+);
+var MenuThreeDots = markNativeButton(
+  forwardRef6(function MenuThreeDots2({ buttonTitle = "More options", iconSize: iconSize2 = "1rem", ...props }, ref) {
+    return /* @__PURE__ */ jsx30(MenuButton, { css: menuTriggerStyles, ref, "aria-label": buttonTitle, title: buttonTitle, ...props, children: /* @__PURE__ */ jsx30(Icon, { icon: "more-alt", size: iconSize2, iconColor: "currentColor" }) });
+  })
 );
-var MenuSelect = forwardRef6(
-  ({ children, size = "base", ...props }, ref) => {
+var MenuSelect = markNativeButton(
+  forwardRef6(function MenuSelect2({ children, size = "base", ...props }, ref) {
     const iconSize2 = {
       xs: "0.85rem",
       sm: "0.95rem",
@@ -4906,16 +5110,15 @@ var MenuSelect = forwardRef6(
       md: "1.1rem",
       lg: "1.25rem"
     };
-    return /* @__PURE__ */ jsxs18(MenuButton2, { css: [menuSelectStyles, menuSelectSizeStyles[size]], ref, ...props, children: [
+    return /* @__PURE__ */ jsxs18(MenuButton, { css: [menuSelectStyles, menuSelectSizeStyles[size]], ref, ...props, children: [
       children,
       /* @__PURE__ */ jsx30(Icon, { icon: "chevron-down", size: iconSize2[size], iconColor: "currentColor" })
     ] });
-  }
+  })
 );
 
 // src/components/Menu/SearchableMenu.tsx
-import { useMenuContext } from "@ariakit/react";
-import { useEffect as useEffect4, useRef as useRef2, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect4, useRef as useRef2, useState as useState7 } from "react";
 
 // src/components/Input/styles/CaptionText.styles.ts
 import { css as css28 } from "@emotion/react";
@@ -5147,7 +5350,7 @@ var FieldMessage = ({
 };
 
 // src/components/Input/Fieldset.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 
 // src/components/Input/styles/Fieldset.styles.ts
 import { css as css33 } from "@emotion/react";
@@ -5191,7 +5394,7 @@ var fieldsetBody = css33`
 
 // src/components/Input/Fieldset.tsx
 import { jsx as jsx37, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
-var Fieldset = React8.forwardRef(
+var Fieldset = React9.forwardRef(
   ({ legend, disabled: disabled2, children, invert, ...props }, ref) => {
     return /* @__PURE__ */ jsxs23("fieldset", { css: fieldsetContainer(Boolean(invert)), ref, disabled: disabled2, ...props, children: [
       legend,
@@ -5572,7 +5775,7 @@ function isValueMatch(selectedValues, value) {
 // src/components/Input/InputInlineSelect.tsx
 import { css as css35 } from "@emotion/react";
 import { CgChevronDown as CgChevronDown2 } from "@react-icons/all-files/cg/CgChevronDown";
-import { useRef, useState as useState3 } from "react";
+import { useRef, useState as useState5 } from "react";
 
 // src/components/Input/styles/InputInlineSelect.styles.ts
 import { css as css34 } from "@emotion/react";
@@ -5651,7 +5854,7 @@ var InputInlineSelect = ({
   ...props
 }) => {
   var _a;
-  const [menuVisible, setMenuVisible] = useState3(false);
+  const [menuVisible, setMenuVisible] = useState5(false);
   const divRef = useRef(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
@@ -5712,7 +5915,7 @@ var InputInlineSelect = ({
 // src/components/Input/InputKeywordSearch.tsx
 import { CgClose as CgClose2 } from "@react-icons/all-files/cg/CgClose";
 import { CgSearch } from "@react-icons/all-files/cg/CgSearch";
-import { forwardRef as forwardRef10, useState as useState4 } from "react";
+import { forwardRef as forwardRef10, useState as useState6 } from "react";
 import { useDebounce } from "react-use";
 import { jsx as jsx42 } from "@emotion/react/jsx-runtime";
 var InputKeywordSearch = forwardRef10(
@@ -5797,7 +6000,7 @@ var InputKeywordSearch = forwardRef10(
 InputKeywordSearch.displayName = "InputKeywordSearch";
 var DebouncedInputKeywordSearch = forwardRef10(
   ({ delay = 300, onSearchTextChanged, defaultValue, ...props }, ref) => {
-    const [searchText, setSearchText] = useState4(defaultValue != null ? defaultValue : "");
+    const [searchText, setSearchText] = useState6(defaultValue != null ? defaultValue : "");
     useDebounce(() => onSearchTextChanged(searchText), delay, [searchText]);
     return /* @__PURE__ */ jsx42(InputKeywordSearch, { ...props, ref, value: searchText, onSearchTextChanged: setSearchText });
   }
@@ -5871,7 +6074,7 @@ var InputSelect = forwardRef11(
 
 // src/components/Input/InputTime.tsx
 import { parseTime } from "@internationalized/date";
-import * as React9 from "react";
+import * as React10 from "react";
 import { useCallback as useCallback2 } from "react";
 import {
   DateInput,
@@ -5935,7 +6138,7 @@ function tryParseTime(isoTime) {
     return void 0;
   }
 }
-var InputTime = React9.forwardRef(
+var InputTime = React10.forwardRef(
   ({
     id,
     label: label2,
@@ -6139,15 +6342,23 @@ var Textarea = forwardRef14(
 // src/components/Menu/SearchableMenu.tsx
 import { jsx as jsx49, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 var SearchableMenu = (props) => {
-  const { hasNoResults, disableSearch, onSearchTextChanged, searchPlaceholder, children, ...menuProps } = props;
+  const {
+    hasNoResults,
+    disableSearch,
+    onSearchTextChanged,
+    searchPlaceholder,
+    onSearchEnterKeyDown,
+    children,
+    ...menuProps
+  } = props;
   return /* @__PURE__ */ jsxs31(
     Menu,
     {
       ...menuProps,
-      onClose: (e) => {
+      onClose: () => {
         var _a;
         onSearchTextChanged("");
-        (_a = menuProps.onClose) == null ? void 0 : _a.call(menuProps, e);
+        (_a = menuProps.onClose) == null ? void 0 : _a.call(menuProps);
       },
       children: [
         disableSearch ? null : /* @__PURE__ */ jsxs31(VerticalRhythm, { gap: "xs", children: [
@@ -6169,11 +6380,13 @@ var SearchableMenu = (props) => {
     }
   );
 };
+var SEARCH_HIGHLIGHTED_ATTR = "data-search-highlighted";
+var MENU_ITEM_SELECTOR = '[role="menuitem"]:not([aria-disabled="true"])';
 function MenuSearch({ onSearchTextChanged, searchPlaceholder, onSearchEnterKeyDown }) {
   const searchInputRef = useRef2(null);
   const hasFocusedRef = useRef2(false);
-  const [currentSearchText, setCurrentSearchText] = useState5("");
-  const menu = useMenuContext();
+  const [currentSearchText, setCurrentSearchText] = useState7("");
+  const activeIndexRef = useRef2(null);
   useEffect4(() => {
     if (hasFocusedRef.current || !searchInputRef.current) {
       return;
@@ -6189,56 +6402,76 @@ function MenuSearch({ onSearchTextChanged, searchPlaceholder, onSearchEnterKeyDo
     setCurrentSearchText(text);
     onSearchTextChanged(text);
   };
-  useEffect4(() => {
-    if (!menu) {
-      return;
+  const getEnabledItems = useCallback3(() => {
+    var _a;
+    const popup = (_a = searchInputRef.current) == null ? void 0 : _a.closest('[role="menu"]');
+    if (!popup) {
+      return [];
     }
+    return Array.from(popup.querySelectorAll(MENU_ITEM_SELECTOR));
+  }, []);
+  const setActiveItem = useCallback3(
+    (index) => {
+      var _a;
+      const popup = (_a = searchInputRef.current) == null ? void 0 : _a.closest('[role="menu"]');
+      popup == null ? void 0 : popup.querySelectorAll(`[${SEARCH_HIGHLIGHTED_ATTR}]`).forEach((el) => {
+        el.removeAttribute(SEARCH_HIGHLIGHTED_ATTR);
+        el.removeAttribute("data-highlighted");
+      });
+      activeIndexRef.current = index;
+      if (index !== null) {
+        const items = getEnabledItems();
+        const item = items[index];
+        if (item) {
+          item.setAttribute(SEARCH_HIGHLIGHTED_ATTR, "");
+          item.setAttribute("data-highlighted", "");
+          item.scrollIntoView({ block: "nearest" });
+        }
+      }
+    },
+    [getEnabledItems]
+  );
+  useEffect4(() => {
     if (!currentSearchText) {
-      menu.setActiveId(null);
+      setActiveItem(null);
       return;
     }
     const timer = setTimeout(() => {
-      var _a;
-      const { renderedItems } = menu.getState();
-      const enabledItems = renderedItems.filter((item) => !item.disabled);
-      if (enabledItems.length > 0) {
-        menu.setActiveId(enabledItems[0].id);
-        (_a = enabledItems[0].element) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
+      const items = getEnabledItems();
+      if (items.length > 0) {
+        setActiveItem(0);
       } else {
-        menu.setActiveId(null);
+        setActiveItem(null);
       }
     }, 0);
     return () => clearTimeout(timer);
-  }, [menu, currentSearchText]);
+  }, [currentSearchText, setActiveItem, getEnabledItems]);
   const handleKeyDown = (e) => {
-    var _a, _b;
-    if (!menu) {
-      return;
+    var _a;
+    if (e.key !== "Escape") {
+      e.stopPropagation();
     }
     if (e.key === "ArrowDown" || e.key === "ArrowUp") {
       e.preventDefault();
-      const { renderedItems, activeId } = menu.getState();
-      const enabledItems = renderedItems.filter((item) => !item.disabled);
-      if (enabledItems.length === 0) {
+      const items = getEnabledItems();
+      if (items.length === 0) {
         return;
       }
-      const currentIndex = activeId ? enabledItems.findIndex((item) => item.id === activeId) : -1;
+      const currentIndex = (_a = activeIndexRef.current) != null ? _a : -1;
       let nextIndex;
       if (e.key === "ArrowDown") {
-        nextIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
+        nextIndex = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
       } else {
-        nextIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
       }
-      const nextItem = enabledItems[nextIndex];
-      menu.setActiveId(nextItem.id);
-      (_a = nextItem.element) == null ? void 0 : _a.scrollIntoView({ block: "nearest" });
+      setActiveItem(nextIndex);
     }
     if (e.key === "Enter") {
-      const { activeId, renderedItems } = menu.getState();
-      if (activeId) {
+      const items = getEnabledItems();
+      const activeIndex = activeIndexRef.current;
+      if (activeIndex !== null && items[activeIndex]) {
         e.preventDefault();
-        const activeItem = renderedItems.find((item) => item.id === activeId);
-        (_b = activeItem == null ? void 0 : activeItem.element) == null ? void 0 : _b.click();
+        items[activeIndex].click();
       } else {
         onSearchEnterKeyDown == null ? void 0 : onSearchEnterKeyDown();
       }
@@ -6259,6 +6492,7 @@ function MenuSearch({ onSearchTextChanged, searchPlaceholder, onSearchEnterKeyDo
 
 // src/components/Menu/SelectableMenuItem.tsx
 import { CgCheck } from "@react-icons/all-files/cg/CgCheck";
+import * as React11 from "react";
 
 // src/components/Menu/SelectableMenuItem.styles.ts
 import { css as css38 } from "@emotion/react";
@@ -6298,42 +6532,38 @@ var selectableCheckboxSelected = css38`
 
 // src/components/Menu/SelectableMenuItem.tsx
 import { jsx as jsx50, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
-function SelectableMenuItem({
-  selected,
-  children,
-  selectStyles = "default",
-  isSelectable = true,
-  ...menuItemProps
-}) {
-  return /* @__PURE__ */ jsx50(MenuItem, { ...menuItemProps, children: /* @__PURE__ */ jsxs32(
-    HorizontalRhythm,
-    {
-      align: "center",
-      gap: "sm",
-      css: [
-        selectStyles === "checkbox-select" ? selectableCheckboxMenuItem : selectableDefaultMenuItem
-      ],
-      children: [
-        selectStyles === "checkbox-select" ? /* @__PURE__ */ jsx50(
-          "span",
-          {
-            role: "checkbox",
-            "aria-checked": selected,
-            tabIndex: 0,
-            css: [
-              selectableCheckbox,
-              selectableCheckboxIcon,
-              selected ? selectableCheckboxSelected : void 0,
-              !isSelectable ? selectableCheckboxDisabled : void 0
-            ],
-            children: selected ? /* @__PURE__ */ jsx50(CgCheck, { size: "1.25rem", css: { color: "var(--accent-dark-active)" } }) : null
-          }
-        ) : /* @__PURE__ */ jsx50("span", { css: selectableCheckboxIcon, children: selected ? /* @__PURE__ */ jsx50(CgCheck, {}) : null }),
-        children
-      ]
-    }
-  ) });
-}
+var SelectableMenuItem = React11.forwardRef(
+  function SelectableMenuItem2({ selected, children, selectStyles = "default", isSelectable = true, ...menuItemProps }, ref) {
+    return /* @__PURE__ */ jsx50(MenuItem, { ref, ...menuItemProps, children: /* @__PURE__ */ jsxs32(
+      HorizontalRhythm,
+      {
+        align: "center",
+        gap: "sm",
+        css: [
+          selectStyles === "checkbox-select" ? selectableCheckboxMenuItem : selectableDefaultMenuItem
+        ],
+        children: [
+          selectStyles === "checkbox-select" ? /* @__PURE__ */ jsx50(
+            "span",
+            {
+              role: "checkbox",
+              "aria-checked": selected,
+              tabIndex: 0,
+              css: [
+                selectableCheckbox,
+                selectableCheckboxIcon,
+                selected ? selectableCheckboxSelected : void 0,
+                !isSelectable ? selectableCheckboxDisabled : void 0
+              ],
+              children: selected ? /* @__PURE__ */ jsx50(CgCheck, { size: "1.25rem", css: { color: "var(--accent-dark-active)" } }) : null
+            }
+          ) : /* @__PURE__ */ jsx50("span", { css: selectableCheckboxIcon, children: selected ? /* @__PURE__ */ jsx50(CgCheck, {}) : null }),
+          children
+        ]
+      }
+    ) });
+  }
+);
 
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
 import { css as css39 } from "@emotion/react";
@@ -6527,7 +6757,7 @@ var ButtonWithMenu = ({
   const buttonSize = size === "base" ? "md" : size;
   const btnSize2 = getButtonSize(buttonSize);
   const variant = "variant" in buttonProps && buttonProps.variant === "soft" ? "soft" : void 0;
-  const [showSuccess, setShowSuccess] = useState6(false);
+  const [showSuccess, setShowSuccess] = useState8(false);
   const previousDisabledRef = useRef3(disabledValue);
   useEffect5(() => {
     if (previousDisabledRef.current === "loading" && disabledValue === false) {
@@ -6641,7 +6871,7 @@ var ButtonWithMenu = ({
 
 // src/components/Calendar/Calendar.tsx
 import { isToday, parseDate, today } from "@internationalized/date";
-import { useCallback as useCallback3, useState as useState7 } from "react";
+import { useCallback as useCallback4, useState as useState9 } from "react";
 import {
   Button as AriaButton,
   Calendar as AriaCalendar,
@@ -6777,17 +7007,17 @@ var Calendar = ({
   isDateUnavailable,
   ...props
 }) => {
-  const [focusedValue, setFocusedValue] = useState7(void 0);
+  const [focusedValue, setFocusedValue] = useState9(void 0);
   const today_date = today(timeZone);
   const minDate = tryParseDate(minValue);
   const maxDate = tryParseDate(maxValue);
-  const handleChange = useCallback3(
+  const handleChange = useCallback4(
     (value2) => {
       onChange == null ? void 0 : onChange(value2.toString());
     },
     [onChange]
   );
-  const gotoToday = useCallback3(() => {
+  const gotoToday = useCallback4(() => {
     onChange == null ? void 0 : onChange(today_date.toString());
     setFocusedValue(today_date);
   }, [onChange, today_date]);
@@ -6886,7 +7116,7 @@ var Heading2 = ({
 
 // src/components/Typography/Link.tsx
 import { CgExternal } from "@react-icons/all-files/cg/CgExternal";
-import * as React10 from "react";
+import * as React12 from "react";
 
 // src/components/Typography/styles/Link.styles.ts
 import { css as css42 } from "@emotion/react";
@@ -6916,7 +7146,7 @@ var textColor = {
   default: linkColorDefault,
   destructive: linkColorDestructive
 };
-var Link = React10.forwardRef(
+var Link = React12.forwardRef(
   ({ external, text, linkColor = "default", children, ...props }, ref) => {
     const externalAttrs = external ? {
       target: "_blank",
@@ -6930,7 +7160,7 @@ var Link = React10.forwardRef(
   }
 );
 Link.displayName = "Link";
-var LinkWithRef = React10.forwardRef(
+var LinkWithRef = React12.forwardRef(
   ({ linkManagerComponent: LinkManager, href, as, onClick, linkColor = "default", children, text, ...props }, ref) => /* @__PURE__ */ jsx54(
     LinkManager,
     {
@@ -7590,6 +7820,9 @@ var DismissibleChipAction = ({ onDismiss, ...props }) => {
   );
 };
 
+// src/components/Chip/FilterChip.tsx
+import { forwardRef as forwardRef17 } from "react";
+
 // src/components/Chip/FilterChip.styles.ts
 import { css as css49 } from "@emotion/react";
 var paddingSize = {
@@ -7650,31 +7883,35 @@ var iconSize = {
   md: "1rem",
   lg: "1.25rem"
 };
-var FilterChip2 = ({
-  leadingIcon,
-  asDropdown,
-  children,
-  dataTestId = "view-switch",
-  size = "md",
-  isSelected = false,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs40(
-    "button",
-    {
-      type: "button",
-      css: [filterSizeStyles[size], FilterChip, asDropdown ? FilterChipDropdown : void 0],
-      "data-testid": dataTestId,
-      "aria-selected": isSelected,
-      ...props,
-      children: [
-        leadingIcon ? /* @__PURE__ */ jsx61(Icon, { icon: leadingIcon, iconColor: isSelected ? "accent-dark" : "gray300", size: iconSize[size] }) : null,
-        children,
-        asDropdown ? /* @__PURE__ */ jsx61(Icon, { icon: "chevron-down", iconColor: "gray", size: iconSize[size] }) : null
-      ]
-    }
-  );
-};
+var FilterChip2 = markNativeButton(
+  forwardRef17(function FilterChip3({
+    leadingIcon,
+    asDropdown,
+    children,
+    dataTestId = "view-switch",
+    size = "md",
+    isSelected = false,
+    ...props
+  }, ref) {
+    var _a;
+    return /* @__PURE__ */ jsxs40(
+      "button",
+      {
+        ref,
+        css: [filterSizeStyles[size], FilterChip, asDropdown ? FilterChipDropdown : void 0],
+        "data-testid": dataTestId,
+        "aria-selected": isSelected,
+        ...props,
+        type: (_a = props.type) != null ? _a : "button",
+        children: [
+          leadingIcon ? /* @__PURE__ */ jsx61(Icon, { icon: leadingIcon, iconColor: isSelected ? "accent-dark" : "gray300", size: iconSize[size] }) : null,
+          children,
+          asDropdown ? /* @__PURE__ */ jsx61(Icon, { icon: "chevron-down", iconColor: "gray", size: iconSize[size] }) : null
+        ]
+      }
+    );
+  })
+);
 
 // src/components/Chip/MultilineChip.styles.ts
 import { css as css50 } from "@emotion/react";
@@ -7916,15 +8153,10 @@ var DashedBox = ({
 };
 
 // src/components/DateTimePicker/DateTimePicker.tsx
-import {
-  Popover as Popover2,
-  PopoverDisclosure,
-  PopoverProvider,
-  usePopoverStore
-} from "@ariakit/react";
+import { Popover as BaseUIPopover } from "@base-ui/react/popover";
 import { CalendarDate as CalendarDate3, parseDate as parseDate2, parseTime as parseTime2, Time as Time2 } from "@internationalized/date";
 import { CgCalendar } from "@react-icons/all-files/cg/CgCalendar";
-import { createContext as createContext2, useCallback as useCallback4, useContext as useContext2, useEffect as useEffect6, useMemo, useState as useState8 } from "react";
+import { createContext as createContext4, useCallback as useCallback5, useContext as useContext4, useEffect as useEffect6, useMemo, useState as useState10 } from "react";
 
 // src/components/Popover/Popover.styles.ts
 import { css as css53 } from "@emotion/react";
@@ -7934,6 +8166,22 @@ var PopoverBtn = css53`
 `;
 var Popover = css53`
   z-index: var(--z-tooltip);
+
+  /**
+   * Hide the popover when its anchor (trigger) has been scrolled out of view by a
+   * clipping ancestor. Without this, the portaled popup keeps tracking the (now
+   * hidden) trigger and Base UI's collision avoidance shifts it back into view
+   * each scroll frame, producing a flashing/jumping effect (see UNI-9326).
+   *
+   * 'display: none' is used (rather than 'visibility: hidden') so the
+   * positioner is removed from layout while the anchor is hidden; otherwise the
+   * still-laid-out positioner causes scroll/layout shift as Floating UI keeps
+   * repositioning it during scroll. This is also the pattern Base UI's docs
+   * recommend for data-anchor-hidden.
+   */
+  &[data-anchor-hidden] {
+    display: none;
+  }
 `;
 var PopoverDefaulterTriggerBtn = css53`
   border: none;
@@ -7992,8 +8240,7 @@ var popover = css54`
   padding: var(--spacing-md);
   max-width: unset;
   container-type: inline-size;
-  // we add the 100dvw width as 100% did not work
-  // after upgrading to ariakit popover
+  // 100dvw used because 100% did not constrain properly inside the popover
   width: clamp(200px, 100dvw, 540px);
 `;
 var popoverInnerContent = css54`
@@ -8150,7 +8397,7 @@ var DateTimePickerVariant = /* @__PURE__ */ ((DateTimePickerVariant2) => {
 })(DateTimePickerVariant || {});
 
 // src/components/DateTimePicker/DateTimePicker.tsx
-import { jsx as jsx66, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx66, jsxs as jsxs43 } from "@emotion/react/jsx-runtime";
 var timeZoneOptions = typeof Intl !== "undefined" && typeof Intl.supportedValuesOf === "function" ? Intl.supportedValuesOf("timeZone") : ["Etc/UTC"];
 function getTimezoneOffset(tz) {
   const now = /* @__PURE__ */ new Date();
@@ -8183,7 +8430,7 @@ function getDraftState(parsedValue) {
     timeZone: TIMEZONE_OPTIONS.find(({ value }) => value === timeZone)
   };
 }
-var DateTimePickerContext = createContext2({
+var DateTimePickerContext = createContext4({
   clearValue() {
   },
   changeDate() {
@@ -8192,8 +8439,72 @@ var DateTimePickerContext = createContext2({
   }
 });
 function useDateTimePickerContext() {
-  return useContext2(DateTimePickerContext);
+  return useContext4(DateTimePickerContext);
 }
+var DateTimePickerPopoverContent = ({
+  draftDate,
+  parsedMinVisible,
+  parseMaxVisible,
+  draftTimeZone,
+  parsedValue,
+  handleDateChange,
+  testId,
+  variant,
+  draftTime,
+  belowTimeInputSlot,
+  handleTimeChange,
+  handleTimezoneChange,
+  handleSelectClick,
+  setOpen
+}) => /* @__PURE__ */ jsxs43(Fragment7, { children: [
+  /* @__PURE__ */ jsxs43("div", { css: popoverInnerContent, children: [
+    /* @__PURE__ */ jsx66("div", { css: calendarSection, children: /* @__PURE__ */ jsx66(
+      Calendar,
+      {
+        value: draftDate == null ? void 0 : draftDate.toString(),
+        minValue: parsedMinVisible,
+        maxValue: parseMaxVisible,
+        timeZone: (draftTimeZone == null ? void 0 : draftTimeZone.value) || (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone(),
+        onChange: handleDateChange,
+        "data-testid": `${testId}-calendar`
+      }
+    ) }),
+    variant !== "date" /* Date */ && /* @__PURE__ */ jsx66("div", { css: timeSection, children: /* @__PURE__ */ jsx66(
+      InputTime,
+      {
+        label: "Time",
+        value: draftTime == null ? void 0 : draftTime.toString(),
+        belowInputSlot: belowTimeInputSlot,
+        onChange: handleTimeChange
+      }
+    ) }),
+    /* @__PURE__ */ jsxs43("div", { css: tzSection, children: [
+      /* @__PURE__ */ jsx66(Label, { css: labelText, children: "Timezone" }),
+      /* @__PURE__ */ jsx66(
+        InputComboBox,
+        {
+          value: draftTimeZone,
+          options: TIMEZONE_OPTIONS,
+          onChange: handleTimezoneChange,
+          menuPlacement: "auto",
+          styles: {
+            menu(base) {
+              return {
+                ...base,
+                width: "fit-content",
+                right: 0
+              };
+            }
+          }
+        }
+      )
+    ] })
+  ] }),
+  /* @__PURE__ */ jsxs43(HorizontalRhythm, { gap: "0", children: [
+    /* @__PURE__ */ jsx66(Button, { buttonType: "secondary", onClick: handleSelectClick, children: "Select" }),
+    /* @__PURE__ */ jsx66(Button, { buttonType: "ghostDestructive", onClick: () => setOpen(false), children: "cancel" })
+  ] })
+] });
 var DateTimePicker = ({
   id,
   label: label2,
@@ -8217,8 +8528,9 @@ var DateTimePicker = ({
   compact = false,
   ...props
 }) => {
-  const popover2 = usePopoverStore({ placement });
-  const visible = popover2.useState("open");
+  const [open, setOpen] = useState10(false);
+  const { side, alignment } = parsePlacement(placement);
+  const [inlineContainer, setInlineContainer] = useState10(null);
   const parsedValue = useMemo(() => tryParseAbsolute(value == null ? void 0 : value.datetime, value == null ? void 0 : value.timeZone), [value]);
   const parsedMinVisible = useMemo(
     () => tryParseAbsoluteToDateString(minVisible, value == null ? void 0 : value.timeZone),
@@ -8229,29 +8541,29 @@ var DateTimePicker = ({
     [maxVisible, value == null ? void 0 : value.timeZone]
   );
   const draftState = useMemo(() => getDraftState(parsedValue), [parsedValue]);
-  const [draftDate, setDraftDate] = useState8(() => draftState.date);
-  const [draftTime, setDraftTime] = useState8(() => draftState.time);
-  const [draftTimeZone, setDraftTimeZone] = useState8(() => draftState.timeZone);
+  const [draftDate, setDraftDate] = useState10(() => draftState.date);
+  const [draftTime, setDraftTime] = useState10(() => draftState.time);
+  const [draftTimeZone, setDraftTimeZone] = useState10(() => draftState.timeZone);
   useEffect6(() => {
-    if (visible) {
+    if (open) {
       setDraftDate(draftState.date);
       setDraftTime(draftState.time);
       setDraftTimeZone(draftState.timeZone);
     }
-  }, [draftState, visible]);
-  const handleDateChange = useCallback4((isoDate) => {
+  }, [draftState, open]);
+  const handleDateChange = useCallback5((isoDate) => {
     setDraftDate(parseDate2(isoDate));
   }, []);
-  const handleTimeChange = useCallback4((isoTime) => {
+  const handleTimeChange = useCallback5((isoTime) => {
     setDraftTime(parseTime2(isoTime));
   }, []);
-  const handleTimezoneChange = useCallback4((timeZone) => {
+  const handleTimezoneChange = useCallback5((timeZone) => {
     if (!timeZone) {
       return;
     }
     setDraftTimeZone(timeZone);
   }, []);
-  const handleSelectClick = useCallback4(() => {
+  const handleSelectClick = useCallback5(() => {
     const now = /* @__PURE__ */ new Date();
     const date = draftDate || new CalendarDate3(now.getFullYear(), now.getMonth() + 1, now.getDate());
     const newValue = {
@@ -8263,9 +8575,9 @@ var DateTimePicker = ({
       timeZone: draftTimeZone == null ? void 0 : draftTimeZone.value
     };
     onChange == null ? void 0 : onChange(newValue);
-    popover2.hide();
-  }, [draftDate, draftTime, draftTimeZone == null ? void 0 : draftTimeZone.value, onChange, parsedValue == null ? void 0 : parsedValue.timeZone, popover2]);
-  const handleClearClick = useCallback4(() => {
+    setOpen(false);
+  }, [draftDate, draftTime, draftTimeZone == null ? void 0 : draftTimeZone.value, onChange, parsedValue == null ? void 0 : parsedValue.timeZone]);
+  const handleClearClick = useCallback5(() => {
     setDraftDate(null);
     setDraftTime(null);
     onChange == null ? void 0 : onChange({ datetime: null });
@@ -8280,7 +8592,7 @@ var DateTimePicker = ({
   );
   return /* @__PURE__ */ jsx66(DateTimePickerContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs43("div", { "data-testid": testId, "data-variant": variant, ...props, children: [
     showLabel ? /* @__PURE__ */ jsx66(Label, { css: [labelText], "data-testid": `${testId}-label`, children: label2 }) : null,
-    /* @__PURE__ */ jsx66("div", { css: inputContainer, children: /* @__PURE__ */ jsxs43(PopoverProvider, { store: popover2, children: [
+    /* @__PURE__ */ jsx66("div", { css: inputContainer, children: /* @__PURE__ */ jsxs43(BaseUIPopover.Root, { open, onOpenChange: setOpen, children: [
       /* @__PURE__ */ jsxs43(
         "div",
         {
@@ -8291,12 +8603,11 @@ var DateTimePicker = ({
             errorMessage ? inputError : null
           ],
           "data-disabled": disabled2,
-          "data-focus": visible,
+          "data-focus": open,
           children: [
             /* @__PURE__ */ jsx66(
-              PopoverDisclosure,
+              BaseUIPopover.Trigger,
               {
-                store: popover2,
                 css: datePartButton,
                 render: /* @__PURE__ */ jsx66(Button, { buttonType: "ghostUnimportant" }),
                 disabled: disabled2,
@@ -8321,73 +8632,50 @@ var DateTimePicker = ({
                 buttonType: "ghost",
                 size: compact ? "sm" : "md",
                 disabled: disabled2,
-                onClick: popover2.show,
+                onClick: () => setOpen(true),
+                "data-testid": `${testId}-icon`,
                 children: /* @__PURE__ */ jsx66(Icon, { icon: triggerIcon, iconColor: "gray", size: "1rem" })
               }
             )
           ]
         }
       ),
-      /* @__PURE__ */ jsxs43(
-        Popover2,
+      /* @__PURE__ */ jsx66(BaseUIPopover.Portal, { container: portal ? void 0 : inlineContainer, children: /* @__PURE__ */ jsx66(
+        BaseUIPopover.Positioner,
         {
-          store: popover2,
-          gutter: offset,
-          unmountOnHide: true,
-          "aria-label": "Pick a date",
-          css: [Popover, PopoverBody, popover],
-          portal,
-          children: [
-            /* @__PURE__ */ jsxs43("div", { css: popoverInnerContent, children: [
-              /* @__PURE__ */ jsx66("div", { css: calendarSection, children: /* @__PURE__ */ jsx66(
-                Calendar,
-                {
-                  value: draftDate == null ? void 0 : draftDate.toString(),
-                  minValue: parsedMinVisible,
-                  maxValue: parseMaxVisible,
-                  timeZone: (draftTimeZone == null ? void 0 : draftTimeZone.value) || (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone(),
-                  onChange: handleDateChange,
-                  "data-testid": `${testId}-calendar`
-                }
-              ) }),
-              variant !== "date" /* Date */ && /* @__PURE__ */ jsx66("div", { css: timeSection, children: /* @__PURE__ */ jsx66(
-                InputTime,
+          side,
+          align: alignment,
+          sideOffset: offset,
+          css: Popover,
+          children: /* @__PURE__ */ jsx66(
+            BaseUIPopover.Popup,
+            {
+              "aria-label": "Pick a date",
+              css: [PopoverBody, popover],
+              children: /* @__PURE__ */ jsx66(
+                DateTimePickerPopoverContent,
                 {
-                  label: "Time",
-                  value: draftTime == null ? void 0 : draftTime.toString(),
-                  belowInputSlot: belowTimeInputSlot,
-                  onChange: handleTimeChange
+                  draftDate,
+                  parsedMinVisible,
+                  parseMaxVisible,
+                  draftTimeZone,
+                  parsedValue,
+                  handleDateChange,
+                  testId,
+                  variant,
+                  draftTime,
+                  belowTimeInputSlot,
+                  handleTimeChange,
+                  handleTimezoneChange,
+                  handleSelectClick,
+                  setOpen
                 }
-              ) }),
-              /* @__PURE__ */ jsxs43("div", { css: tzSection, children: [
-                /* @__PURE__ */ jsx66(Label, { css: labelText, children: "Timezone" }),
-                /* @__PURE__ */ jsx66(
-                  InputComboBox,
-                  {
-                    value: draftTimeZone,
-                    options: TIMEZONE_OPTIONS,
-                    onChange: handleTimezoneChange,
-                    menuPlacement: "auto",
-                    styles: {
-                      menu(base) {
-                        return {
-                          ...base,
-                          width: "fit-content",
-                          right: 0
-                        };
-                      }
-                    }
-                  }
-                )
-              ] })
-            ] }),
-            /* @__PURE__ */ jsxs43(HorizontalRhythm, { gap: "0", children: [
-              /* @__PURE__ */ jsx66(Button, { buttonType: "secondary", onClick: handleSelectClick, children: "Select" }),
-              /* @__PURE__ */ jsx66(Button, { buttonType: "ghostDestructive", onClick: popover2.hide, children: "cancel" })
-            ] })
-          ]
+              )
+            }
+          )
         }
-      )
+      ) }),
+      !portal && /* @__PURE__ */ jsx66("span", { ref: setInlineContainer })
     ] }) }),
     /* @__PURE__ */ jsx66(
       FieldMessage,
@@ -8405,7 +8693,7 @@ var DateTimePicker = ({
 // src/components/DescriptionList/DescriptionList.tsx
 import { TbCheck } from "@react-icons/all-files/tb/TbCheck";
 import { TbMinus } from "@react-icons/all-files/tb/TbMinus";
-import React11 from "react";
+import React13 from "react";
 
 // src/components/DescriptionList/DescriptionList.styles.ts
 import { css as css55 } from "@emotion/react";
@@ -8431,7 +8719,7 @@ var descriptionListValueStyles = css55`
 
 // src/components/DescriptionList/DescriptionList.tsx
 import { jsx as jsx67, jsxs as jsxs44 } from "@emotion/react/jsx-runtime";
-var DescriptionList = React11.forwardRef(
+var DescriptionList = React13.forwardRef(
   ({ items, variant = "horizontal", ...listProps }, ref) => {
     if (!(items == null ? void 0 : items.length)) {
       return null;
@@ -8442,7 +8730,7 @@ var DescriptionList = React11.forwardRef(
         ref,
         css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
         ...listProps,
-        children: items == null ? void 0 : items.map(({ label: label2, value }) => /* @__PURE__ */ jsxs44(React11.Fragment, { children: [
+        children: items == null ? void 0 : items.map(({ label: label2, value }) => /* @__PURE__ */ jsxs44(React13.Fragment, { children: [
           /* @__PURE__ */ jsx67("dt", { css: descriptionListLabelStyles, children: label2 }),
           /* @__PURE__ */ jsx67("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ jsx67(DescriptionListValueBoolean, { value }) : value })
         ] }, label2))
@@ -8458,7 +8746,7 @@ var DescriptionListValueBoolean = ({ value }) => {
 };
 
 // src/components/Details/Details.tsx
-import * as React12 from "react";
+import * as React14 from "react";
 
 // src/components/Details/Details.styles.ts
 import { css as css56 } from "@emotion/react";
@@ -8524,9 +8812,9 @@ var Details = ({
   onChange,
   ...props
 }) => {
-  const detailsRef = React12.useRef(null);
-  const [internalOpen, setInternalOpen] = React12.useState(isOpenByDefault);
-  const memoizedIsOpen = React12.useMemo(() => {
+  const detailsRef = React14.useRef(null);
+  const [internalOpen, setInternalOpen] = React14.useState(isOpenByDefault);
+  const memoizedIsOpen = React14.useMemo(() => {
     return isOpen !== void 0 ? isOpen : internalOpen;
   }, [internalOpen, isOpen]);
   return /* @__PURE__ */ jsxs45(
@@ -8568,7 +8856,7 @@ var Details = ({
 };
 
 // src/components/DragHandle/DragHandle.tsx
-import { forwardRef as forwardRef16 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 
 // src/components/DragHandle/DragHandle.styles.ts
 import { css as css57 } from "@emotion/react";
@@ -8600,7 +8888,7 @@ var DragHandleDisabled = css57`
 
 // src/components/DragHandle/DragHandle.tsx
 import { jsx as jsx69 } from "@emotion/react/jsx-runtime";
-var DragHandle = forwardRef16(
+var DragHandle = forwardRef18(
   ({ disableDnd, height = "3.125rem", ...props }, ref) => {
     return /* @__PURE__ */ jsx69(
       "button",
@@ -8617,7 +8905,7 @@ var DragHandle = forwardRef16(
 
 // src/components/Drawer/Drawer.tsx
 import { CgChevronRight } from "@react-icons/all-files/cg/CgChevronRight";
-import React14, { createContext as createContext4, useContext as useContext4, useEffect as useEffect7, useRef as useRef5, useState as useState11 } from "react";
+import React16, { createContext as createContext6, useContext as useContext6, useEffect as useEffect7, useRef as useRef5, useState as useState13 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Drawer/Drawer.styles.ts
@@ -8728,9 +9016,9 @@ var drawerWrapperOverlayStyles = css58`
 `;
 
 // src/components/Drawer/DrawerProvider.tsx
-import { createContext as createContext3, useCallback as useCallback5, useContext as useContext3, useId, useState as useState10 } from "react";
+import { createContext as createContext5, useCallback as useCallback6, useContext as useContext5, useId, useState as useState12 } from "react";
 import { jsx as jsx70 } from "@emotion/react/jsx-runtime";
-var DrawerContext = createContext3({
+var DrawerContext = createContext5({
   providerId: "",
   drawersRegistry: [],
   registerDrawer: () => {
@@ -8743,9 +9031,9 @@ var DrawerContext = createContext3({
   }
 });
 var DrawerProvider = ({ children }) => {
-  const [drawersRegistry, setDrawersRegistry] = useState10([]);
+  const [drawersRegistry, setDrawersRegistry] = useState12([]);
   const providerId = useId();
-  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = useState10(void 0);
+  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = useState12(void 0);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -8753,7 +9041,7 @@ var DrawerProvider = ({ children }) => {
     },
     shortcut: "escape"
   });
-  const registerDrawer = useCallback5(
+  const registerDrawer = useCallback6(
     ({ drawer, onFirstRender }) => {
       setDrawersRegistry((currentValue) => {
         var _a, _b;
@@ -8786,7 +9074,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  const unregisterDrawer = useCallback5(
+  const unregisterDrawer = useCallback6(
     (drawer) => {
       setDrawersRegistry((currentValue) => {
         return currentValue.filter((d) => !isEqualDrawerInstance(drawer, d));
@@ -8794,7 +9082,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  const registerTakeoverStackId = useCallback5(
+  const registerTakeoverStackId = useCallback6(
     (stackId) => {
       if (drawerTakeoverStackId !== stackId) {
         setDrawerTakeoverStackId(stackId);
@@ -8802,7 +9090,7 @@ var DrawerProvider = ({ children }) => {
     },
     [drawerTakeoverStackId]
   );
-  const unregisterTakeoverStackId = useCallback5(
+  const unregisterTakeoverStackId = useCallback6(
     (stackId) => {
       if (drawerTakeoverStackId === stackId) {
         setDrawerTakeoverStackId(void 0);
@@ -8827,7 +9115,7 @@ var DrawerProvider = ({ children }) => {
   );
 };
 var useDrawer = () => {
-  return useContext3(DrawerContext);
+  return useContext5(DrawerContext);
 };
 var useCloseCurrentDrawer = () => {
   const context = useDrawer();
@@ -8846,11 +9134,11 @@ function isEqualDrawerInstance(a, b) {
 // src/components/Drawer/Drawer.tsx
 import { jsx as jsx71, jsxs as jsxs46 } from "@emotion/react/jsx-runtime";
 var defaultSackId = "_default";
-var CurrentDrawerContext = createContext4({});
+var CurrentDrawerContext = createContext6({});
 var useCurrentDrawer = () => {
-  return useContext4(CurrentDrawerContext);
+  return useContext6(CurrentDrawerContext);
 };
-var Drawer = React14.forwardRef(
+var Drawer = React16.forwardRef(
   ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
     var _a;
     const { stackId: inheritedStackId } = useCurrentDrawer();
@@ -8879,7 +9167,7 @@ var DrawerInner = ({
 }) => {
   const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
   const closeButtonRef = useRef5(null);
-  const [rendererElement, setRendererElement] = useState11(null);
+  const [rendererElement, setRendererElement] = useState13(null);
   useEffect7(() => {
     registerDrawer({
       drawer: {
@@ -8989,7 +9277,7 @@ var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) =>
 
 // src/components/Drawer/DrawerRenderer.tsx
 import { useEffect as useEffect8, useMemo as useMemo3 } from "react";
-import { Fragment as Fragment7, jsx as jsx73, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx73, jsxs as jsxs48 } from "@emotion/react/jsx-runtime";
 var drawerWidth = {
   narrow: "29rem",
   medium: "43rem",
@@ -9082,7 +9370,7 @@ var DrawerWrapper = ({
     offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
   }
   const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
-  return /* @__PURE__ */ jsxs48(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs48(Fragment8, { children: [
     /* @__PURE__ */ jsx73("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
     /* @__PURE__ */ jsx73(
       "div",
@@ -9181,7 +9469,7 @@ var FlexiCardTitle = ({ icon, heading, ...props }) => {
 };
 
 // src/components/IconButton/IconButton.tsx
-import { forwardRef as forwardRef17 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 
 // src/components/IconButton/IconButton.styles.ts
 import { css as css62 } from "@emotion/react";
@@ -9217,7 +9505,7 @@ var variants = {
 
 // src/components/IconButton/IconButton.tsx
 import { jsx as jsx77 } from "@emotion/react/jsx-runtime";
-var IconButton = forwardRef17(
+var IconButton = forwardRef19(
   ({ children, size = "md", variant = "square", ...props }, ref) => {
     return /* @__PURE__ */ jsx77(Button, { ref, css: [iconButton, variants[variant], sizes2[size]], ...props, children });
   }
@@ -9225,7 +9513,7 @@ var IconButton = forwardRef17(
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-import { useCallback as useCallback6, useEffect as useEffect10, useRef as useRef6, useState as useState12 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef6, useState as useState14 } from "react";
 
 // src/components/Image/Image.styles.ts
 import { css as css63 } from "@emotion/react";
@@ -9328,8 +9616,8 @@ function Image({
   errorFallbackSrc,
   ...imgAttribs
 }) {
-  const [loading, setLoading] = useState12(true);
-  const [loadErrorText, setLoadErrorText] = useState12("");
+  const [loading, setLoading] = useState14(true);
+  const [loadErrorText, setLoadErrorText] = useState14("");
   const { currentSrc, currentSrcSet, tryFallback } = useImageLoadFallback({
     src: src != null ? src : "",
     srcSet,
@@ -9340,7 +9628,7 @@ function Image({
   useEffect10(() => {
     setLoadErrorText("");
   }, [src, srcSet]);
-  const updateImageSrc = useCallback6(() => {
+  const updateImageSrc = useCallback7(() => {
     let message = "";
     try {
       if (currentSrc === "") {
@@ -9699,7 +9987,7 @@ var EditTeamIntegrationTile = ({
 // src/components/Tiles/IntegrationComingSoon.tsx
 import { css as css66 } from "@emotion/react";
 import { CgHeart } from "@react-icons/all-files/cg/CgHeart";
-import { useEffect as useEffect11, useState as useState13 } from "react";
+import { useEffect as useEffect11, useState as useState15 } from "react";
 import { jsx as jsx84, jsxs as jsxs56 } from "@emotion/react/jsx-runtime";
 var IntegrationComingSoon = ({
   name,
@@ -9709,7 +9997,7 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = useState13(false);
+  const [upVote, setUpVote] = useState15(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
@@ -9810,10 +10098,10 @@ var IntegrationLoadingFrame = css67`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment8, jsx as jsx85, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx85, jsxs as jsxs57 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx85(Fragment8, { children: componentCount.map((i) => /* @__PURE__ */ jsxs57("div", { css: IntegrationLoadingTileContainer, children: [
+  return /* @__PURE__ */ jsx85(Fragment9, { children: componentCount.map((i) => /* @__PURE__ */ jsxs57("div", { css: IntegrationLoadingTileContainer, children: [
     /* @__PURE__ */ jsx85("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
     /* @__PURE__ */ jsx85("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
@@ -9915,7 +10203,7 @@ var IntegrationTile = ({
 };
 
 // src/components/Tiles/LinkTile.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef20 } from "react";
 
 // src/components/Tiles/styles/Tile.styles.ts
 import { css as css69 } from "@emotion/react";
@@ -9968,7 +10256,7 @@ var TileHorizontal = css69`
 
 // src/components/Tiles/LinkTile.tsx
 import { jsx as jsx88 } from "@emotion/react/jsx-runtime";
-var LinkTile2 = forwardRef18(
+var LinkTile2 = forwardRef20(
   ({ orientation = "vertical", children, ...props }, ref) => {
     if ("linkManagerComponent" in props) {
       const { linkManagerComponent: LinkManager, ...rest } = props;
@@ -10153,7 +10441,7 @@ var IntegrationModalHeaderContentWrapper = css72`
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment9, jsx as jsx92, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx92, jsxs as jsxs60 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs60(
     "svg",
@@ -10194,7 +10482,7 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu, children }) => {
-  return /* @__PURE__ */ jsxs60(Fragment9, { children: [
+  return /* @__PURE__ */ jsxs60(Fragment10, { children: [
     /* @__PURE__ */ jsx92(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
     /* @__PURE__ */ jsx92("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs60("div", { css: IntegrationModalHeaderTitleGroup, children: [
       icon ? /* @__PURE__ */ jsx92(IntegrationModalIcon, { icon, name: name || "" }) : null,
@@ -10275,11 +10563,11 @@ import {
 } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import {
-  useCallback as useCallback7,
+  useCallback as useCallback8,
   useEffect as useEffect13,
   useMemo as useMemo5,
   useRef as useRef8,
-  useState as useState14
+  useState as useState16
 } from "react";
 
 // src/utils/useDebouncedCallback.ts
@@ -10370,11 +10658,11 @@ var KeyValueInput = ({
   showIconColumn = false,
   renderIconSelector
 }) => {
-  const [isDragging, setIsDragging] = useState14(false);
-  const [indexToFocus, setIndexToFocus] = useState14(null);
+  const [isDragging, setIsDragging] = useState16(false);
+  const [indexToFocus, setIndexToFocus] = useState16(null);
   const popoverStoresMap = useRef8({});
   const keyInputRefsMap = useRef8({});
-  const [blockAutoGenerateForValues, setBlockAutoGenerateForValues] = useState14(
+  const [blockAutoGenerateForValues, setBlockAutoGenerateForValues] = useState16(
     () => new Set(value.map((item) => item.value))
   );
   const sensors = useSensors(
@@ -10386,7 +10674,7 @@ var KeyValueInput = ({
   const valueWithIds = useMemo5(() => {
     return value.map((item, index) => ({ ...item, id: generateItemId(item, index) }));
   }, [value]);
-  const handleAddOptionRow = useCallback7(
+  const handleAddOptionRow = useCallback8(
     (insertIndex) => {
       const newValue = [...value];
       newValue.splice(insertIndex + 1, 0, newItemDefault);
@@ -10395,7 +10683,7 @@ var KeyValueInput = ({
     },
     [onChange, value, newItemDefault]
   );
-  const handleDeleteOptionRow = useCallback7(
+  const handleDeleteOptionRow = useCallback8(
     (deleteIndex) => {
       const updatedOptions = value.filter((_, index) => index !== deleteIndex);
       onChange(updatedOptions);
@@ -10418,7 +10706,7 @@ var KeyValueInput = ({
     [onFocusChange],
     300
   );
-  const handleUpdateOptionRow = useCallback7(
+  const handleUpdateOptionRow = useCallback8(
     (rowIndex, rowValue) => {
       onChange(
         value.map((item, index) => {
@@ -10431,7 +10719,7 @@ var KeyValueInput = ({
     },
     [onChange, value]
   );
-  const handleKeyPaste = useCallback7(
+  const handleKeyPaste = useCallback8(
     (rowIndex, e) => {
       const pastedText = e.clipboardData.getData("text");
       const lines = pastedText.split("\n").filter((line) => line.trim() !== "");
@@ -10459,7 +10747,7 @@ var KeyValueInput = ({
     },
     [onChange, value]
   );
-  const handleDragEnd = useCallback7(
+  const handleDragEnd = useCallback8(
     (e) => {
       setIsDragging(false);
       const { active: active2, over } = e;
@@ -10472,13 +10760,13 @@ var KeyValueInput = ({
     },
     [value, valueWithIds, onChange, setIsDragging]
   );
-  const handleDragStart = useCallback7(() => {
+  const handleDragStart = useCallback8(() => {
     Object.values(popoverStoresMap.current).forEach((store) => {
       store.hide();
     });
     setIsDragging(true);
   }, [setIsDragging]);
-  const handleDragCancel = useCallback7(() => {
+  const handleDragCancel = useCallback8(() => {
     setIsDragging(false);
   }, [setIsDragging]);
   useEffect13(() => {
@@ -10507,7 +10795,7 @@ var KeyValueInput = ({
           showIconColumn && /* @__PURE__ */ jsxs61(HorizontalRhythm, { align: "center", gap: "xs", children: [
             /* @__PURE__ */ jsx94("span", { children: iconLabel }),
             !iconInfoPopover ? null : /* @__PURE__ */ jsx94(
-              Popover3,
+              Popover2,
               {
                 buttonText: `${iconLabel} info`,
                 iconColor: "gray",
@@ -10520,7 +10808,7 @@ var KeyValueInput = ({
           /* @__PURE__ */ jsxs61(HorizontalRhythm, { align: "center", gap: "xs", children: [
             /* @__PURE__ */ jsx94("span", { children: keyLabel }),
             !keyInfoPopover ? null : /* @__PURE__ */ jsx94(
-              Popover3,
+              Popover2,
               {
                 buttonText: `${keyLabel} info`,
                 iconColor: "gray",
@@ -10534,7 +10822,7 @@ var KeyValueInput = ({
             /* @__PURE__ */ jsxs61(HorizontalRhythm, { align: "center", gap: "xs", children: [
               /* @__PURE__ */ jsx94("span", { children: valueLabel }),
               !valueInfoPopover ? null : /* @__PURE__ */ jsx94(
-                Popover3,
+                Popover2,
                 {
                   buttonText: `${valueLabel} info`,
                   iconColor: "gray",
@@ -10747,13 +11035,13 @@ var KeyValueInputItem = ({
 // src/components/LabelsQuickFilter/LabelsQuickFilter.tsx
 import { TbChevronRight as TbChevronRight2 } from "@react-icons/all-files/tb/TbChevronRight";
 import { TbTags } from "@react-icons/all-files/tb/TbTags";
-import { useCallback as useCallback8, useMemo as useMemo6, useState as useState16 } from "react";
+import { useCallback as useCallback9, useMemo as useMemo6, useState as useState18 } from "react";
 
 // src/components/QuickFilter/QuickFilter.tsx
 import { CgMathPlus as CgMathPlus2 } from "@react-icons/all-files/cg/CgMathPlus";
 import { CgTag } from "@react-icons/all-files/cg/CgTag";
 import { TbWashDryclean } from "@react-icons/all-files/tb/TbWashDryclean";
-import { useEffect as useEffect14, useRef as useRef9, useState as useState15 } from "react";
+import { useEffect as useEffect14, useRef as useRef9, useState as useState17 } from "react";
 
 // src/components/Swatch/Swatch.styles.ts
 import { css as css74 } from "@emotion/react";
@@ -11166,7 +11454,7 @@ var QuickFilter = ({
   const hasSelectedItems = selectedItems && (selectedItems == null ? void 0 : selectedItems.length) > 0;
   const containerRef = useRef9(null);
   const hasPositionedRef = useRef9(false);
-  const [open, setOpen] = useState15(false);
+  const [open, setOpen] = useState17(false);
   useEffect14(() => {
     if (open) {
       onOpen == null ? void 0 : onOpen();
@@ -11174,11 +11462,11 @@ var QuickFilter = ({
       onClose == null ? void 0 : onClose();
     }
   }, [open, onOpen, onClose]);
-  const defaultGetAnchorRect = () => {
+  const defaultGetAnchorRect = containerRef.current ? () => {
     var _a;
     const rect = (_a = containerRef.current) == null ? void 0 : _a.getBoundingClientRect();
     if (!rect) {
-      return null;
+      return {};
     }
     return {
       x: rect.right,
@@ -11186,7 +11474,7 @@ var QuickFilter = ({
       width: 0,
       height: rect.height
     };
-  };
+  } : void 0;
   const defaultUpdatePosition = ({ updatePosition }) => {
     if (!hasPositionedRef.current) {
       hasPositionedRef.current = true;
@@ -11325,7 +11613,7 @@ var QuickFilter = ({
 };
 
 // src/components/LabelsQuickFilter/LabelsQuickFilter.tsx
-import { Fragment as Fragment10, jsx as jsx99, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx99, jsxs as jsxs65 } from "@emotion/react/jsx-runtime";
 var LabelsQuickFilter = ({
   buttonText,
   addButtonText,
@@ -11346,7 +11634,7 @@ var LabelsQuickFilter = ({
   menuUpdatePosition,
   maxCount = 0
 }) => {
-  const [searchTerm, setSearchTerm] = useState16("");
+  const [searchTerm, setSearchTerm] = useState18("");
   const selectedIdsSet = useMemo6(
     () => selectedIds instanceof Set ? selectedIds : new Set(selectedIds),
     [selectedIds]
@@ -11393,7 +11681,7 @@ var LabelsQuickFilter = ({
       SelectableMenuItem,
       {
         selectStyles: "checkbox-select",
-        hideOnClick: false,
+        hideMenuOnClick: false,
         onClick: () => handleToggle(item),
         selected: isSelected,
         children: [
@@ -11418,7 +11706,7 @@ var LabelsQuickFilter = ({
           SelectableMenuItem,
           {
             selectStyles: "checkbox-select",
-            hideOnClick: false,
+            hideMenuOnClick: false,
             onClick: () => handleToggle(item),
             selected: isChildSelected,
             children: [
@@ -11479,7 +11767,7 @@ var LabelsQuickFilter = ({
                 SelectableMenuItem,
                 {
                   selectStyles: "checkbox-select",
-                  hideOnClick: false,
+                  hideMenuOnClick: false,
                   onClick: () => handleToggle(item),
                   selected: isChildSelected,
                   children: [
@@ -11506,7 +11794,7 @@ var LabelsQuickFilter = ({
       isCreateDisabled: isCreateDisabled2
     };
   }, [filteredItems, items, searchTerm]);
-  const handleSearchEnterKeyDown = useCallback8(() => {
+  const handleSearchEnterKeyDown = useCallback9(() => {
     if (canCreateLabel && !isCreateDisabled && onCreateLabel) {
       onCreateLabel(searchTerm);
     }
@@ -11541,7 +11829,7 @@ var LabelsQuickFilter = ({
           }
           return renderLabelItem(item);
         }),
-        canCreateLabel && onCreateLabel ? /* @__PURE__ */ jsxs65(Fragment10, { children: [
+        canCreateLabel && onCreateLabel ? /* @__PURE__ */ jsxs65(Fragment11, { children: [
           filteredItems.length > 0 ? /* @__PURE__ */ jsx99(MenuItemSeparator, {}) : null,
           /* @__PURE__ */ jsx99(MenuItem, { hideOnClick: false, disabled: isCreateDisabled, onClick: () => onCreateLabel(searchTerm), children: /* @__PURE__ */ jsxs65(HorizontalRhythm, { align: "center", gap: "sm", css: { fontSize: "var(--fs-sm)" }, children: [
             /* @__PURE__ */ jsx99("span", { css: { width: "var(--spacing-base)", flexShrink: 0 } }),
@@ -11560,14 +11848,16 @@ var LabelsQuickFilter = ({
 };
 
 // src/components/Popover/Popover.tsx
+import { Popover as BaseUIPopover2 } from "@base-ui/react/popover";
 import {
-  Popover as AriakitPopover,
-  PopoverDisclosure as PopoverDisclosure2,
-  PopoverProvider as PopoverProvider2,
-  usePopoverContext,
-  usePopoverStore as usePopoverStore2
-} from "@ariakit/react";
-import { useEffect as useEffect15 } from "react";
+  createContext as createContext7,
+  useCallback as useCallback10,
+  useContext as useContext7,
+  useEffect as useEffect15,
+  useMemo as useMemo7,
+  useRef as useRef10,
+  useState as useState19
+} from "react";
 
 // src/components/Popover/PopoverBody.tsx
 import { jsx as jsx100 } from "@emotion/react/jsx-runtime";
@@ -11594,8 +11884,9 @@ var PopoverBody2 = ({
 };
 
 // src/components/Popover/Popover.tsx
-import { Fragment as Fragment11, jsx as jsx101, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
-var Popover3 = ({
+import { Fragment as Fragment12, jsx as jsx101, jsxs as jsxs66 } from "@emotion/react/jsx-runtime";
+var PopoverComponentContext = createContext7(null);
+var Popover2 = ({
   iconColor = "action",
   icon = "info",
   iconSize: iconSize2 = "1rem",
@@ -11608,32 +11899,86 @@ var Popover3 = ({
   onInit,
   variant = "small",
   maxWidth = variant === "large" ? "24rem" : "14rem",
-  ...otherProps
+  gutter,
+  portal = true,
+  open: controlledOpen,
+  onOpenChange: controlledOnOpenChange,
+  className,
+  style,
+  tabIndex,
+  id,
+  disabled: disabled2
 }) => {
-  const popover2 = usePopoverStore2({ placement });
+  const [uncontrolledOpen, setUncontrolledOpen] = useState19(false);
+  const open = controlledOpen !== void 0 ? controlledOpen : uncontrolledOpen;
+  const openRef = useRef10(false);
+  openRef.current = open;
+  const modalContainer = useModalPortalContainer();
+  const { side, alignment } = parsePlacement(placement);
+  const onOpenChangeRef = useRef10(controlledOnOpenChange);
+  onOpenChangeRef.current = controlledOnOpenChange;
+  const controlledOpenRef = useRef10(controlledOpen);
+  controlledOpenRef.current = controlledOpen;
+  const setOpen = useCallback10((nextOpen) => {
+    var _a;
+    if (controlledOpenRef.current === void 0) {
+      setUncontrolledOpen(nextOpen);
+    }
+    (_a = onOpenChangeRef.current) == null ? void 0 : _a.call(onOpenChangeRef, nextOpen);
+  }, []);
+  const hide = useCallback10(() => setOpen(false), [setOpen]);
+  const show = useCallback10(() => setOpen(true), [setOpen]);
+  const handleOpenChange = useCallback10((nextOpen) => setOpen(nextOpen), [setOpen]);
+  const shimStore = useMemo7(
+    () => ({
+      hide,
+      show,
+      get open() {
+        return openRef.current;
+      }
+    }),
+    [hide, show]
+  );
+  const contextValue = useMemo7(
+    () => ({ open, setOpen, hide, show }),
+    [open, setOpen, hide, show]
+  );
+  const [inlineContainer, setInlineContainer] = useState19(null);
   useEffect15(() => {
-    onInit == null ? void 0 : onInit({ store: popover2 });
-  }, [popover2]);
-  return /* @__PURE__ */ jsxs66(PopoverProvider2, { store: popover2, children: [
+    onInit == null ? void 0 : onInit({ store: shimStore });
+  }, [shimStore]);
+  const portalContainer = portal ? modalContainer != null ? modalContainer : void 0 : inlineContainer;
+  return /* @__PURE__ */ jsx101(PopoverComponentContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs66(BaseUIPopover2.Root, { open, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsx101(
-      PopoverDisclosure2,
+      BaseUIPopover2.Trigger,
       {
         css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
-        disabled: otherProps.disabled,
-        children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs66(Fragment11, { children: [
+        disabled: disabled2,
+        children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs66(Fragment12, { children: [
           /* @__PURE__ */ jsx101(Icon, { icon, iconColor, size: iconSize2 }),
           /* @__PURE__ */ jsx101("span", { hidden: true, children: buttonText })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx101(AriakitPopover, { unmountOnHide: true, "aria-label": ariaLabel, css: Popover, ...otherProps, children: /* @__PURE__ */ jsx101(PopoverBody2, { variant, maxWidth, children }) })
-  ] });
+    /* @__PURE__ */ jsx101(BaseUIPopover2.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx101(BaseUIPopover2.Positioner, { side, align: alignment, sideOffset: gutter, css: Popover, children: /* @__PURE__ */ jsx101(
+      BaseUIPopover2.Popup,
+      {
+        ...id !== void 0 && { id },
+        "aria-label": ariaLabel,
+        role: "dialog",
+        className,
+        style,
+        tabIndex,
+        children: /* @__PURE__ */ jsx101(PopoverBody2, { variant, maxWidth, children })
+      }
+    ) }) }),
+    !portal && /* @__PURE__ */ jsx101("span", { ref: setInlineContainer })
+  ] }) });
 };
 var usePopoverComponentContext = () => {
-  const contextValue = usePopoverContext();
-  return contextValue;
+  return useContext7(PopoverComponentContext);
 };
 
 // src/components/LimitsBar/LimitsBar.styles.ts
@@ -11712,7 +12057,7 @@ var LimitsBar = ({ current, max, popoverContent, barColor, ...props }) => {
     ),
     /* @__PURE__ */ jsxs67(HorizontalRhythm, { gap: "sm", align: "center", children: [
       /* @__PURE__ */ jsx102("span", { css: [LimitsBarCountText, LimitsBarTextColor(textColor2)], "aria-label": "usage count", children: displayText }),
-      popoverContent ? /* @__PURE__ */ jsx102(Popover3, { buttonText: "Info", placement: "top", children: popoverContent }) : null
+      popoverContent ? /* @__PURE__ */ jsx102(Popover2, { buttonText: "Info", placement: "top", children: popoverContent }) : null
     ] })
   ] });
 };
@@ -11906,6 +12251,7 @@ var ScrollableListItem = ({
   disableShadow,
   ...props
 }) => {
+  var _a;
   return /* @__PURE__ */ jsx106(
     "div",
     {
@@ -11914,7 +12260,7 @@ var ScrollableListItem = ({
         disableShadow ? void 0 : ScrollableListItemShadow,
         active2 ? ScrollableListItemActive : void 0
       ],
-      children: /* @__PURE__ */ jsxs71("button", { css: ScrollableListItemBtn, type: "button", ...props, children: [
+      children: /* @__PURE__ */ jsxs71("button", { css: ScrollableListItemBtn, ...props, type: (_a = props.type) != null ? _a : "button", children: [
         /* @__PURE__ */ jsxs71(HorizontalRhythm, { gap: "xs", align: "center", children: [
           icon,
           /* @__PURE__ */ jsx106("span", { children: buttonText })
@@ -12002,9 +12348,8 @@ var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
 };
 
 // src/components/Modal/Modal.tsx
-import { PortalContext } from "@ariakit/react";
 import { CgClose as CgClose5 } from "@react-icons/all-files/cg/CgClose";
-import React16, { useCallback as useCallback9, useEffect as useEffect16, useRef as useRef10, useState as useState17 } from "react";
+import React18, { useCallback as useCallback11, useEffect as useEffect16, useRef as useRef11, useState as useState20 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css83 } from "@emotion/react";
@@ -12094,7 +12439,7 @@ var modalDialogInnerStyles = css83`
 import { jsx as jsx108, jsxs as jsxs73 } from "@emotion/react/jsx-runtime";
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
-var Modal = React16.forwardRef(
+var Modal = React18.forwardRef(
   ({
     header: header2,
     children,
@@ -12108,10 +12453,10 @@ var Modal = React16.forwardRef(
     disableBodyScroll = false,
     ...modalProps
   }, ref) => {
-    const mouseDownInsideModal = useRef10(false);
-    const dialogRef = useRef10(null);
-    const [portalTarget, setPortalTarget] = useState17(null);
-    const setDialogRef = useCallback9(
+    const mouseDownInsideModal = useRef11(false);
+    const dialogRef = useRef11(null);
+    const [portalTarget, setPortalTarget] = useState20(null);
+    const setDialogRef = useCallback11(
       (element) => {
         dialogRef.current = element;
         setPortalTarget(element);
@@ -12156,7 +12501,7 @@ var Modal = React16.forwardRef(
         style: {
           width,
           height: height === "auto" ? "min-content" : height,
-          // allows menus rendered in the PortalContext to overflow the modal contents
+          // allows menus rendered in the ModalPortalContext to overflow the modal contents
           // (internal scrolling of contents is handled on a child element)
           overflow: "visible"
         },
@@ -12176,7 +12521,7 @@ var Modal = React16.forwardRef(
           e.preventDefault();
         },
         ...modalProps,
-        children: /* @__PURE__ */ jsx108(PortalContext.Provider, { value: portalTarget, children: /* @__PURE__ */ jsxs73(
+        children: /* @__PURE__ */ jsx108(ModalPortalContext.Provider, { value: portalTarget, children: /* @__PURE__ */ jsxs73(
           "div",
           {
             css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
@@ -12223,9 +12568,9 @@ var Modal = React16.forwardRef(
 Modal.displayName = "Modal";
 
 // src/components/Modal/ModalDialog.tsx
-import { forwardRef as forwardRef19 } from "react";
+import { forwardRef as forwardRef21 } from "react";
 import { jsx as jsx109, jsxs as jsxs74 } from "@emotion/react/jsx-runtime";
-var ModalDialog = forwardRef19(
+var ModalDialog = forwardRef21(
   ({ header: header2, buttonGroup, modalSize = "lg", children, height = "auto", onRequestClose, ...props }, ref) => {
     return /* @__PURE__ */ jsx109(
       Modal,
@@ -12251,7 +12596,7 @@ var ModalDialog = forwardRef19(
 ModalDialog.displayName = "ModalDialog";
 
 // src/components/Objects/ObjectGridContainer.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 
 // src/components/Objects/styles/ObjectGridContainer.styles.ts
 import { css as css84 } from "@emotion/react";
@@ -12263,7 +12608,7 @@ var ObjectGridContainer = (gridCount) => css84`
 
 // src/components/Objects/ObjectGridContainer.tsx
 import { jsx as jsx110 } from "@emotion/react/jsx-runtime";
-var ObjectGridContainer2 = forwardRef20(
+var ObjectGridContainer2 = forwardRef22(
   ({ gridCount = 3, children, ...props }, ref) => {
     return /* @__PURE__ */ jsx110(
       "div",
@@ -12489,7 +12834,7 @@ var CoverSelectedChip = css86`
 `;
 
 // src/components/Objects/ObjectGridItemCardCover.tsx
-import { Fragment as Fragment12, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx112, jsxs as jsxs76 } from "@emotion/react/jsx-runtime";
 var ObjectGridItemCardCover = (props) => {
   if ("imageUrl" in props && props.imageUrl) {
     const { imageUrl, srcSet, alt, errorFallbackSrc } = props;
@@ -12523,7 +12868,7 @@ var ObjectGridItemCover = ({
   coverSlotBottomRight,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs76(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs76(Fragment13, { children: [
     coverSlotLeft ? /* @__PURE__ */ jsx112("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
     /* @__PURE__ */ jsx112(ObjectGridItemCardCover, { ...props }),
     coverSlotRight ? /* @__PURE__ */ jsx112("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
@@ -12560,7 +12905,7 @@ var ObjectGridItemCoverButton = ({
 };
 
 // src/components/Objects/ObjectGridItemHeading.tsx
-import { useEffect as useEffect17, useRef as useRef11, useState as useState18 } from "react";
+import { useEffect as useEffect17, useRef as useRef12, useState as useState21 } from "react";
 
 // src/components/Objects/styles/ObjectGridItemHeading.styles.ts
 import { css as css87 } from "@emotion/react";
@@ -12586,8 +12931,8 @@ var ObjectGridItemHeading2 = ({
   tooltip,
   ...props
 }) => {
-  const [hasTruncation, setHasTruncation] = useState18(false);
-  const headingRef = useRef11(null);
+  const [hasTruncation, setHasTruncation] = useState21(false);
+  const headingRef = useRef12(null);
   const onStopPropagation = (e) => {
     e.stopPropagation();
   };
@@ -13073,8 +13418,8 @@ function Pagination({
 }
 
 // src/components/ParameterInputs/hooks/ParameterShellContext.tsx
-import { createContext as createContext5, useContext as useContext5 } from "react";
-var ParameterShellContext = createContext5({
+import { createContext as createContext8, useContext as useContext8 } from "react";
+var ParameterShellContext = createContext8({
   id: "",
   label: "",
   hiddenLabel: void 0,
@@ -13083,7 +13428,7 @@ var ParameterShellContext = createContext5({
   }
 });
 var useParameterShell = () => {
-  const { id, label: label2, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = useContext5(ParameterShellContext);
+  const { id, label: label2, hiddenLabel, errorMessage, handleManuallySetErrorMessage } = useContext8(ParameterShellContext);
   return {
     id,
     label: label2,
@@ -13159,7 +13504,7 @@ var LabelLeadingIcon = ({
 };
 
 // src/components/ParameterInputs/ParameterActionButton.tsx
-import React17 from "react";
+import React19 from "react";
 
 // src/components/ParameterInputs/styles/ParameterActionButton.styles.ts
 import { css as css94 } from "@emotion/react";
@@ -13263,7 +13608,7 @@ var ParameterActionButton = ({
       children
     }
   );
-  if (tooltip && (typeof tooltip === "string" || React17.isValidElement(tooltip))) {
+  if (tooltip && (typeof tooltip === "string" || React19.isValidElement(tooltip))) {
     return /* @__PURE__ */ jsx124(Tooltip, { title: tooltip, ...tooltipProps, children: buttonElement });
   }
   return buttonElement;
@@ -13303,7 +13648,7 @@ var ParameterDrawerHeader = ({ title, iconBeforeTitle, children }) => {
 };
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef23 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
 import { css as css96 } from "@emotion/react";
@@ -13331,7 +13676,7 @@ var fieldsetLegend2 = css96`
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 import { jsx as jsx126, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
-var ParameterGroup = forwardRef21(
+var ParameterGroup = forwardRef23(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs85("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
       /* @__PURE__ */ jsx126("legend", { css: fieldsetLegend2, children: legend }),
@@ -13341,10 +13686,10 @@ var ParameterGroup = forwardRef21(
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { forwardRef as forwardRef23, useDeferredValue } from "react";
+import { forwardRef as forwardRef25, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { useState as useState19 } from "react";
+import { useState as useState22 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 
 // src/components/ParameterInputs/styles/ParameterImage.styles.ts
@@ -13385,9 +13730,9 @@ var previewModalImage = css97`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment13, jsx as jsx127, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx127, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
-  const [showModal, setShowModal] = useState19(false);
+  const [showModal, setShowModal] = useState22(false);
   return imageSrc ? /* @__PURE__ */ jsxs86("div", { css: previewWrapper, children: [
     /* @__PURE__ */ jsx127(PreviewImageModal, { open: showModal, imageSrc, onRequestClose: () => setShowModal(false) }),
     /* @__PURE__ */ jsx127(
@@ -13404,7 +13749,7 @@ function ParameterImagePreview({ imageSrc }) {
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx127(Fragment13, { children: createPortal2(
+  return open ? /* @__PURE__ */ jsx127(Fragment14, { children: createPortal2(
     /* @__PURE__ */ jsx127(
       Modal,
       {
@@ -13420,7 +13765,7 @@ var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
 
 // src/components/ParameterInputs/ParameterShell.tsx
 import { css as css100 } from "@emotion/react";
-import { useState as useState20 } from "react";
+import { useState as useState23 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterInput.styles.ts
 import { css as css98 } from "@emotion/react";
@@ -13758,9 +14103,9 @@ var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 import { jsx as jsx129 } from "@emotion/react/jsx-runtime";
-var ParameterMenuButton = forwardRef22(
+var ParameterMenuButton = forwardRef24(
   ({ label: label2, children, disabled: disabled2, withoutPortal }, ref) => {
     return /* @__PURE__ */ jsx129(
       Menu,
@@ -13874,7 +14219,7 @@ var ParameterShell = ({
   menuWithoutPortal,
   ...props
 }) => {
-  const [manualErrorMessage, setManualErrorMessage] = useState20(void 0);
+  const [manualErrorMessage, setManualErrorMessage] = useState23(void 0);
   const setErrorMessage = (message) => setManualErrorMessage(message);
   const errorMessaging = errorMessage || manualErrorMessage;
   return /* @__PURE__ */ jsxs87("div", { css: inputContainer2, ...props, id, children: [
@@ -13928,7 +14273,7 @@ var ParameterShell = ({
               ParameterOverrideMarker,
               {
                 onClick: onResetOverriddenValue,
-                tooltipProps: { portal: !menuWithoutPortal }
+                tooltipProps: { withoutPortal: menuWithoutPortal }
               }
             ) : null
           ] })
@@ -13954,8 +14299,8 @@ var ParameterShellPlaceholder = ({ children }) => {
 var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx130(Tooltip, { title: "The default value has been overridden", ...props.tooltipProps, children: /* @__PURE__ */ jsx130("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx130("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment14, jsx as jsx131, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
-var ParameterImage = forwardRef23(
+import { Fragment as Fragment15, jsx as jsx131, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+var ParameterImage = forwardRef25(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsxs88(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
@@ -13964,11 +14309,11 @@ var ParameterImage = forwardRef23(
     ] });
   }
 );
-var ParameterImageInner = forwardRef23((props, ref) => {
+var ParameterImageInner = forwardRef25((props, ref) => {
   const { value } = props;
   const { id, label: label2, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
-  return /* @__PURE__ */ jsxs88(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs88(Fragment15, { children: [
     /* @__PURE__ */ jsx131(
       "input",
       {
@@ -13986,13 +14331,13 @@ var ParameterImageInner = forwardRef23((props, ref) => {
 });
 
 // src/components/ParameterInputs/ParameterInput.tsx
-import { forwardRef as forwardRef24 } from "react";
+import { forwardRef as forwardRef26 } from "react";
 import { jsx as jsx132 } from "@emotion/react/jsx-runtime";
-var ParameterInput = forwardRef24((props, ref) => {
+var ParameterInput = forwardRef26((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx132(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx132(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = forwardRef24(({ enableMouseWheel = false, ...props }, ref) => {
+var ParameterInputInner = forwardRef26(({ enableMouseWheel = false, ...props }, ref) => {
   const { id, label: label2, hiddenLabel } = useParameterShell();
   const isNumberInputAndMouseWheelDisabled = enableMouseWheel !== true && props.type === "number";
   return /* @__PURE__ */ jsx132(
@@ -14011,7 +14356,7 @@ var ParameterInputInner = forwardRef24(({ enableMouseWheel = false, ...props },
 });
 
 // src/components/ParameterInputs/ParameterLabels.tsx
-import { useMemo as useMemo7, useRef as useRef12 } from "react";
+import { useMemo as useMemo8, useRef as useRef13 } from "react";
 import { jsx as jsx133 } from "@emotion/react/jsx-runtime";
 var ParameterLabels = ({ disabled: disabled2 = false, ...props }) => {
   const { shellProps, innerProps } = extractParameterProps(props);
@@ -14073,18 +14418,18 @@ var ParameterLabelsInner = (props) => {
   var _a;
   const { label: label2 } = useParameterShell();
   const { onChange } = props;
-  const containerRef = useRef12(null);
-  const hasPositionedRef = useRef12(false);
-  const selectedValues = useMemo7(
+  const containerRef = useRef13(null);
+  const hasPositionedRef = useRef13(false);
+  const selectedValues = useMemo8(
     () => {
       var _a2, _b;
       return (_b = (_a2 = props.value) != null ? _a2 : props.defaultValue) != null ? _b : [];
     },
     [props.value, props.defaultValue]
   );
-  const items = useMemo7(() => convertOptionsToItems(props.options), [props.options]);
-  const optionsMap = useMemo7(() => createOptionsMap(props.options), [props.options]);
-  const selectedIds = useMemo7(() => {
+  const items = useMemo8(() => convertOptionsToItems(props.options), [props.options]);
+  const optionsMap = useMemo8(() => createOptionsMap(props.options), [props.options]);
+  const selectedIds = useMemo8(() => {
     if (!Array.isArray(selectedValues)) {
       return /* @__PURE__ */ new Set();
     }
@@ -14147,11 +14492,12 @@ var ParameterLabelsInner = (props) => {
             hasPositionedRef.current = false;
             (_a2 = props.onClose) == null ? void 0 : _a2.call(props);
           },
-          menuGetAnchorRect: () => {
+          menuGetAnchorRect: containerRef.current && // when no labels are selected, we use default positioning
+          selectedIds.size !== 0 ? () => {
             var _a2;
             const rect = (_a2 = containerRef.current) == null ? void 0 : _a2.getBoundingClientRect();
-            if (!rect || selectedIds.size === 0) {
-              return null;
+            if (!rect) {
+              return {};
             }
             return {
               x: rect.left,
@@ -14159,7 +14505,7 @@ var ParameterLabelsInner = (props) => {
               width: 0,
               height: rect.height
             };
-          },
+          } : null,
           menuUpdatePosition: ({ updatePosition }) => {
             if (!hasPositionedRef.current) {
               hasPositionedRef.current = true;
@@ -14174,9 +14520,9 @@ var ParameterLabelsInner = (props) => {
 };
 
 // src/components/ParameterInputs/ParameterLink.tsx
-import { forwardRef as forwardRef25 } from "react";
+import { forwardRef as forwardRef27 } from "react";
 import { jsx as jsx134, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
-var ParameterLink = forwardRef25(
+var ParameterLink = forwardRef27(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsx134(
@@ -14200,7 +14546,7 @@ var ParameterLink = forwardRef25(
     );
   }
 );
-var ParameterLinkInner = forwardRef25(
+var ParameterLinkInner = forwardRef27(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label: label2, hiddenLabel } = useParameterShell();
     if (!props.value)
@@ -14306,7 +14652,7 @@ var ParameterMultiSelectInner = (props) => {
 };
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment15, jsx as jsx136, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx136, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -14332,7 +14678,7 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs90(Fragment15, { children: [
+  return /* @__PURE__ */ jsxs90(Fragment16, { children: [
     /* @__PURE__ */ jsx136(
       ParameterInput,
       {
@@ -14383,13 +14729,13 @@ var ParameterNameAndPublicIdInput = ({
 };
 
 // src/components/ParameterInputs/ParameterNumberSlider.tsx
-import { forwardRef as forwardRef27 } from "react";
+import { forwardRef as forwardRef29 } from "react";
 
 // src/components/Slider/Slider.tsx
-import { forwardRef as forwardRef26, useCallback as useCallback10, useMemo as useMemo8 } from "react";
+import { forwardRef as forwardRef28, useCallback as useCallback12, useMemo as useMemo9 } from "react";
 
 // src/components/Slider/SliderLabels.tsx
-import { useEffect as useEffect18, useRef as useRef13, useState as useState21 } from "react";
+import { useEffect as useEffect18, useRef as useRef14, useState as useState24 } from "react";
 
 // src/components/Slider/styles/Slider.styles.ts
 import { css as css101 } from "@emotion/react";
@@ -14814,8 +15160,8 @@ function calculateLabelVisibility(ticks, currentValue, containerWidth) {
   }));
 }
 function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
-  const containerRef = useRef13(null);
-  const [measuredWidth, setMeasuredWidth] = useState21(containerWidth);
+  const containerRef = useRef14(null);
+  const [measuredWidth, setMeasuredWidth] = useState24(containerWidth);
   useEffect18(() => {
     if (containerRef.current) {
       const resizeObserver = new ResizeObserver((entries) => {
@@ -14853,7 +15199,7 @@ function SliderLabels({ ticks, currentValue, containerWidth = 300 }) {
 
 // src/components/Slider/Slider.tsx
 import { jsx as jsx138, jsxs as jsxs91 } from "@emotion/react/jsx-runtime";
-var Slider = forwardRef26(
+var Slider = forwardRef28(
   ({
     value,
     onChange,
@@ -14870,7 +15216,7 @@ var Slider = forwardRef26(
     name
   }, ref) => {
     const isOptionsMode = Boolean(options && options.length > 0);
-    const { min, max, step, smallTicks, largeTicks } = useMemo8(() => {
+    const { min, max, step, smallTicks, largeTicks } = useMemo9(() => {
       if (isOptionsMode && options) {
         if (options.length === 0) {
           return {
@@ -14948,14 +15294,14 @@ var Slider = forwardRef26(
     }, [isOptionsMode, options, propMin, propMax, propStep]);
     const isValueUnset = value === void 0 || value === null || typeof value === "number" && isNaN(value);
     const clampedValue = isValueUnset ? min : Math.min(Math.max(value, min), max);
-    const handleSliderChange = useCallback10(
+    const handleSliderChange = useCallback12(
       (event) => {
         const newValue = Number(event.target.value);
         onChange(newValue);
       },
       [onChange]
     );
-    const handleNumberInputChange = useCallback10(
+    const handleNumberInputChange = useCallback12(
       (event) => {
         if (event.target.value === "") {
           onChange(void 0);
@@ -15028,13 +15374,13 @@ Slider.displayName = "Slider";
 
 // src/components/ParameterInputs/ParameterNumberSlider.tsx
 import { jsx as jsx139 } from "@emotion/react/jsx-runtime";
-var ParameterNumberSlider = forwardRef27(
+var ParameterNumberSlider = forwardRef29(
   (props, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsx139(ParameterShell, { "data-testid": "parameter-number-slider", ...shellProps, children: /* @__PURE__ */ jsx139(ParameterNumberSliderInner, { ref, ...innerProps }) });
   }
 );
-var ParameterNumberSliderInner = forwardRef27(({ ...props }, ref) => {
+var ParameterNumberSliderInner = forwardRef29(({ ...props }, ref) => {
   const { id, label: label2, hiddenLabel } = useParameterShell();
   return /* @__PURE__ */ jsx139(
     Slider,
@@ -15194,7 +15540,7 @@ var defaultParameterConfiguration = {
 // src/components/ParameterInputs/ParameterRichText.tsx
 import { deepEqual as deepEqual2 } from "fast-equals";
 import { ParagraphNode as ParagraphNode2 } from "lexical";
-import { useEffect as useEffect27, useState as useState27 } from "react";
+import { useEffect as useEffect27, useState as useState30 } from "react";
 
 // src/components/ParameterInputs/rich-text/CustomCodeNode.ts
 import { CodeNode } from "@lexical/code";
@@ -15551,7 +15897,7 @@ import {
   FOCUS_COMMAND,
   PASTE_COMMAND
 } from "lexical";
-import { useCallback as useCallback11, useEffect as useEffect21, useRef as useRef14, useState as useState22 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect21, useRef as useRef15, useState as useState25 } from "react";
 
 // src/components/ParameterInputs/rich-text/utils.ts
 import { $isAtNodeEnd } from "@lexical/selection";
@@ -15611,7 +15957,7 @@ var normalizeStateForDeepEqualComparison = (editorState) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment16, jsx as jsx140, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx140, jsxs as jsxs92 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -15924,10 +16270,10 @@ function LinkNodePlugin({
     return path;
   };
   const [editor] = useLexicalComposerContext3();
-  const [linkPopoverState, setLinkPopoverState] = useState22();
-  const linkPopoverElRef = useRef14(null);
-  const [isEditorFocused, setIsEditorFocused] = useState22(false);
-  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState22(false);
+  const [linkPopoverState, setLinkPopoverState] = useState25();
+  const linkPopoverElRef = useRef15(null);
+  const [isEditorFocused, setIsEditorFocused] = useState25(false);
+  const [isLinkPopoverFocused, setIsLinkPopoverFocused] = useState25(false);
   useEffect21(() => {
     if (!isEditorFocused && !isLinkPopoverFocused) {
       setLinkPopoverState(void 0);
@@ -16038,7 +16384,7 @@ function LinkNodePlugin({
       )
     );
   }, [editor, onConnectLink]);
-  const maybeShowLinkToolbar = useCallback11(() => {
+  const maybeShowLinkToolbar = useCallback13(() => {
     if (!editor.isEditable()) {
       return;
     }
@@ -16099,7 +16445,7 @@ function LinkNodePlugin({
       });
     });
   };
-  return /* @__PURE__ */ jsxs92(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs92(Fragment17, { children: [
     /* @__PURE__ */ jsx140(
       NodeEventPlugin,
       {
@@ -16176,7 +16522,7 @@ import {
   OUTDENT_CONTENT_COMMAND,
   SELECTION_CHANGE_COMMAND
 } from "lexical";
-import { useEffect as useEffect22, useRef as useRef15 } from "react";
+import { useEffect as useEffect22, useRef as useRef16 } from "react";
 function isIndentPermitted(maxDepth) {
   const selection = $getSelection2();
   if (!$isRangeSelection2(selection)) {
@@ -16231,7 +16577,7 @@ function $indentOverTab(selection) {
 }
 function ListIndentPlugin({ maxDepth }) {
   const [editor] = useLexicalComposerContext4();
-  const isInListItemNode = useRef15(false);
+  const isInListItemNode = useRef16(false);
   useEffect22(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND,
@@ -16298,7 +16644,7 @@ import {
   TableCellNode
 } from "@lexical/table";
 import { $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3, $setSelection } from "lexical";
-import { forwardRef as forwardRef28, useCallback as useCallback12, useEffect as useEffect23, useLayoutEffect, useState as useState23 } from "react";
+import { forwardRef as forwardRef30, useCallback as useCallback14, useEffect as useEffect23, useLayoutEffect, useState as useState26 } from "react";
 import { jsx as jsx141, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
 function computeSelectionCount(selection) {
   const selectionShape = selection.getShape();
@@ -16311,9 +16657,9 @@ var tableActionMenuTrigger = css104`
   position: absolute;
   transform: translate(calc(-100% - 1px), 1px);
 `;
-var TableActionMenuTrigger = forwardRef28((props, ref) => {
+var TableActionMenuTrigger = forwardRef30((props, ref) => {
   const { tableCellEl, positioningAnchorEl, ...rest } = props;
-  const [coordinates, setCoordinates] = useState23({ x: 0, y: 0 });
+  const [coordinates, setCoordinates] = useState26({ x: 0, y: 0 });
   useLayoutEffect(() => {
     const rect = tableCellEl.getBoundingClientRect();
     const parentRect = positioningAnchorEl.getBoundingClientRect();
@@ -16347,12 +16693,12 @@ function TableActionMenu({
   positioningAnchorEl
 }) {
   const [editor] = useLexicalComposerContext5();
-  const [tableCellNode, updateTableCellNode] = useState23(_tableCellNode);
-  const [selectionCounts, updateSelectionCounts] = useState23({
+  const [tableCellNode, updateTableCellNode] = useState26(_tableCellNode);
+  const [selectionCounts, updateSelectionCounts] = useState26({
     columns: 1,
     rows: 1
   });
-  const [menuTriggerKey, setMenuTriggerKey] = useState23(0);
+  const [menuTriggerKey, setMenuTriggerKey] = useState26(0);
   const incrementMenuTriggerKey = () => {
     setMenuTriggerKey((key) => key += 1);
   };
@@ -16378,7 +16724,7 @@ function TableActionMenu({
       }
     });
   }, [editor]);
-  const clearTableSelection = useCallback12(() => {
+  const clearTableSelection = useCallback14(() => {
     editor.update(() => {
       if (tableCellNode.isAttached()) {
         const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
@@ -16395,7 +16741,7 @@ function TableActionMenu({
       $setSelection(null);
     });
   }, [editor, tableCellNode]);
-  const insertTableRowAtSelection = useCallback12(
+  const insertTableRowAtSelection = useCallback14(
     (shouldInsertAfter) => {
       editor.update(() => {
         for (let i = 0; i < selectionCounts.rows; i++) {
@@ -16405,7 +16751,7 @@ function TableActionMenu({
     },
     [editor, selectionCounts.rows]
   );
-  const insertTableColumnAtSelection = useCallback12(
+  const insertTableColumnAtSelection = useCallback14(
     (shouldInsertAfter) => {
       editor.update(() => {
         for (let i = 0; i < selectionCounts.columns; i++) {
@@ -16415,26 +16761,26 @@ function TableActionMenu({
     },
     [editor, selectionCounts.columns]
   );
-  const deleteTableRowAtSelection = useCallback12(() => {
+  const deleteTableRowAtSelection = useCallback14(() => {
     editor.update(() => {
       $deleteTableRowAtSelection();
     });
     incrementMenuTriggerKey();
   }, [editor]);
-  const deleteTableAtSelection = useCallback12(() => {
+  const deleteTableAtSelection = useCallback14(() => {
     editor.update(() => {
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
       tableNode.remove();
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const deleteTableColumnAtSelection = useCallback12(() => {
+  const deleteTableColumnAtSelection = useCallback14(() => {
     editor.update(() => {
       $deleteTableColumnAtSelection();
     });
     incrementMenuTriggerKey();
   }, [editor]);
-  const toggleTableRowIsHeader = useCallback12(() => {
+  const toggleTableRowIsHeader = useCallback14(() => {
     editor.update(() => {
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
       const tableRowIndex = $getTableRowIndexFromTableCellNode(tableCellNode);
@@ -16454,7 +16800,7 @@ function TableActionMenu({
       clearTableSelection();
     });
   }, [editor, tableCellNode, clearTableSelection]);
-  const toggleTableColumnIsHeader = useCallback12(() => {
+  const toggleTableColumnIsHeader = useCallback14(() => {
     editor.update(() => {
       const tableNode = $getTableNodeFromLexicalNodeOrThrow(tableCellNode);
       const tableColumnIndex = $getTableColumnIndexFromTableCellNode(tableCellNode);
@@ -16545,9 +16891,9 @@ function TableCellActionMenuContainer({
   positioningAnchorEl
 }) {
   const [editor] = useLexicalComposerContext5();
-  const [tableCellNode, setTableMenuCellNode] = useState23(null);
-  const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState23(null);
-  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState23(null);
+  const [tableCellNode, setTableMenuCellNode] = useState26(null);
+  const [tableCellNodeEl, _setTableMenuCellNodeEl] = useState26(null);
+  const [tableCellMenuPortalEl, setTableMenuCellMenuPortalEl] = useState26(null);
   useEffect23(() => {
     const newPortalEl = document.createElement("div");
     setTableMenuCellMenuPortalEl(newPortalEl);
@@ -16556,14 +16902,14 @@ function TableCellActionMenuContainer({
       newPortalEl.remove();
     };
   }, [menuPortalEl]);
-  const setTableMenuCellNodeElem = useCallback12((elem) => {
+  const setTableMenuCellNodeElem = useCallback14((elem) => {
     if (elem) {
       _setTableMenuCellNodeEl(elem);
     } else {
       _setTableMenuCellNodeEl(null);
     }
   }, []);
-  const $moveMenu = useCallback12(() => {
+  const $moveMenu = useCallback14(() => {
     const selection = $getSelection3();
     const nativeSelection = window.getSelection();
     const activeElement = document.activeElement;
@@ -16631,9 +16977,9 @@ import {
 } from "@lexical/table";
 import { calculateZoomLevel } from "@lexical/utils";
 import { $getNearestNodeFromDOMNode } from "lexical";
-import { useCallback as useCallback13, useEffect as useEffect24, useMemo as useMemo9, useRef as useRef16, useState as useState24 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect24, useMemo as useMemo10, useRef as useRef17, useState as useState27 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment17, jsx as jsx142, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx142, jsxs as jsxs94 } from "@emotion/react/jsx-runtime";
 var MIN_ROW_HEIGHT = 33;
 var MIN_COLUMN_WIDTH = 50;
 var tableResizer = css105`
@@ -16658,15 +17004,15 @@ var fixedGetDOMCellFromTarget = (node) => {
   return null;
 };
 function TableCellResizer({ editor, positioningAnchorEl }) {
-  const targetRef = useRef16(null);
-  const resizerRef = useRef16(null);
-  const tableRectRef = useRef16(null);
-  const mouseStartPosRef = useRef16(null);
-  const [mouseCurrentPos, updateMouseCurrentPos] = useState24(null);
-  const [activeCell, updateActiveCell] = useState24(null);
-  const [isMouseDown, updateIsMouseDown] = useState24(false);
-  const [draggingDirection, updateDraggingDirection] = useState24(null);
-  const resetState = useCallback13(() => {
+  const targetRef = useRef17(null);
+  const resizerRef = useRef17(null);
+  const tableRectRef = useRef17(null);
+  const mouseStartPosRef = useRef17(null);
+  const [mouseCurrentPos, updateMouseCurrentPos] = useState27(null);
+  const [activeCell, updateActiveCell] = useState27(null);
+  const [isMouseDown, updateIsMouseDown] = useState27(false);
+  const [draggingDirection, updateDraggingDirection] = useState27(null);
+  const resetState = useCallback15(() => {
     updateActiveCell(null);
     targetRef.current = null;
     updateDraggingDirection(null);
@@ -16743,7 +17089,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     }
     return false;
   };
-  const updateRowHeight = useCallback13(
+  const updateRowHeight = useCallback15(
     (heightChange) => {
       if (!activeCell) {
         throw new Error("TableCellResizer: Expected active cell.");
@@ -16805,7 +17151,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
       }
     }
   };
-  const updateColumnWidth = useCallback13(
+  const updateColumnWidth = useCallback15(
     (widthChange) => {
       if (!activeCell) {
         throw new Error("TableCellResizer: Expected active cell.");
@@ -16839,7 +17185,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     },
     [activeCell, editor]
   );
-  const mouseUpHandler = useCallback13(
+  const mouseUpHandler = useCallback15(
     (direction) => {
       const handler = (event) => {
         event.preventDefault();
@@ -16868,7 +17214,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     },
     [activeCell, resetState, updateColumnWidth, updateRowHeight]
   );
-  const toggleResize = useCallback13(
+  const toggleResize = useCallback15(
     (direction) => (event) => {
       event.preventDefault();
       event.stopPropagation();
@@ -16885,7 +17231,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     },
     [activeCell, mouseUpHandler]
   );
-  const getResizers = useCallback13(() => {
+  const getResizers = useCallback15(() => {
     if (activeCell) {
       const { height, width, top, left } = activeCell.elem.getBoundingClientRect();
       const parentRect = positioningAnchorEl.getBoundingClientRect();
@@ -16934,7 +17280,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     };
   }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
   const resizerStyles = getResizers();
-  return /* @__PURE__ */ jsx142("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs94(Fragment17, { children: [
+  return /* @__PURE__ */ jsx142("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs94(Fragment18, { children: [
     /* @__PURE__ */ jsx142(
       "div",
       {
@@ -16956,7 +17302,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
 function TableCellResizerPlugin({ positioningAnchorEl }) {
   const [editor] = useLexicalComposerContext6();
   const isEditable = useLexicalEditable2();
-  return useMemo9(
+  return useMemo10(
     () => isEditable ? createPortal3(
       /* @__PURE__ */ jsx142(TableCellResizer, { editor, positioningAnchorEl }),
       positioningAnchorEl
@@ -16975,10 +17321,10 @@ import {
   COMMAND_PRIORITY_NORMAL as COMMAND_PRIORITY_NORMAL2,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND2
 } from "lexical";
-import { useEffect as useEffect25, useState as useState25 } from "react";
+import { useEffect as useEffect25, useState as useState28 } from "react";
 var TableSelectionPlugin = () => {
   const [editor] = useLexicalComposerContext7();
-  const [closestTableCellNode, setClosestTableCellNode] = useState25(null);
+  const [closestTableCellNode, setClosestTableCellNode] = useState28(null);
   useEffect25(() => {
     return editor.registerCommand(
       SELECTION_CHANGE_COMMAND2,
@@ -17048,7 +17394,7 @@ import {
   FORMAT_TEXT_COMMAND,
   SELECTION_CHANGE_COMMAND as SELECTION_CHANGE_COMMAND3
 } from "lexical";
-import { useCallback as useCallback14, useEffect as useEffect26 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect26 } from "react";
 
 // src/components/ParameterInputs/rich-text/toolbar/constants.ts
 var FORMATS_WITH_ICON = /* @__PURE__ */ new Map([
@@ -17064,29 +17410,29 @@ var HEADING_ELEMENTS = ["h1", "h2", "h3", "h4", "h5", "h6"];
 var TEXTUAL_ELEMENTS = HEADING_ELEMENTS;
 
 // src/components/ParameterInputs/rich-text/toolbar/useRichTextToolbarState.ts
-import { useMemo as useMemo10, useState as useState26 } from "react";
+import { useMemo as useMemo11, useState as useState29 } from "react";
 var useRichTextToolbarState = ({ config }) => {
   var _a;
-  const enabledBuiltInFormats = useMemo10(() => {
+  const enabledBuiltInFormats = useMemo11(() => {
     return richTextBuiltInFormats.filter((format) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.formatting) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(format.type);
     });
   }, [config]);
-  const enabledBuiltInElements = useMemo10(() => {
+  const enabledBuiltInElements = useMemo11(() => {
     return richTextBuiltInElements.filter((element) => {
       var _a2, _b;
       return (_b = (_a2 = config == null ? void 0 : config.elements) == null ? void 0 : _a2.builtIn) == null ? void 0 : _b.includes(element.type);
     });
   }, [config]);
-  const enabledBuiltInFormatsWithIcon = useMemo10(() => {
+  const enabledBuiltInFormatsWithIcon = useMemo11(() => {
     return enabledBuiltInFormats.filter((format) => FORMATS_WITH_ICON.has(format.type));
   }, [enabledBuiltInFormats]);
   const enabledBuiltInFormatsWithoutIcon = enabledBuiltInFormats.filter(
     (format) => !FORMATS_WITH_ICON.has(format.type)
   );
-  const [activeFormats, setActiveFormats] = useState26([]);
-  const visibleFormatsWithIcon = useMemo10(() => {
+  const [activeFormats, setActiveFormats] = useState29([]);
+  const visibleFormatsWithIcon = useMemo11(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -17096,7 +17442,7 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithIcon]);
-  const visibleFormatsWithoutIcon = useMemo10(() => {
+  const visibleFormatsWithoutIcon = useMemo11(() => {
     const visibleFormats = /* @__PURE__ */ new Set();
     activeFormats.filter((type) => !FORMATS_WITH_ICON.has(type)).forEach((type) => {
       visibleFormats.add(type);
@@ -17106,11 +17452,11 @@ var useRichTextToolbarState = ({ config }) => {
     });
     return richTextBuiltInFormats.filter((format) => visibleFormats.has(format.type));
   }, [activeFormats, enabledBuiltInFormatsWithoutIcon]);
-  const [activeElement, setActiveElement] = useState26("paragraph");
+  const [activeElement, setActiveElement] = useState29("paragraph");
   const enabledTextualElements = enabledBuiltInElements.filter(
     (element) => TEXTUAL_ELEMENTS.includes(element.type)
   );
-  const visibleTextualElements = useMemo10(() => {
+  const visibleTextualElements = useMemo11(() => {
     if (!TEXTUAL_ELEMENTS.includes(activeElement)) {
       return enabledTextualElements;
     }
@@ -17121,30 +17467,30 @@ var useRichTextToolbarState = ({ config }) => {
       }
     );
   }, [activeElement, (_a = config == null ? void 0 : config.elements) == null ? void 0 : _a.builtIn, enabledTextualElements]);
-  const [isLink, setIsLink] = useState26(false);
-  const linkElementVisible = useMemo10(() => {
+  const [isLink, setIsLink] = useState29(false);
+  const linkElementVisible = useMemo11(() => {
     return enabledBuiltInElements.some((element) => element.type === "link") || isLink;
   }, [isLink, enabledBuiltInElements]);
-  const visibleLists = useMemo10(() => {
+  const visibleLists = useMemo11(() => {
     return new Set(
       ["orderedList", "unorderedList"].filter(
         (type) => enabledBuiltInElements.some((element) => element.type === type) || activeElement === type
       )
     );
   }, [activeElement, enabledBuiltInElements]);
-  const quoteElementVisible = useMemo10(() => {
+  const quoteElementVisible = useMemo11(() => {
     return enabledBuiltInElements.some((element) => element.type === "quote") || activeElement === "quote";
   }, [activeElement, enabledBuiltInElements]);
-  const codeElementVisible = useMemo10(() => {
+  const codeElementVisible = useMemo11(() => {
     return enabledBuiltInElements.some((element) => element.type === "code") || activeElement === "code";
   }, [activeElement, enabledBuiltInElements]);
-  const tableElementVisible = useMemo10(() => {
+  const tableElementVisible = useMemo11(() => {
     return enabledBuiltInElements.some((element) => element.type === "table") || activeElement === "table";
   }, [activeElement, enabledBuiltInElements]);
-  const assetElementVisible = useMemo10(() => {
+  const assetElementVisible = useMemo11(() => {
     return enabledBuiltInElements.some((element) => element.type === "asset") || activeElement === "asset";
   }, [activeElement, enabledBuiltInElements]);
-  const visibleElementsWithIcons = useMemo10(() => {
+  const visibleElementsWithIcons = useMemo11(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (linkElementVisible) {
       visibleElements.add("link");
@@ -17156,7 +17502,7 @@ var useRichTextToolbarState = ({ config }) => {
     }
     return visibleElements;
   }, [linkElementVisible, visibleLists]);
-  const visibleInsertElementsWithIcons = useMemo10(() => {
+  const visibleInsertElementsWithIcons = useMemo11(() => {
     const visibleElements = /* @__PURE__ */ new Set();
     if (quoteElementVisible) {
       visibleElements.add("quote");
@@ -17194,7 +17540,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
-import { Fragment as Fragment18, jsx as jsx143, jsxs as jsxs95 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx143, jsxs as jsxs95 } from "@emotion/react/jsx-runtime";
 var toolbar = css106`
   ${scrollbarStyles}
   background: var(--gray-50);
@@ -17310,7 +17656,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
       });
     });
   };
-  const updateToolbar = useCallback14(() => {
+  const updateToolbar = useCallback16(() => {
     const selection = $getSelection5();
     if (!$isRangeSelection5(selection)) {
       return;
@@ -17451,7 +17797,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           children: /* @__PURE__ */ jsx143(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs95(Fragment18, { children: [
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs95(Fragment19, { children: [
         visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx143(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx143(
           "button",
           {
@@ -17550,7 +17896,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
 var RichTextToolbar_default = RichTextToolbar;
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment19, jsx as jsx144, jsxs as jsxs96 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx144, jsxs as jsxs96 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label: label2,
   labelLeadingIcon,
@@ -17579,7 +17925,7 @@ var ParameterRichText = ({
       menuItems,
       children: [
         /* @__PURE__ */ jsx144(ParameterRichTextInner, { ...innerProps, children }),
-        menuItems ? /* @__PURE__ */ jsx144(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ jsx144(Fragment19, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx144(ParameterMenuButton, { label: `${label2} menu`, children: /* @__PURE__ */ jsx144(Fragment20, { children: menuItems }) }) : null
       ]
     }
   );
@@ -17729,7 +18075,7 @@ var ParameterRichTextInner = ({
     },
     editable: !richTextProps.readOnly
   };
-  return /* @__PURE__ */ jsxs96(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs96(Fragment20, { children: [
     /* @__PURE__ */ jsx144("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx144(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx144(RichText, { ...richTextProps, children }) }) }),
     editorFooter ? editorFooter : null
   ] });
@@ -17785,19 +18131,19 @@ var RichText = ({
   useEffect27(() => {
     editor.setEditable(!readOnly);
   }, [editor, readOnly]);
-  const [editorContainerRef, setEditorContainerRef] = useState27(null);
+  const [editorContainerRef, setEditorContainerRef] = useState30(null);
   const onEditorContainerRef = (_editorContainerRef) => {
     if (_editorContainerRef !== null) {
       setEditorContainerRef(_editorContainerRef);
     }
   };
-  const [portalContainerRef, setPortalContainerRef] = useState27(null);
+  const [portalContainerRef, setPortalContainerRef] = useState30(null);
   const onPortalContainerRef = (_portalContainerRef) => {
     if (_portalContainerRef !== null) {
       setPortalContainerRef(_portalContainerRef);
     }
   };
-  return /* @__PURE__ */ jsxs96(Fragment19, { children: [
+  return /* @__PURE__ */ jsxs96(Fragment20, { children: [
     readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx144(
       RichTextToolbar_default,
       {
@@ -17847,7 +18193,7 @@ var RichText = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx144(Fragment19, { children }),
+          /* @__PURE__ */ jsx144(Fragment20, { children }),
           editorContainerRef ? /* @__PURE__ */ jsx144(
             LinkNodePlugin,
             {
@@ -17868,15 +18214,15 @@ var RichText = ({
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
-import { forwardRef as forwardRef29 } from "react";
+import { forwardRef as forwardRef31 } from "react";
 import { jsx as jsx145, jsxs as jsxs97 } from "@emotion/react/jsx-runtime";
-var ParameterSelect = forwardRef29(
+var ParameterSelect = forwardRef31(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsx145(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx145(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = forwardRef29(
+var ParameterSelectInner = forwardRef31(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label: label2, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ jsxs97(
@@ -17900,24 +18246,24 @@ var ParameterSelectInner = forwardRef29(
 );
 
 // src/components/ParameterInputs/ParameterSelectSlider.tsx
-import { forwardRef as forwardRef30, useCallback as useCallback15, useMemo as useMemo11 } from "react";
+import { forwardRef as forwardRef32, useCallback as useCallback17, useMemo as useMemo12 } from "react";
 import { jsx as jsx146 } from "@emotion/react/jsx-runtime";
-var ParameterSelectSlider = forwardRef30(
+var ParameterSelectSlider = forwardRef32(
   (props, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsx146(ParameterShell, { "data-testid": "parameter-select-slider", ...shellProps, children: /* @__PURE__ */ jsx146(ParameterSelectSliderInner, { ref, ...innerProps }) });
   }
 );
-var ParameterSelectSliderInner = forwardRef30(({ options, value, onChange, ...props }, ref) => {
+var ParameterSelectSliderInner = forwardRef32(({ options, value, onChange, ...props }, ref) => {
   const { id, label: label2, hiddenLabel } = useParameterShell();
-  const numericValue = useMemo11(() => {
+  const numericValue = useMemo12(() => {
     if (value === void 0 || value === null || value === "") {
       return void 0;
     }
     const index = options.findIndex((option) => option.value === value);
     return index >= 0 ? index : void 0;
   }, [options, value]);
-  const handleChange = useCallback15(
+  const handleChange = useCallback17(
     (newValue) => {
       var _a;
       if (newValue === void 0) {
@@ -17946,13 +18292,13 @@ ParameterSelectSlider.displayName = "ParameterSelectSlider";
 ParameterSelectSliderInner.displayName = "ParameterSelectSliderInner";
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
-import { forwardRef as forwardRef31 } from "react";
+import { forwardRef as forwardRef33 } from "react";
 import { jsx as jsx147 } from "@emotion/react/jsx-runtime";
-var ParameterTextarea = forwardRef31((props, ref) => {
+var ParameterTextarea = forwardRef33((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx147(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx147(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = forwardRef31(({ ...props }, ref) => {
+var ParameterTextareaInner = forwardRef33(({ ...props }, ref) => {
   const { id, label: label2, hiddenLabel } = useParameterShell();
   return /* @__PURE__ */ jsx147(
     "textarea",
@@ -17967,14 +18313,14 @@ var ParameterTextareaInner = forwardRef31(({ ...props }, ref) => {
 });
 
 // src/components/ParameterInputs/ParameterToggle.tsx
-import { forwardRef as forwardRef32 } from "react";
+import { forwardRef as forwardRef34 } from "react";
 import { jsx as jsx148, jsxs as jsxs98 } from "@emotion/react/jsx-runtime";
-var ParameterToggle = forwardRef32((props, ref) => {
+var ParameterToggle = forwardRef34((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx148(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx148(ParameterToggleInner, { ref, ...innerProps }) });
 });
 ParameterToggle.displayName = "ParameterToggle";
-var ParameterToggleInner = forwardRef32(
+var ParameterToggleInner = forwardRef34(
   ({ children, ...props }, ref) => {
     const { type, withoutIndeterminateState, ...otherProps } = props;
     const { id, label: label2 } = useParameterShell();
@@ -18098,7 +18444,7 @@ import { css as css110 } from "@emotion/react";
 import { CgCheckO as CgCheckO2 } from "@react-icons/all-files/cg/CgCheckO";
 import { CgRadioCheck } from "@react-icons/all-files/cg/CgRadioCheck";
 import { CgRecord } from "@react-icons/all-files/cg/CgRecord";
-import { useMemo as useMemo12 } from "react";
+import { useMemo as useMemo13 } from "react";
 
 // src/components/ProgressList/styles/ProgressList.styles.ts
 import { css as css109 } from "@emotion/react";
@@ -18117,7 +18463,7 @@ var progressListItemStyles = css109`
 // src/components/ProgressList/ProgressList.tsx
 import { jsx as jsx150, jsxs as jsxs99 } from "@emotion/react/jsx-runtime";
 var ProgressList = ({ inProgressId, items, autoEllipsis, ...htmlProps }) => {
-  const itemsWithStatus = useMemo12(() => {
+  const itemsWithStatus = useMemo13(() => {
     const indexOfInProgressItem = items.findIndex(({ id }) => id === inProgressId);
     return items.map((item, index) => {
       let status = "queued";
@@ -18150,7 +18496,7 @@ var ProgressListItem = ({
   errorLevel = "danger",
   autoEllipsis = false
 }) => {
-  const icon = useMemo12(() => {
+  const icon = useMemo13(() => {
     if (error) {
       return warningIcon;
     }
@@ -18161,7 +18507,7 @@ var ProgressListItem = ({
     };
     return iconPerStatus[status];
   }, [status, error]);
-  const statusStyles = useMemo12(() => {
+  const statusStyles = useMemo13(() => {
     if (error) {
       return errorLevel === "caution" ? css110`
             color: rgb(161, 98, 7);
@@ -18199,7 +18545,7 @@ var ProgressListItem = ({
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { css as css112 } from "@emotion/react";
-import { useCallback as useCallback16, useEffect as useEffect28, useMemo as useMemo13, useRef as useRef17, useState as useState28 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect28, useMemo as useMemo14, useRef as useRef18, useState as useState31 } from "react";
 
 // src/components/SegmentedControl/SegmentedControl.styles.ts
 import { css as css111 } from "@emotion/react";
@@ -18378,10 +18724,10 @@ var SegmentedControl = ({
   // deprecated, destructured to prevent spreading to DOM
   ...props
 }) => {
-  const wrapperRef = useRef17(null);
-  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState28(false);
-  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState28(false);
-  const onOptionChange = useCallback16(
+  const wrapperRef = useRef18(null);
+  const [isOverflowStartShadowVisible, setIsOverflowStartShadowVisible] = useState31(false);
+  const [isOverflowEndShadowVisible, setIsOverflowEndShadowVisible] = useState31(false);
+  const onOptionChange = useCallback18(
     (event) => {
       if (event.target.checked) {
         onChange == null ? void 0 : onChange(options[parseInt(event.target.value)].value);
@@ -18389,7 +18735,7 @@ var SegmentedControl = ({
     },
     [options, onChange]
   );
-  const sizeStyles = useMemo13(() => {
+  const sizeStyles = useMemo14(() => {
     const map = {
       sm: css112({ height: "calc(24px - 2px)", fontSize: "var(--fs-xs)" }),
       md: css112({ height: "calc(32px - 2px)", fontSize: "var(--fs-sm)" }),
@@ -18398,7 +18744,7 @@ var SegmentedControl = ({
     };
     return map[size];
   }, [size]);
-  const isIconOnly = useMemo13(() => {
+  const isIconOnly = useMemo14(() => {
     return options.every((option) => option && option.icon && !option.label);
   }, [options]);
   useEffect28(() => {
@@ -18531,7 +18877,7 @@ var Skeleton = ({
 );
 
 // src/components/Spinner/Spinner.tsx
-import { useEffect as useEffect29, useRef as useRef18 } from "react";
+import { useEffect as useEffect29, useRef as useRef19 } from "react";
 
 // src/components/Spinner/Spinner.styles.ts
 import { css as css114 } from "@emotion/react";
@@ -18971,7 +19317,7 @@ var Spinner = ({
   label: label2,
   isPaused
 }) => {
-  const ref = useRef18(null);
+  const ref = useRef19(null);
   useEffect29(() => {
     var _a, _b, _c;
     (_c = ref.current) == null ? void 0 : _c.style.setProperty("--pyramid-size", ((_b = (_a = ref.current) == null ? void 0 : _a.clientWidth) != null ? _b : 200) / 6 + "px");
@@ -19040,11 +19386,11 @@ var Spinner = ({
 };
 
 // src/components/StackedModal/hooks/StackedModalProvider.tsx
-import { createContext as createContext6, useCallback as useCallback17, useContext as useContext6, useMemo as useMemo14, useRef as useRef19, useState as useState29 } from "react";
+import { createContext as createContext9, useCallback as useCallback19, useContext as useContext9, useMemo as useMemo15, useRef as useRef20, useState as useState32 } from "react";
 import { jsx as jsx154 } from "@emotion/react/jsx-runtime";
-var StackedModalContext = createContext6(null);
+var StackedModalContext = createContext9(null);
 function useStackedModal() {
-  const context = useContext6(StackedModalContext);
+  const context = useContext9(StackedModalContext);
   if (!context) {
     throw new Error("useStackedModal must be used within a <StackedModal> component.");
   }
@@ -19060,10 +19406,10 @@ function useStepTransition(index) {
   };
 }
 function StackedModalProvider({ children, totalSteps, initialStep }) {
-  const [currentStep, setCurrentStep] = useState29(initialStep);
-  const [direction, setDirection] = useState29("forward");
-  const previousStepRef = useRef19(initialStep);
-  const nextStep = useCallback17(() => {
+  const [currentStep, setCurrentStep] = useState32(initialStep);
+  const [direction, setDirection] = useState32("forward");
+  const previousStepRef = useRef20(initialStep);
+  const nextStep = useCallback19(() => {
     setCurrentStep((prev) => {
       if (prev >= totalSteps - 1) {
         return prev;
@@ -19073,7 +19419,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
       return prev + 1;
     });
   }, [totalSteps]);
-  const goBack = useCallback17(() => {
+  const goBack = useCallback19(() => {
     setCurrentStep((prev) => {
       if (prev <= 0) {
         return prev;
@@ -19083,7 +19429,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
       return prev - 1;
     });
   }, []);
-  const goToStep = useCallback17(
+  const goToStep = useCallback19(
     (index) => {
       setCurrentStep((prev) => {
         if (index < 0 || index >= totalSteps || index === prev) {
@@ -19096,7 +19442,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
     },
     [totalSteps]
   );
-  const value = useMemo14(
+  const value = useMemo15(
     () => ({
       currentStep,
       totalSteps,
@@ -19112,7 +19458,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
 }
 
 // src/components/StackedModal/StackedModal.tsx
-import React21 from "react";
+import React23 from "react";
 
 // src/components/StackedModal/styles/StackedModal.styles.ts
 import { css as css115, keyframes as keyframes6 } from "@emotion/react";
@@ -19269,9 +19615,9 @@ function AnimatedHeaderItem({ index, children }) {
 }
 
 // src/components/StackedModal/StackedModalStep.tsx
-import { Fragment as Fragment20, jsx as jsx156, jsxs as jsxs102 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx156, jsxs as jsxs102 } from "@emotion/react/jsx-runtime";
 function StackedModalStep({ children, buttonGroup }) {
-  return /* @__PURE__ */ jsxs102(Fragment20, { children: [
+  return /* @__PURE__ */ jsxs102(Fragment21, { children: [
     /* @__PURE__ */ jsx156("div", { css: stepContentStyles, children }),
     buttonGroup ? /* @__PURE__ */ jsx156(HorizontalRhythm, { gap: "sm", align: "center", children: buttonGroup }) : null
   ] });
@@ -19280,18 +19626,18 @@ function StackedModalStep({ children, buttonGroup }) {
 // src/components/StackedModal/StackedModal.tsx
 import { jsx as jsx157 } from "@emotion/react/jsx-runtime";
 function filterSteps(children) {
-  return React21.Children.toArray(children).filter(
-    (child) => React21.isValidElement(child) && child.type === StackedModalStep
+  return React23.Children.toArray(children).filter(
+    (child) => React23.isValidElement(child) && child.type === StackedModalStep
   );
 }
-var StackedModal = React21.forwardRef(
+var StackedModal = React23.forwardRef(
   ({ children, initialStep = 0, ...rest }, ref) => {
     const steps = filterSteps(children);
     return /* @__PURE__ */ jsx157(StackedModalProvider, { totalSteps: steps.length, initialStep, children: /* @__PURE__ */ jsx157(StackedModalInner, { ref, steps, ...rest }) });
   }
 );
 StackedModal.displayName = "StackedModal";
-var StackedModalInner = React21.forwardRef(
+var StackedModalInner = React23.forwardRef(
   ({ steps, onRequestClose, modalSize = "lg", width, height }, ref) => {
     return /* @__PURE__ */ jsx157("div", { css: stackedModalRootStyles, children: /* @__PURE__ */ jsx157(
       Modal,
@@ -19320,7 +19666,7 @@ function StackedModalStepWrapper({ index, children }) {
 }
 
 // src/components/Switch/Switch.tsx
-import { forwardRef as forwardRef33, useMemo as useMemo15 } from "react";
+import { forwardRef as forwardRef35, useMemo as useMemo16 } from "react";
 
 // src/components/Switch/Switch.styles.ts
 import { css as css116 } from "@emotion/react";
@@ -19455,8 +19801,8 @@ var SwitchInputContainerAlignmentRight = css116`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment21, jsx as jsx158, jsxs as jsxs103 } from "@emotion/react/jsx-runtime";
-var Switch = forwardRef33(
+import { Fragment as Fragment22, jsx as jsx158, jsxs as jsxs103 } from "@emotion/react/jsx-runtime";
+var Switch = forwardRef35(
   ({
     label: label2,
     infoText,
@@ -19467,7 +19813,7 @@ var Switch = forwardRef33(
     ...inputProps
   }, ref) => {
     let additionalText = infoText;
-    const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = useMemo15(() => {
+    const { SwitchInputContainerAlignmentStyles, SwitchInputCheckedDirection, SwitchInputLabelAlignment } = useMemo16(() => {
       if (alignment === "left") {
         return {
           SwitchInputContainerAlignmentStyles: SwitchInputContainerAlignmentLeft,
@@ -19484,7 +19830,7 @@ var Switch = forwardRef33(
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs103(Fragment21, { children: [
+    return /* @__PURE__ */ jsxs103(Fragment22, { children: [
       /* @__PURE__ */ jsxs103(
         "label",
         {
@@ -19584,53 +19930,47 @@ var ResponsiveTableContainer = ({ children }) => {
 };
 
 // src/components/Table/Table.tsx
-import * as React22 from "react";
+import * as React24 from "react";
 import { jsx as jsx160 } from "@emotion/react/jsx-runtime";
-var Table = React22.forwardRef(
+var Table = React24.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx160("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React22.forwardRef(
+var TableHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx160("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React22.forwardRef(
+var TableBody = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx160("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React22.forwardRef(
+var TableFoot = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx160("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React22.forwardRef(
+var TableRow = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx160("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React22.forwardRef(
+var TableCellHead = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx160("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React22.forwardRef(
+var TableCellData = React24.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx160("td", { ref, ...otherProps, children });
   }
 );
 
 // src/components/Tabs/Tabs.tsx
-import {
-  Tab as AriakitTab,
-  TabList as AriakitTabList,
-  TabPanel as AriakitTabPanel,
-  TabProvider as AriakitTabProvider,
-  useTabStore as useAriakitTabStore
-} from "@ariakit/react";
-import { useCallback as useCallback18, useMemo as useMemo16 } from "react";
+import { Tabs as BaseUITabs } from "@base-ui/react/tabs";
+import { createContext as createContext10, useCallback as useCallback20, useContext as useContext10, useEffect as useEffect30, useMemo as useMemo17, useRef as useRef21, useState as useState33 } from "react";
 
 // src/components/Tabs/Tabs.styles.ts
 import { css as css118 } from "@emotion/react";
@@ -19659,53 +19999,103 @@ var tabButtonGroupStyles = css118`
 
 // src/components/Tabs/Tabs.tsx
 import { jsx as jsx161 } from "@emotion/react/jsx-runtime";
+var TabsContext = createContext10(null);
 var useCurrentTab = () => {
-  const context = useAriakitTabStore();
+  const context = useContext10(TabsContext);
   if (!context) {
     throw new Error("This component can only be used inside <Tabs>");
   }
   return context;
 };
+var ManualContext = createContext10(false);
+var TabRegistrationContext = createContext10(null);
 var Tabs = ({
   children,
   onSelectedIdChange,
   useHashForState,
   selectedId,
   manual,
-  ...props
+  orientation,
+  className,
+  style
 }) => {
-  const selected = useMemo16(() => {
+  const selected = useMemo17(() => {
     if (selectedId) return selectedId;
     return useHashForState && typeof window !== "undefined" && window.location.hash ? window.location.hash.substring(1) : void 0;
   }, [selectedId, useHashForState]);
-  const onTabSelect = useCallback18(
+  const isControlled = selected !== void 0;
+  const [uncontrolledValue, setUncontrolledValue] = useState33(void 0);
+  const firstTabRegistered = useRef21(false);
+  const registerTab = useCallback20(
+    (value) => {
+      if (!firstTabRegistered.current) {
+        firstTabRegistered.current = true;
+        if (!isControlled) {
+          setUncontrolledValue(value);
+        }
+      }
+    },
+    [isControlled]
+  );
+  const currentValue = isControlled ? selected : uncontrolledValue;
+  const onTabSelect = useCallback20(
     (value) => {
       const selectedValueWithoutNull = value != null ? value : void 0;
+      if (!isControlled) {
+        setUncontrolledValue(selectedValueWithoutNull);
+      }
       onSelectedIdChange == null ? void 0 : onSelectedIdChange(selectedValueWithoutNull);
       if (useHashForState && typeof window !== "undefined" && window.history) {
         const hashValue = selectedValueWithoutNull ? `#${selectedValueWithoutNull}` : "";
         window.history.replaceState(null, "", hashValue);
       }
     },
-    [onSelectedIdChange, useHashForState]
+    [isControlled, onSelectedIdChange, useHashForState]
+  );
+  const tabsContextValue = useMemo17(
+    () => ({
+      value: currentValue,
+      setValue: (v) => onTabSelect(v)
+    }),
+    [currentValue, onTabSelect]
   );
-  return /* @__PURE__ */ jsx161(AriakitTabProvider, { selectedId: selected, selectOnMove: !manual, setSelectedId: onTabSelect, ...props, children });
+  return /* @__PURE__ */ jsx161(TabsContext.Provider, { value: tabsContextValue, children: /* @__PURE__ */ jsx161(TabRegistrationContext.Provider, { value: { registerTab }, children: /* @__PURE__ */ jsx161(ManualContext.Provider, { value: !!manual, children: /* @__PURE__ */ jsx161(
+    BaseUITabs.Root,
+    {
+      value: currentValue != null ? currentValue : null,
+      onValueChange: (value) => onTabSelect(value),
+      orientation,
+      className,
+      style,
+      children
+    }
+  ) }) }) });
 };
 var TabButtonGroup = ({ children, ...props }) => {
-  return /* @__PURE__ */ jsx161(AriakitTabList, { ...props, css: tabButtonGroupStyles, children });
+  const manual = useContext10(ManualContext);
+  return /* @__PURE__ */ jsx161(BaseUITabs.List, { activateOnFocus: !manual, ...props, css: tabButtonGroupStyles, children });
 };
 var TabButton = ({
   children,
   id,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx161(AriakitTab, { type: "button", id, ...props, css: tabButtonStyles, children });
+  const registration = useContext10(TabRegistrationContext);
+  useEffect30(() => {
+    registration == null ? void 0 : registration.registerTab(id);
+  }, []);
+  return /* @__PURE__ */ jsx161(BaseUITabs.Tab, { type: "button", value: id, "data-tab-id": id, ...props, css: tabButtonStyles, children });
 };
 var TabContent = ({
   children,
+  tabId,
+  id,
+  keepMounted = true,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx161(AriakitTabPanel, { ...props, children });
+  const panelValue = tabId != null ? tabId : id;
+  const htmlId = id;
+  return /* @__PURE__ */ jsx161(BaseUITabs.Panel, { value: panelValue, id: htmlId, keepMounted, ...props, children });
 };
 
 // src/components/Validation/StatusBullet.styles.ts
@@ -19909,7 +20299,7 @@ export {
   LoadingIndicator,
   LoadingOverlay,
   Menu,
-  MenuButton2 as MenuButton,
+  MenuButton,
   MenuGroup,
   MenuItem,
   MenuItemEmptyIcon,
@@ -19920,6 +20310,7 @@ export {
   MenuThreeDots,
   Modal,
   ModalDialog,
+  ModalPortalContext,
   MultilineChip,
   ObjectGridContainer2 as ObjectGridContainer,
   ObjectGridItem2 as ObjectGridItem,
@@ -19971,7 +20362,7 @@ export {
   ParameterTextareaInner,
   ParameterToggle,
   ParameterToggleInner,
-  Popover3 as Popover,
+  Popover2 as Popover,
   PopoverBody2 as PopoverBody,
   ProgressBar,
   ProgressList,
@@ -20132,6 +20523,8 @@ export {
   useDrawer,
   useIconContext,
   useImageLoadFallback,
+  useIsSubmenuTriggerMode,
+  useModalPortalContainer,
   useOutsideClick,
   useParameterShell,
   usePopoverComponentContext,