@uniformdev/design-system 19.205.0 → 19.206.0

package/dist/esm/index.js

@@ -12495,7 +12495,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,
@@ -18800,6 +18800,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`
@@ -18810,9 +18813,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";
@@ -18826,6 +18840,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'] {
@@ -18834,20 +18849,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";
@@ -18857,28 +18906,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
@@ -18889,6 +18961,12 @@ var CoverImage = css82`
   max-height: 100%;
   height: auto;
   padding: var(--spacing-sm);
+  object-fit: cover;
+`;
+var CoverContainer = css82`
+  aspect-ratio: 16/9;
+  width: 100%;
+  height: 100%;
 `;
 var CoverIconWrapper = css82`
   position: relative;
@@ -18896,7 +18974,7 @@ var CoverIconWrapper = css82`
   align-items: center;
   justify-content: center;
   flex: 1;
-  overflow: hidden;
+  height: 100%;
 `;
 var CoverIconGhost = css82`
   position: absolute;
@@ -18908,7 +18986,7 @@ var CoverIconGhost = css82`
 `;
 var CoverSlot = css82`
   align-items: center;
-  background: var(--white);
+  background: var(--gray-50);
   display: flex;
   justify-content: center;
   position: absolute;
@@ -18938,64 +19016,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";
 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: [
     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
@@ -19004,12 +19107,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;
@@ -19020,10 +19124,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) => {
@@ -19041,10 +19150,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
   ] });
 };
 
@@ -19054,9 +19163,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
@@ -19849,7 +19959,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";
@@ -19873,7 +19983,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 }),
@@ -19883,7 +19993,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";
@@ -19970,9 +20080,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,
@@ -20148,7 +20258,7 @@ var ParameterOverrideMarker = (props) => /* @__PURE__ */ jsx123(Tooltip, { title
 
 // src/components/ParameterInputs/ParameterImage.tsx
 import { Fragment as Fragment16, jsx as jsx124, jsxs as jsxs81 } from "@emotion/react/jsx-runtime";
-var ParameterImage = forwardRef19(
+var ParameterImage = forwardRef20(
   ({ children, ...props }, ref) => {
     const { shellProps, innerProps } = extractParameterProps(props);
     return /* @__PURE__ */ jsxs81(ParameterShell, { "data-test-id": "parameter-image", ...shellProps, children: [
@@ -20157,7 +20267,7 @@ 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);
@@ -20179,13 +20289,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(
@@ -20204,9 +20314,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(
@@ -20229,7 +20339,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)
@@ -21620,7 +21730,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();
@@ -21633,7 +21743,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(() => {
@@ -23244,15 +23354,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(
@@ -23276,13 +23386,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",
@@ -23297,13 +23407,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: [
@@ -23859,7 +23969,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";
@@ -23950,7 +24060,7 @@ 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(
+var Switch = forwardRef27(
   ({ label, infoText, toggleText, children, switchSize = "base", ...inputProps }, ref) => {
     let additionalText = infoText;
     if (infoText && toggleText) {
@@ -24152,7 +24262,6 @@ var StatusBulletContainer = css110`
   gap: var(--spacing-xs);
   line-height: 1;
   position: relative;
-  text-transform: lowercase;
 
   &:before {
     border-radius: var(--rounded-full);
@@ -24227,6 +24336,7 @@ var StatusBullet = ({
   hideText = false,
   size = "base",
   message,
+  compact = false,
   ...props
 }) => {
   const currentStateStyles = {
@@ -24241,7 +24351,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",
@@ -24249,7 +24359,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,