@uniformdev/design-system 20.72.3-alpha.5 → 20.72.3-alpha.52

package/dist/esm/index.js

@@ -3034,13 +3034,13 @@ var ToastEntry = ({ toast: entry }) => {
   const duration = (_a = entry.timeout) != null ? _a : defaultTimeoutMs;
   const showCountdown = duration > 0 && entry.type !== "loading" && (data == null ? void 0 : data.kind) !== "progress";
   if ((data == null ? void 0 : data.kind) === "progress") {
-    return /* @__PURE__ */ jsxs6(BaseToast.Root, { toast: entry, css: toastRootStyles, children: [
+    return /* @__PURE__ */ jsxs6(BaseToast.Root, { toast: entry, css: toastRootStyles, "data-testid": "toast", children: [
       /* @__PURE__ */ jsx14("div", { css: toastBodyStyles, "data-testid": "toast-body", children: /* @__PURE__ */ jsx14(BaseToast.Description, { css: toastDescriptionStyles, children: data.label }) }),
       /* @__PURE__ */ jsx14(Progress.Root, { value: Math.max(0, Math.min(1, data.progress)) * 100, css: toastProgressRootStyles, children: /* @__PURE__ */ jsx14(Progress.Track, { css: toastProgressTrackStyles, children: /* @__PURE__ */ jsx14(Progress.Indicator, { css: toastProgressIndicatorStyles }) }) })
     ] });
   }
   if ((data == null ? void 0 : data.kind) === "undoable") {
-    return /* @__PURE__ */ jsxs6(BaseToast.Root, { toast: entry, css: toastRootStyles, children: [
+    return /* @__PURE__ */ jsxs6(BaseToast.Root, { toast: entry, css: toastRootStyles, "data-testid": "toast", children: [
       /* @__PURE__ */ jsx14(ToastTypeIcon, { type: entry.type }),
       /* @__PURE__ */ jsxs6("div", { css: toastBodyStyles, "data-testid": "toast-body", children: [
         /* @__PURE__ */ jsx14(BaseToast.Description, { css: toastDescriptionStyles, children: data.description }),
@@ -3049,6 +3049,7 @@ var ToastEntry = ({ toast: entry }) => {
           {
             type: "button",
             css: toastUndoButtonStyles,
+            "data-testid": "toast-undo-button",
             onClick: () => {
               data.onUndo();
               toastManager.close(entry.id);
@@ -3057,14 +3058,14 @@ var ToastEntry = ({ toast: entry }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx14(BaseToast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", children: /* @__PURE__ */ jsx14(Icon, { icon: CgClose, size: "1rem", iconColor: "currentColor" }) }),
+      /* @__PURE__ */ jsx14(BaseToast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", "data-testid": "toast-close-button", children: /* @__PURE__ */ jsx14(Icon, { icon: CgClose, size: "1rem", iconColor: "currentColor" }) }),
       showCountdown ? /* @__PURE__ */ jsx14(ToastCountdownBar, { duration }) : null
     ] });
   }
-  return /* @__PURE__ */ jsxs6(BaseToast.Root, { toast: entry, css: toastRootStyles, children: [
+  return /* @__PURE__ */ jsxs6(BaseToast.Root, { toast: entry, css: toastRootStyles, "data-testid": "toast", children: [
     /* @__PURE__ */ jsx14(ToastTypeIcon, { type: entry.type }),
     /* @__PURE__ */ jsx14("div", { css: toastBodyStyles, "data-testid": "toast-body", children: /* @__PURE__ */ jsx14(BaseToast.Description, { css: toastDescriptionStyles, children: entry.description }) }),
-    /* @__PURE__ */ jsx14(BaseToast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", children: /* @__PURE__ */ jsx14(Icon, { icon: CgClose, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ jsx14(BaseToast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", "data-testid": "toast-close-button", children: /* @__PURE__ */ jsx14(Icon, { icon: CgClose, size: "1rem", iconColor: "currentColor" }) }),
     showCountdown ? /* @__PURE__ */ jsx14(ToastCountdownBar, { duration }) : null
   ] });
 };
@@ -3158,6 +3159,13 @@ function useShortcut({
 import { Tooltip as BaseUITooltip } from "@base-ui/react/tooltip";
 import { useState as useState3 } 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/parsePlacement.ts
 function parsePlacement(placement) {
   const [side, alignment] = placement.split("-");
@@ -3252,6 +3260,7 @@ function Tooltip({
   ...popupProps
 }) {
   const [inlineContainer, setInlineContainer] = useState3(null);
+  const modalContainer = useModalPortalContainer();
   if (!title) {
     return children;
   }
@@ -3269,7 +3278,7 @@ function Tooltip({
         style: { position: "absolute", width: 0, height: 0, overflow: "visible" }
       }
     ),
-    /* @__PURE__ */ jsx15(BaseUITooltip.Portal, { container: withoutPortal ? inlineContainer : void 0, children: positionerContent })
+    /* @__PURE__ */ jsx15(BaseUITooltip.Portal, { container: withoutPortal ? inlineContainer : modalContainer != null ? modalContainer : void 0, children: positionerContent })
   ] });
 }
 
@@ -4943,13 +4952,6 @@ import { Menu as BaseUIMenu } from "@base-ui/react/menu";
 import * as React8 from "react";
 import { createContext as createContext3, useContext as useContext3, useState as useState5 } 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 React7, { isValidElement as isValidElement2 } from "react";
 
@@ -5825,10 +5827,10 @@ var Input = forwardRef9(
         id,
         css: [
           prefix ? inputInPrefixGroup : input("nowrap"),
+          typeof classNameControl === "object" ? classNameControl : void 0,
           prefix && icon ? inputInPrefixGroupWithIcon : void 0,
           !prefix && errorMessage ? inputError : void 0,
-          !prefix && icon ? inputWithIcon : "",
-          typeof classNameControl === "object" ? classNameControl : void 0
+          !prefix && icon ? inputWithIcon : ""
         ],
         "aria-label": showLabel || typeof label2 !== "string" ? void 0 : label2,
         className: typeof classNameControl === "string" ? classNameControl : "",
@@ -7700,18 +7702,38 @@ var Link = React13.forwardRef(
 );
 Link.displayName = "Link";
 var LinkWithRef = React13.forwardRef(
-  ({ linkManagerComponent: LinkManager, href, as, onClick, linkColor = "default", children, text, ...props }, ref) => /* @__PURE__ */ jsx55(
-    LinkManager,
-    {
-      ...props,
-      as,
-      href,
-      ref,
-      css: [link, textColor[linkColor]],
-      onClick,
-      children: text != null ? text : children
-    }
-  )
+  ({
+    linkManagerComponent: LinkManager,
+    href,
+    as,
+    onClick,
+    external,
+    linkColor = "default",
+    children,
+    text,
+    ...props
+  }, ref) => {
+    const externalAttrs = external ? {
+      target: "_blank",
+      rel: "noreferrer noopener"
+    } : {};
+    return /* @__PURE__ */ jsxs37(
+      LinkManager,
+      {
+        ...props,
+        ...externalAttrs,
+        as,
+        href,
+        ref,
+        css: [link, textColor[linkColor]],
+        onClick,
+        children: [
+          text != null ? text : children,
+          external ? /* @__PURE__ */ jsx55(Icon, { icon: CgExternal, iconColor: "currentColor", size: 20 }) : null
+        ]
+      }
+    );
+  }
 );
 LinkWithRef.displayName = "LinkWithRef";
 
@@ -9283,7 +9305,9 @@ var descriptionListLabelStyles = css55`
 `;
 var descriptionListValueStyles = css55`
   display: flex;
+  min-width: 0;
   margin: 0;
+  overflow-wrap: anywhere;
 `;
 
 // src/components/DescriptionList/DescriptionList.tsx
@@ -11042,9 +11066,11 @@ var IntegrationModalHeader = ({ icon, name, menu, children }) => {
 
 // src/components/JsonEditor/JsonEditor.tsx
 import MonacoEditor from "@monaco-editor/react";
+import * as React19 from "react";
 import { jsx as jsx94 } from "@emotion/react/jsx-runtime";
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
+  const modelPath = `${React19.useId()}.json`;
   let effectiveHeight = height;
   if (typeof height === "number" && height < 0) {
     effectiveHeight = typeof window === "undefined" ? "100%" : window.innerHeight + height;
@@ -11057,6 +11083,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
     {
       height: effectiveHeight,
       className: "uniform-json-editor",
+      path: modelPath,
       defaultLanguage: "json",
       defaultValue,
       options: {
@@ -12927,7 +12954,7 @@ var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
 
 // src/components/Modal/Modal.tsx
 import { CgClose as CgClose6 } from "@react-icons/all-files/cg/CgClose";
-import React19, { useCallback as useCallback11, useEffect as useEffect17, useRef as useRef11, useState as useState21 } from "react";
+import React20, { useCallback as useCallback11, useEffect as useEffect17, useRef as useRef11, useState as useState21 } from "react";
 
 // src/components/Modal/Modal.styles.ts
 import { css as css83 } from "@emotion/react";
@@ -13022,7 +13049,7 @@ var modalDialogInnerStyles = css83`
 import { jsx as jsx109, jsxs as jsxs75 } from "@emotion/react/jsx-runtime";
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
-var Modal = React19.forwardRef(
+var Modal = React20.forwardRef(
   ({
     header: header2,
     children,
@@ -13284,6 +13311,20 @@ var ObjectGridItemSubtitle = css85`
   text-overflow: ellipsis;
   max-width: 100%;
 `;
+var ObjectGridItemRevealMenu = css85`
+  display: inline-flex;
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--timing-ease-out);
+
+  [data-object-grid-item]:hover &,
+  [data-object-grid-item]:focus-within &,
+  &:hover,
+  &:focus-within,
+  &:has([aria-expanded='true']),
+  &:has([data-popup-open]) {
+    opacity: 1;
+  }
+`;
 
 // src/components/Objects/ObjectGridItem.tsx
 import { jsx as jsx112, jsxs as jsxs77 } from "@emotion/react/jsx-runtime";
@@ -13295,6 +13336,7 @@ var ObjectGridItem2 = ({
   isSelected,
   children,
   menuTestId,
+  revealMenuOnHover,
   ...props
 }) => {
   const hasOnClick = props.onClick;
@@ -13331,14 +13373,14 @@ var ObjectGridItem2 = ({
               onClick: hasOnClick ? onStopPropagation : void 0,
               children: [
                 rightSlot,
-                menuItems ? /* @__PURE__ */ jsx112(
+                menuItems ? /* @__PURE__ */ jsx112("span", { css: revealMenuOnHover ? ObjectGridItemRevealMenu : void 0, children: /* @__PURE__ */ jsx112(
                   Menu,
                   {
                     menuTrigger: /* @__PURE__ */ jsx112(MenuThreeDots, { "data-testid": menuTestId != null ? menuTestId : "object-grid-item-menu-btn" }),
                     placement: "bottom-end",
                     children: menuItems
                   }
-                ) : null
+                ) }) : null
               ]
             }
           ) : null
@@ -14015,7 +14057,7 @@ var ObjectListSubText2 = ({ children, ...props }) => {
 };
 
 // src/components/Pagination/Pagination.tsx
-import * as React20 from "react";
+import * as React21 from "react";
 import Paginate from "react-paginate";
 
 // src/components/Pagination/Pagination.styles.ts
@@ -14151,7 +14193,7 @@ function Pagination({
   total,
   onPageChange
 }) {
-  const containerRef = React20.useRef(null);
+  const containerRef = React21.useRef(null);
   const pageCount = limit >= 1 ? Math.ceil(total / limit) : 0;
   const currentPage = limit >= 1 ? Math.ceil(offset / limit) : 0;
   const { marginPagesDisplayed, pageRangeDisplayed } = usePaginationDisplayRange(containerRef, pageCount);
@@ -14268,7 +14310,7 @@ var LabelLeadingIcon = ({
 };
 
 // src/components/ParameterInputs/ParameterActionButton.tsx
-import React21 from "react";
+import React22 from "react";
 
 // src/components/ParameterInputs/styles/ParameterActionButton.styles.ts
 import { css as css94 } from "@emotion/react";
@@ -14372,7 +14414,7 @@ var ParameterActionButton = ({
       children
     }
   );
-  if (tooltip && (typeof tooltip === "string" || React21.isValidElement(tooltip))) {
+  if (tooltip && (typeof tooltip === "string" || React22.isValidElement(tooltip))) {
     return /* @__PURE__ */ jsx125(Tooltip, { title: tooltip, ...tooltipProps, children: buttonElement });
   }
   return buttonElement;
@@ -20248,7 +20290,7 @@ function StackedModalProvider({ children, totalSteps, initialStep }) {
 }
 
 // src/components/StackedModal/StackedModal.tsx
-import React25 from "react";
+import React26 from "react";
 
 // src/components/StackedModal/styles/StackedModal.styles.ts
 import { css as css115, keyframes as keyframes7 } from "@emotion/react";
@@ -20430,18 +20472,18 @@ function StackedModalStep({ children, buttonGroup }) {
 // src/components/StackedModal/StackedModal.tsx
 import { jsx as jsx158 } from "@emotion/react/jsx-runtime";
 function filterSteps(children) {
-  return React25.Children.toArray(children).filter(
-    (child) => React25.isValidElement(child) && child.type === StackedModalStep
+  return React26.Children.toArray(children).filter(
+    (child) => React26.isValidElement(child) && child.type === StackedModalStep
   );
 }
-var StackedModal = React25.forwardRef(
+var StackedModal = React26.forwardRef(
   ({ children, initialStep = 0, ...rest }, ref) => {
     const steps = filterSteps(children);
     return /* @__PURE__ */ jsx158(StackedModalProvider, { totalSteps: steps.length, initialStep, children: /* @__PURE__ */ jsx158(StackedModalInner, { ref, steps, ...rest }) });
   }
 );
 StackedModal.displayName = "StackedModal";
-var StackedModalInner = React25.forwardRef(
+var StackedModalInner = React26.forwardRef(
   ({ steps, onRequestClose, modalSize = "lg", width, height, "data-testid": dataTestId }, ref) => {
     return /* @__PURE__ */ jsx158("div", { css: stackedModalRootStyles, children: /* @__PURE__ */ jsx158(
       Modal,
@@ -20745,39 +20787,39 @@ var ResponsiveTableContainer = ({ children }) => {
 };
 
 // src/components/Table/Table.tsx
-import * as React26 from "react";
+import * as React27 from "react";
 import { jsx as jsx162 } from "@emotion/react/jsx-runtime";
-var Table = React26.forwardRef(
+var Table = React27.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React26.forwardRef(
+var TableHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React26.forwardRef(
+var TableBody = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React26.forwardRef(
+var TableFoot = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React26.forwardRef(
+var TableRow = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React26.forwardRef(
+var TableCellHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React26.forwardRef(
+var TableCellData = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ jsx162("td", { ref, ...otherProps, children });
   }

package/dist/index.d.mts

@@ -3715,6 +3715,9 @@ type ObjectGridItemProps = Omit<ObjectItemProps, 'leftSlot'> & {
      * @default 'object-grid-item-menu-btn'
      */
     menuTestId?: string;
+    /** When true, the context menu is hidden at rest and revealed on card
+     * hover/focus (and while the menu is open), matching the favorite star. */
+    revealMenuOnHover?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 /**
  * A card-style grid item for displaying an object with cover media, heading, subtitle, and optional context menu.
@@ -3734,7 +3737,7 @@ type ObjectGridItemProps = Omit<ObjectItemProps, 'leftSlot'> & {
  * />
  * ```
  */
-declare const ObjectGridItem: ({ header, cover, rightSlot, menuItems, isSelected, children, menuTestId, ...props }: ObjectGridItemProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ObjectGridItem: ({ header, cover, rightSlot, menuItems, isSelected, children, menuTestId, revealMenuOnHover, ...props }: ObjectGridItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * Props for {@link ObjectGridItemCardCover}.

package/dist/index.d.ts

@@ -3715,6 +3715,9 @@ type ObjectGridItemProps = Omit<ObjectItemProps, 'leftSlot'> & {
      * @default 'object-grid-item-menu-btn'
      */
     menuTestId?: string;
+    /** When true, the context menu is hidden at rest and revealed on card
+     * hover/focus (and while the menu is open), matching the favorite star. */
+    revealMenuOnHover?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 /**
  * A card-style grid item for displaying an object with cover media, heading, subtitle, and optional context menu.
@@ -3734,7 +3737,7 @@ type ObjectGridItemProps = Omit<ObjectItemProps, 'leftSlot'> & {
  * />
  * ```
  */
-declare const ObjectGridItem: ({ header, cover, rightSlot, menuItems, isSelected, children, menuTestId, ...props }: ObjectGridItemProps) => _emotion_react_jsx_runtime.JSX.Element;
+declare const ObjectGridItem: ({ header, cover, rightSlot, menuItems, isSelected, children, menuTestId, revealMenuOnHover, ...props }: ObjectGridItemProps) => _emotion_react_jsx_runtime.JSX.Element;
 
 /**
  * Props for {@link ObjectGridItemCardCover}.

package/dist/index.js

@@ -3021,7 +3021,7 @@ var buttonSoftAccentPrimary = import_react12.css`
 
 // src/components/Input/styles/Inputs.styles.ts
 init_emotion_jsx_shim();
-var import_react22 = require("@emotion/react");
+var import_react23 = require("@emotion/react");
 
 // src/components/Button/Button.tsx
 init_emotion_jsx_shim();
@@ -4795,13 +4795,13 @@ var ToastEntry = ({ toast: entry }) => {
   const duration = (_a = entry.timeout) != null ? _a : defaultTimeoutMs;
   const showCountdown = duration > 0 && entry.type !== "loading" && (data == null ? void 0 : data.kind) !== "progress";
   if ((data == null ? void 0 : data.kind) === "progress") {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_toast.Toast.Root, { toast: entry, css: toastRootStyles, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_toast.Toast.Root, { toast: entry, css: toastRootStyles, "data-testid": "toast", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { css: toastBodyStyles, "data-testid": "toast-body", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Description, { css: toastDescriptionStyles, children: data.label }) }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_progress.Progress.Root, { value: Math.max(0, Math.min(1, data.progress)) * 100, css: toastProgressRootStyles, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_progress.Progress.Track, { css: toastProgressTrackStyles, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_progress.Progress.Indicator, { css: toastProgressIndicatorStyles }) }) })
     ] });
   }
   if ((data == null ? void 0 : data.kind) === "undoable") {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_toast.Toast.Root, { toast: entry, css: toastRootStyles, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_toast.Toast.Root, { toast: entry, css: toastRootStyles, "data-testid": "toast", children: [
       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToastTypeIcon, { type: entry.type }),
       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { css: toastBodyStyles, "data-testid": "toast-body", children: [
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Description, { css: toastDescriptionStyles, children: data.description }),
@@ -4810,6 +4810,7 @@ var ToastEntry = ({ toast: entry }) => {
           {
             type: "button",
             css: toastUndoButtonStyles,
+            "data-testid": "toast-undo-button",
             onClick: () => {
               data.onUndo();
               toastManager.close(entry.id);
@@ -4818,14 +4819,14 @@ var ToastEntry = ({ toast: entry }) => {
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: import_CgClose2.CgClose, size: "1rem", iconColor: "currentColor" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", "data-testid": "toast-close-button", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: import_CgClose2.CgClose, size: "1rem", iconColor: "currentColor" }) }),
       showCountdown ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToastCountdownBar, { duration }) : null
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_toast.Toast.Root, { toast: entry, css: toastRootStyles, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_toast.Toast.Root, { toast: entry, css: toastRootStyles, "data-testid": "toast", children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToastTypeIcon, { type: entry.type }),
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { css: toastBodyStyles, "data-testid": "toast-body", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Description, { css: toastDescriptionStyles, children: entry.description }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: import_CgClose2.CgClose, size: "1rem", iconColor: "currentColor" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_toast.Toast.Close, { css: toastCloseButtonStyles, "aria-label": "Close", "data-testid": "toast-close-button", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { icon: import_CgClose2.CgClose, size: "1rem", iconColor: "currentColor" }) }),
     showCountdown ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ToastCountdownBar, { duration }) : null
   ] });
 };
@@ -4919,7 +4920,15 @@ function useShortcut({
 // src/components/Tooltip/Tooltip.tsx
 init_emotion_jsx_shim();
 var import_tooltip = require("@base-ui/react/tooltip");
-var import_react20 = require("react");
+var import_react21 = require("react");
+
+// src/components/Modal/ModalPortalContext.ts
+init_emotion_jsx_shim();
+var import_react19 = require("react");
+var ModalPortalContext = (0, import_react19.createContext)(null);
+function useModalPortalContainer() {
+  return (0, import_react19.useContext)(ModalPortalContext);
+}
 
 // src/components/parsePlacement.ts
 init_emotion_jsx_shim();
@@ -4933,11 +4942,11 @@ function parsePlacement(placement) {
 
 // src/components/Tooltip/Tooltip.styles.ts
 init_emotion_jsx_shim();
-var import_react19 = require("@emotion/react");
-var TooltipPositionerStyles = import_react19.css`
+var import_react20 = require("@emotion/react");
+var TooltipPositionerStyles = import_react20.css`
   z-index: var(--z-tooltip);
 `;
-var TooltipContainer = import_react19.css`
+var TooltipContainer = import_react20.css`
   border: 2px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: var(--spacing-xs) var(--spacing-sm);
@@ -4946,7 +4955,7 @@ var TooltipContainer = import_react19.css`
   background: var(--white);
   position: relative;
 `;
-var TooltipArrowStyles = import_react19.css`
+var TooltipArrowStyles = import_react20.css`
   display: flex;
 
   &[data-side='top'] {
@@ -4969,13 +4978,13 @@ var TooltipArrowStyles = import_react19.css`
     rotate: -90deg;
   }
 `;
-var TooltipArrowFill = import_react19.css`
+var TooltipArrowFill = import_react20.css`
   fill: var(--gray-300);
 `;
-var TooltipArrowOuterStroke = import_react19.css`
+var TooltipArrowOuterStroke = import_react20.css`
   fill: var(--gray-300);
 `;
-var TooltipArrowInnerStroke = import_react19.css`
+var TooltipArrowInnerStroke = import_react20.css`
   fill: var(--gray-300);
 `;
 
@@ -5016,7 +5025,8 @@ function Tooltip({
   gutter = 10,
   ...popupProps
 }) {
-  const [inlineContainer, setInlineContainer] = (0, import_react20.useState)(null);
+  const [inlineContainer, setInlineContainer] = (0, import_react21.useState)(null);
+  const modalContainer = useModalPortalContainer();
   if (!title) {
     return children;
   }
@@ -5034,7 +5044,7 @@ function Tooltip({
         style: { position: "absolute", width: 0, height: 0, overflow: "visible" }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tooltip.Tooltip.Portal, { container: withoutPortal ? inlineContainer : void 0, children: positionerContent })
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tooltip.Tooltip.Portal, { container: withoutPortal ? inlineContainer : modalContainer != null ? modalContainer : void 0, children: positionerContent })
   ] });
 }
 
@@ -5142,8 +5152,8 @@ var React6 = __toESM(require("react"));
 
 // src/components/Button/LinkButton.styles.ts
 init_emotion_jsx_shim();
-var import_react21 = require("@emotion/react");
-var linkButton = import_react21.css`
+var import_react22 = require("@emotion/react");
+var linkButton = import_react22.css`
   background: transparent;
   border: none;
   padding: 0;
@@ -5161,13 +5171,13 @@ var linkButton = import_react21.css`
     outline: none;
   }
 `;
-var linkButtonDisabled = import_react21.css`
+var linkButtonDisabled = import_react22.css`
   opacity: var(--opacity-50);
   filter: saturate(0.5);
   cursor: default;
   pointer-events: none;
 `;
-var linkButtonTruncated = import_react21.css`
+var linkButtonTruncated = import_react22.css`
   display: block;
   width: 100%;
   overflow: hidden;
@@ -5197,15 +5207,15 @@ var LinkButton = React6.forwardRef(
 );
 
 // src/components/Input/styles/Inputs.styles.ts
-var inputContainer = import_react22.css`
+var inputContainer = import_react23.css`
   position: relative;
 `;
-var labelText = import_react22.css`
+var labelText = import_react23.css`
   display: flex;
   margin: 0 0 var(--spacing-xs);
   align-items: center;
 `;
-var input = (whiteSpaceWrap) => import_react22.css`
+var input = (whiteSpaceWrap) => import_react23.css`
   --input-padding: 12px var(--spacing-base) 12px var(--spacing-sm);
   appearance: none;
   background-color: var(--white);
@@ -5290,7 +5300,7 @@ var input = (whiteSpaceWrap) => import_react22.css`
     }
   }
 `;
-var inputError = import_react22.css`
+var inputError = import_react23.css`
   border-color: var(--action-destructive-default);
   box-shadow: var(--elevation-100);
 
@@ -5298,7 +5308,7 @@ var inputError = import_react22.css`
     border-color: var(--action-destructive-hover);
   }
 `;
-var inputPrefixGroup = import_react22.css`
+var inputPrefixGroup = import_react23.css`
   align-items: center;
   background-color: var(--white);
   border: 1px solid var(--gray-200);
@@ -5330,7 +5340,7 @@ var inputPrefixGroup = import_react22.css`
     color: var(--gray-300);
   }
 `;
-var inputPrefixGroupError = import_react22.css`
+var inputPrefixGroupError = import_react23.css`
   border-color: var(--action-destructive-default);
   box-shadow: var(--elevation-100);
 
@@ -5338,7 +5348,7 @@ var inputPrefixGroupError = import_react22.css`
     border-color: var(--action-destructive-hover);
   }
 `;
-var inputPrefixSlot = import_react22.css`
+var inputPrefixSlot = import_react23.css`
   color: var(--gray-300);
   flex: none;
   font-size: 1rem;
@@ -5346,7 +5356,7 @@ var inputPrefixSlot = import_react22.css`
   pointer-events: none;
   white-space: nowrap;
 `;
-var inputInPrefixGroup = import_react22.css`
+var inputInPrefixGroup = import_react23.css`
   appearance: none;
   background: transparent;
   border: 0;
@@ -5376,19 +5386,19 @@ var inputInPrefixGroup = import_react22.css`
     color: var(--gray-300);
   }
 `;
-var inputInPrefixGroupWithIcon = import_react22.css`
+var inputInPrefixGroupWithIcon = import_react23.css`
   padding-right: var(--spacing-2xl);
 `;
-var inputIcon = import_react22.css`
+var inputIcon = import_react23.css`
   align-items: center;
   display: flex;
   position: absolute;
   inset: 0 var(--spacing-base) 0 auto;
 `;
-var inputWithIcon = import_react22.css`
+var inputWithIcon = import_react23.css`
   padding-right: var(--spacing-2xl);
 `;
-var inputSelect = import_react22.css`
+var inputSelect = import_react23.css`
   background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%0A%3E%3Cpath d='M6.34317 7.75732L4.92896 9.17154L12 16.2426L19.0711 9.17157L17.6569 7.75735L12 13.4142L6.34317 7.75732Z' fill='currentColor' /%3E%3C/svg%3E");
   background-position: right var(--spacing-sm) center;
   background-repeat: no-repeat;
@@ -5399,13 +5409,13 @@ var inputSelect = import_react22.css`
     color: var(--gray-300);
   }
 `;
-var inputSearchCloseBtn = import_react22.css`
+var inputSearchCloseBtn = import_react23.css`
   background: none;
   border: none;
   padding: 0;
   pointer-events: all;
 `;
-var inputToggleLabel = import_react22.css`
+var inputToggleLabel = import_react23.css`
   align-items: flex-start;
   cursor: pointer;
   display: inline-flex;
@@ -5416,7 +5426,7 @@ var inputToggleLabel = import_react22.css`
   position: relative;
   min-height: var(--spacing-md);
 `;
-var toggleInput = import_react22.css`
+var toggleInput = import_react23.css`
   appearance: none;
   border: 1px solid var(--gray-200);
   background: var(--white);
@@ -5462,7 +5472,7 @@ var toggleInput = import_react22.css`
       no-repeat center center;
   }
 `;
-var inlineLabel = import_react22.css`
+var inlineLabel = import_react23.css`
   padding-left: var(--spacing-lg);
 
   > a {
@@ -5473,20 +5483,20 @@ var inlineLabel = import_react22.css`
     }
   }
 `;
-var labelNormal = import_react22.css`
+var labelNormal = import_react23.css`
   font-weight: var(--fw-regular);
 `;
-var labelMedium = import_react22.css`
+var labelMedium = import_react23.css`
   font-weight: var(--fw-medium);
 `;
-var labelBold = import_react22.css`
+var labelBold = import_react23.css`
   font-weight: var(--fw-bold);
 `;
-var inputDisabled = import_react22.css`
+var inputDisabled = import_react23.css`
   cursor: not-allowed;
   color: var(--gray-400);
 `;
-var inputToggleMessageContainer = import_react22.css`
+var inputToggleMessageContainer = import_react23.css`
   display: flex;
   flex-direction: column;
   flex-basis: 100%;
@@ -5494,11 +5504,11 @@ var inputToggleMessageContainer = import_react22.css`
   margin-top: -0.5rem;
   line-height: 1.15;
 `;
-var textarea = import_react22.css`
+var textarea = import_react23.css`
   ${input("wrap")};
   display: block;
 `;
-var inputSelectCompact = import_react22.css`
+var inputSelectCompact = import_react23.css`
   font-size: var(--fs-xs);
   padding: var(--spacing-2xs) var(--spacing-md) var(--spacing-2xs) var(--spacing-xs);
   border-color: var(--gray-200);
@@ -5508,8 +5518,8 @@ var inputSelectCompact = import_react22.css`
 
 // src/styles/Accessibility.styles.ts
 init_emotion_jsx_shim();
-var import_react23 = require("@emotion/react");
-var accessibleHidden = import_react23.css`
+var import_react24 = require("@emotion/react");
+var accessibleHidden = import_react24.css`
   clip: rect(0, 0, 0, 0);
   position: absolute;
   width: 1px;
@@ -5519,17 +5529,17 @@ var accessibleHidden = import_react23.css`
 
 // src/hooks/useImageLoadFallback.ts
 init_emotion_jsx_shim();
-var import_react24 = require("react");
+var import_react25 = require("react");
 function useImageLoadFallback({
   src,
   srcSet,
   errorFallbackSrc,
   logContext
 }) {
-  const [currentSrc, setCurrentSrc] = (0, import_react24.useState)(src);
-  const [currentSrcSet, setCurrentSrcSet] = (0, import_react24.useState)(srcSet);
-  const [usedFallback, setUsedFallback] = (0, import_react24.useState)(false);
-  (0, import_react24.useEffect)(() => {
+  const [currentSrc, setCurrentSrc] = (0, import_react25.useState)(src);
+  const [currentSrcSet, setCurrentSrcSet] = (0, import_react25.useState)(srcSet);
+  const [usedFallback, setUsedFallback] = (0, import_react25.useState)(false);
+  (0, import_react25.useEffect)(() => {
     setCurrentSrc(src);
     setCurrentSrcSet(srcSet);
     setUsedFallback(false);
@@ -5551,8 +5561,8 @@ function useImageLoadFallback({
 
 // src/styles/Animations.styles.ts
 init_emotion_jsx_shim();
-var import_react25 = require("@emotion/react");
-var growSubtle = import_react25.keyframes`
+var import_react26 = require("@emotion/react");
+var growSubtle = import_react26.keyframes`
   0%,
   100% {
     transform: scale(1);
@@ -5563,7 +5573,7 @@ var growSubtle = import_react25.keyframes`
     opacity: 1;
   }
 `;
-var fadeInBottom = import_react25.keyframes`
+var fadeInBottom = import_react26.keyframes`
   0% {
     opacity: 0;
     transform: translateY(10px);
@@ -5573,7 +5583,7 @@ var fadeInBottom = import_react25.keyframes`
     transform: translateY(0);
   }
 `;
-var fadeInTop = import_react25.keyframes`
+var fadeInTop = import_react26.keyframes`
   0% {
     opacity: 0;
     transform: translateY(-10px);
@@ -5583,7 +5593,7 @@ var fadeInTop = import_react25.keyframes`
     transform: translateY(0);
   }
 `;
-var fadeOutBottom = import_react25.keyframes`
+var fadeOutBottom = import_react26.keyframes`
   0% {
     opacity: 1;
     transform: translateY(0);
@@ -5593,7 +5603,7 @@ var fadeOutBottom = import_react25.keyframes`
     transform: translateY(10px);
   }
 `;
-var fadeIn = import_react25.keyframes`
+var fadeIn = import_react26.keyframes`
   0% {
     opacity: 0;
   }
@@ -5601,11 +5611,11 @@ var fadeIn = import_react25.keyframes`
     opacity: 1;
   }
 `;
-var ripple = import_react25.keyframes`
+var ripple = import_react26.keyframes`
 to {
   transform: scale(4);
 }`;
-var skeletonLoading = import_react25.keyframes`
+var skeletonLoading = import_react26.keyframes`
 0% {
   background-color: var(--gray-100);
 }
@@ -5613,7 +5623,7 @@ var skeletonLoading = import_react25.keyframes`
   background-color: var(--gray-200);
 }
 `;
-var fadeInLtr = import_react25.keyframes`
+var fadeInLtr = import_react26.keyframes`
 from {
   opacity: 0;
   transform: translateX(-10px);
@@ -5623,7 +5633,7 @@ to {
   transform: translateX(0);
 }
 `;
-var fadeInRtl = import_react25.keyframes`
+var fadeInRtl = import_react26.keyframes`
 from {
   opacity: 0;
   transform: translateX(10px);
@@ -5633,7 +5643,7 @@ to {
   transform: translateX(0);
 }
 `;
-var slideInTtb = import_react25.keyframes`
+var slideInTtb = import_react26.keyframes`
 from {
   transform: translateY(-100%);
 }
@@ -5641,7 +5651,7 @@ to {
   transform: translateY(0);
 }
 `;
-var slideInRtl = import_react25.keyframes`
+var slideInRtl = import_react26.keyframes`
 from {
   transform: translateX(100%);
 }
@@ -5649,7 +5659,7 @@ to {
   transform: translateX(0);
 }
 `;
-var spin2 = import_react25.keyframes`
+var spin2 = import_react26.keyframes`
 from {
   transform: rotateZ(0deg);
 }
@@ -5663,8 +5673,8 @@ init_emotion_jsx_shim();
 
 // src/components/AddButton/AddButton.styles.ts
 init_emotion_jsx_shim();
-var import_react26 = require("@emotion/react");
-var addButton = import_react26.css`
+var import_react27 = require("@emotion/react");
+var addButton = import_react27.css`
   --max-size: clamp(2.5rem, 100vw, 3.5rem);
   align-items: center;
   box-shadow: var(--shadow-base);
@@ -5750,8 +5760,8 @@ var import_CgMathPlus2 = require("@react-icons/all-files/cg/CgMathPlus");
 
 // src/components/AddListButton/AddListButton.styles.ts
 init_emotion_jsx_shim();
-var import_react27 = require("@emotion/react");
-var AddListButtonBtn = import_react27.css`
+var import_react28 = require("@emotion/react");
+var AddListButtonBtn = import_react28.css`
   align-items: center;
   background: transparent;
   border: none;
@@ -5770,20 +5780,20 @@ var AddListButtonBtn = import_react27.css`
     box-shadow: var(--shadow-base);
   }
 `;
-var AddListButtonTheme = (theme) => import_react27.css`
+var AddListButtonTheme = (theme) => import_react28.css`
   color: ${theme};
 `;
-var AddListButtonBtnSmall = import_react27.css`
+var AddListButtonBtnSmall = import_react28.css`
   font-size: var(--fs-xs);
   font-weight: var(--fw-regular);
 `;
-var AddListButtonIconMathPlus = (disabled2, theme) => import_react27.css`
+var AddListButtonIconMathPlus = (disabled2, theme) => import_react28.css`
   box-sizing: border-box;
   background: ${disabled2 ? "var(--gray-300)" : theme};
   color: var(--white);
   padding: calc(var(--spacing-xs) - 0.15rem);
 `;
-var AddListButtonIcon = import_react27.css`
+var AddListButtonIcon = import_react28.css`
   border-radius: var(--rounded-full);
   transition: box-shadow var(--duration-fast) var(--timing-ease-out);
 `;
@@ -5839,7 +5849,7 @@ var import_CgProfile2 = require("@react-icons/all-files/cg/CgProfile");
 
 // src/components/Avatar/Avatar.styles.ts
 init_emotion_jsx_shim();
-var import_react28 = require("@emotion/react");
+var import_react29 = require("@emotion/react");
 var AVATAR_SIZE_2XS = "1rem";
 var AVATAR_SIZE_XS = "1.5rem";
 var AVATAR_SIZE_SM = "2rem";
@@ -5848,7 +5858,7 @@ var AVATAR_SIZE_LG = "3rem";
 var AVATAR_SIZE_XL = "4rem";
 var AVATAR_SIZE_2XL = "5rem";
 var AVATAR_SIZE_3XL = "6rem";
-var avatarStyles = import_react28.css`
+var avatarStyles = import_react29.css`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -5862,33 +5872,33 @@ var avatarStyles = import_react28.css`
   font-weight: var(--fw-bold);
   overflow: hidden;
 `;
-var avatarImageStyles = import_react28.css`
+var avatarImageStyles = import_react29.css`
   width: 100%;
   height: 100%;
   object-fit: cover;
 `;
-var avatarSize2xsStyles = import_react28.css`
+var avatarSize2xsStyles = import_react29.css`
   width: ${AVATAR_SIZE_2XS};
 `;
-var avatarSizeXsStyles = import_react28.css`
+var avatarSizeXsStyles = import_react29.css`
   width: ${AVATAR_SIZE_XS};
 `;
-var avatarSizeSmStyles = import_react28.css`
+var avatarSizeSmStyles = import_react29.css`
   width: ${AVATAR_SIZE_SM};
 `;
-var avatarSizeMdStyles = import_react28.css`
+var avatarSizeMdStyles = import_react29.css`
   width: ${AVATAR_SIZE_MD};
 `;
-var avatarSizeLgStyles = import_react28.css`
+var avatarSizeLgStyles = import_react29.css`
   width: ${AVATAR_SIZE_LG};
 `;
-var avatarSizeXlStyles = import_react28.css`
+var avatarSizeXlStyles = import_react29.css`
   width: ${AVATAR_SIZE_XL};
 `;
-var avatarSize2xlStyles = import_react28.css`
+var avatarSize2xlStyles = import_react29.css`
   width: ${AVATAR_SIZE_2XL};
 `;
-var avatarSize3xlStyles = import_react28.css`
+var avatarSize3xlStyles = import_react29.css`
   width: ${AVATAR_SIZE_3XL};
 `;
 
@@ -5926,8 +5936,8 @@ init_emotion_jsx_shim();
 
 // src/components/Avatar/AvatarGroup.styles.ts
 init_emotion_jsx_shim();
-var import_react29 = require("@emotion/react");
-var avatarGroupStyles = import_react29.css`
+var import_react30 = require("@emotion/react");
+var avatarGroupStyles = import_react30.css`
   display: flex;
   flex-wrap: nowrap;
 
@@ -5935,7 +5945,7 @@ var avatarGroupStyles = import_react29.css`
     margin-left: calc(-1 * var(--spacing-sm));
   }
 `;
-var avatarGroupMaxStyles = (numberOfItemsToRender) => import_react29.css`
+var avatarGroupMaxStyles = (numberOfItemsToRender) => import_react30.css`
   & > *:nth-of-type(n + ${numberOfItemsToRender + 1}) {
     display: none;
   }
@@ -5997,8 +6007,8 @@ var import_CgClose3 = require("@react-icons/all-files/cg/CgClose");
 
 // src/components/Banner/Banner.styles.ts
 init_emotion_jsx_shim();
-var import_react30 = require("@emotion/react");
-var bannerStyles = import_react30.css`
+var import_react31 = require("@emotion/react");
+var bannerStyles = import_react31.css`
   ${functionalColors}
 
   --border-color: var(--utility-caution-icon);
@@ -6032,11 +6042,11 @@ var bannerStyles = import_react30.css`
     --background-color: var(--utility-success-container);
   }
 `;
-var bannerAnimatedStyles = import_react30.css`
+var bannerAnimatedStyles = import_react31.css`
   animation: ${slideInTtb} var(--duration-xfast) ease-out;
 `;
-var bannerContentStyles = import_react30.css``;
-var bannerDismissButtonStyles = import_react30.css`
+var bannerContentStyles = import_react31.css``;
+var bannerDismissButtonStyles = import_react31.css`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -6089,15 +6099,15 @@ init_emotion_jsx_shim();
 
 // src/components/Brand/UniformLogo.styles.ts
 init_emotion_jsx_shim();
-var import_react31 = require("@emotion/react");
-var SVG = import_react31.css`
+var import_react32 = require("@emotion/react");
+var SVG = import_react32.css`
   display: block;
 `;
-var SVGLight = import_react31.css`
+var SVGLight = import_react32.css`
   background: transparent;
   color: var(--typography-base);
 `;
-var SVGDark = import_react31.css`
+var SVGDark = import_react32.css`
   background: var(--gray-800);
   color: var(--white);
 `;
@@ -6310,36 +6320,36 @@ init_emotion_jsx_shim();
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
 init_emotion_jsx_shim();
-var import_react32 = require("@emotion/react");
-var loadingOverlayContainer = import_react32.css`
+var import_react33 = require("@emotion/react");
+var loadingOverlayContainer = import_react33.css`
   inset: 0;
   overflow: hidden;
   justify-content: center;
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = import_react32.css`
+var loadingOverlayVisible = import_react33.css`
   display: flex;
 `;
-var loadingOverlayHidden = import_react32.css`
+var loadingOverlayHidden = import_react33.css`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => import_react32.css`
+var loadingOverlayBackground = (bgColor) => import_react33.css`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = import_react32.css`
+var loadingOverlayBody = import_react33.css`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = import_react32.css`
+var loadingOverlayMessage = import_react33.css`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
-var loaderAnimationContainer = import_react32.css`
+var loaderAnimationContainer = import_react33.css`
   aspect-ratio: 1/1;
   position: relative;
   transition: filter var(--duration-xslow) ease-in-out;
@@ -6667,17 +6677,17 @@ var LoadingIcon = ({ height, width, ...props }) => {
 
 // src/components/Menu/DropdownStyleMenuTrigger.tsx
 init_emotion_jsx_shim();
-var import_react33 = require("@emotion/react");
+var import_react34 = require("@emotion/react");
 var import_CgChevronDown2 = require("@react-icons/all-files/cg/CgChevronDown");
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
-var buttonStyle = (bgColor) => import_react33.css`
+var buttonStyle = (bgColor) => import_react34.css`
   background-color: ${bgColor};
   display: block;
   font-size: var(--fs-sm);
   line-height: 1.5;
 `;
-var ghostButtonStyle = import_react33.css`
+var ghostButtonStyle = import_react34.css`
   border: 0;
   transition:
     background-color var(--duration-fast) var(--timing-ease-out),
@@ -6694,7 +6704,7 @@ var ghostButtonStyle = import_react33.css`
     color: var(--gray-400);
   }
 `;
-var outlineButtonStyle = import_react33.css`
+var outlineButtonStyle = import_react34.css`
   align-items: center;
   border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
@@ -6715,7 +6725,7 @@ var outlineButtonStyle = import_react33.css`
   }
 `;
 var DropdownStyleMenuTrigger = markNativeButton(
-  (0, import_react34.forwardRef)(function DropdownStyleMenuTrigger2({ bgColor = "var(--white)", variant = "ghost", children, ...buttonProps }, ref) {
+  (0, import_react35.forwardRef)(function DropdownStyleMenuTrigger2({ bgColor = "var(--white)", variant = "ghost", children, ...buttonProps }, ref) {
     var _a;
     const buttonVariantStyle = variant === "ghost" ? ghostButtonStyle : outlineButtonStyle;
     return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
@@ -6740,14 +6750,6 @@ var import_menu = require("@base-ui/react/menu");
 var React8 = __toESM(require("react"));
 var import_react40 = require("react");
 
-// src/components/Modal/ModalPortalContext.ts
-init_emotion_jsx_shim();
-var import_react35 = require("react");
-var ModalPortalContext = (0, import_react35.createContext)(null);
-function useModalPortalContainer() {
-  return (0, import_react35.useContext)(ModalPortalContext);
-}
-
 // src/components/Menu/filterMenuSeparators.ts
 init_emotion_jsx_shim();
 var import_react38 = __toESM(require("react"));
@@ -7657,10 +7659,10 @@ var Input = (0, import_react49.forwardRef)(
         id,
         css: [
           prefix ? inputInPrefixGroup : input("nowrap"),
+          typeof classNameControl === "object" ? classNameControl : void 0,
           prefix && icon ? inputInPrefixGroupWithIcon : void 0,
           !prefix && errorMessage ? inputError : void 0,
-          !prefix && icon ? inputWithIcon : "",
-          typeof classNameControl === "object" ? classNameControl : void 0
+          !prefix && icon ? inputWithIcon : ""
         ],
         "aria-label": showLabel || typeof label2 !== "string" ? void 0 : label2,
         className: typeof classNameControl === "string" ? classNameControl : "",
@@ -9545,18 +9547,38 @@ var Link = React13.forwardRef(
 );
 Link.displayName = "Link";
 var LinkWithRef = React13.forwardRef(
-  ({ linkManagerComponent: LinkManager, href, as, onClick, linkColor = "default", children, text, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
-    LinkManager,
-    {
-      ...props,
-      as,
-      href,
-      ref,
-      css: [link, textColor[linkColor]],
-      onClick,
-      children: text != null ? text : children
-    }
-  )
+  ({
+    linkManagerComponent: LinkManager,
+    href,
+    as,
+    onClick,
+    external,
+    linkColor = "default",
+    children,
+    text,
+    ...props
+  }, ref) => {
+    const externalAttrs = external ? {
+      target: "_blank",
+      rel: "noreferrer noopener"
+    } : {};
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+      LinkManager,
+      {
+        ...props,
+        ...externalAttrs,
+        as,
+        href,
+        ref,
+        css: [link, textColor[linkColor]],
+        onClick,
+        children: [
+          text != null ? text : children,
+          external ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { icon: import_CgExternal2.CgExternal, iconColor: "currentColor", size: 20 }) : null
+        ]
+      }
+    );
+  }
 );
 LinkWithRef.displayName = "LinkWithRef";
 
@@ -11165,7 +11187,9 @@ var descriptionListLabelStyles = import_react84.css`
 `;
 var descriptionListValueStyles = import_react84.css`
   display: flex;
+  min-width: 0;
   margin: 0;
+  overflow-wrap: anywhere;
 `;
 
 // src/components/DescriptionList/DescriptionList.tsx
@@ -12992,9 +13016,11 @@ var IntegrationModalHeader = ({ icon, name, menu, children }) => {
 // src/components/JsonEditor/JsonEditor.tsx
 init_emotion_jsx_shim();
 var import_react112 = __toESM(require("@monaco-editor/react"));
+var React19 = __toESM(require("react"));
 var import_jsx_runtime94 = require("@emotion/react/jsx-runtime");
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
+  const modelPath = `${React19.useId()}.json`;
   let effectiveHeight = height;
   if (typeof height === "number" && height < 0) {
     effectiveHeight = typeof window === "undefined" ? "100%" : window.innerHeight + height;
@@ -13007,6 +13033,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
     {
       height: effectiveHeight,
       className: "uniform-json-editor",
+      path: modelPath,
       defaultLanguage: "json",
       defaultValue,
       options: {
@@ -15251,6 +15278,20 @@ var ObjectGridItemSubtitle = import_react133.css`
   text-overflow: ellipsis;
   max-width: 100%;
 `;
+var ObjectGridItemRevealMenu = import_react133.css`
+  display: inline-flex;
+  opacity: 0;
+  transition: opacity var(--duration-fast) var(--timing-ease-out);
+
+  [data-object-grid-item]:hover &,
+  [data-object-grid-item]:focus-within &,
+  &:hover,
+  &:focus-within,
+  &:has([aria-expanded='true']),
+  &:has([data-popup-open]) {
+    opacity: 1;
+  }
+`;
 
 // src/components/Objects/ObjectGridItem.tsx
 var import_jsx_runtime112 = require("@emotion/react/jsx-runtime");
@@ -15262,6 +15303,7 @@ var ObjectGridItem2 = ({
   isSelected,
   children,
   menuTestId,
+  revealMenuOnHover,
   ...props
 }) => {
   const hasOnClick = props.onClick;
@@ -15298,14 +15340,14 @@ var ObjectGridItem2 = ({
               onClick: hasOnClick ? onStopPropagation : void 0,
               children: [
                 rightSlot,
-                menuItems ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
+                menuItems ? /* @__PURE__ */ (0, import_jsx_runtime112.jsx)("span", { css: revealMenuOnHover ? ObjectGridItemRevealMenu : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(
                   Menu,
                   {
                     menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime112.jsx)(MenuThreeDots, { "data-testid": menuTestId != null ? menuTestId : "object-grid-item-menu-btn" }),
                     placement: "bottom-end",
                     children: menuItems
                   }
-                ) : null
+                ) }) : null
               ]
             }
           ) : null
@@ -16009,7 +16051,7 @@ var ObjectListSubText2 = ({ children, ...props }) => {
 
 // src/components/Pagination/Pagination.tsx
 init_emotion_jsx_shim();
-var React20 = __toESM(require("react"));
+var React21 = __toESM(require("react"));
 var import_react_paginate = __toESM(require("react-paginate"));
 
 // src/components/Pagination/Pagination.styles.ts
@@ -16147,7 +16189,7 @@ function Pagination({
   total,
   onPageChange
 }) {
-  const containerRef = React20.useRef(null);
+  const containerRef = React21.useRef(null);
   const pageCount = limit >= 1 ? Math.ceil(total / limit) : 0;
   const currentPage = limit >= 1 ? Math.ceil(offset / limit) : 0;
   const { marginPagesDisplayed, pageRangeDisplayed } = usePaginationDisplayRange(containerRef, pageCount);
@@ -22748,39 +22790,39 @@ var ResponsiveTableContainer = ({ children }) => {
 
 // src/components/Table/Table.tsx
 init_emotion_jsx_shim();
-var React26 = __toESM(require("react"));
+var React27 = __toESM(require("react"));
 var import_jsx_runtime162 = require("@emotion/react/jsx-runtime");
-var Table = React26.forwardRef(
+var Table = React27.forwardRef(
   ({ children, cellPadding, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("table", { ref, css: table({ cellPadding }), ...otherProps, children });
   }
 );
-var TableHead = React26.forwardRef(
+var TableHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("thead", { ref, css: tableHead, ...otherProps, children });
   }
 );
-var TableBody = React26.forwardRef(
+var TableBody = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("tbody", { ref, ...otherProps, children });
   }
 );
-var TableFoot = React26.forwardRef(
+var TableFoot = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("tfoot", { ref, ...otherProps, children });
   }
 );
-var TableRow = React26.forwardRef(
+var TableRow = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("tr", { ref, css: tableRow, ...otherProps, children });
   }
 );
-var TableCellHead = React26.forwardRef(
+var TableCellHead = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("th", { ref, css: tableCellHead, ...otherProps, children });
   }
 );
-var TableCellData = React26.forwardRef(
+var TableCellData = React27.forwardRef(
   ({ children, ...otherProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("td", { ref, ...otherProps, children });
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.72.3-alpha.5+87cd60cb2e",
+  "version": "20.72.3-alpha.52+f01685e1ef",
   "description": "Uniform design system components",
   "license": "SEE LICENSE IN LICENSE.txt",
   "exports": {
@@ -34,8 +34,8 @@
     "@storybook/react-vite": "10.4.6",
     "@types/react": "19.2.17",
     "@types/react-dom": "19.2.3",
-    "@uniformdev/canvas": "^20.72.3-alpha.5+87cd60cb2e",
-    "@uniformdev/richtext": "^20.72.3-alpha.5+87cd60cb2e",
+    "@uniformdev/canvas": "^20.72.3-alpha.52+f01685e1ef",
+    "@uniformdev/richtext": "^20.72.3-alpha.52+f01685e1ef",
     "autoprefixer": "10.5.0",
     "hygen": "6.2.11",
     "jsdom": "29.1.1",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "87cd60cb2eae75aac26c8c51566e66281c3921f9"
+  "gitHead": "f01685e1ef0aeb05dc200ccdcdd5aba6f6cfc437"
 }