@uniformdev/design-system 19.202.0 → 19.202.1-alpha.9

package/dist/esm/index.js

@@ -1540,11 +1540,12 @@ function Tooltip({
   children,
   title: title2,
   placement = "bottom",
+  gutter,
   visible,
   withoutPortal = false,
   ...props
 }) {
-  const tooltip = useTooltipState({ placement });
+  const tooltip = useTooltipState({ placement, gutter });
   return !title2 ? children : /* @__PURE__ */ jsxs5(Fragment2, { children: [
     /* @__PURE__ */ jsx12(TooltipReference, { ...tooltip, ...children.props, children: (referenceProps) => React3.cloneElement(children, referenceProps) }),
     /* @__PURE__ */ jsxs5(
@@ -11789,6 +11790,9 @@ var AnimationFile = ({
   );
 };
 
+// src/components/Avatar/Avatar.tsx
+import { CgProfile } from "@react-icons/all-files/cg/CgProfile";
+
 // src/components/Avatar/Avatar.styles.ts
 import { css as css18 } from "@emotion/react";
 var avatarStyles = css18`
@@ -11833,7 +11837,7 @@ var avatarSize2xlStyles = css18`
 `;
 
 // src/components/Avatar/Avatar.tsx
-import { jsx as jsx20, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs7 } from "@emotion/react/jsx-runtime";
 var avatarSizeStylesMap = {
   "2xs": avatarSize2xsStyles,
   xs: avatarSizeXsStyles,
@@ -11845,10 +11849,11 @@ var avatarSizeStylesMap = {
 };
 var Avatar = ({ src, label = "", children, size = "md", as = "div", ...props }) => {
   const Element = as;
-  return /* @__PURE__ */ jsx20(Tooltip, { title: label, children: /* @__PURE__ */ jsxs7(Element, { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
-    !src ? null : /* @__PURE__ */ jsx20("img", { role: "presentation", src, css: avatarImageStyles }),
+  const body = /* @__PURE__ */ jsx20(Fragment4, { children: /* @__PURE__ */ jsxs7(Element, { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
+    src ? /* @__PURE__ */ jsx20("img", { role: "presentation", src, css: avatarImageStyles }) : children ? null : /* @__PURE__ */ jsx20(CgProfile, { css: avatarImageStyles }),
     children
   ] }) });
+  return src || children ? /* @__PURE__ */ jsx20(Tooltip, { title: label, children: body }) : body;
 };
 
 // src/components/Avatar/AvatarGroup.styles.ts
@@ -11882,10 +11887,13 @@ var AvatarGroup = ({
   getTruncatedLabel = defaultGetTruncatedLabel,
   ...props
 }) => {
+  if (max < 2) {
+    throw new Error("max must be 2 or more");
+  }
   const numberOfChildren = children.length;
-  const clampedMax = Math.max(max, 1);
-  const numberOfTruncatedItems = numberOfChildren <= clampedMax ? 0 : numberOfChildren - clampedMax;
-  const numberOfItemsToRender = numberOfTruncatedItems ? clampedMax - 1 : void 0;
+  const numberOfTruncatedItems = numberOfChildren <= max ? 0 : numberOfChildren - max + 1;
+  const numberOfItemsToRender = numberOfTruncatedItems ? Math.min(numberOfChildren, max - 1) : void 0;
+  const childrenToRender = children.slice(0, numberOfItemsToRender);
   return /* @__PURE__ */ jsxs8(
     "div",
     {
@@ -11895,7 +11903,7 @@ var AvatarGroup = ({
       ],
       ...props,
       children: [
-        children,
+        childrenToRender,
         !numberOfTruncatedItems ? null : /* @__PURE__ */ jsxs8(Avatar, { label: getTruncatedLabel(numberOfTruncatedItems), style: { display: "flex" }, children: [
           "+",
           numberOfTruncatedItems
@@ -12495,7 +12503,7 @@ var menuTriggerStyles = css26`
   border: none;
   background: transparent;
   padding: var(--spacing-xs);
-  color: var(--gray-500);
+  color: var(--gray-600);
   transition: color var(--duration-fast) var(--timing-ease-out);
 
   &:focus,
@@ -13451,7 +13459,11 @@ var InputKeywordSearch = forwardRef8(
       }
     };
     const handleClear = () => {
-      onClear ? onClear() : onSearchTextChanged("");
+      if (onClear) {
+        onClear();
+      } else {
+        onSearchTextChanged("");
+      }
     };
     return /* @__PURE__ */ jsx43(
       Input,
@@ -13508,7 +13520,7 @@ var DebouncedInputKeywordSearch = forwardRef8(
 
 // src/components/Input/InputSelect.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { Fragment as Fragment4, jsx as jsx44, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx44, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 var InputSelect = forwardRef9(
   ({
     label,
@@ -13531,7 +13543,7 @@ var InputSelect = forwardRef9(
         css: [inputContainer, typeof classNameContainer === "object" ? classNameContainer : void 0],
         className: typeof classNameContainer === "string" ? classNameContainer : "",
         children: [
-          showLabel ? /* @__PURE__ */ jsx44(Fragment4, { children: /* @__PURE__ */ jsxs23(
+          showLabel ? /* @__PURE__ */ jsx44(Fragment5, { children: /* @__PURE__ */ jsxs23(
             Label,
             {
               htmlFor: props.id,
@@ -13810,10 +13822,10 @@ var SuccessMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Textarea.tsx
 import { forwardRef as forwardRef12 } from "react";
-import { Fragment as Fragment5, jsx as jsx49, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx49, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
 var Textarea = forwardRef12(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs27(Fragment5, { children: [
+    return /* @__PURE__ */ jsxs27(Fragment6, { children: [
       showLabel ? /* @__PURE__ */ jsx49("label", { htmlFor: id, css: [labelText], children: label }) : null,
       /* @__PURE__ */ jsxs27("div", { css: [inputContainer], children: [
         /* @__PURE__ */ jsx49(
@@ -14066,7 +14078,7 @@ var wholeButtonWithMenuIconOffset = css38`
 `;
 
 // src/components/ButtonWithMenu/ButtonWithMenu.tsx
-import { Fragment as Fragment6, jsx as jsx52, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx52, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 var buttonTheme = {
   primary: buttonPrimary2,
   secondary: buttonSecondary2,
@@ -14151,7 +14163,7 @@ var ButtonWithMenu = ({
         ],
         "data-testid": "multioptions-button",
         children: [
-          /* @__PURE__ */ jsx52(Tooltip, { visible: tip ? void 0 : false, title: /* @__PURE__ */ jsx52(Fragment6, { children: tip }), children: /* @__PURE__ */ jsx52("span", { children: primaryButton }) }),
+          /* @__PURE__ */ jsx52(Tooltip, { visible: tip ? void 0 : false, title: /* @__PURE__ */ jsx52(Fragment7, { children: tip }), children: /* @__PURE__ */ jsx52("span", { children: primaryButton }) }),
           disabledValue ? menuButton2 : /* @__PURE__ */ jsx52(
             Menu,
             {
@@ -14495,7 +14507,7 @@ var paragraph = css42`
 `;
 
 // src/components/Typography/Paragraph.tsx
-import { Fragment as Fragment7, jsx as jsx56 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx56 } from "@emotion/react/jsx-runtime";
 import { createElement } from "@emotion/react";
 var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
   if (htmlContent && Array.isArray(htmlContent)) {
@@ -14509,7 +14521,7 @@ var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
         dangerouslySetInnerHTML: { __html: html }
       }
     ));
-    return /* @__PURE__ */ jsx56(Fragment7, { children: paragraphContent });
+    return /* @__PURE__ */ jsx56(Fragment8, { children: paragraphContent });
   }
   return htmlContent ? /* @__PURE__ */ jsx56(
     "p",
@@ -14578,7 +14590,7 @@ var IntegrationHeaderSectionDocsLink = css43`
 `;
 
 // src/components/Typography/IntegrationHeaderSection.tsx
-import { Fragment as Fragment8, jsx as jsx57, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx57, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var IntegrationHeaderSectionHexImage = ({ ...props }) => {
   return /* @__PURE__ */ jsxs33("svg", { viewBox: "0 0 100 116", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
     /* @__PURE__ */ jsx57(
@@ -14618,7 +14630,7 @@ var IntegrationHeaderSection = ({
   ...props
 }) => {
   const CompIcon = icon && typeof icon !== "string" ? icon : null;
-  return /* @__PURE__ */ jsxs33(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs33(Fragment9, { children: [
     /* @__PURE__ */ jsxs33("div", { css: IntegrationHeaderSectionContainer, ...props, children: [
       /* @__PURE__ */ jsxs33("div", { css: IntegrationHeaderSectionTitleContainer, children: [
         icon ? /* @__PURE__ */ jsxs33("div", { css: IntegrationHeaderSectionIconContainer, children: [
@@ -15140,7 +15152,7 @@ var ChipDisabled = css48`
 `;
 
 // src/components/Chip/Chip.tsx
-import { Fragment as Fragment9, jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var chipTheme = {
   "accent-light": ChipThemeAccentLight,
   "accent-dark": ChipThemeAccentDark,
@@ -15179,7 +15191,7 @@ var Chip = ({
       ],
       ...props,
       children: [
-        icon ? /* @__PURE__ */ jsxs37(Fragment9, { children: [
+        icon ? /* @__PURE__ */ jsxs37(Fragment10, { children: [
           /* @__PURE__ */ jsx62("span", { role: "presentation", css: [ChipIcon], children: /* @__PURE__ */ jsx62(Icon, { icon, iconColor, size: "1rem" }) }),
           /* @__PURE__ */ jsx62("span", { role: "separator", css: ChipSeparator })
         ] }) : null,
@@ -15436,7 +15448,7 @@ var PopoverDefaulterTriggerBtn = css52`
 var Popover = (maxWidth = "220px") => css52`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
-  box-shadow: var(--shadow-base);
+  box-shadow: var(--elevation-400);
   background: var(--white);
   display: grid;
   gap: var(--spacing-sm);
@@ -16429,7 +16441,7 @@ var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) =>
 
 // src/components/Drawer/DrawerRenderer.tsx
 import { useEffect as useEffect7, useMemo as useMemo3 } from "react";
-import { Fragment as Fragment10, jsx as jsx74, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx74, jsxs as jsxs45 } from "@emotion/react/jsx-runtime";
 var drawerWidth = {
   narrow: "29rem",
   medium: "43rem",
@@ -16518,7 +16530,7 @@ var DrawerWrapper = ({
     offsetInPx = Math.round(maxLayeringInPx * relativeLevel);
   }
   const calculatedWidth = `calc(${width} - ${offsetInPx}px)`;
-  return /* @__PURE__ */ jsxs45(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs45(Fragment11, { children: [
     /* @__PURE__ */ jsx74("div", { css: drawerWrapperOverlayStyles, onClick: onOverlayClick }),
     /* @__PURE__ */ jsx74(
       "div",
@@ -17160,10 +17172,10 @@ var IntegrationLoadingFrame = css64`
 `;
 
 // src/components/Tiles/IntegrationLoadingTile.tsx
-import { Fragment as Fragment11, jsx as jsx84, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx84, jsxs as jsxs52 } from "@emotion/react/jsx-runtime";
 var IntegrationLoadingTile = ({ count = 1 }) => {
   const componentCount = Array.from(Array(count).keys());
-  return /* @__PURE__ */ jsx84(Fragment11, { children: componentCount.map((i) => /* @__PURE__ */ jsxs52("div", { css: IntegrationLoadingTileContainer, children: [
+  return /* @__PURE__ */ jsx84(Fragment12, { children: componentCount.map((i) => /* @__PURE__ */ jsxs52("div", { css: IntegrationLoadingTileContainer, children: [
     /* @__PURE__ */ jsx84("div", { css: [IntegrationLoadingTileImg, IntegrationLoadingFrame], role: "presentation" }),
     /* @__PURE__ */ jsx84("div", { css: [IntegrationLoadingTileText, IntegrationLoadingFrame] })
   ] }, i)) });
@@ -17405,7 +17417,7 @@ var IntegrationModalHeaderContentWrapper = css69`
 `;
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.tsx
-import { Fragment as Fragment12, jsx as jsx90, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx90, jsxs as jsxs55 } from "@emotion/react/jsx-runtime";
 var HexModalBackground = ({ ...props }) => {
   return /* @__PURE__ */ jsxs55(
     "svg",
@@ -17446,7 +17458,7 @@ var HexModalBackground = ({ ...props }) => {
   );
 };
 var IntegrationModalHeader = ({ icon, name, menu, children }) => {
-  return /* @__PURE__ */ jsxs55(Fragment12, { children: [
+  return /* @__PURE__ */ jsxs55(Fragment13, { children: [
     /* @__PURE__ */ jsx90(HexModalBackground, { css: IntegrationModalHeaderSVGBackground, role: "presentation" }),
     /* @__PURE__ */ jsx90("div", { css: IntegrationModalHeaderGroup, children: /* @__PURE__ */ jsxs55("div", { css: IntegrationModalHeaderTitleGroup, children: [
       icon ? /* @__PURE__ */ jsx90(IntegrationModalIcon, { icon, name: name || "" }) : null,
@@ -18354,7 +18366,7 @@ import {
   usePopoverStore
 } from "@ariakit/react";
 import { useEffect as useEffect14 } from "react";
-import { Fragment as Fragment13, jsx as jsx100, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx100, jsxs as jsxs64 } from "@emotion/react/jsx-runtime";
 var Popover3 = ({
   iconColor = "action",
   icon = "info",
@@ -18381,7 +18393,7 @@ var Popover3 = ({
         css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
         "data-testid": testId,
-        children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs64(Fragment13, { children: [
+        children: trigger2 ? trigger2 : /* @__PURE__ */ jsxs64(Fragment14, { children: [
           /* @__PURE__ */ jsx100(Icon, { icon, iconColor, size: iconSize }),
           /* @__PURE__ */ jsx100("span", { hidden: true, children: buttonText })
         ] })
@@ -18796,6 +18808,9 @@ var ModalDialog = forwardRef16(
 );
 ModalDialog.displayName = "ModalDialog";
 
+// src/components/Objects/ObjectGridContainer.tsx
+import { forwardRef as forwardRef17 } from "react";
+
 // src/components/Objects/styles/ObjectGridContainer.styles.ts
 import { css as css80 } from "@emotion/react";
 var ObjectGridContainer = (gridCount) => css80`
@@ -18806,9 +18821,20 @@ var ObjectGridContainer = (gridCount) => css80`
 
 // src/components/Objects/ObjectGridContainer.tsx
 import { jsx as jsx104 } from "@emotion/react/jsx-runtime";
-var ObjectGridContainer2 = ({ gridCount = 3, children }) => {
-  return /* @__PURE__ */ jsx104("div", { "data-testid": "object-grid-container", css: ObjectGridContainer(gridCount), children });
-};
+var ObjectGridContainer2 = forwardRef17(
+  ({ gridCount = 3, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx104(
+      "div",
+      {
+        ref,
+        "data-testid": "object-grid-container",
+        css: ObjectGridContainer(gridCount),
+        ...props,
+        children
+      }
+    );
+  }
+);
 
 // src/components/Objects/styles/ObjectGridItem.styles.ts
 import { css as css81 } from "@emotion/react";
@@ -18822,6 +18848,7 @@ var ObjectGridItem = css81`
 
   &[aria-selected='true'] {
     border: 1px solid var(--accent-dark);
+    transition: border-color var(--duration-fast) var(--timing-ease-out);
   }
 
   &[aria-selected='false'] {
@@ -18830,20 +18857,54 @@ var ObjectGridItem = css81`
     }
   }
 `;
+var ObjectGridWithOnClick = css81`
+  cursor: pointer;
+  &:hover,
+  &:focus {
+    border: 1px solid var(--accent-dark);
+    transition: border-color var(--duration-fast) var(--timing-ease-out);
+  }
+`;
 var ObjectGridItemMediaWrapper = css81`
   display: flex;
   flex: 1 1 0;
   position: relative;
 `;
+var ObjectGridItemMediaInner = css81`
+  background: var(--gray-50);
+  border-radius: var(--rounded-base) var(--rounded-base) 0 0;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  overflow: hidden;
+  height: 100%;
+`;
 var ObjectGridItemContentWrapper = css81`
-  padding: 0 var(--spacing-sm) var(--spacing-sm);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  padding: var(--spacing-sm);
+  gap: var(--spacing-sm);
   min-height: 52px;
+  width: 100%;
+`;
+var ObjectGridItemInnerWrapper = css81`
+  min-width: 0;
 `;
 var ObjectGridItemImage = css81`
   object-fit: cover;
   width: 100%;
   height: auto;
 `;
+var ObjectGridItemSubtitle = css81`
+  color: var(--gray-500);
+  font-size: var(--fs-sm);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 100%;
+`;
 
 // src/components/Objects/ObjectGridItem.tsx
 import { jsx as jsx105, jsxs as jsxs68 } from "@emotion/react/jsx-runtime";
@@ -18853,28 +18914,51 @@ var ObjectGridItem2 = ({
   rightSlot,
   menuItems,
   isSelected,
-  children
+  children,
+  menuTestId,
+  ...props
 }) => {
-  return /* @__PURE__ */ jsxs68("div", { css: ObjectGridItem, "aria-selected": isSelected, children: [
-    /* @__PURE__ */ jsx105("div", { css: ObjectGridItemMediaWrapper, children: cover }),
-    /* @__PURE__ */ jsxs68(HorizontalRhythm, { css: ObjectGridItemContentWrapper, justify: "space-between", gap: "sm", children: [
-      /* @__PURE__ */ jsxs68(VerticalRhythm, { gap: "0", children: [
-        /* @__PURE__ */ jsx105(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
-        children
-      ] }),
-      /* @__PURE__ */ jsxs68(HorizontalRhythm, { gap: "xs", align: "flex-start", children: [
-        rightSlot,
-        menuItems ? /* @__PURE__ */ jsx105(
-          Menu,
-          {
-            menuTrigger: /* @__PURE__ */ jsx105(MenuThreeDots, { "data-testid": "object-grid-item-menu-btn" }),
-            placement: "bottom-end",
-            children: menuItems
-          }
-        ) : null
-      ] })
-    ] })
-  ] });
+  const hasOnClick = props.onClick;
+  const onStopPropagation = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs68(
+    "div",
+    {
+      css: [ObjectGridItem, props.onClick ? ObjectGridWithOnClick : void 0],
+      "aria-selected": isSelected,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx105("div", { css: ObjectGridItemMediaWrapper, children: /* @__PURE__ */ jsx105("div", { css: ObjectGridItemMediaInner, children: cover }) }),
+        /* @__PURE__ */ jsxs68("div", { css: ObjectGridItemContentWrapper, children: [
+          /* @__PURE__ */ jsxs68(VerticalRhythm, { gap: "0", css: ObjectGridItemInnerWrapper, children: [
+            /* @__PURE__ */ jsx105(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
+            /* @__PURE__ */ jsx105("div", { css: ObjectGridItemSubtitle, children })
+          ] }),
+          /* @__PURE__ */ jsxs68(
+            HorizontalRhythm,
+            {
+              gap: "xs",
+              align: "flex-start",
+              css: { cursor: "default" },
+              onClick: hasOnClick ? onStopPropagation : void 0,
+              children: [
+                rightSlot,
+                menuItems ? /* @__PURE__ */ jsx105(
+                  Menu,
+                  {
+                    menuTrigger: /* @__PURE__ */ jsx105(MenuThreeDots, { "data-testid": menuTestId != null ? menuTestId : "object-grid-item-menu-btn" }),
+                    placement: "bottom-end",
+                    children: menuItems
+                  }
+                ) : null
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 
 // src/components/Objects/styles/ObjectGridItemCardCover.styles.ts
@@ -18883,8 +18967,15 @@ var CoverImage = css82`
   aspect-ratio: 16/9;
   max-width: 100%;
   max-height: 100%;
-  height: auto;
+  height: inherit;
+  width: inherit;
   padding: var(--spacing-sm);
+  object-fit: contain;
+`;
+var CoverContainer = css82`
+  aspect-ratio: 16/9;
+  width: 100%;
+  height: 100%;
 `;
 var CoverIconWrapper = css82`
   position: relative;
@@ -18892,7 +18983,7 @@ var CoverIconWrapper = css82`
   align-items: center;
   justify-content: center;
   flex: 1;
-  overflow: hidden;
+  height: 100%;
 `;
 var CoverIconGhost = css82`
   position: absolute;
@@ -18904,7 +18995,7 @@ var CoverIconGhost = css82`
 `;
 var CoverSlot = css82`
   align-items: center;
-  background: var(--white);
+  background: var(--gray-50);
   display: flex;
   justify-content: center;
   position: absolute;
@@ -18934,64 +19025,89 @@ var CoverButton = css82`
     outline: none;
   }
 `;
-var CoverSelectedChip = css82`
-  animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
-  opacity: 0;
+var CoverSlotBottom = css82`
   position: absolute;
   bottom: var(--spacing-base);
+`;
+var CoverSlotBottomLeft = css82`
+  left: var(--spacing-base);
+`;
+var CoverSlotBottomRight = css82`
   right: var(--spacing-base);
 `;
+var CoverSelectedChip = css82`
+  animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
+  opacity: 0;
+`;
 
 // src/components/Objects/ObjectGridItemCardCover.tsx
-import { Fragment as Fragment14, jsx as jsx106, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx106, jsxs as jsxs69 } from "@emotion/react/jsx-runtime";
 var ObjectGridItemCardCover = (props) => {
   if ("imageUrl" in props && props.imageUrl) {
-    const { imageUrl } = props;
-    return /* @__PURE__ */ jsx106(
+    const { imageUrl, srcSet } = props;
+    return /* @__PURE__ */ jsx106("div", { css: CoverContainer, children: /* @__PURE__ */ jsx106(
       "img",
       {
         src: imageUrl,
+        srcSet,
+        alt: props.alt,
         css: CoverImage,
         loading: "lazy",
         role: "presentation",
-        "data-testid": "object-grid-item-thumbnail"
+        "data-testid": "object-grid-item-thumbnail",
+        ...props
       }
-    );
+    ) });
   }
   if ("icon" in props && props.icon) {
-    const { icon } = props;
-    return /* @__PURE__ */ jsxs69("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
-      /* @__PURE__ */ jsx106(Icon, { icon, iconColor: "currentColor", css: CoverIconGhost }),
-      /* @__PURE__ */ jsx106(Icon, { icon, iconColor: "currentColor", size: 48 })
-    ] });
+    const { icon, iconColor } = props;
+    return /* @__PURE__ */ jsx106("div", { css: CoverContainer, children: /* @__PURE__ */ jsxs69("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", ...props, children: [
+      /* @__PURE__ */ jsx106(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", css: CoverIconGhost }),
+      /* @__PURE__ */ jsx106(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", size: 48 })
+    ] }) });
   }
 };
 var ObjectGridItemCover = ({
   coverSlotLeft,
   coverSlotRight,
+  coverSlotBottomLeft,
+  coverSlotBottomRight,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs69(Fragment14, { children: [
+  return /* @__PURE__ */ jsxs69(Fragment15, { children: [
     coverSlotLeft ? /* @__PURE__ */ jsx106("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
     /* @__PURE__ */ jsx106(ObjectGridItemCardCover, { ...props }),
-    coverSlotRight ? /* @__PURE__ */ jsx106("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null
+    coverSlotRight ? /* @__PURE__ */ jsx106("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
+    coverSlotBottomLeft ? /* @__PURE__ */ jsx106("div", { css: [CoverSlotBottom, CoverSlotBottomLeft], children: coverSlotBottomLeft }) : null,
+    coverSlotBottomRight ? /* @__PURE__ */ jsx106("div", { css: [CoverSlotBottom, CoverSlotBottomRight], children: coverSlotBottomRight }) : null
   ] });
 };
 var ObjectGridItemCoverButton = ({
   id,
   isSelected,
   onSelection,
-  coverSlotLeft,
-  coverSlotRight,
   selectedText = "selected",
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs69("button", { type: "button", css: CoverButton, onClick: () => onSelection(id), "aria-selected": isSelected, children: [
-    coverSlotLeft ? /* @__PURE__ */ jsx106("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
-    /* @__PURE__ */ jsx106(ObjectGridItemCardCover, { ...props }),
-    coverSlotRight ? /* @__PURE__ */ jsx106("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
-    isSelected ? /* @__PURE__ */ jsx106("div", { css: CoverSelectedChip, children: /* @__PURE__ */ jsx106(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
-  ] });
+  return /* @__PURE__ */ jsx106(
+    "button",
+    {
+      type: "button",
+      css: CoverButton,
+      onClick: (e) => {
+        e.stopPropagation();
+        onSelection(id);
+      },
+      "aria-selected": isSelected,
+      children: /* @__PURE__ */ jsx106(
+        ObjectGridItemCover,
+        {
+          ...props,
+          coverSlotBottomRight: isSelected ? /* @__PURE__ */ jsx106("div", { css: CoverSelectedChip, children: /* @__PURE__ */ jsx106(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
+        }
+      )
+    }
+  );
 };
 
 // src/components/Objects/ObjectGridItemHeading.tsx
@@ -19000,12 +19116,13 @@ import { useEffect as useEffect16, useRef as useRef10, useState as useState13 }
 // src/components/Objects/styles/ObjectGridItemHeading.styles.ts
 import { css as css83 } from "@emotion/react";
 var ObjectGridItemHeading = css83`
+  color: var(--gray-500);
   overflow: hidden;
   text-overflow: ellipsis;
-  white-space: initial;
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
+  white-space: nowrap;
+  min-width: 0;
+  max-width: 100%;
+  font-size: var(--fs-sm);
 `;
 var PopoverContent = css83`
   min-width: 50px;
@@ -19016,10 +19133,15 @@ import { jsx as jsx107, jsxs as jsxs70 } from "@emotion/react/jsx-runtime";
 var ObjectGridItemHeading2 = ({
   heading,
   beforeHeadingSlot,
-  afterHeadingSlot
+  afterHeadingSlot,
+  tooltip,
+  ...props
 }) => {
   const [hasTruncation, setHasTruncation] = useState13(false);
   const headingRef = useRef10(null);
+  const onStopPropagation = (e) => {
+    e.stopPropagation();
+  };
   useEffect16(() => {
     const currentHeading = headingRef.current;
     const observer = new ResizeObserver((entries) => {
@@ -19037,10 +19159,10 @@ var ObjectGridItemHeading2 = ({
       }
     };
   }, []);
-  return /* @__PURE__ */ jsxs70(HorizontalRhythm, { align: "center", gap: "xs", children: [
-    beforeHeadingSlot,
-    /* @__PURE__ */ jsx107(Tooltip, { title: hasTruncation ? heading : "", children: /* @__PURE__ */ jsx107("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, children: heading }) }),
-    afterHeadingSlot
+  return /* @__PURE__ */ jsxs70(HorizontalRhythm, { align: "center", gap: "xs", css: { minWidth: 0 }, children: [
+    beforeHeadingSlot ? /* @__PURE__ */ jsx107(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: beforeHeadingSlot }) : null,
+    /* @__PURE__ */ jsx107(Tooltip, { title: hasTruncation && tooltip ? tooltip : "", children: /* @__PURE__ */ jsx107("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, ...props, children: heading }) }),
+    afterHeadingSlot ? /* @__PURE__ */ jsx107(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: afterHeadingSlot }) : null
   ] });
 };
 
@@ -19050,9 +19172,10 @@ var ObjectGridItemIconWithTooltip = ({
   tooltipTitle,
   placement = "bottom-start",
   icon,
-  iconColor = "accent-dark"
+  iconColor = "accent-dark",
+  ...props
 }) => {
-  return /* @__PURE__ */ jsx108(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ jsx108("span", { children: /* @__PURE__ */ jsx108(Icon, { icon, iconColor, size: "1rem" }) }) });
+  return /* @__PURE__ */ jsx108(Tooltip, { title: tooltipTitle, placement, ...props, css: { minWidth: "max-content" }, children: /* @__PURE__ */ jsx108("span", { css: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ jsx108(Icon, { icon, iconColor, size: "1rem" }) }) });
 };
 
 // src/components/Objects/styles/ObjectGridItemLoadingSkeleton.styles.ts
@@ -19845,7 +19968,7 @@ var ParameterDrawerHeader = ({ title: title2, iconBeforeTitle, children }) => {
 };
 
 // src/components/ParameterInputs/ParameterGroup.tsx
-import { forwardRef as forwardRef17 } from "react";
+import { forwardRef as forwardRef18 } from "react";
 
 // src/components/ParameterInputs/styles/ParameterGroup.styles.ts
 import { css as css91 } from "@emotion/react";
@@ -19869,7 +19992,7 @@ var fieldsetLegend2 = css91`
 
 // src/components/ParameterInputs/ParameterGroup.tsx
 import { jsx as jsx119, jsxs as jsxs78 } from "@emotion/react/jsx-runtime";
-var ParameterGroup = forwardRef17(
+var ParameterGroup = forwardRef18(
   ({ legend, isDisabled, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs78("fieldset", { css: fieldsetStyles, disabled: isDisabled, ref, ...props, children: [
       /* @__PURE__ */ jsx119("legend", { css: fieldsetLegend2, children: legend }),
@@ -19879,7 +20002,7 @@ var ParameterGroup = forwardRef17(
 );
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { forwardRef as forwardRef19, useDeferredValue } from "react";
+import { forwardRef as forwardRef20, useDeferredValue } from "react";
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
 import { useState as useState14 } from "react";
@@ -19923,7 +20046,7 @@ var previewModalImage = css92`
 `;
 
 // src/components/ParameterInputs/ParameterImagePreview.tsx
-import { Fragment as Fragment15, jsx as jsx120, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx120, jsxs as jsxs79 } from "@emotion/react/jsx-runtime";
 function ParameterImagePreview({ imageSrc }) {
   const [showModal, setShowModal] = useState14(false);
   return imageSrc ? /* @__PURE__ */ jsxs79("div", { css: previewWrapper, children: [
@@ -19941,7 +20064,7 @@ function ParameterImagePreview({ imageSrc }) {
   ] }) : null;
 }
 var PreviewImageModal = ({ open, onRequestClose, imageSrc }) => {
-  return open ? /* @__PURE__ */ jsx120(Fragment15, { children: createPortal2(
+  return open ? /* @__PURE__ */ jsx120(Fragment16, { children: createPortal2(
     /* @__PURE__ */ jsx120(
       Modal,
       {
@@ -19966,9 +20089,9 @@ var ParameterLabel = ({ id, asSpan, children, testId, ...props }) => {
 };
 
 // src/components/ParameterInputs/ParameterMenuButton.tsx
-import { forwardRef as forwardRef18 } from "react";
+import { forwardRef as forwardRef19 } from "react";
 import { jsx as jsx122 } from "@emotion/react/jsx-runtime";
-var ParameterMenuButton = forwardRef18(
+var ParameterMenuButton = forwardRef19(
   ({ label, children }, ref) => {
     return /* @__PURE__ */ jsx122(
       Menu,
@@ -20143,8 +20266,8 @@ var ParameterShellPlaceholder = ({ children }) => {
 var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx123(Tooltip, { title: "The default value has been overridden", children: /* @__PURE__ */ jsx123("button", { type: "button", css: overrideMarker, ...props, children: /* @__PURE__ */ jsx123("span", { hidden: true, children: "reset overridden value to default" }) }) });
 
 // src/components/ParameterInputs/ParameterImage.tsx
-import { Fragment as Fragment16, jsx as jsx124, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
-var ParameterImage = forwardRef19(
+import { Fragment as Fragment17, jsx as jsx124, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
+var ParameterImage = forwardRef20(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsxs81(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
@@ -20153,11 +20276,11 @@ var ParameterImage = forwardRef19(
     ] });
   }
 );
-var ParameterImageInner = forwardRef19((props, ref) => {
+var ParameterImageInner = forwardRef20((props, ref) => {
   const { value } = props;
   const { id, label, hiddenLabel, errorMessage } = useParameterShell();
   const deferredValue = useDeferredValue(value);
-  return /* @__PURE__ */ jsxs81(Fragment16, { children: [
+  return /* @__PURE__ */ jsxs81(Fragment17, { children: [
     /* @__PURE__ */ jsx124(
       "input",
       {
@@ -20175,13 +20298,13 @@ var ParameterImageInner = forwardRef19((props, ref) => {
 });
 
 // src/components/ParameterInputs/ParameterInput.tsx
-import { forwardRef as forwardRef20 } from "react";
+import { forwardRef as forwardRef21 } from "react";
 import { jsx as jsx125 } from "@emotion/react/jsx-runtime";
-var ParameterInput = forwardRef20((props, ref) => {
+var ParameterInput = forwardRef21((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx125(ParameterShell, { "data-testid": "parameter-input", ...shellProps, children: /* @__PURE__ */ jsx125(ParameterInputInner, { ref, ...innerProps }) });
 });
-var ParameterInputInner = forwardRef20(
+var ParameterInputInner = forwardRef21(
   ({ ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ jsx125(
@@ -20200,9 +20323,9 @@ var ParameterInputInner = forwardRef20(
 );
 
 // src/components/ParameterInputs/ParameterLink.tsx
-import { forwardRef as forwardRef21 } from "react";
+import { forwardRef as forwardRef22 } from "react";
 import { jsx as jsx126, jsxs as jsxs82 } from "@emotion/react/jsx-runtime";
-var ParameterLink = forwardRef21(
+var ParameterLink = forwardRef22(
   ({ disabled: disabled2, onConnectLink, externalLink, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsx126(
@@ -20225,7 +20348,7 @@ var ParameterLink = forwardRef21(
     );
   }
 );
-var ParameterLinkInner = forwardRef21(
+var ParameterLinkInner = forwardRef22(
   ({ externalLink, onConnectLink, disabled: disabled2, buttonText = "Select link", ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     if (!props.value)
@@ -20252,6 +20375,7 @@ var ParameterLinkInner = forwardRef21(
             disabled: disabled2,
             onClick: onConnectLink,
             title: "edit current selection",
+            "data-testid": "edit-current-selection",
             children: "edit"
           }
         ),
@@ -20330,7 +20454,7 @@ var ParameterMultiSelectInner = (props) => {
 };
 
 // src/components/ParameterInputs/ParameterNameAndPublicIdInput.tsx
-import { Fragment as Fragment17, jsx as jsx128, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx128, jsxs as jsxs83 } from "@emotion/react/jsx-runtime";
 var ParameterNameAndPublicIdInput = ({
   id,
   onBlur,
@@ -20356,7 +20480,7 @@ var ParameterNameAndPublicIdInput = ({
     navigator.clipboard.writeText(values[publicIdFieldName]);
   };
   autoFocus == null ? void 0 : autoFocus();
-  return /* @__PURE__ */ jsxs83(Fragment17, { children: [
+  return /* @__PURE__ */ jsxs83(Fragment18, { children: [
     /* @__PURE__ */ jsx128(
       ParameterInput,
       {
@@ -20931,7 +21055,7 @@ var getSelectedNode = (selection) => {
 };
 
 // src/components/ParameterInputs/rich-text/LinkNodePlugin.tsx
-import { Fragment as Fragment18, jsx as jsx129, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment19, jsx as jsx129, jsxs as jsxs84 } from "@emotion/react/jsx-runtime";
 var isProjectMapLinkValue = (value) => {
   return (value == null ? void 0 : value.type) === "projectMapNode" && Boolean(
     value.nodeId && value.path && value.projectMapId
@@ -21417,7 +21541,7 @@ function LinkNodePlugin({
       });
     });
   };
-  return /* @__PURE__ */ jsxs84(Fragment18, { children: [
+  return /* @__PURE__ */ jsxs84(Fragment19, { children: [
     /* @__PURE__ */ jsx129(
       NodeEventPlugin,
       {
@@ -21616,7 +21740,7 @@ import {
   TableCellNode
 } from "@lexical/table";
 import { $getRoot as $getRoot2, $getSelection as $getSelection3, $isRangeSelection as $isRangeSelection3 } from "lexical";
-import { forwardRef as forwardRef22, useCallback as useCallback11, useEffect as useEffect21, useLayoutEffect, useState as useState17 } from "react";
+import { forwardRef as forwardRef23, useCallback as useCallback11, useEffect as useEffect21, useLayoutEffect, useState as useState17 } from "react";
 import { jsx as jsx130, jsxs as jsxs85 } from "@emotion/react/jsx-runtime";
 function computeSelectionCount(selection) {
   const selectionShape = selection.getShape();
@@ -21629,7 +21753,7 @@ var tableActionMenuTrigger = css97`
   position: absolute;
   transform: translate(calc(-100% - 1px), 1px);
 `;
-var TableActionMenuTrigger = forwardRef22((props, ref) => {
+var TableActionMenuTrigger = forwardRef23((props, ref) => {
   const { tableCellEl, positioningAnchorEl, ...rest } = props;
   const [coordinates, setCoordinates] = useState17({ x: 0, y: 0 });
   useLayoutEffect(() => {
@@ -21963,7 +22087,7 @@ import { calculateZoomLevel } from "@lexical/utils";
 import { $getNearestNodeFromDOMNode } from "lexical";
 import { useCallback as useCallback12, useEffect as useEffect22, useMemo as useMemo6, useRef as useRef13, useState as useState18 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment19, jsx as jsx131, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment20, jsx as jsx131, jsxs as jsxs86 } from "@emotion/react/jsx-runtime";
 var MIN_ROW_HEIGHT = 33;
 var MIN_COLUMN_WIDTH = 50;
 var tableResizer = css98`
@@ -22264,7 +22388,7 @@ function TableCellResizer({ editor, positioningAnchorEl }) {
     };
   }, [activeCell, draggingDirection, mouseCurrentPos, positioningAnchorEl]);
   const resizerStyles = getResizers();
-  return /* @__PURE__ */ jsx131("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs86(Fragment19, { children: [
+  return /* @__PURE__ */ jsx131("div", { ref: resizerRef, children: activeCell != null && !isMouseDown && /* @__PURE__ */ jsxs86(Fragment20, { children: [
     /* @__PURE__ */ jsx131(
       "div",
       {
@@ -22524,7 +22648,7 @@ var useRichTextToolbarState = ({ config }) => {
 };
 
 // src/components/ParameterInputs/rich-text/toolbar/RichTextToolbar.tsx
-import { Fragment as Fragment20, jsx as jsx132, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment21, jsx as jsx132, jsxs as jsxs87 } from "@emotion/react/jsx-runtime";
 var toolbar = css99`
   ${scrollbarStyles}
   background: var(--gray-50);
@@ -22767,18 +22891,26 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
         "button",
         {
           onClick: () => {
-            isLink ? editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {}) : editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
+            if (isLink) {
+              editor.dispatchCommand(REMOVE_LINK_NODE_COMMAND, {});
+            } else {
+              editor.dispatchCommand(OPEN_LINK_NODE_MODAL_COMMAND, {});
+            }
           },
           css: [richTextToolbarButton, isLink ? richTextToolbarButtonActive : null],
           children: /* @__PURE__ */ jsx132(RichTextToolbarIcon, { icon: "link" })
         }
       ) }) : null,
-      visibleLists.size > 0 ? /* @__PURE__ */ jsxs87(Fragment20, { children: [
+      visibleLists.size > 0 ? /* @__PURE__ */ jsxs87(Fragment21, { children: [
         visibleLists.has("unorderedList") ? /* @__PURE__ */ jsx132(Tooltip, { title: "Bullet List", placement: "top", children: /* @__PURE__ */ jsx132(
           "button",
           {
             onClick: () => {
-              activeElement === "unorderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
+              if (activeElement === "unorderedList") {
+                editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+              } else {
+                editor.dispatchCommand(INSERT_UNORDERED_LIST_COMMAND, void 0);
+              }
             },
             css: [
               richTextToolbarButton,
@@ -22791,7 +22923,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           "button",
           {
             onClick: () => {
-              activeElement === "orderedList" ? editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
+              if (activeElement === "orderedList") {
+                editor.dispatchCommand(REMOVE_LIST_COMMAND, void 0);
+              } else {
+                editor.dispatchCommand(INSERT_ORDERED_LIST_COMMAND, void 0);
+              }
             },
             css: [
               richTextToolbarButton,
@@ -22860,7 +22996,7 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
 var RichTextToolbar_default = RichTextToolbar;
 
 // src/components/ParameterInputs/ParameterRichText.tsx
-import { Fragment as Fragment21, jsx as jsx133, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment22, jsx as jsx133, jsxs as jsxs88 } from "@emotion/react/jsx-runtime";
 var ParameterRichText = ({
   label,
   labelLeadingIcon,
@@ -22925,7 +23061,7 @@ var ParameterRichText = ({
             children
           }
         ),
-        menuItems ? /* @__PURE__ */ jsx133(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx133(Fragment21, { children: menuItems }) }) : null
+        menuItems ? /* @__PURE__ */ jsx133(ParameterMenuButton, { label: `${label} menu`, children: /* @__PURE__ */ jsx133(Fragment22, { children: menuItems }) }) : null
       ]
     }
   );
@@ -23086,7 +23222,7 @@ var ParameterRichTextInner = ({
     },
     editable: !readOnly
   };
-  return /* @__PURE__ */ jsxs88(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs88(Fragment22, { children: [
     /* @__PURE__ */ jsx133("div", { css: [editorWrapper], className: editorWrapperClassName, children: /* @__PURE__ */ jsx133(LexicalComposer, { initialConfig: lexicalConfig, children: /* @__PURE__ */ jsx133(
       RichText,
       {
@@ -23165,7 +23301,7 @@ var RichText = ({
       setPortalContainerRef(_portalContainerRef);
     }
   };
-  return /* @__PURE__ */ jsxs88(Fragment21, { children: [
+  return /* @__PURE__ */ jsxs88(Fragment22, { children: [
     readOnly || minimalInteractivity ? null : /* @__PURE__ */ jsx133(
       RichTextToolbar_default,
       {
@@ -23209,7 +23345,7 @@ var RichText = ({
           ]
         }
       ),
-      /* @__PURE__ */ jsx133(Fragment21, { children }),
+      /* @__PURE__ */ jsx133(Fragment22, { children }),
       editorContainerRef ? /* @__PURE__ */ jsx133(
         LinkNodePlugin,
         {
@@ -23228,15 +23364,15 @@ var RichText = ({
 };
 
 // src/components/ParameterInputs/ParameterSelect.tsx
-import { forwardRef as forwardRef23 } from "react";
+import { forwardRef as forwardRef24 } from "react";
 import { jsx as jsx134, jsxs as jsxs89 } from "@emotion/react/jsx-runtime";
-var ParameterSelect = forwardRef23(
+var ParameterSelect = forwardRef24(
   ({ defaultOption, options, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsx134(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx134(ParameterSelectInner, { options, defaultOption, ...innerProps, ref }) });
   }
 );
-var ParameterSelectInner = forwardRef23(
+var ParameterSelectInner = forwardRef24(
   ({ defaultOption, options, ...props }, ref) => {
     const { id, label, hiddenLabel } = useParameterShell();
     return /* @__PURE__ */ jsxs89(
@@ -23260,13 +23396,13 @@ var ParameterSelectInner = forwardRef23(
 );
 
 // src/components/ParameterInputs/ParameterTextarea.tsx
-import { forwardRef as forwardRef24 } from "react";
+import { forwardRef as forwardRef25 } from "react";
 import { jsx as jsx135 } from "@emotion/react/jsx-runtime";
-var ParameterTextarea = forwardRef24((props, ref) => {
+var ParameterTextarea = forwardRef25((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx135(ParameterShell, { "data-testid": "parameter-textarea", ...shellProps, children: /* @__PURE__ */ jsx135(ParameterTextareaInner, { ref, ...innerProps }) });
 });
-var ParameterTextareaInner = forwardRef24(({ ...props }, ref) => {
+var ParameterTextareaInner = forwardRef25(({ ...props }, ref) => {
   const { id, label, hiddenLabel } = useParameterShell();
   return /* @__PURE__ */ jsx135(
     "textarea",
@@ -23281,13 +23417,13 @@ var ParameterTextareaInner = forwardRef24(({ ...props }, ref) => {
 });
 
 // src/components/ParameterInputs/ParameterToggle.tsx
-import { forwardRef as forwardRef25 } from "react";
+import { forwardRef as forwardRef26 } from "react";
 import { jsx as jsx136, jsxs as jsxs90 } from "@emotion/react/jsx-runtime";
-var ParameterToggle = forwardRef25((props, ref) => {
+var ParameterToggle = forwardRef26((props, ref) => {
   const { shellProps, innerProps } = extractParameterProps(props);
   return /* @__PURE__ */ jsx136(ParameterShell, { ...shellProps, children: /* @__PURE__ */ jsx136(ParameterToggleInner, { ref, ...innerProps }) });
 });
-var ParameterToggleInner = forwardRef25(
+var ParameterToggleInner = forwardRef26(
   ({ children, ...props }, ref) => {
     const { id, label } = useParameterShell();
     return /* @__PURE__ */ jsxs90("label", { css: inputToggleLabel2, children: [
@@ -23843,7 +23979,7 @@ var Skeleton = ({
 );
 
 // src/components/Switch/Switch.tsx
-import { forwardRef as forwardRef26 } from "react";
+import { forwardRef as forwardRef27 } from "react";
 
 // src/components/Switch/Switch.styles.ts
 import { css as css107 } from "@emotion/react";
@@ -23866,7 +24002,7 @@ var SwitchInput = (size) => css107`
   display: block;
   width: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
   height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
-  margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
+  margin-top: ${size === "sm" ? "var(--spacing-2xs)" : "none"};
   transition:
     transform var(--duration-fast) var(--timing-ease-out),
     background-color var(--duration-fast) var(--timing-ease-out),
@@ -23920,7 +24056,7 @@ var SwitchInputLabel = (size) => css107`
     overflow: hidden;
     width: ${size === "sm" ? "var(--spacing-lg)" : "var(--spacing-xl)"};
     height: ${size === "sm" ? "var(--spacing-base)" : "var(--spacing-md)"};
-    margin-top: ${size === "sm" ? "var(--spacing-xs)" : "none"};
+    margin-top: ${size === "sm" ? "var(--spacing-2xs)" : "none"};
     position: absolute;
     left: 0;
     top: 0;
@@ -23933,14 +24069,14 @@ var SwitchText = (size) => css107`
 `;
 
 // src/components/Switch/Switch.tsx
-import { Fragment as Fragment22, jsx as jsx141, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
-var Switch = forwardRef26(
+import { Fragment as Fragment23, jsx as jsx141, jsxs as jsxs93 } from "@emotion/react/jsx-runtime";
+var Switch = forwardRef27(
   ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
       additionalText = inputProps.checked ? toggleText : infoText;
     }
-    return /* @__PURE__ */ jsxs93(Fragment22, { children: [
+    return /* @__PURE__ */ jsxs93(Fragment23, { children: [
       /* @__PURE__ */ jsxs93(
         "label",
         {
@@ -24136,7 +24272,6 @@ var StatusBulletContainer = css110`
   gap: var(--spacing-xs);
   line-height: 1;
   position: relative;
-  text-transform: lowercase;
 
   &:before {
     border-radius: var(--rounded-full);
@@ -24211,6 +24346,7 @@ var StatusBullet = ({
   hideText = false,
   size = "base",
   message,
+  compact = false,
   ...props
 }) => {
   const currentStateStyles = {
@@ -24225,7 +24361,7 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ jsx144(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx144(
+  const StatusComponent = () => /* @__PURE__ */ jsx144(
     "span",
     {
       role: "status",
@@ -24233,7 +24369,11 @@ var StatusBullet = ({
       ...props,
       children: hideText ? null : message ? message : status
     }
-  ) });
+  );
+  if (compact) {
+    return /* @__PURE__ */ jsx144(StatusComponent, {});
+  }
+  return /* @__PURE__ */ jsx144(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ jsx144("div", { children: /* @__PURE__ */ jsx144(StatusComponent, {}) }) });
 };
 export {
   AddButton,