@uniformdev/design-system 20.72.3 → 20.72.4-alpha.13

package/dist/esm/index.js

@@ -3158,6 +3158,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 +3259,7 @@ function Tooltip({
   ...popupProps
 }) {
   const [inlineContainer, setInlineContainer] = useState3(null);
+  const modalContainer = useModalPortalContainer();
   if (!title) {
     return children;
   }
@@ -3269,7 +3277,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 +4951,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";
 
@@ -13284,6 +13285,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 +13310,7 @@ var ObjectGridItem2 = ({
   isSelected,
   children,
   menuTestId,
+  revealMenuOnHover,
   ...props
 }) => {
   const hasOnClick = props.onClick;
@@ -13331,14 +13347,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

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();
@@ -4919,7 +4919,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 +4941,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 +4954,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 +4977,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 +5024,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 +5043,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 +5151,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 +5170,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 +5206,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 +5299,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 +5307,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 +5339,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 +5347,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 +5355,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 +5385,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 +5408,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 +5425,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 +5471,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 +5482,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 +5503,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 +5517,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 +5528,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 +5560,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 +5572,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 +5582,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 +5592,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 +5602,7 @@ var fadeOutBottom = import_react25.keyframes`
     transform: translateY(10px);
   }
 `;
-var fadeIn = import_react25.keyframes`
+var fadeIn = import_react26.keyframes`
   0% {
     opacity: 0;
   }
@@ -5601,11 +5610,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 +5622,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 +5632,7 @@ to {
   transform: translateX(0);
 }
 `;
-var fadeInRtl = import_react25.keyframes`
+var fadeInRtl = import_react26.keyframes`
 from {
   opacity: 0;
   transform: translateX(10px);
@@ -5633,7 +5642,7 @@ to {
   transform: translateX(0);
 }
 `;
-var slideInTtb = import_react25.keyframes`
+var slideInTtb = import_react26.keyframes`
 from {
   transform: translateY(-100%);
 }
@@ -5641,7 +5650,7 @@ to {
   transform: translateY(0);
 }
 `;
-var slideInRtl = import_react25.keyframes`
+var slideInRtl = import_react26.keyframes`
 from {
   transform: translateX(100%);
 }
@@ -5649,7 +5658,7 @@ to {
   transform: translateX(0);
 }
 `;
-var spin2 = import_react25.keyframes`
+var spin2 = import_react26.keyframes`
 from {
   transform: rotateZ(0deg);
 }
@@ -5663,8 +5672,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 +5759,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 +5779,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 +5848,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 +5857,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 +5871,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 +5935,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 +5944,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 +6006,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 +6041,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 +6098,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 +6319,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 +6676,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 +6703,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 +6724,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 +6749,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"));
@@ -15251,6 +15252,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 +15277,7 @@ var ObjectGridItem2 = ({
   isSelected,
   children,
   menuTestId,
+  revealMenuOnHover,
   ...props
 }) => {
   const hasOnClick = props.onClick;
@@ -15298,14 +15314,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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniformdev/design-system",
-  "version": "20.72.3",
+  "version": "20.72.4-alpha.13+a24dcae01b",
   "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",
-    "@uniformdev/richtext": "^20.72.3",
+    "@uniformdev/canvas": "^20.72.4-alpha.13+a24dcae01b",
+    "@uniformdev/richtext": "^20.72.4-alpha.13+a24dcae01b",
     "autoprefixer": "10.5.0",
     "hygen": "6.2.11",
     "jsdom": "29.1.1",
@@ -82,5 +82,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "184e00fccf2a16deebbcf5865e2b39ca1380f745"
+  "gitHead": "a24dcae01b019225974c60290cfef988f1405ea8"
 }