@uniformdev/design-system 19.198.3-alpha.5 → 19.199.1-alpha.10

package/dist/index.js

@@ -3672,7 +3672,6 @@ var scrollbarStyles = import_react20.css`
 
 // src/components/AddButton/AddButton.tsx
 init_emotion_jsx_shim();
-var import_react22 = require("@emotion/react");
 
 // src/components/AddButton/AddButton.styles.ts
 init_emotion_jsx_shim();
@@ -3741,7 +3740,7 @@ var AddButton = ({
     handler: onClick,
     activeWhenEditing: true
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     "button",
     {
       type: "button",
@@ -3750,19 +3749,7 @@ var AddButton = ({
       onClick,
       css: addButton,
       ...props,
-      children: [
-        shortcut ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-          ShortcutRevealer,
-          {
-            shortcut,
-            css: import_react22.css`
-            top: -2rem;
-            left: -1.5rem;
-          `
-          }
-        ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z", fill: "currentColor" }) })
-      ]
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M14 8H8V14H6V8H0V6H6V0H8V6H14V8Z", fill: "currentColor" }) })
     }
   );
 };
@@ -3780,73 +3767,73 @@ var import_MdSettings = require("@react-icons/all-files/md/MdSettings");
 
 // src/components/Icons/Icon.tsx
 init_emotion_jsx_shim();
-var import_react25 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 
 // src/components/Icons/Icon.styles.ts
 init_emotion_jsx_shim();
-var import_react23 = require("@emotion/react");
-var IconImg = import_react23.css`
+var import_react22 = require("@emotion/react");
+var IconImg = import_react22.css`
   & svg {
     display: block;
     vertical-align: middle;
   }
 `;
-var IconWhite = import_react23.css`
+var IconWhite = import_react22.css`
   color: var(--white);
 `;
-var IconColorDefault = import_react23.css`
+var IconColorDefault = import_react22.css`
   color: var(--brand-secondary-3);
 `;
-var IconColorRed = import_react23.css`
+var IconColorRed = import_react22.css`
   color: var(--brand-secondary-5);
 `;
-var IconColorGray = import_react23.css`
+var IconColorGray = import_react22.css`
   color: var(--gray-500);
 `;
-var IconColorGray300 = import_react23.css`
+var IconColorGray300 = import_react22.css`
   color: var(--gray-300);
 `;
-var IconColorCurrent = import_react23.css`
+var IconColorCurrent = import_react22.css`
   color: currentColor;
 `;
-var IconColorAction = import_react23.css`
+var IconColorAction = import_react22.css`
   color: var(--primary-action-default);
 `;
-var IconColorAccent = import_react23.css`
+var IconColorAccent = import_react22.css`
   color: var(--accent-alt-dark);
 `;
-var IconColorAccentDark = import_react23.css`
+var IconColorAccentDark = import_react22.css`
   color: var(--accent-dark);
 `;
-var IconColorAccentLight = import_react23.css`
+var IconColorAccentLight = import_react22.css`
   color: var(--accent-light);
 `;
-var IconColorAccentAltDark = import_react23.css`
+var IconColorAccentAltDark = import_react22.css`
   color: var(--accent-alt-dark);
 `;
 
 // src/components/Icons/IconsProvider.tsx
 init_emotion_jsx_shim();
-var import_react24 = require("react");
+var import_react23 = require("react");
 var import_jsx_runtime14 = require("@emotion/react/jsx-runtime");
-var IconContext = (0, import_react24.createContext)({
+var IconContext = (0, import_react23.createContext)({
   /** object mapping of available icons */
   iconsMap: {},
   /** sets the loading state of the icon */
   isLoading: true
 });
 function useIconContext() {
-  return (0, import_react24.useContext)(IconContext);
+  return (0, import_react23.useContext)(IconContext);
 }
 function IconsProvider({ children }) {
-  const [isLoading, setIsLoading] = (0, import_react24.useState)(true);
-  const [iconsMap, setIconsMap] = (0, import_react24.useState)({});
+  const [isLoading, setIsLoading] = (0, import_react23.useState)(true);
+  const [iconsMap, setIconsMap] = (0, import_react23.useState)({});
   const initializeIconsMap = async () => {
     const { importedIcons: importedIcons2 } = await Promise.resolve().then(() => (init_importedIcons(), importedIcons_exports));
     setIconsMap({ ...importedIcons2, ...customIcons });
     setIsLoading(false);
   };
-  (0, import_react24.useEffect)(() => {
+  (0, import_react23.useEffect)(() => {
     initializeIconsMap();
   }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconContext.Provider, { value: { iconsMap, isLoading }, children });
@@ -3882,7 +3869,7 @@ var IconInner = ({ icon, iconColor = "default", size = "1.5rem", ...otherProps }
   }
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconComponent, { role: "img", size, ...otherProps, css: [IconImg, customColor[iconColor]] });
 };
-var Icon = import_react25.default.memo(IconInner);
+var Icon = import_react24.default.memo(IconInner);
 
 // src/components/Icons/customIcons.tsx
 var import_jsx_runtime16 = require("@emotion/react/jsx-runtime");
@@ -4946,8 +4933,8 @@ var uniformEntryPatternIcon = (0, import_all_files2.GenIcon)({
 
 // src/components/AddListButton/AddListButton.styles.ts
 init_emotion_jsx_shim();
-var import_react26 = require("@emotion/react");
-var AddListButtonBtn = import_react26.css`
+var import_react25 = require("@emotion/react");
+var AddListButtonBtn = import_react25.css`
   align-items: center;
   background: transparent;
   border: none;
@@ -4968,21 +4955,21 @@ var AddListButtonBtn = import_react26.css`
     box-shadow: var(--shadow-base);
   }
 `;
-var AddListButtonTheme = (theme) => import_react26.css`
+var AddListButtonTheme = (theme) => import_react25.css`
   color: ${theme};
 `;
-var AddListButtonBtnSmall = import_react26.css`
+var AddListButtonBtnSmall = import_react25.css`
   font-size: var(--fs-xs);
   font-weight: var(--fw-regular);
   margin-block: var(--spacing-md) 0;
 `;
-var AddListButtonIconMathPlus = (disabled2, theme) => import_react26.css`
+var AddListButtonIconMathPlus = (disabled2, theme) => import_react25.css`
   box-sizing: border-box;
   background: ${disabled2 ? "var(--gray-300)" : theme};
   color: var(--white);
   padding: calc(var(--spacing-xs) - 0.15rem);
 `;
-var AddListButtonIcon = import_react26.css`
+var AddListButtonIcon = import_react25.css`
   border-radius: var(--rounded-full);
   transition: box-shadow var(--duration-fast) var(--timing-ease-out);
 `;
@@ -13498,11 +13485,12 @@ var AnimationFile = ({
 
 // src/components/Avatar/Avatar.tsx
 init_emotion_jsx_shim();
+var import_CgProfile2 = require("@react-icons/all-files/cg/CgProfile");
 
 // src/components/Avatar/Avatar.styles.ts
 init_emotion_jsx_shim();
-var import_react27 = require("@emotion/react");
-var avatarStyles = import_react27.css`
+var import_react26 = require("@emotion/react");
+var avatarStyles = import_react26.css`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -13516,30 +13504,30 @@ var avatarStyles = import_react27.css`
   font-weight: var(--fw-bold);
   overflow: hidden;
 `;
-var avatarImageStyles = import_react27.css`
+var avatarImageStyles = import_react26.css`
   width: 100%;
   height: 100%;
   object-fit: cover;
 `;
-var avatarSize2xsStyles = import_react27.css`
+var avatarSize2xsStyles = import_react26.css`
   width: 1rem;
 `;
-var avatarSizeXsStyles = import_react27.css`
+var avatarSizeXsStyles = import_react26.css`
   width: 1.5rem;
 `;
-var avatarSizeSmStyles = import_react27.css`
+var avatarSizeSmStyles = import_react26.css`
   width: 2rem;
 `;
-var avatarSizeMdStyles = import_react27.css`
+var avatarSizeMdStyles = import_react26.css`
   width: 2.5rem;
 `;
-var avatarSizeLgStyles = import_react27.css`
+var avatarSizeLgStyles = import_react26.css`
   width: 3rem;
 `;
-var avatarSizeXlStyles = import_react27.css`
+var avatarSizeXlStyles = import_react26.css`
   width: 4rem;
 `;
-var avatarSize2xlStyles = import_react27.css`
+var avatarSize2xlStyles = import_react26.css`
   width: 5rem;
 `;
 
@@ -13556,10 +13544,11 @@ var avatarSizeStylesMap = {
 };
 var Avatar = ({ src, label = "", children, size = "md", as = "div", ...props }) => {
   const Element = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip, { title: label, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Element, { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
-    !src ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { role: "presentation", src, css: avatarImageStyles }),
+  const body = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_jsx_runtime19.Fragment, { children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Element, { css: [avatarStyles, avatarSizeStylesMap[size]], ...props, children: [
+    src ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("img", { role: "presentation", src, css: avatarImageStyles }) : children ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_CgProfile2.CgProfile, { css: avatarImageStyles }),
     children
   ] }) });
+  return src || children ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Tooltip, { title: label, children: body }) : body;
 };
 
 // src/components/Avatar/AvatarGroup.tsx
@@ -13567,8 +13556,8 @@ init_emotion_jsx_shim();
 
 // src/components/Avatar/AvatarGroup.styles.ts
 init_emotion_jsx_shim();
-var import_react28 = require("@emotion/react");
-var avatarGroupStyles = import_react28.css`
+var import_react27 = require("@emotion/react");
+var avatarGroupStyles = import_react27.css`
   display: flex;
   flex-wrap: nowrap;
 
@@ -13576,7 +13565,7 @@ var avatarGroupStyles = import_react28.css`
     margin-left: calc(-1 * var(--spacing-sm));
   }
 `;
-var avatarGroupMaxStyles = (numberOfItemsToRender) => import_react28.css`
+var avatarGroupMaxStyles = (numberOfItemsToRender) => import_react27.css`
   & > *:nth-of-type(n + ${numberOfItemsToRender + 1}) {
     display: none;
   }
@@ -13597,10 +13586,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__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
@@ -13610,7 +13602,7 @@ var AvatarGroup = ({
       ],
       ...props,
       children: [
-        children,
+        childrenToRender,
         !numberOfTruncatedItems ? null : /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(Avatar, { label: getTruncatedLabel(numberOfTruncatedItems), style: { display: "flex" }, children: [
           "+",
           numberOfTruncatedItems
@@ -13625,8 +13617,8 @@ init_emotion_jsx_shim();
 
 // src/components/Badges/Badge.styles.ts
 init_emotion_jsx_shim();
-var import_react29 = require("@emotion/react");
-var BadgeContainer = import_react29.css`
+var import_react28 = require("@emotion/react");
+var BadgeContainer = import_react28.css`
   --caution-title: rgb(133, 77, 14);
   --caution-container: rgb(254, 252, 232);
 
@@ -13645,43 +13637,43 @@ var BadgeContainer = import_react29.css`
   border-radius: var(--rounded-base);
   display: inline-block;
 `;
-var ExtraSmall = import_react29.css`
+var ExtraSmall = import_react28.css`
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--fs-xxs);
 `;
-var Small = import_react29.css`
+var Small = import_react28.css`
   padding: var(--spacing-xs) var(--spacing-sm);
   font-size: var(--fs-xs);
 `;
-var Base = import_react29.css`
+var Base = import_react28.css`
   padding: var(--spacing-sm) var(--spacing-base);
   font-size: var(--fs-sm);
 `;
-var Caution = import_react29.css`
+var Caution = import_react28.css`
   background-color: var(--caution-container);
   color: var(--caution-title);
 `;
-var Info = import_react29.css`
+var Info = import_react28.css`
   background-color: var(--info-container);
   color: var(--info-title);
 `;
-var Note = import_react29.css`
+var Note = import_react28.css`
   background-color: var(--note-container);
   color: var(--note-title);
 `;
-var Success = import_react29.css`
+var Success = import_react28.css`
   background-color: var(--success-container);
   color: var(--success-title);
 `;
-var Error2 = import_react29.css`
+var Error2 = import_react28.css`
   background-color: var(--danger-container);
   color: var(--danger-title);
 `;
-var Unimportant = import_react29.css`
+var Unimportant = import_react28.css`
   background: var(--brand-secondary-2);
   color: var(--typography-base);
 `;
-var UppercaseText = import_react29.css`
+var UppercaseText = import_react28.css`
   text-transform: uppercase;
 `;
 
@@ -13728,8 +13720,8 @@ var import_CgClose2 = 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_react29 = require("@emotion/react");
+var bannerStyles = import_react29.css`
   ${functionalColors}
 
   --border-color: var(--utility-caution-icon);
@@ -13763,11 +13755,11 @@ var bannerStyles = import_react30.css`
     --background-color: var(--utility-success-container);
   }
 `;
-var bannerAnimatedStyles = import_react30.css`
+var bannerAnimatedStyles = import_react29.css`
   animation: ${slideInTtb} var(--duration-xfast) ease-out;
 `;
-var bannerContentStyles = import_react30.css``;
-var bannerDismissButtonStyles = import_react30.css`
+var bannerContentStyles = import_react29.css``;
+var bannerDismissButtonStyles = import_react29.css`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -13820,15 +13812,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_react30 = require("@emotion/react");
+var SVG = import_react30.css`
   display: block;
 `;
-var SVGLight = import_react31.css`
+var SVGLight = import_react30.css`
   background: transparent;
   color: var(--typography-base);
 `;
-var SVGDark = import_react31.css`
+var SVGDark = import_react30.css`
   background: var(--gray-800);
   color: var(--white);
 `;
@@ -13999,10 +13991,10 @@ var import_CgChevronDown4 = require("@react-icons/all-files/cg/CgChevronDown");
 
 // src/components/Menu/DropdownStyleMenuTrigger.tsx
 init_emotion_jsx_shim();
-var import_react32 = require("@emotion/react");
+var import_react31 = require("@emotion/react");
 var import_CgChevronDown2 = require("@react-icons/all-files/cg/CgChevronDown");
 var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
-var buttonStyle = (bgColor) => import_react32.css`
+var buttonStyle = (bgColor) => import_react31.css`
   border: 0;
   background-color: ${bgColor};
   display: block;
@@ -14036,25 +14028,25 @@ function DropdownStyleMenuTrigger({
 
 // src/components/Menu/Menu.tsx
 init_emotion_jsx_shim();
-var import_react37 = require("@ariakit/react");
+var import_react36 = require("@ariakit/react");
 var React7 = __toESM(require("react"));
 
 // src/components/Menu/filterMenuSeparators.ts
 init_emotion_jsx_shim();
-var import_react35 = __toESM(require("react"));
+var import_react34 = __toESM(require("react"));
 
 // src/components/Menu/MenuGroup.tsx
 init_emotion_jsx_shim();
 
 // src/components/Menu/MenuGroup.styles.ts
 init_emotion_jsx_shim();
-var import_react33 = require("@emotion/react");
-var MenuGroupContainer = (hasTitle) => import_react33.css`
+var import_react32 = require("@emotion/react");
+var MenuGroupContainer = (hasTitle) => import_react32.css`
   display: flex;
   flex-direction: column;
   ${hasTitle ? "margin-top: var(--spacing-sm);" : ""}
 `;
-var MenuTitle = import_react33.css`
+var MenuTitle = import_react32.css`
   color: var(--gray-400);
   font-size: var(--fs-xs);
   font-weight: var(--fw-bold);
@@ -14076,13 +14068,13 @@ init_emotion_jsx_shim();
 
 // src/components/Menu/MenuItem.styles.ts
 init_emotion_jsx_shim();
-var import_react34 = require("@emotion/react");
-var activeMenuItem = import_react34.css`
+var import_react33 = require("@emotion/react");
+var activeMenuItem = import_react33.css`
   box-shadow: none;
   background: var(--gray-200);
   outline: none;
 `;
-var menuItem = (textTheme, forceActive) => import_react34.css`
+var menuItem = (textTheme, forceActive) => import_react33.css`
   align-items: center;
   border-radius: var(--rounded-base);
   background: none;
@@ -14111,7 +14103,7 @@ var menuItem = (textTheme, forceActive) => import_react34.css`
     border: none;
   }
 `;
-var menuItemWithIcon = import_react34.css`
+var menuItemWithIcon = import_react33.css`
   align-items: center;
   display: flex;
   justify-content: space-between;
@@ -14123,25 +14115,25 @@ var menuItemWithIcon = import_react34.css`
     height: var(--spacing-base);
   }
 `;
-var menuItemSeparator = import_react34.css`
+var menuItemSeparator = import_react33.css`
   border: 0;
   border-top: 1px solid var(--gray-300);
   width: 100%;
   margin-block: var(--spacing-xs);
 `;
-var menuItemShortcutWrapper = import_react34.css`
+var menuItemShortcutWrapper = import_react33.css`
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: var(--spacing-lg);
   width: 100%;
 `;
-var menuItemShortcut = import_react34.css`
+var menuItemShortcut = import_react33.css`
   color: var(--gray-400);
   font-size: var(--fs-sm);
   line-height: var(--fs-base);
 `;
-var menuItemEmptyIcon = import_react34.css`
+var menuItemEmptyIcon = import_react33.css`
   width: var(--spacing-base);
   height: var(--spacing-base);
   overflow: hidden;
@@ -14190,16 +14182,16 @@ function filterMenuSeparators(children, context) {
   return filteredList;
 }
 function isSubgroup(child) {
-  return (0, import_react35.isValidElement)(child) && (child.type === import_react35.default.Fragment || child.type === MenuGroup);
+  return (0, import_react34.isValidElement)(child) && (child.type === import_react34.default.Fragment || child.type === MenuGroup);
 }
 function isMenuSeparator(child) {
-  return (0, import_react35.isValidElement)(child) && child.type === MenuItemSeparator;
+  return (0, import_react34.isValidElement)(child) && child.type === MenuItemSeparator;
 }
 
 // src/components/Menu/Menu.styles.ts
 init_emotion_jsx_shim();
-var import_react36 = require("@emotion/react");
-var menuStyles = (maxMenuHeight) => import_react36.css`
+var import_react35 = require("@emotion/react");
+var menuStyles = (maxMenuHeight) => import_react35.css`
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
@@ -14225,11 +14217,11 @@ var menuStyles = (maxMenuHeight) => import_react36.css`
   ${scrollbarStyles}
   ` : ""}
 `;
-var menuTriggerStyles = import_react36.css`
+var menuTriggerStyles = import_react35.css`
   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,
@@ -14257,11 +14249,11 @@ var Menu = React7.forwardRef(function Menu2({
   ...props
 }, ref) {
   const placementOverride = legacyPlacements.includes(placement) ? void 0 : placement;
-  const menu = (0, import_react37.useMenuStore)({ placement: placementOverride });
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react37.MenuProvider, { store: menu, open: forceVisible, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react37.MenuButton, { ref, render: menuTrigger }),
+  const menu = (0, import_react36.useMenuStore)({ placement: placementOverride });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react36.MenuProvider, { store: menu, open: forceVisible, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react36.MenuButton, { ref, render: menuTrigger }),
     /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-      import_react37.Menu,
+      import_react36.Menu,
       {
         portal: !withoutPortal,
         portalElement,
@@ -14295,7 +14287,7 @@ var Menu = React7.forwardRef(function Menu2({
 
 // src/components/Menu/MenuItem.tsx
 init_emotion_jsx_shim();
-var import_react38 = require("@ariakit/react");
+var import_react37 = require("@ariakit/react");
 var React8 = __toESM(require("react"));
 var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
 var renderAsButton = (renderProps) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("button", { type: "button", ...renderProps });
@@ -14316,7 +14308,7 @@ var MenuItem = React8.forwardRef(
     const onClickHandler = onClick != null ? onClick : shortcut == null ? void 0 : shortcut.handler;
     const disabledValue = disabled2 != null ? disabled2 : shortcut == null ? void 0 : shortcut.disabled;
     return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-      import_react38.MenuItem,
+      import_react37.MenuItem,
       {
         ref,
         "data-testid": "button-menu",
@@ -14381,8 +14373,8 @@ init_emotion_jsx_shim();
 
 // src/components/Menu/MenuItemHeading.styles.ts
 init_emotion_jsx_shim();
-var import_react39 = require("@emotion/react");
-var MenuItemHeading = import_react39.css`
+var import_react38 = require("@emotion/react");
+var MenuItemHeading = import_react38.css`
   color: var(--gray-300);
   font-weight: var(--fw-bold);
   font-size: var(--fs-xs);
@@ -14397,12 +14389,12 @@ var MenuItemHeading2 = ({ children }) => {
 
 // src/components/Menu/MenuTrigger.tsx
 init_emotion_jsx_shim();
-var import_react40 = require("react");
+var import_react39 = require("react");
 var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
-var MenuButton2 = (0, import_react40.forwardRef)(({ children, ...props }, ref) => {
+var MenuButton2 = (0, import_react39.forwardRef)(({ children, ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { ref, type: "button", ...props, children });
 });
-var MenuThreeDots = (0, import_react40.forwardRef)(
+var MenuThreeDots = (0, import_react39.forwardRef)(
   ({ buttonTitle = "More options", iconSize = "1rem", ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MenuButton2, { css: menuTriggerStyles, ref, "aria-label": buttonTitle, title: buttonTitle, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { icon: "more-alt", size: iconSize, iconColor: "currentColor" }) });
   }
@@ -14410,15 +14402,15 @@ var MenuThreeDots = (0, import_react40.forwardRef)(
 
 // src/components/Menu/SearchableMenu.tsx
 init_emotion_jsx_shim();
-var import_react57 = require("react");
+var import_react56 = require("react");
 
 // src/components/Input/Caption.tsx
 init_emotion_jsx_shim();
 
 // src/components/Input/styles/CaptionText.styles.ts
 init_emotion_jsx_shim();
-var import_react41 = require("@emotion/react");
-var CaptionText = (dynamicSize) => import_react41.css`
+var import_react40 = require("@emotion/react");
+var CaptionText = (dynamicSize) => import_react40.css`
   color: var(--gray-500);
   display: block;
   font-size: ${dynamicSize ? "clamp(var(--fs-xs), 87.5%,var(--fs-sm))" : "var(--fs-sm)"};
@@ -14434,24 +14426,24 @@ var Caption = ({ children, testId, dynamicSize = false, ...props }) => {
 
 // src/components/Input/CheckboxWithInfo.tsx
 init_emotion_jsx_shim();
-var import_react43 = require("react");
+var import_react42 = require("react");
 
 // src/components/Input/styles/CheckboxWithInfo.styles.ts
 init_emotion_jsx_shim();
-var import_react42 = require("@emotion/react");
-var CheckboxWithInfoContainer = import_react42.css`
+var import_react41 = require("@emotion/react");
+var CheckboxWithInfoContainer = import_react41.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoLabel = import_react42.css`
+var CheckboxWithInfoLabel = import_react41.css`
   align-items: center;
   color: var(--gray-500);
   display: flex;
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
 `;
-var CheckboxWithInfoInput = import_react42.css`
+var CheckboxWithInfoInput = import_react41.css`
   appearance: none;
   border: 1px solid var(--gray-300);
   background: var(--white) no-repeat bottom center;
@@ -14485,7 +14477,7 @@ var CheckboxWithInfoInput = import_react42.css`
     border-color: var(--gray-200);
   }
 `;
-var InfoDialogContainer = import_react42.css`
+var InfoDialogContainer = import_react41.css`
   position: relative;
 
   &:hover {
@@ -14494,7 +14486,7 @@ var InfoDialogContainer = import_react42.css`
     }
   }
 `;
-var InfoDialogMessage = import_react42.css`
+var InfoDialogMessage = import_react41.css`
   background: var(--white);
   box-shadow: var(--shadow-base);
   border-radius: var(--rounded-md);
@@ -14518,7 +14510,7 @@ var InfoDialog = ({ message }) => {
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "paragraph", css: InfoDialogMessage, className: "info-message", children: message })
   ] });
 };
-var CheckboxWithInfo = (0, import_react43.forwardRef)(
+var CheckboxWithInfo = (0, import_react42.forwardRef)(
   ({ label, name, info, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { css: CheckboxWithInfoContainer, children: [
       /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("label", { css: CheckboxWithInfoLabel, children: [
@@ -14536,19 +14528,19 @@ var import_MdWarning = require("@react-icons/all-files/md/MdWarning");
 
 // src/components/Input/styles/ErrorMessage.styles.ts
 init_emotion_jsx_shim();
-var import_react44 = require("@emotion/react");
-var errorMessageStyles = import_react44.css`
+var import_react43 = require("@emotion/react");
+var errorMessageStyles = import_react43.css`
   align-items: center;
   color: var(--brand-secondary-5);
   display: flex;
   gap: var(--spacing-sm);
 `;
-var errorMessageTextStyles = import_react44.css`
+var errorMessageTextStyles = import_react43.css`
   /* We hide the text at width 5rem or below */
   max-width: max(0px, calc((100% - 5rem) * 9999));
   overflow: hidden;
 `;
-var errorMessageTextTruncatedStyles = import_react44.css`
+var errorMessageTextTruncatedStyles = import_react43.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -14572,8 +14564,8 @@ var import_MdInfoOutline = require("@react-icons/all-files/md/MdInfoOutline");
 
 // src/components/Input/styles/InfoMessage.styles.tsx
 init_emotion_jsx_shim();
-var import_react45 = require("@emotion/react");
-var InfoText = import_react45.css`
+var import_react44 = require("@emotion/react");
+var InfoText = import_react44.css`
   --info-desc: rgb(29, 78, 216);
   --info-icon: rgb(96, 165, 250);
 
@@ -14582,7 +14574,7 @@ var InfoText = import_react45.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var InfoIcon2 = import_react45.css`
+var InfoIcon2 = import_react44.css`
   color: var(--info-icon);
 `;
 
@@ -14601,14 +14593,14 @@ var import_MdWarning2 = require("@react-icons/all-files/md/MdWarning");
 
 // src/components/Input/styles/WarningMessage.styles.tsx
 init_emotion_jsx_shim();
-var import_react46 = require("@emotion/react");
-var WarningText = import_react46.css`
+var import_react45 = require("@emotion/react");
+var WarningText = import_react45.css`
   align-items: center;
   color: var(--alert-text);
   display: flex;
   gap: var(--spacing-sm);
 `;
-var WarningIcon = import_react46.css`
+var WarningIcon = import_react45.css`
   color: var(--alert);
 `;
 
@@ -14652,9 +14644,9 @@ var React9 = __toESM(require("react"));
 
 // src/components/Input/styles/Fieldset.styles.ts
 init_emotion_jsx_shim();
-var import_react47 = require("@emotion/react");
+var import_react46 = require("@emotion/react");
 function fieldsetContainer(invert) {
-  const base = import_react47.css`
+  const base = import_react46.css`
     border-radius: var(--rounded-base);
     border: 1px solid var(--gray-300);
 
@@ -14666,18 +14658,18 @@ function fieldsetContainer(invert) {
     }
   `;
   return invert ? [
-    import_react47.css`
+    import_react46.css`
           background: white;
         `,
     base
   ] : [
-    import_react47.css`
+    import_react46.css`
           background: var(--gray-50);
         `,
     base
   ];
 }
-var fieldsetLegend = import_react47.css`
+var fieldsetLegend = import_react46.css`
   align-items: center;
   color: var(--typography-base);
   display: flex;
@@ -14687,7 +14679,7 @@ var fieldsetLegend = import_react47.css`
   margin-bottom: var(--spacing-base);
   float: left; // allows the legend to be inside the fieldset and not sat on the border line
 `;
-var fieldsetBody = import_react47.css`
+var fieldsetBody = import_react46.css`
   clear: left;
 `;
 
@@ -15047,18 +15039,18 @@ function isValueMatch(selectedValues, value) {
 
 // src/components/Input/InputInlineSelect.tsx
 init_emotion_jsx_shim();
-var import_react49 = require("@emotion/react");
+var import_react48 = require("@emotion/react");
 var import_CgChevronDown3 = require("@react-icons/all-files/cg/CgChevronDown");
-var import_react50 = require("react");
+var import_react49 = require("react");
 
 // src/components/Input/styles/InputInlineSelect.styles.ts
 init_emotion_jsx_shim();
-var import_react48 = require("@emotion/react");
-var inlineSelectContainer = import_react48.css`
+var import_react47 = require("@emotion/react");
+var inlineSelectContainer = import_react47.css`
   margin-inline: auto;
   max-width: fit-content;
 `;
-var inlineSelectBtn = import_react48.css`
+var inlineSelectBtn = import_react47.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border: 2px solid var(--brand-secondary-3);
@@ -15082,7 +15074,7 @@ var inlineSelectBtn = import_react48.css`
     outline: 2px solid var(--gray-800);
   }
 `;
-var inlineSelectMenu = import_react48.css`
+var inlineSelectMenu = import_react47.css`
   background: var(--white);
   border: 1px solid var(--brand-secondary-3);
   border-top: none;
@@ -15093,7 +15085,7 @@ var inlineSelectMenu = import_react48.css`
   inset: auto 0;
   transform: translateY(-0.2rem);
 `;
-var inlineSelectBtnOptions = import_react48.css`
+var inlineSelectBtnOptions = import_react47.css`
   cursor: pointer;
   display: block;
   font-size: var(--fs-sm);
@@ -15109,7 +15101,7 @@ var inlineSelectBtnOptions = import_react48.css`
     background: var(--gray-50);
   }
 `;
-var inlineSelectMenuClosed = import_react48.css`
+var inlineSelectMenuClosed = import_react47.css`
   position: absolute;
   overflow: hidden;
   height: 1px;
@@ -15129,15 +15121,15 @@ var InputInlineSelect = ({
   ...props
 }) => {
   var _a;
-  const [menuVisible, setMenuVisible] = (0, import_react50.useState)(false);
-  const divRef = (0, import_react50.useRef)(null);
+  const [menuVisible, setMenuVisible] = (0, import_react49.useState)(false);
+  const divRef = (0, import_react49.useRef)(null);
   useOutsideClick(divRef, () => setMenuVisible(false));
   const selected = options.find((option) => option.value === value);
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       ref: divRef,
-      css: !classNameContainer ? inlineSelectContainer : import_react49.css`
+      css: !classNameContainer ? inlineSelectContainer : import_react48.css`
               max-width: fit-content;
               ${typeof classNameContainer === "object" ? classNameContainer : void 0}
             `,
@@ -15191,10 +15183,10 @@ var InputInlineSelect = ({
 init_emotion_jsx_shim();
 var import_CgClose3 = require("@react-icons/all-files/cg/CgClose");
 var import_CgSearch2 = require("@react-icons/all-files/cg/CgSearch");
-var import_react51 = require("react");
+var import_react50 = require("react");
 var import_react_use2 = require("react-use");
 var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
-var InputKeywordSearch = (0, import_react51.forwardRef)(
+var InputKeywordSearch = (0, import_react50.forwardRef)(
   ({
     onSearchTextChanged,
     disabled: disabled2 = false,
@@ -15216,7 +15208,11 @@ var InputKeywordSearch = (0, import_react51.forwardRef)(
       }
     };
     const handleClear = () => {
-      onClear ? onClear() : onSearchTextChanged("");
+      if (onClear) {
+        onClear();
+      } else {
+        onSearchTextChanged("");
+      }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
       Input,
@@ -15263,9 +15259,9 @@ var InputKeywordSearch = (0, import_react51.forwardRef)(
   }
 );
 InputKeywordSearch.displayName = "InputKeywordSearch";
-var DebouncedInputKeywordSearch = (0, import_react51.forwardRef)(
+var DebouncedInputKeywordSearch = (0, import_react50.forwardRef)(
   ({ delay = 300, onSearchTextChanged, defaultValue, ...props }, ref) => {
-    const [searchText, setSearchText] = (0, import_react51.useState)(defaultValue != null ? defaultValue : "");
+    const [searchText, setSearchText] = (0, import_react50.useState)(defaultValue != null ? defaultValue : "");
     (0, import_react_use2.useDebounce)(() => onSearchTextChanged(searchText), delay, [searchText]);
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(InputKeywordSearch, { ...props, ref, value: searchText, onSearchTextChanged: setSearchText });
   }
@@ -15273,9 +15269,9 @@ var DebouncedInputKeywordSearch = (0, import_react51.forwardRef)(
 
 // src/components/Input/InputSelect.tsx
 init_emotion_jsx_shim();
-var import_react52 = require("react");
+var import_react51 = require("react");
 var import_jsx_runtime44 = require("@emotion/react/jsx-runtime");
-var InputSelect = (0, import_react52.forwardRef)(
+var InputSelect = (0, import_react51.forwardRef)(
   ({
     label,
     defaultOption,
@@ -15341,13 +15337,13 @@ var InputSelect = (0, import_react52.forwardRef)(
 init_emotion_jsx_shim();
 var import_date = require("@internationalized/date");
 var React11 = __toESM(require("react"));
-var import_react54 = require("react");
+var import_react53 = require("react");
 var import_react_aria_components = require("react-aria-components");
 
 // src/components/Input/styles/InputTime.styles.ts
 init_emotion_jsx_shim();
-var import_react53 = require("@emotion/react");
-var dateInput = import_react53.css`
+var import_react52 = require("@emotion/react");
+var dateInput = import_react52.css`
   display: flex;
   justify-content: center;
 
@@ -15357,7 +15353,7 @@ var dateInput = import_react53.css`
     outline: none;
   }
 `;
-var dateSegment = import_react53.css`
+var dateSegment = import_react52.css`
   padding: 0 var(--spacing-2xs);
   font-variant-numeric: tabular-nums slashed-zero lining-nums;
   text-align: end;
@@ -15438,7 +15434,7 @@ var InputTime = React11.forwardRef(
             shouldForceLeadingZeros: true,
             hideTimeZone: true,
             isDisabled: !!disabled2,
-            onChange: (0, import_react54.useCallback)(
+            onChange: (0, import_react53.useCallback)(
               (time) => {
                 var _a;
                 onChange == null ? void 0 : onChange((_a = time == null ? void 0 : time.toString()) != null ? _a : "00:00:00");
@@ -15552,8 +15548,8 @@ var import_CgCheckO2 = require("@react-icons/all-files/cg/CgCheckO");
 
 // src/components/Input/styles/SuccessMessage.styles.ts
 init_emotion_jsx_shim();
-var import_react55 = require("@emotion/react");
-var SuccessText = import_react55.css`
+var import_react54 = require("@emotion/react");
+var SuccessText = import_react54.css`
   --info-desc: var(--brand-secondary-3);
   --info-icon: var(--brand-secondary-3);
 
@@ -15562,7 +15558,7 @@ var SuccessText = import_react55.css`
   display: flex;
   gap: var(--spacing-sm);
 `;
-var SuccessIcon2 = import_react55.css`
+var SuccessIcon2 = import_react54.css`
   color: var(--info-icon);
 `;
 
@@ -15577,9 +15573,9 @@ var SuccessMessage = ({ message, testId, ...props }) => {
 
 // src/components/Input/Textarea.tsx
 init_emotion_jsx_shim();
-var import_react56 = require("react");
+var import_react55 = require("react");
 var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
-var Textarea = (0, import_react56.forwardRef)(
+var Textarea = (0, import_react55.forwardRef)(
   ({ label, icon, id, caption, showLabel = true, errorMessage, warningMessage, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_jsx_runtime49.Fragment, { children: [
       showLabel ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("label", { htmlFor: id, css: [labelText], children: label }) : null,
@@ -15631,9 +15627,9 @@ function SearchableMenu(props) {
   );
 }
 function MenuSearch({ onSearchTextChanged, searchPlaceholder }) {
-  const searchInputRef = (0, import_react57.useRef)(null);
-  const hasFocusedRef = (0, import_react57.useRef)(false);
-  (0, import_react57.useEffect)(() => {
+  const searchInputRef = (0, import_react56.useRef)(null);
+  const hasFocusedRef = (0, import_react56.useRef)(false);
+  (0, import_react56.useEffect)(() => {
     if (hasFocusedRef.current || !searchInputRef.current) {
       return;
     }
@@ -15677,8 +15673,8 @@ function SelectableMenuItem({ selected, children, ...menuItemProps }) {
 
 // src/components/ButtonWithMenu/ButtonWithMenu.styles.ts
 init_emotion_jsx_shim();
-var import_react58 = require("@emotion/react");
-var buttonSizeBase = import_react58.css`
+var import_react57 = require("@emotion/react");
+var buttonSizeBase = import_react57.css`
   --icon-padding: var(--spacing-xs);
   --svg-size: 1rem;
   --line-offset: -1px;
@@ -15688,7 +15684,7 @@ var buttonSizeBase = import_react58.css`
     padding: var(--spacing-sm) var(--spacing-base);
   }
 `;
-var buttonSizeSmall = import_react58.css`
+var buttonSizeSmall = import_react57.css`
   --icon-padding: var(--spacing-xs);
   --svg-size: 0.85rem;
   --line-offset: -1px;
@@ -15698,7 +15694,7 @@ var buttonSizeSmall = import_react58.css`
     padding: var(--spacing-xs) var(--spacing-base);
   }
 `;
-var buttonSizeLarge = import_react58.css`
+var buttonSizeLarge = import_react57.css`
   --icon-padding: var(--spacing-sm);
   --svg-size: 1rem;
   --line-offset: -1px;
@@ -15709,7 +15705,7 @@ var buttonSizeLarge = import_react58.css`
     padding: var(--spacing-sm) var(--spacing-base);
   }
 `;
-var ButtonWithMenuContainer = import_react58.css`
+var ButtonWithMenuContainer = import_react57.css`
   align-items: center;
   border: 1px solid transparent;
   border-radius: var(--rounded-base);
@@ -15740,7 +15736,7 @@ var ButtonWithMenuContainer = import_react58.css`
   }
 `;
 function ButtonWithMenuBtn(overrideHairlineColor) {
-  return import_react58.css`
+  return import_react57.css`
     position: relative;
     align-items: center;
     border: 1px solid transparent;
@@ -15771,19 +15767,19 @@ function ButtonWithMenuBtn(overrideHairlineColor) {
     }
   `;
 }
-var ButtonWithMenuIcon = (disabled2) => import_react58.css`
+var ButtonWithMenuIcon = (disabled2) => import_react57.css`
   padding: var(--icon-padding);
   pointer-events: ${disabled2 ? "none" : "auto"};
 `;
-var buttonPrimary2 = import_react58.css`
+var buttonPrimary2 = import_react57.css`
   background: var(--gray-800);
   color: var(--white);
 `;
-var buttonPrimaryDisabled = import_react58.css`
+var buttonPrimaryDisabled = import_react57.css`
   background: var(--gray-300);
   color: var(--white);
 `;
-var buttonSecondary2 = import_react58.css`
+var buttonSecondary2 = import_react57.css`
   background: var(--primary-action-default);
   color: var(--white);
 
@@ -15791,17 +15787,17 @@ var buttonSecondary2 = import_react58.css`
     background: var(--primary-action-hover);
   }
 `;
-var buttonSecondaryDisabled = import_react58.css`
+var buttonSecondaryDisabled = import_react57.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonUnimportant2 = import_react58.css`
+var buttonUnimportant2 = import_react57.css`
   background: var(--brand-secondary-2);
   color: var(--typography-base);
 `;
-var buttonUnimportantDisabled = import_react58.css`
+var buttonUnimportantDisabled = import_react57.css`
   ${buttonPrimaryDisabled}
 `;
-var buttonGhost2 = import_react58.css`
+var buttonGhost2 = import_react57.css`
   background: transparent;
   color: var(--brand-secondary-3);
 
@@ -15809,11 +15805,11 @@ var buttonGhost2 = import_react58.css`
     border-color: var(--brand-secondary-3);
   }
 `;
-var buttonGhostDisabled = import_react58.css`
+var buttonGhostDisabled = import_react57.css`
   border-color: var(--gray-400);
   color: var(--gray-400);
 `;
-var buttonSecondaryOutline = import_react58.css`
+var buttonSecondaryOutline = import_react57.css`
   background: var(--white);
   color: var(--primary-action-default);
   border-color: var(--primary-action-default);
@@ -15823,15 +15819,15 @@ var buttonSecondaryOutline = import_react58.css`
     border-color: var(--primary-action-hover);
   }
 `;
-var buttonSecondaryOutlineDisabled = import_react58.css`
+var buttonSecondaryOutlineDisabled = import_react57.css`
   background: var(--white);
   color: var(--gray-400);
   border-color: var(--gray-400);
 `;
-var buttonWithMenuIconOffset = import_react58.css`
+var buttonWithMenuIconOffset = import_react57.css`
   margin-left: -10px;
 `;
-var wholeButtonWithMenuIconOffset = import_react58.css`
+var wholeButtonWithMenuIconOffset = import_react57.css`
   margin: 3px -10px 0 3px;
 `;
 
@@ -15973,62 +15969,62 @@ var ButtonWithMenu = ({
 // src/components/Calendar/Calendar.tsx
 init_emotion_jsx_shim();
 var import_date2 = require("@internationalized/date");
-var import_react61 = require("react");
+var import_react60 = require("react");
 var import_react_aria_components2 = require("react-aria-components");
 
 // src/components/Typography/styles/Heading.styles.ts
 init_emotion_jsx_shim();
-var import_react59 = require("@emotion/react");
-var h1 = import_react59.css`
+var import_react58 = require("@emotion/react");
+var h1 = import_react58.css`
   font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
 `;
-var h2 = import_react59.css`
+var h2 = import_react58.css`
   font-size: clamp(1.35rem, var(--fluid-font-base), 2.25rem);
 `;
-var h3 = import_react59.css`
+var h3 = import_react58.css`
   font-size: clamp(1.25rem, var(--fluid-font-base), 1.5rem);
 `;
-var h4 = import_react59.css`
+var h4 = import_react58.css`
   font-size: clamp(1.15rem, var(--fluid-font-base), 1.25rem);
 `;
-var h5 = import_react59.css`
+var h5 = import_react58.css`
   font-size: clamp(var(--fs-base), var(--fluid-font-base), 1.15rem);
 `;
-var h6 = import_react59.css`
+var h6 = import_react58.css`
   font-size: var(--fs-base);
 `;
-var commonHeadingAttr = (withMarginBottom) => import_react59.css`
+var commonHeadingAttr = (withMarginBottom) => import_react58.css`
   font-weight: var(--fw-regular);
   font-family: var(--ff-base);
   margin-top: 0;
   margin-bottom: ${withMarginBottom ? "var(--spacing-base)" : "0"};
 `;
-var commonLineHeight = import_react59.css`
+var commonLineHeight = import_react58.css`
   line-height: 1.25;
 `;
 
 // src/components/Calendar/Calendar.styles.ts
 init_emotion_jsx_shim();
-var import_react60 = require("@emotion/react");
-var container = import_react60.css`
+var import_react59 = require("@emotion/react");
+var container = import_react59.css`
   --calendar-cell-size: 1.8rem;
   width: fit-content;
   max-width: 100%;
   margin: 0 auto;
 `;
-var header = import_react60.css`
+var header = import_react59.css`
   display: flex;
   align-items: center;
   margin: 0 4px 0.5rem 4px;
 `;
-var headerTitle = import_react60.css`
+var headerTitle = import_react59.css`
   flex: 1;
   margin: 0;
   text-align: left;
   font-weight: var(--fw-regular);
   font-size: var(--fs-xs);
 `;
-var headerNavButton = import_react60.css`
+var headerNavButton = import_react59.css`
   margin: 0;
 
   &,
@@ -16036,7 +16032,7 @@ var headerNavButton = import_react60.css`
     box-shadow: none;
   }
 `;
-var cell = import_react60.css`
+var cell = import_react59.css`
   width: var(--calendar-cell-size);
   line-height: var(--calendar-cell-size);
   text-align: center;
@@ -16069,13 +16065,13 @@ var cell = import_react60.css`
     color: var(--white);
   }
 `;
-var cellIsOutsideRange = import_react60.css`
+var cellIsOutsideRange = import_react59.css`
   color: var(--gray-400);
 `;
-var cellIsToday = import_react60.css`
+var cellIsToday = import_react59.css`
   background: var(--gray-200);
 `;
-var actions = import_react60.css`
+var actions = import_react59.css`
   display: flex;
   justify-content: end;
 `;
@@ -16102,17 +16098,17 @@ var Calendar = ({
   isReadOnly,
   ...props
 }) => {
-  const [focusedValue, setFocusedValue] = (0, import_react61.useState)(void 0);
+  const [focusedValue, setFocusedValue] = (0, import_react60.useState)(void 0);
   const today_date = (0, import_date2.today)(timeZone);
   const minDate = tryParseDate(minValue);
   const maxDate = tryParseDate(maxValue);
-  const handleChange = (0, import_react61.useCallback)(
+  const handleChange = (0, import_react60.useCallback)(
     (value2) => {
       onChange == null ? void 0 : onChange(value2.toString());
     },
     [onChange]
   );
-  const gotoToday = (0, import_react61.useCallback)(() => {
+  const gotoToday = (0, import_react60.useCallback)(() => {
     onChange == null ? void 0 : onChange(today_date.toString());
     setFocusedValue(today_date);
   }, [onChange, today_date]);
@@ -16215,23 +16211,23 @@ var React13 = __toESM(require("react"));
 
 // src/components/Typography/styles/Link.styles.ts
 init_emotion_jsx_shim();
-var import_react62 = require("@emotion/react");
-var link = import_react62.css`
+var import_react61 = require("@emotion/react");
+var link = import_react61.css`
   display: inline-flex;
   transition: color var(--duration-fast) var(--timing-ease-out);
   word-break: break-word;
 `;
-var linkColorDefault = import_react62.css`
+var linkColorDefault = import_react61.css`
   color: var(--primary-action-default);
 
   &:hover {
     color: var(--primary-action-hover);
   }
 `;
-var linkColorDestructive = import_react62.css`
+var linkColorDestructive = import_react61.css`
   color: var(--brand-secondary-5);
 `;
-var linkColorCurrent = import_react62.css`
+var linkColorCurrent = import_react61.css`
   color: currentColor;
 `;
 
@@ -16262,8 +16258,8 @@ init_emotion_jsx_shim();
 
 // src/components/Typography/styles/Paragraph.styles.ts
 init_emotion_jsx_shim();
-var import_react63 = require("@emotion/react");
-var paragraph = import_react63.css`
+var import_react62 = require("@emotion/react");
+var paragraph = import_react62.css`
   line-height: 1.5;
   margin-bottom: var(--spacing-base);
 
@@ -16274,10 +16270,10 @@ var paragraph = import_react63.css`
 
 // src/components/Typography/Paragraph.tsx
 var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
-var import_react64 = require("@emotion/react");
+var import_react63 = require("@emotion/react");
 var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
   if (htmlContent && Array.isArray(htmlContent)) {
-    const paragraphContent = htmlContent.map((html, index) => /* @__PURE__ */ (0, import_react64.createElement)(
+    const paragraphContent = htmlContent.map((html, index) => /* @__PURE__ */ (0, import_react63.createElement)(
       "p",
       {
         ...pAttributes,
@@ -16310,17 +16306,17 @@ var Paragraph = ({ className, htmlContent, children, ...pAttributes }) => {
 
 // src/components/Typography/styles/IntegrationHeaderSection.styles.ts
 init_emotion_jsx_shim();
-var import_react65 = require("@emotion/react");
-var IntegrationHeaderSectionContainer = import_react65.css`
+var import_react64 = require("@emotion/react");
+var IntegrationHeaderSectionContainer = import_react64.css`
   margin-bottom: var(--spacing-lg);
 `;
-var IntegrationHeaderSectionTitleContainer = import_react65.css`
+var IntegrationHeaderSectionTitleContainer = import_react64.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-md);
   margin-bottom: var(--spacing-md);
 `;
-var IntegrationHeaderSectionTitleGroup = import_react65.css`
+var IntegrationHeaderSectionTitleGroup = import_react64.css`
   align-items: center;
   display: flex;
   flex-wrap: wrap;
@@ -16331,26 +16327,26 @@ var IntegrationHeaderSectionTitleGroup = import_react65.css`
     gap: var(--spacing-md);
   }
 `;
-var IntegrationHeaderSectionTitle = import_react65.css`
+var IntegrationHeaderSectionTitle = import_react64.css`
   font-size: clamp(1.75rem, var(--fluid-font-base), 2.25rem);
   font-weight: var(--fw-regular);
   margin: 0;
 `;
-var IntegrationHeaderSectionText = import_react65.css``;
-var IntegrationHeaderSectionIconContainer = import_react65.css`
+var IntegrationHeaderSectionText = import_react64.css``;
+var IntegrationHeaderSectionIconContainer = import_react64.css`
   position: relative;
   max-width: 100px;
 `;
-var IntegrationHeaderSectionIcon = import_react65.css`
+var IntegrationHeaderSectionIcon = import_react64.css`
   position: absolute;
   inset: 0;
   margin: auto;
   width: clamp(32px, calc(4vw + 1rem), 44px);
 `;
-var IntegrationHeaderSectionHexIcon = import_react65.css`
+var IntegrationHeaderSectionHexIcon = import_react64.css`
   width: clamp(52px, calc(6vw + 1rem), 100px);
 `;
-var IntegrationHeaderSectionDocsLink = import_react65.css`
+var IntegrationHeaderSectionDocsLink = import_react64.css`
   ${mq("sm")} {
     margin-left: auto;
   }
@@ -16440,8 +16436,8 @@ var import_CgChevronLeft2 = require("@react-icons/all-files/cg/CgChevronLeft");
 
 // src/components/Typography/styles/PageHeaderSection.styles.ts
 init_emotion_jsx_shim();
-var import_react66 = require("@emotion/react");
-var PageHeaderSectionContainer = import_react66.css`
+var import_react65 = require("@emotion/react");
+var PageHeaderSectionContainer = import_react65.css`
   display: flex;
   justify-content: space-between;
   margin-bottom: var(--spacing-sm);
@@ -16453,7 +16449,7 @@ var PageHeaderSectionContainer = import_react66.css`
     gap: var(--spacing-lg);
   }
 `;
-var PageHeaderSectionDetails = import_react66.css`
+var PageHeaderSectionDetails = import_react65.css`
   flex-grow: 1;
   max-width: var(--prose);
   order: 1;
@@ -16462,7 +16458,7 @@ var PageHeaderSectionDetails = import_react66.css`
     order: 0;
   }
 `;
-var PageHeaderSectionLinkContainer = import_react66.css`
+var PageHeaderSectionLinkContainer = import_react65.css`
   align-items: center;
   color: var(--primary-action-default);
   display: flex;
@@ -16472,10 +16468,10 @@ var PageHeaderSectionLinkContainer = import_react66.css`
     color: var(--primary-action-hover);
   }
 `;
-var PageHeaderSectionLinkIcon = import_react66.css`
+var PageHeaderSectionLinkIcon = import_react65.css`
   margin-left: -0.5rem;
 `;
-var PageHeaderSectionLink = import_react66.css`
+var PageHeaderSectionLink = import_react65.css`
   color: var(--primary-action-default);
   font-size: var(--fs-sm);
 
@@ -16483,7 +16479,7 @@ var PageHeaderSectionLink = import_react66.css`
     color: var(--primary-action-hover);
   }
 `;
-var PageHeaderSectionChildContainer = import_react66.css`
+var PageHeaderSectionChildContainer = import_react65.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-lg);
@@ -16500,7 +16496,7 @@ var PageHeaderSectionChildContainer = import_react66.css`
     order: 1;
   }
 `;
-var PageHeaderSectionTitle = import_react66.css`
+var PageHeaderSectionTitle = import_react65.css`
   margin-block: 0 var(--spacing-base);
 `;
 
@@ -16543,8 +16539,8 @@ var PageHeaderSection = ({
 
 // src/components/Card/Card.styles.ts
 init_emotion_jsx_shim();
-var import_react67 = require("@emotion/react");
-var CardContainer = import_react67.css`
+var import_react66 = require("@emotion/react");
+var CardContainer = import_react66.css`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -16557,7 +16553,7 @@ var CardContainer = import_react67.css`
     background: var(--gray-50);
   }
 `;
-var CardTitle = (marginBottom) => import_react67.css`
+var CardTitle = (marginBottom) => import_react66.css`
   display: flex;
   margin: ${marginBottom ? "0 0 var(--spacing-base)" : "0"};
   padding-right: var(--spacing-lg);
@@ -16565,7 +16561,7 @@ var CardTitle = (marginBottom) => import_react67.css`
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
 `;
-var CardMenu = import_react67.css`
+var CardMenu = import_react66.css`
   align-items: center;
   background: transparent;
   color: var(--gray-300);
@@ -16633,12 +16629,12 @@ init_emotion_jsx_shim();
 
 // src/components/Card/CardContainer.styles.ts
 init_emotion_jsx_shim();
-var import_react68 = require("@emotion/react");
-var CardContainerWrapper = (bgColor) => import_react68.css`
+var import_react67 = require("@emotion/react");
+var CardContainerWrapper = (bgColor) => import_react67.css`
   background: ${bgColor === "gray" ? `var(--gray-50)` : `var(--white)`};
   container-type: inline-size;
 `;
-var CardContainerInner = ({ padding, withLastColumn }) => import_react68.css`
+var CardContainerInner = ({ padding, withLastColumn }) => import_react67.css`
   display: grid;
   gap: var(--spacing-lg);
   max-width: var(--site-width);
@@ -16669,8 +16665,8 @@ var import_CgMoreAlt3 = require("@react-icons/all-files/cg/CgMoreAlt");
 
 // src/components/Card/LoadingCardSkeleton.styles.ts
 init_emotion_jsx_shim();
-var import_react69 = require("@emotion/react");
-var LoadingCardSkeleton = import_react69.css`
+var import_react68 = require("@emotion/react");
+var LoadingCardSkeleton = import_react68.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   color: var(--gray-400);
   border-radius: var(--rounded-base);
@@ -16678,21 +16674,21 @@ var LoadingCardSkeleton = import_react69.css`
   min-height: 160px;
   position: relative;
 `;
-var LoadingText = import_react69.css`
+var LoadingText = import_react68.css`
   animation: ${fadeIn} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
   background: var(--gray-300);
   display: block;
 `;
-var LoadingTitle = import_react69.css`
+var LoadingTitle = import_react68.css`
   width: clamp(200px, 100vw, 60%);
   height: var(--spacing-md);
 `;
-var LoadingTimeStamp = import_react69.css`
+var LoadingTimeStamp = import_react68.css`
   width: clamp(200px, 100vw, 30%);
   height: var(--spacing-sm);
 `;
-var LoadingMenuIcon = import_react69.css`
+var LoadingMenuIcon = import_react68.css`
   animation: ${fadeIn} 1s linear infinite alternate;
   position: absolute;
   top: var(--spacing-md);
@@ -16718,8 +16714,8 @@ var import_CgClose4 = require("@react-icons/all-files/cg/CgClose");
 
 // src/components/Chip/Chip.styles.ts
 init_emotion_jsx_shim();
-var import_react70 = require("@emotion/react");
-var ChipContainer = import_react70.css`
+var import_react69 = require("@emotion/react");
+var ChipContainer = import_react69.css`
   border-radius: var(--rounded-full);
   display: inline-flex;
   transition:
@@ -16752,24 +16748,24 @@ var ChipContainer = import_react70.css`
     }
   }
 `;
-var ChipText = import_react70.css`
+var ChipText = import_react69.css`
   align-self: center;
   line-height: 1;
   text-wrap: nowrap;
 `;
-var ChipIcon = import_react70.css`
+var ChipIcon = import_react69.css`
   align-self: center;
   justify-content: center;
   display: flex;
   opacity: var(--opacity-50);
 `;
-var ChipSeparator = import_react70.css`
+var ChipSeparator = import_react69.css`
   display: flex;
   border-right: 1px solid var(--white);
   opacity: var(--opacity-50);
   margin-left: -1px;
 `;
-var ChipTiny = (withIcon) => import_react70.css`
+var ChipTiny = (withIcon) => import_react69.css`
   font-size: var(--fs-xs);
   padding-inline: ${withIcon ? "calc(var(--spacing-2xs) + 2px) var(--spacing-sm)" : "var(--spacing-sm)"};
   gap: var(--spacing-2xs);
@@ -16778,7 +16774,7 @@ var ChipTiny = (withIcon) => import_react70.css`
     padding: var(--spacing-xs) var(--spacing-xs);
   }
 `;
-var ChipSmall = import_react70.css`
+var ChipSmall = import_react69.css`
   font-size: var(--fs-sm);
   padding-inline: var(--spacing-sm);
   gap: var(--spacing-xs);
@@ -16787,7 +16783,7 @@ var ChipSmall = import_react70.css`
     padding: var(--spacing-sm) var(--spacing-xs);
   }
 `;
-var ChipMedium = import_react70.css`
+var ChipMedium = import_react69.css`
   font-size: var(--fs-base);
   padding-inline: var(--spacing-sm);
   gap: var(--spacing-xs);
@@ -16796,10 +16792,10 @@ var ChipMedium = import_react70.css`
     padding: var(--spacing-sm) var(--spacing-xs);
   }
 `;
-var ChipMultiline = import_react70.css`
+var ChipMultiline = import_react69.css`
   padding-inline: var(--spacing-sm);
 `;
-var ChipThemeAccentLight = import_react70.css`
+var ChipThemeAccentLight = import_react69.css`
   --outline-color: var(--accent-light);
   background: var(--accent-light);
   color: var(--typography-base);
@@ -16821,7 +16817,7 @@ var ChipThemeAccentLight = import_react70.css`
     }
   }
 `;
-var ChipThemeAccentDark = import_react70.css`
+var ChipThemeAccentDark = import_react69.css`
   --outline-color: var(--accent-dark);
   background: var(--accent-dark);
   color: var(--white);
@@ -16843,7 +16839,7 @@ var ChipThemeAccentDark = import_react70.css`
     }
   }
 `;
-var ChipAltThemeAccentLight = import_react70.css`
+var ChipAltThemeAccentLight = import_react69.css`
   --outline-color: var(--accent-alt-light);
   background: var(--accent-alt-light);
   color: var(--typography-base);
@@ -16865,7 +16861,7 @@ var ChipAltThemeAccentLight = import_react70.css`
     }
   }
 `;
-var ChipAltThemeAccentDark = import_react70.css`
+var ChipAltThemeAccentDark = import_react69.css`
   --outline-color: var(--accent-alt-dark);
   background: var(--accent-alt-dark);
   color: var(--white);
@@ -16887,7 +16883,7 @@ var ChipAltThemeAccentDark = import_react70.css`
     }
   }
 `;
-var ChipThemeNeutralLight = import_react70.css`
+var ChipThemeNeutralLight = import_react69.css`
   --outline-color: var(--gray-300);
   background: var(--gray-100);
   color: var(--typography-base);
@@ -16898,7 +16894,7 @@ var ChipThemeNeutralLight = import_react70.css`
     }
   }
 `;
-var ChipThemeNeutralDark = import_react70.css`
+var ChipThemeNeutralDark = import_react69.css`
   --outline-color: var(--gray-700);
   background: var(--gray-700);
   color: var(--white);
@@ -16913,13 +16909,13 @@ var ChipThemeNeutralDark = import_react70.css`
     }
   }
 `;
-var ChipActionButton = import_react70.css`
+var ChipActionButton = import_react69.css`
   background: transparent;
   border: none;
   border-radius: 0 var(--rounded-full) var(--rounded-full) 0;
   padding: 0;
 `;
-var ChipOutlined = import_react70.css`
+var ChipOutlined = import_react69.css`
   background: var(--white);
   color: var(--typography-light);
   box-shadow: inset 0 0 0 1px var(--outline-color);
@@ -16928,7 +16924,7 @@ var ChipOutlined = import_react70.css`
     border-color: var(--outline-color);
   }
 `;
-var ChipDisabled = import_react70.css`
+var ChipDisabled = import_react69.css`
   opacity: var(--opacity-50);
 `;
 
@@ -17001,8 +16997,8 @@ init_emotion_jsx_shim();
 
 // src/components/Chip/MultilineChip.styles.ts
 init_emotion_jsx_shim();
-var import_react71 = require("@emotion/react");
-var MultilineChipContainer = import_react71.css`
+var import_react70 = require("@emotion/react");
+var MultilineChipContainer = import_react70.css`
   --accent-primary-dark-rgb: 121, 83, 198; /* #7953C6 --purple-rain-400 */
   --accent-primary-dark-hover-rgb: 144, 104, 227; /* #9068E3 --purple-rain-400 */
   --gradient-rgb: var(--accent-primary-dark-rgb);
@@ -17099,8 +17095,8 @@ init_emotion_jsx_shim();
 
 // src/components/Counter/Counter.styles.ts
 init_emotion_jsx_shim();
-var import_react72 = require("@emotion/react");
-var counterContainer = (bgColor, hasIcon) => import_react72.css`
+var import_react71 = require("@emotion/react");
+var counterContainer = (bgColor, hasIcon) => import_react71.css`
   align-items: center;
   border-radius: var(--rounded-full);
   border: 1px solid var(--gray-300);
@@ -17115,16 +17111,16 @@ var counterContainer = (bgColor, hasIcon) => import_react72.css`
   width: ${hasIcon ? "auto" : "var(--spacing-base)"};
   height: var(--spacing-base);
 `;
-var counterZeroValue = import_react72.css`
+var counterZeroValue = import_react71.css`
   background: var(--gray-800);
   border-radius: var(--rounded-full);
   width: 2px;
   height: 2px;
 `;
-var counterTripleValue = import_react72.css`
+var counterTripleValue = import_react71.css`
   position: relative;
 `;
-var counterIcon = import_react72.css`
+var counterIcon = import_react71.css`
   border-radius: var(--rounded-full);
   background: var(--white);
   color: var(--brand-secondary-3);
@@ -17171,7 +17167,7 @@ init_emotion_jsx_shim();
 
 // src/components/DashedBox/DashedBox.styles.ts
 init_emotion_jsx_shim();
-var import_react73 = require("@emotion/react");
+var import_react72 = require("@emotion/react");
 var minHeight = (prop) => {
   const values = {
     auto: "auto",
@@ -17190,7 +17186,7 @@ var alignItemsConvert = (props) => {
   };
   return alignment[props];
 };
-var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react73.css`
+var DashedBoxContainer = ({ textAlign, boxHeight, bgColor }) => import_react72.css`
   align-items: ${alignItemsConvert(textAlign)};
   border: 2px dashed var(--gray-300);
   border-radius: var(--rounded-base);
@@ -17223,17 +17219,17 @@ init_emotion_jsx_shim();
 init_emotion_jsx_shim();
 var import_date4 = require("@internationalized/date");
 var import_CgCalendar2 = require("@react-icons/all-files/cg/CgCalendar");
-var import_react76 = require("react");
+var import_react75 = require("react");
 var import_Popover = require("reakit/Popover");
 
 // src/components/Popover/Popover.styles.ts
 init_emotion_jsx_shim();
-var import_react74 = require("@emotion/react");
-var PopoverBtn = import_react74.css`
+var import_react73 = require("@emotion/react");
+var PopoverBtn = import_react73.css`
   border: none;
   background: none;
 `;
-var PopoverDefaulterTriggerBtn = import_react74.css`
+var PopoverDefaulterTriggerBtn = import_react73.css`
   border: none;
   background: none;
   padding: var(--spacing-2xs);
@@ -17243,7 +17239,7 @@ var PopoverDefaulterTriggerBtn = import_react74.css`
     background-color: rgba(0, 0, 0, 0.05);
   }
 `;
-var Popover = (maxWidth = "220px") => import_react74.css`
+var Popover = (maxWidth = "220px") => import_react73.css`
   border-left: var(--spacing-xs) solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
@@ -17258,35 +17254,35 @@ var Popover = (maxWidth = "220px") => import_react74.css`
 
 // src/components/DateTimePicker/DateTimePicker.styles.ts
 init_emotion_jsx_shim();
-var import_react75 = require("@emotion/react");
-var input2 = import_react75.css`
+var import_react74 = require("@emotion/react");
+var input2 = import_react74.css`
   padding: 0;
   display: flex;
   justify-content: space-between;
   gap: var(--spacing-xs);
 `;
-var inputLabel = import_react75.css`
+var inputLabel = import_react74.css`
   flex-grow: 1;
   max-width: none;
 `;
-var inputLabelFocal = import_react75.css`
+var inputLabelFocal = import_react74.css`
   color: var(--typography-base);
   font-weight: var(--fw-regular);
   font-style: normal;
 `;
-var trigger = import_react75.css`
+var trigger = import_react74.css`
   display: flex;
   justify-content: space-between;
   flex-grow: 0;
   margin: 2px 0;
 `;
-var popover = import_react75.css`
+var popover = import_react74.css`
   padding: var(--spacing-md);
   max-width: unset;
   container-type: inline-size;
   width: clamp(200px, 100%, 540px);
 `;
-var popoverInnerContent = import_react75.css`
+var popoverInnerContent = import_react74.css`
   display: grid;
   gap: var(--spacing-base);
 
@@ -17300,7 +17296,7 @@ var popoverInnerContent = import_react75.css`
     }
   }
 `;
-var calendarSection = import_react75.css`
+var calendarSection = import_react74.css`
   grid-column: 1;
   grid-row: 1 / 3;
   max-width: 240px;
@@ -17310,20 +17306,20 @@ var calendarSection = import_react75.css`
     grid-row: 1 / 2;
   }
 `;
-var timeSection = import_react75.css`
+var timeSection = import_react74.css`
   align-self: center;
   border-bottom: solid 1px var(--gray-300);
   padding-bottom: var(--spacing-md);
 `;
-var tzSection = import_react75.css`
+var tzSection = import_react74.css`
   align-self: stretch;
 `;
-var datePart = import_react75.css`
+var datePart = import_react74.css`
   text-overflow: ellipsis;
   overflow: hidden;
   white-space: nowrap;
 `;
-var datePartButton = import_react75.css`
+var datePartButton = import_react74.css`
   // this allows the button to be as wide as the text
   min-width: 0;
   margin-right: auto;
@@ -17443,7 +17439,7 @@ var TIMEZONE_OPTIONS = timeZoneOptions.map((v) => {
     value: tz
   };
 });
-var DateTimePickerContext = (0, import_react76.createContext)({
+var DateTimePickerContext = (0, import_react75.createContext)({
   clearValue() {
   },
   changeDate() {
@@ -17452,7 +17448,7 @@ var DateTimePickerContext = (0, import_react76.createContext)({
   }
 });
 function useDateTimePickerContext() {
-  return (0, import_react76.useContext)(DateTimePickerContext);
+  return (0, import_react75.useContext)(DateTimePickerContext);
 }
 var DateTimePicker = ({
   id,
@@ -17476,41 +17472,41 @@ var DateTimePicker = ({
   ...props
 }) => {
   const popover2 = (0, import_Popover.usePopoverState)({ placement, unstable_offset: offset });
-  const parsedValue = (0, import_react76.useMemo)(() => tryParseAbsolute(value == null ? void 0 : value.datetime, value == null ? void 0 : value.timeZone), [value]);
-  const parsedMinVisible = (0, import_react76.useMemo)(
+  const parsedValue = (0, import_react75.useMemo)(() => tryParseAbsolute(value == null ? void 0 : value.datetime, value == null ? void 0 : value.timeZone), [value]);
+  const parsedMinVisible = (0, import_react75.useMemo)(
     () => tryParseAbsoluteToDateString(minVisible, value == null ? void 0 : value.timeZone),
     [minVisible, value == null ? void 0 : value.timeZone]
   );
-  const parseMaxVisible = (0, import_react76.useMemo)(
+  const parseMaxVisible = (0, import_react75.useMemo)(
     () => tryParseAbsoluteToDateString(maxVisible, value == null ? void 0 : value.timeZone),
     [maxVisible, value == null ? void 0 : value.timeZone]
   );
-  const [draftDate, setDraftDate] = (0, import_react76.useState)(null);
-  const [draftTime, setDraftTime] = (0, import_react76.useState)(null);
-  const [draftTimeZone, setDraftTimeZone] = (0, import_react76.useState)(() => {
+  const [draftDate, setDraftDate] = (0, import_react75.useState)(null);
+  const [draftTime, setDraftTime] = (0, import_react75.useState)(null);
+  const [draftTimeZone, setDraftTimeZone] = (0, import_react75.useState)(() => {
     const timeZone = (parsedValue == null ? void 0 : parsedValue.timeZone) || getLocalTimeZone();
     return TIMEZONE_OPTIONS.find(({ value: value2 }) => value2 === timeZone);
   });
-  (0, import_react76.useEffect)(() => {
+  (0, import_react75.useEffect)(() => {
     var _a;
     if (popover2.visible) {
       setDraftDate(tryToCalendarDate(parsedValue));
       setDraftTime((_a = tryToTime(parsedValue)) != null ? _a : new import_date4.Time(0, 0));
     }
   }, [parsedValue, popover2.visible]);
-  const handleDateChange = (0, import_react76.useCallback)((isoDate) => {
+  const handleDateChange = (0, import_react75.useCallback)((isoDate) => {
     setDraftDate((0, import_date4.parseDate)(isoDate));
   }, []);
-  const handleTimeChange = (0, import_react76.useCallback)((isoTime) => {
+  const handleTimeChange = (0, import_react75.useCallback)((isoTime) => {
     setDraftTime((0, import_date4.parseTime)(isoTime));
   }, []);
-  const handleTimezoneChange = (0, import_react76.useCallback)((timeZone) => {
+  const handleTimezoneChange = (0, import_react75.useCallback)((timeZone) => {
     if (!timeZone) {
       return;
     }
     setDraftTimeZone(timeZone);
   }, []);
-  const handleSelectClick = (0, import_react76.useCallback)(() => {
+  const handleSelectClick = (0, import_react75.useCallback)(() => {
     const now = /* @__PURE__ */ new Date();
     const date = draftDate || new import_date4.CalendarDate(now.getFullYear(), now.getMonth() + 1, now.getDate());
     const newValue = {
@@ -17524,12 +17520,12 @@ var DateTimePicker = ({
     onChange == null ? void 0 : onChange(newValue);
     popover2.hide();
   }, [draftDate, draftTime, draftTimeZone == null ? void 0 : draftTimeZone.value, onChange, parsedValue == null ? void 0 : parsedValue.timeZone, popover2]);
-  const handleClearClick = (0, import_react76.useCallback)(() => {
+  const handleClearClick = (0, import_react75.useCallback)(() => {
     setDraftDate(null);
     setDraftTime(null);
     onChange == null ? void 0 : onChange({ datetime: null });
   }, [onChange]);
-  const contextValue = (0, import_react76.useMemo)(
+  const contextValue = (0, import_react75.useMemo)(
     () => ({
       clearValue: handleClearClick,
       changeDate: handleDateChange,
@@ -17640,27 +17636,27 @@ var DateTimePicker = ({
 init_emotion_jsx_shim();
 var import_TbCheck = require("@react-icons/all-files/tb/TbCheck");
 var import_TbMinus = require("@react-icons/all-files/tb/TbMinus");
-var import_react78 = __toESM(require("react"));
+var import_react77 = __toESM(require("react"));
 
 // src/components/DescriptionList/DescriptionList.styles.ts
 init_emotion_jsx_shim();
-var import_react77 = require("@emotion/react");
-var descriptionListHorizontal = import_react77.css`
+var import_react76 = require("@emotion/react");
+var descriptionListHorizontal = import_react76.css`
   display: grid;
   grid-template-columns: max-content auto;
   gap: var(--spacing-sm) var(--spacing-md);
 `;
-var descriptionListVertical = import_react77.css`
+var descriptionListVertical = import_react76.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
 `;
-var descriptionListLabelStyles = import_react77.css`
+var descriptionListLabelStyles = import_react76.css`
   display: flex;
   align-items: center;
   color: var(--gray-500);
 `;
-var descriptionListValueStyles = import_react77.css`
+var descriptionListValueStyles = import_react76.css`
   display: flex;
   align-items: center;
   margin: 0;
@@ -17668,7 +17664,7 @@ var descriptionListValueStyles = import_react77.css`
 
 // src/components/DescriptionList/DescriptionList.tsx
 var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
-var DescriptionList = import_react78.default.forwardRef(
+var DescriptionList = import_react77.default.forwardRef(
   ({ items, variant = "horizontal", ...listProps }, ref) => {
     if (!(items == null ? void 0 : items.length)) {
       return null;
@@ -17679,7 +17675,7 @@ var DescriptionList = import_react78.default.forwardRef(
         ref,
         css: variant === "vertical" ? descriptionListVertical : descriptionListHorizontal,
         ...listProps,
-        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_react78.default.Fragment, { children: [
+        children: items == null ? void 0 : items.map(({ label, value }) => /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(import_react77.default.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("dt", { css: descriptionListLabelStyles, children: label }),
           /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("dd", { css: descriptionListValueStyles, children: typeof value === "boolean" ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(DescriptionListValueBoolean, { value }) : value })
         ] }, label))
@@ -17700,8 +17696,8 @@ var React15 = __toESM(require("react"));
 
 // src/components/Details/Details.styles.ts
 init_emotion_jsx_shim();
-var import_react79 = require("@emotion/react");
-var details = import_react79.css`
+var import_react78 = require("@emotion/react");
+var details = import_react78.css`
   &[open] {
     & > summary svg {
       rotate: 0deg;
@@ -17711,7 +17707,7 @@ var details = import_react79.css`
     }
   }
 `;
-var detailsContent = import_react79.css`
+var detailsContent = import_react78.css`
   position: relative;
   animation: ${fadeInRtl} var(--duration-fast) var(--timing-ease-out) forwards;
   will-change: height;
@@ -17720,14 +17716,14 @@ var detailsContent = import_react79.css`
     z-index: 1;
   }
 `;
-var detailsContentIndented = import_react79.css`
+var detailsContentIndented = import_react78.css`
   margin-left: calc(1.25rem / 2);
   border-left: 1px solid var(--gray-300);
   padding-top: calc(var(--spacing-md) / 2);
   padding-left: var(--spacing-base);
   padding-bottom: var(--spacing-sm);
 `;
-var summary = import_react79.css`
+var summary = import_react78.css`
   align-items: center;
   cursor: pointer;
   display: grid;
@@ -17740,14 +17736,14 @@ var summary = import_react79.css`
     display: none;
   }
 `;
-var summaryCompact = import_react79.css`
+var summaryCompact = import_react78.css`
   padding: 0;
 `;
-var summaryIcon = import_react79.css`
+var summaryIcon = import_react78.css`
   transition: rotate var(--duration-fast) var(--timing-ease-out);
   rotate: -90deg;
 `;
-var summaryIconVisiblyHidden = import_react79.css`
+var summaryIconVisiblyHidden = import_react78.css`
   visibility: hidden;
 `;
 
@@ -17808,12 +17804,12 @@ var Details = ({
 
 // src/components/DragHandle/DragHandle.tsx
 init_emotion_jsx_shim();
-var import_react81 = require("react");
+var import_react80 = require("react");
 
 // src/components/DragHandle/DragHandle.styles.ts
 init_emotion_jsx_shim();
-var import_react80 = require("@emotion/react");
-var DragHandleStyles = import_react80.css`
+var import_react79 = require("@emotion/react");
+var DragHandleStyles = import_react79.css`
   background: transparent;
   border: 0;
   position: relative;
@@ -17834,14 +17830,14 @@ var DragHandleStyles = import_react80.css`
     opacity: 1;
   }
 `;
-var DragHandleDisabled = import_react80.css`
+var DragHandleDisabled = import_react79.css`
   opacity: 0.3;
   pointer-events: none;
 `;
 
 // src/components/DragHandle/DragHandle.tsx
 var import_jsx_runtime70 = require("@emotion/react/jsx-runtime");
-var DragHandle = (0, import_react81.forwardRef)(
+var DragHandle = (0, import_react80.forwardRef)(
   ({ disableDnd, height = "3.125rem", ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
       "button",
@@ -17859,13 +17855,13 @@ var DragHandle = (0, import_react81.forwardRef)(
 // src/components/Drawer/Drawer.tsx
 init_emotion_jsx_shim();
 var import_CgChevronRight2 = require("@react-icons/all-files/cg/CgChevronRight");
-var import_react84 = __toESM(require("react"));
+var import_react83 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 
 // src/components/Drawer/Drawer.styles.ts
 init_emotion_jsx_shim();
-var import_react82 = require("@emotion/react");
-var drawerStyles = (bgColor = "var(--white)") => import_react82.css`
+var import_react81 = require("@emotion/react");
+var drawerStyles = (bgColor = "var(--white)") => import_react81.css`
   background-color: ${bgColor};
   display: flex;
   gap: var(--spacing-sm);
@@ -17875,20 +17871,20 @@ var drawerStyles = (bgColor = "var(--white)") => import_react82.css`
   padding-top: var(--spacing-sm);
   height: 100%;
 `;
-var drawerCloseButtonStyles = import_react82.css`
+var drawerCloseButtonStyles = import_react81.css`
   display: block;
   padding: 0;
   background: transparent;
   border: none;
 `;
-var headerWrapperStyles = import_react82.css`
+var headerWrapperStyles = import_react81.css`
   display: flex;
   justify-content: flex-end;
   align-items: center;
   flex: 1;
   margin-right: var(--spacing-sm);
 `;
-var drawerHeaderStyles = import_react82.css`
+var drawerHeaderStyles = import_react81.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
@@ -17896,21 +17892,21 @@ var drawerHeaderStyles = import_react82.css`
   padding-inline: var(--spacing-base);
   flex: 1;
 `;
-var drawerRendererStyles = import_react82.css`
+var drawerRendererStyles = import_react81.css`
   inset: 0;
   overflow: hidden;
   z-index: var(--z-drawer);
 `;
-var drawerInnerStyles = import_react82.css`
+var drawerInnerStyles = import_react81.css`
   height: 100%;
   overflow: auto;
   padding: 0 var(--spacing-md) var(--spacing-base) var(--spacing-sm);
   ${scrollbarStyles}
 `;
-var drawerHeading = import_react82.css`
+var drawerHeading = import_react81.css`
   font-size: var(--fs-base);
 `;
-var slideDrawerIn = import_react82.keyframes`
+var slideDrawerIn = import_react81.keyframes`
 0% {
   transform: translate(0);
   opacity: 0;
@@ -17925,7 +17921,7 @@ var slideDrawerIn = import_react82.keyframes`
   transform: translate(0);
 }
 `;
-var slideDrawerInLeftAligned = import_react82.keyframes`
+var slideDrawerInLeftAligned = import_react81.keyframes`
 0% {
   transform: translate(0);
   opacity: 0;
@@ -17940,7 +17936,7 @@ var slideDrawerInLeftAligned = import_react82.keyframes`
   transform: translate(0);
 }
 `;
-var drawerWrapperStyles = import_react82.css`
+var drawerWrapperStyles = import_react81.css`
   position: absolute;
   inset-block: 0;
   right: 0;
@@ -17953,14 +17949,14 @@ var drawerWrapperStyles = import_react82.css`
 
   --drawer-close-icon-rotation: 0deg;
 `;
-var drawerWrapperLeftAlignedStyles = import_react82.css`
+var drawerWrapperLeftAlignedStyles = import_react81.css`
   animation-name: ${slideDrawerInLeftAligned};
   left: 0;
   right: auto;
 
   --drawer-close-icon-rotation: 180deg;
 `;
-var drawerWrapperOverlayStyles = import_react82.css`
+var drawerWrapperOverlayStyles = import_react81.css`
   position: absolute;
   inset: 0;
   animation: ${fadeIn} var(--duration-fast) ease-out;
@@ -17972,9 +17968,9 @@ var drawerWrapperOverlayStyles = import_react82.css`
 
 // src/components/Drawer/DrawerProvider.tsx
 init_emotion_jsx_shim();
-var import_react83 = require("react");
+var import_react82 = require("react");
 var import_jsx_runtime71 = require("@emotion/react/jsx-runtime");
-var DrawerContext = (0, import_react83.createContext)({
+var DrawerContext = (0, import_react82.createContext)({
   providerId: "",
   drawersRegistry: [],
   registerDrawer: () => {
@@ -17990,9 +17986,9 @@ function renderDrawerId(drawer) {
   return `${drawer.stackId ? `\u{1F95E} ${drawer.stackId} ` : ""}\u{1F194} ${drawer.id}${drawer.instanceKey ? ` \u{1F511} ${drawer.instanceKey}` : ""}`;
 }
 var DrawerProvider = ({ children }) => {
-  const [drawersRegistry, setDrawersRegistry] = (0, import_react83.useState)([]);
-  const providerId = (0, import_react83.useRef)(crypto.randomUUID());
-  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = (0, import_react83.useState)(void 0);
+  const [drawersRegistry, setDrawersRegistry] = (0, import_react82.useState)([]);
+  const providerId = (0, import_react82.useRef)(crypto.randomUUID());
+  const [drawerTakeoverStackId, setDrawerTakeoverStackId] = (0, import_react82.useState)(void 0);
   useShortcut({
     handler: () => {
       var _a, _b;
@@ -18000,7 +17996,7 @@ var DrawerProvider = ({ children }) => {
     },
     shortcut: "escape"
   });
-  const registerDrawer = (0, import_react83.useCallback)(
+  const registerDrawer = (0, import_react82.useCallback)(
     ({ drawer, onFirstRender }) => {
       setDrawersRegistry((currentValue) => {
         var _a, _b;
@@ -18036,7 +18032,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  const unregisterDrawer = (0, import_react83.useCallback)(
+  const unregisterDrawer = (0, import_react82.useCallback)(
     (drawer) => {
       setDrawersRegistry((currentValue) => {
         return currentValue.filter((d) => {
@@ -18050,7 +18046,7 @@ var DrawerProvider = ({ children }) => {
     },
     [setDrawersRegistry]
   );
-  const registerTakeoverStackId = (0, import_react83.useCallback)(
+  const registerTakeoverStackId = (0, import_react82.useCallback)(
     (stackId) => {
       if (drawerTakeoverStackId !== stackId) {
         setDrawerTakeoverStackId(stackId);
@@ -18058,7 +18054,7 @@ var DrawerProvider = ({ children }) => {
     },
     [drawerTakeoverStackId]
   );
-  const unregisterTakeoverStackId = (0, import_react83.useCallback)(
+  const unregisterTakeoverStackId = (0, import_react82.useCallback)(
     (stackId) => {
       if (drawerTakeoverStackId === stackId) {
         setDrawerTakeoverStackId(void 0);
@@ -18083,7 +18079,7 @@ var DrawerProvider = ({ children }) => {
   );
 };
 var useDrawer = () => {
-  return (0, import_react83.useContext)(DrawerContext);
+  return (0, import_react82.useContext)(DrawerContext);
 };
 var useCloseCurrentDrawer = () => {
   const context = useDrawer();
@@ -18102,17 +18098,17 @@ function isEqualDrawerInstance(a, b) {
 // src/components/Drawer/Drawer.tsx
 var import_jsx_runtime72 = require("@emotion/react/jsx-runtime");
 var defaultSackId = "_default";
-var CurrentDrawerContext = (0, import_react84.createContext)({});
+var CurrentDrawerContext = (0, import_react83.createContext)({});
 var useCurrentDrawer = () => {
-  return (0, import_react84.useContext)(CurrentDrawerContext);
+  return (0, import_react83.useContext)(CurrentDrawerContext);
 };
-var Drawer = import_react84.default.forwardRef(
+var Drawer = import_react83.default.forwardRef(
   ({ minWidth, maxWidth, position, leftAligned, ...drawerProps }, ref) => {
     var _a;
     const { stackId: inheritedStackId } = useCurrentDrawer();
     const { drawerTakeoverStackId } = useDrawer();
     const drawerRendererProps = { width: drawerProps.width, minWidth, maxWidth, position, leftAligned };
-    const resolvedStickyStackIdRef = (0, import_react84.useRef)((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
+    const resolvedStickyStackIdRef = (0, import_react83.useRef)((_a = drawerTakeoverStackId != null ? drawerTakeoverStackId : drawerProps.stackId) != null ? _a : inheritedStackId);
     return resolvedStickyStackIdRef.current ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DrawerInner, { ref, ...drawerProps, stackId: resolvedStickyStackIdRef.current }) : /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(DrawerProvider, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DrawerInner, { ref, ...drawerProps }),
       /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DrawerRenderer, { stackId: defaultSackId, ...drawerRendererProps })
@@ -18133,9 +18129,9 @@ var DrawerInner = ({
   testId = "side-dialog"
 }) => {
   const { registerDrawer, unregisterDrawer, providerId } = useDrawer();
-  const closeButtonRef = (0, import_react84.useRef)(null);
-  const [rendererElement, setRendererElement] = (0, import_react84.useState)(null);
-  (0, import_react84.useEffect)(() => {
+  const closeButtonRef = (0, import_react83.useRef)(null);
+  const [rendererElement, setRendererElement] = (0, import_react83.useState)(null);
+  (0, import_react83.useEffect)(() => {
     registerDrawer({
       drawer: {
         width,
@@ -18214,15 +18210,15 @@ init_emotion_jsx_shim();
 
 // src/components/Drawer/DrawerContent.styles.ts
 init_emotion_jsx_shim();
-var import_react85 = require("@emotion/react");
-var DrawerContent = import_react85.css`
+var import_react84 = require("@emotion/react");
+var DrawerContent = import_react84.css`
   background: var(--gray-50);
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
   height: 100%;
 `;
-var DrawerContentInner = import_react85.css`
+var DrawerContentInner = import_react84.css`
   background: var(--white);
   padding: var(--spacing-base);
   flex: 1;
@@ -18231,7 +18227,7 @@ var DrawerContentInner = import_react85.css`
   ${scrollbarStyles}
   border-radius: var(--rounded-base);
 `;
-var DrawerContentBtnGroup = import_react85.css`
+var DrawerContentBtnGroup = import_react84.css`
   display: flex;
   gap: var(--spacing-sm);
   padding: 0 var(--spacing-base) var(--spacing-base);
@@ -18248,7 +18244,7 @@ var DrawerContent2 = ({ children, buttonGroup, noPadding = false, ...props }) =>
 
 // src/components/Drawer/DrawerRenderer.tsx
 init_emotion_jsx_shim();
-var import_react86 = require("react");
+var import_react85 = require("react");
 var import_jsx_runtime74 = require("@emotion/react/jsx-runtime");
 var drawerWidth = {
   narrow: "29rem",
@@ -18269,14 +18265,14 @@ var DrawerRenderer = ({
 }) => {
   const { drawersRegistry, providerId } = useDrawer();
   const drawersToRender = drawersRegistry.filter(({ stackId: sId }) => sId === stackId);
-  (0, import_react86.useEffect)(() => {
+  (0, import_react85.useEffect)(() => {
     drawersToRender.forEach(({ isFirstRender, onFirstRender }) => {
       if (isFirstRender) {
         onFirstRender == null ? void 0 : onFirstRender();
       }
     });
   }, [drawersToRender]);
-  const unionWidth = (0, import_react86.useMemo)(() => {
+  const unionWidth = (0, import_react85.useMemo)(() => {
     var _a;
     const rendererWidth = (_a = drawerWidth[width]) != null ? _a : width;
     if (withoutFluidWidth) {
@@ -18360,12 +18356,12 @@ var getDrawerAttributes = ({
 
 // src/components/Drawer/TakeoverDrawerRenderer.tsx
 init_emotion_jsx_shim();
-var import_react87 = require("react");
+var import_react86 = require("react");
 var import_jsx_runtime75 = require("@emotion/react/jsx-runtime");
 var TAKEOVER_STACK_ID = "takeover-stack";
 var TakeoverDrawerRenderer = (props) => {
   const { registerTakeoverStackId, unregisterTakeoverStackId } = useDrawer();
-  (0, import_react87.useEffect)(() => {
+  (0, import_react86.useEffect)(() => {
     registerTakeoverStackId(TAKEOVER_STACK_ID);
     return () => {
       unregisterTakeoverStackId(TAKEOVER_STACK_ID);
@@ -18379,12 +18375,12 @@ init_emotion_jsx_shim();
 
 // src/components/IconButton/IconButton.tsx
 init_emotion_jsx_shim();
-var import_react89 = require("react");
+var import_react88 = require("react");
 
 // src/components/IconButton/IconButton.styles.ts
 init_emotion_jsx_shim();
-var import_react88 = require("@emotion/react");
-var iconButton = import_react88.css`
+var import_react87 = require("@emotion/react");
+var iconButton = import_react87.css`
   padding: 0;
   max-width: unset;
   justify-content: center;
@@ -18392,26 +18388,26 @@ var iconButton = import_react88.css`
   height: var(--button-size);
 `;
 var sizes2 = {
-  xs: import_react88.css`
+  xs: import_react87.css`
     --button-size: 2rem;
   `,
-  sm: import_react88.css`
+  sm: import_react87.css`
     --button-size: 2.25rem;
   `,
-  md: import_react88.css`
+  md: import_react87.css`
     --button-size: 2.5rem;
   `
 };
 var variants = {
   square: null,
-  rounded: import_react88.css`
+  rounded: import_react87.css`
     border-radius: 50%;
   `
 };
 
 // src/components/IconButton/IconButton.tsx
 var import_jsx_runtime76 = require("@emotion/react/jsx-runtime");
-var IconButton = (0, import_react89.forwardRef)(
+var IconButton = (0, import_react88.forwardRef)(
   ({ children, size = "md", variant = "square", ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Button, { ref, css: [iconButton, variants[variant], sizes2[size]], ...props, children });
   }
@@ -18423,12 +18419,12 @@ init_emotion_jsx_shim();
 
 // src/components/Image/Image.tsx
 init_emotion_jsx_shim();
-var import_react91 = require("react");
+var import_react90 = require("react");
 
 // src/components/Image/Image.styles.ts
 init_emotion_jsx_shim();
-var import_react90 = require("@emotion/react");
-var imageWrapper = import_react90.css`
+var import_react89 = require("@emotion/react");
+var imageWrapper = import_react89.css`
   position: relative;
   display: inline-flex;
   flex-direction: column;
@@ -18436,10 +18432,10 @@ var imageWrapper = import_react90.css`
   max-width: 100%;
   max-height: 100%;
 `;
-var imageWrapperLoading = import_react90.css`
+var imageWrapperLoading = import_react89.css`
   animation: ${skeletonLoading} var(--duration-slow) linear infinite alternate;
 `;
-var img = import_react90.css`
+var img = import_react89.css`
   object-fit: contain;
   max-width: 100%;
   max-height: 100%;
@@ -18447,17 +18443,17 @@ var img = import_react90.css`
   opacity: var(--opacity-0);
   margin: 0 auto;
 `;
-var imgLoading = import_react90.css`
+var imgLoading = import_react89.css`
   opacity: 0;
 `;
-var imgLoaded = import_react90.css`
+var imgLoaded = import_react89.css`
   animation: ${fadeIn} var(--duration-fast) var(--timing-ease-out) forwards;
   opacity: 1;
 `;
-var brokenImage = import_react90.css`
+var brokenImage = import_react89.css`
   height: 160px;
 `;
-var brokenImageMessage = import_react90.css`
+var brokenImageMessage = import_react89.css`
   position: absolute;
   bottom: var(--spacing-xs);
   left: var(--spacing-xs);
@@ -18466,13 +18462,13 @@ var brokenImageMessage = import_react90.css`
   padding-inline: var(--spacing-xs);
   font-size: var(--fs-sm);
 `;
-var variantFillImageWrapper = import_react90.css`
+var variantFillImageWrapper = import_react89.css`
   display: flex;
   justify-content: center;
   height: 100%;
   width: 100%;
 `;
-var variantFillImageImg = import_react90.css`
+var variantFillImageImg = import_react89.css`
   height: inherit;
   width: inherit;
 `;
@@ -18526,10 +18522,10 @@ function Image({
   height,
   ...imgAttribs
 }) {
-  const [loading, setLoading] = (0, import_react91.useState)(true);
-  const [loadErrorText, setLoadErrorText] = (0, import_react91.useState)("");
+  const [loading, setLoading] = (0, import_react90.useState)(true);
+  const [loadErrorText, setLoadErrorText] = (0, import_react90.useState)("");
   const errorText = "The text you provided is not a valid URL";
-  const updateImageSrc = (0, import_react91.useCallback)(() => {
+  const updateImageSrc = (0, import_react90.useCallback)(() => {
     let message = "";
     try {
       if (src === "") {
@@ -18547,7 +18543,7 @@ function Image({
     }
     setLoadErrorText(message);
   }, [setLoadErrorText, src]);
-  (0, import_react91.useEffect)(() => {
+  (0, import_react90.useEffect)(() => {
     updateImageSrc();
   }, [src]);
   const handleLoadEvent = () => {
@@ -18623,14 +18619,14 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/CreateTeamIntegrationTile.tsx
 init_emotion_jsx_shim();
-var import_react93 = require("@emotion/react");
+var import_react92 = require("@emotion/react");
 var import_CgAdd3 = require("@react-icons/all-files/cg/CgAdd");
 var import_CgChevronRight3 = require("@react-icons/all-files/cg/CgChevronRight");
 
 // src/components/Tiles/styles/IntegrationTile.styles.ts
 init_emotion_jsx_shim();
-var import_react92 = require("@emotion/react");
-var IntegrationTileContainer = import_react92.css`
+var import_react91 = require("@emotion/react");
+var IntegrationTileContainer = import_react91.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -18661,22 +18657,22 @@ var IntegrationTileContainer = import_react92.css`
     }
   }
 `;
-var IntegrationTileBtnDashedBorder = import_react92.css`
+var IntegrationTileBtnDashedBorder = import_react91.css`
   border: 1px dashed var(--gray-800);
 `;
-var IntegrationTileTitle = import_react92.css`
+var IntegrationTileTitle = import_react91.css`
   display: block;
   font-weight: var(--fw-bold);
   margin: 0 0 var(--spacing-base);
   max-width: 13rem;
 `;
-var IntegrationTitleLogo = import_react92.css`
+var IntegrationTitleLogo = import_react91.css`
   display: block;
   max-width: 10rem;
   max-height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationTileName = import_react92.css`
+var IntegrationTileName = import_react91.css`
   color: var(--gray-500);
   display: -webkit-box;
   -webkit-line-clamp: 1;
@@ -18689,7 +18685,7 @@ var IntegrationTileName = import_react92.css`
   position: absolute;
   bottom: calc(var(--spacing-base) * 3.8);
 `;
-var IntegrationAddedText = import_react92.css`
+var IntegrationAddedText = import_react91.css`
   align-items: center;
   background: var(--brand-secondary-3);
   border-radius: 0 var(--rounded-md) 0 var(--rounded-md);
@@ -18704,7 +18700,7 @@ var IntegrationAddedText = import_react92.css`
   top: 0;
   right: 0;
 `;
-var IntegrationCustomBadgeText = (theme) => import_react92.css`
+var IntegrationCustomBadgeText = (theme) => import_react91.css`
   align-items: center;
   border-radius: var(--rounded-sm) 0 var(--rounded-sm) 0;
   background: ${theme === "gray" ? "var(--brand-secondary-2)" : "var(--typography-base)"};
@@ -18718,26 +18714,26 @@ var IntegrationCustomBadgeText = (theme) => import_react92.css`
   top: 0;
   left: 0;
 `;
-var IntegrationAuthorBadgeIcon = import_react92.css`
+var IntegrationAuthorBadgeIcon = import_react91.css`
   position: absolute;
   bottom: var(--spacing-sm);
   right: var(--spacing-xs);
   max-height: 1rem;
 `;
-var IntegrationTitleFakeButton = import_react92.css`
+var IntegrationTitleFakeButton = import_react91.css`
   font-size: var(--fs-xs);
   gap: var(--spacing-sm);
   padding: var(--spacing-sm) var(--spacing-base);
   text-transform: uppercase;
 `;
-var IntegrationTileFloatingButton = import_react92.css`
+var IntegrationTileFloatingButton = import_react91.css`
   position: absolute;
   bottom: var(--spacing-base);
   gap: var(--spacing-sm);
   font-size: var(--fs-xs);
   overflow: hidden;
 `;
-var IntegrationTileFloatingButtonMessage = (clicked) => import_react92.css`
+var IntegrationTileFloatingButtonMessage = (clicked) => import_react91.css`
   strong,
   span:first-of-type {
     transition: opacity var(--duration-fast) var(--timing-ease-out);
@@ -18784,7 +18780,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_CgChevronRight3.CgChevronRight,
               iconColor: "currentColor",
               size: 20,
-              css: import_react93.css`
+              css: import_react92.css`
               order: 1;
             `
             }
@@ -18794,7 +18790,7 @@ var CreateTeamIntegrationTile = ({
               icon: import_CgAdd3.CgAdd,
               iconColor: "currentColor",
               size: 16,
-              css: import_react93.css`
+              css: import_react92.css`
               order: -1;
             `
             }
@@ -18890,9 +18886,9 @@ var EditTeamIntegrationTile = ({
 
 // src/components/Tiles/IntegrationComingSoon.tsx
 init_emotion_jsx_shim();
-var import_react94 = require("@emotion/react");
+var import_react93 = require("@emotion/react");
 var import_CgHeart2 = require("@react-icons/all-files/cg/CgHeart");
-var import_react95 = require("react");
+var import_react94 = require("react");
 var import_jsx_runtime83 = require("@emotion/react/jsx-runtime");
 var IntegrationComingSoon = ({
   name,
@@ -18902,12 +18898,12 @@ var IntegrationComingSoon = ({
   timing = 1e3,
   ...props
 }) => {
-  const [upVote, setUpVote] = (0, import_react95.useState)(false);
+  const [upVote, setUpVote] = (0, import_react94.useState)(false);
   const handleUpVoteInteraction = () => {
     setUpVote((prev) => !prev);
     onUpVoteClick();
   };
-  (0, import_react95.useEffect)(() => {
+  (0, import_react94.useEffect)(() => {
     if (upVote) {
       const timer = setTimeout(() => setUpVote(false), timing);
       return () => {
@@ -18939,7 +18935,7 @@ var IntegrationComingSoon = ({
               /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                 "span",
                 {
-                  css: import_react94.css`
+                  css: import_react93.css`
             text-transform: uppercase;
             color: var(--gray-500);
           `,
@@ -18963,8 +18959,8 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/IntegrationLoadingTile.styles.ts
 init_emotion_jsx_shim();
-var import_react96 = require("@emotion/react");
-var IntegrationLoadingTileContainer = import_react96.css`
+var import_react95 = require("@emotion/react");
+var IntegrationLoadingTileContainer = import_react95.css`
   align-items: center;
   box-sizing: border-box;
   border-radius: var(--rounded-base);
@@ -18991,17 +18987,17 @@ var IntegrationLoadingTileContainer = import_react96.css`
     }
   }
 `;
-var IntegrationLoadingTileImg = import_react96.css`
+var IntegrationLoadingTileImg = import_react95.css`
   width: 10rem;
   height: 4rem;
   margin: 0 auto;
 `;
-var IntegrationLoadingTileText = import_react96.css`
+var IntegrationLoadingTileText = import_react95.css`
   width: 5rem;
   height: var(--spacing-sm);
   margin: var(--spacing-sm) 0;
 `;
-var IntegrationLoadingFrame = import_react96.css`
+var IntegrationLoadingFrame = import_react95.css`
   animation: ${skeletonLoading} 1s linear infinite alternate;
   border-radius: var(--rounded-base);
 `;
@@ -19021,13 +19017,13 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/IntegrationModalIcon.styles.ts
 init_emotion_jsx_shim();
-var import_react97 = require("@emotion/react");
-var IntegrationModalIconContainer = import_react97.css`
+var import_react96 = require("@emotion/react");
+var IntegrationModalIconContainer = import_react96.css`
   position: relative;
   width: 50px;
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalImage = import_react97.css`
+var IntegrationModalImage = import_react96.css`
   position: absolute;
   inset: 0;
   margin: auto;
@@ -19121,9 +19117,9 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/Tile.styles.ts
 init_emotion_jsx_shim();
-var import_react98 = require("@emotion/react");
+var import_react97 = require("@emotion/react");
 var tileBorderSize = "1px";
-var Tile = import_react98.css`
+var Tile = import_react97.css`
   background: var(--white);
   cursor: pointer;
   border: ${tileBorderSize} solid var(--gray-300);
@@ -19145,7 +19141,7 @@ var Tile = import_react98.css`
     pointer-events: none;
   }
 `;
-var TileIsSelected = import_react98.css`
+var TileIsSelected = import_react97.css`
   border: calc(${tileBorderSize} + 1px) solid var(--primary-action-active);
   z-index: 1; // Used to elevate active state border over other Tile borders
 `;
@@ -19170,12 +19166,12 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/TileContainer.styles.ts
 init_emotion_jsx_shim();
-var import_react99 = require("@emotion/react");
-var TileContainerWrapper = (theme, padding) => import_react99.css`
+var import_react98 = require("@emotion/react");
+var TileContainerWrapper = (theme, padding) => import_react98.css`
   background: ${theme};
   padding: ${padding != "none" ? `var(--spacing-${padding})` : "0"};
 `;
-var TileContainerInner = (gap, templateColumns) => import_react99.css`
+var TileContainerInner = (gap, templateColumns) => import_react98.css`
   display: grid;
   grid-template-columns: ${templateColumns};
   gap: var(--spacing-${gap});
@@ -19206,11 +19202,11 @@ init_emotion_jsx_shim();
 
 // src/components/Tiles/styles/TileText.styles.ts
 init_emotion_jsx_shim();
-var import_react100 = require("@emotion/react");
-var TileHeading = import_react100.css`
+var import_react99 = require("@emotion/react");
+var TileHeading = import_react99.css`
   font-size: var(--fs-base);
 `;
-var TileText = import_react100.css`
+var TileText = import_react99.css`
   color: var(--gray-500);
   font-size: var(--fs-sm);
   line-height: 1.2;
@@ -19233,32 +19229,32 @@ var TileText2 = ({ as = "heading", children, ...props }) => {
 
 // src/components/IntegrationModalHeader/IntegrationModalHeader.styles.ts
 init_emotion_jsx_shim();
-var import_react101 = require("@emotion/react");
-var IntegrationModalHeaderSVGBackground = import_react101.css`
+var import_react100 = require("@emotion/react");
+var IntegrationModalHeaderSVGBackground = import_react100.css`
   position: absolute;
   top: 0;
   left: 0;
 `;
-var IntegrationModalHeaderGroup = import_react101.css`
+var IntegrationModalHeaderGroup = import_react100.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   margin: 0 0 var(--spacing-md);
   position: relative;
 `;
-var IntegrationModalHeaderTitleGroup = import_react101.css`
+var IntegrationModalHeaderTitleGroup = import_react100.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-base);
   padding: 0 var(--spacing-base);
 `;
-var IntegrationModalHeaderTitle = import_react101.css`
+var IntegrationModalHeaderTitle = import_react100.css`
   margin-top: 0;
 `;
-var IntegrationModalHeaderMenuPlacement = import_react101.css`
+var IntegrationModalHeaderMenuPlacement = import_react100.css`
   margin-bottom: var(--spacing-base);
 `;
-var IntegrationModalHeaderContentWrapper = import_react101.css`
+var IntegrationModalHeaderContentWrapper = import_react100.css`
   background: var(--white);
   display: flex;
   padding: var(--spacing-base);
@@ -19327,7 +19323,7 @@ var IntegrationModalHeader = ({ icon, name, menu, children }) => {
 
 // src/components/JsonEditor/JsonEditor.tsx
 init_emotion_jsx_shim();
-var import_react102 = __toESM(require("@monaco-editor/react"));
+var import_react101 = __toESM(require("@monaco-editor/react"));
 var import_jsx_runtime91 = require("@emotion/react/jsx-runtime");
 var minEditorHeightPx = 150;
 var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
@@ -19339,7 +19335,7 @@ var JsonEditor = ({ defaultValue, onChange, jsonSchema, height, readOnly }) => {
     effectiveHeight = minEditorHeightPx;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime91.jsx)(
-    import_react102.default,
+    import_react101.default,
     {
       height: effectiveHeight,
       className: "uniform-json-editor",
@@ -19380,16 +19376,16 @@ var import_core = require("@dnd-kit/core");
 var import_modifiers = require("@dnd-kit/modifiers");
 var import_sortable = require("@dnd-kit/sortable");
 var import_utilities = require("@dnd-kit/utilities");
-var import_react105 = require("react");
+var import_react104 = require("react");
 
 // src/utils/useDebouncedCallback.ts
 init_emotion_jsx_shim();
-var import_react103 = require("react");
+var import_react102 = require("react");
 function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
-  const timeout = (0, import_react103.useRef)();
-  const waitTimeout = (0, import_react103.useRef)();
-  const cb = (0, import_react103.useRef)(callback);
-  const lastCall = (0, import_react103.useRef)();
+  const timeout = (0, import_react102.useRef)();
+  const waitTimeout = (0, import_react102.useRef)();
+  const cb = (0, import_react102.useRef)(callback);
+  const lastCall = (0, import_react102.useRef)();
   const clear = () => {
     if (timeout.current) {
       clearTimeout(timeout.current);
@@ -19400,13 +19396,13 @@ function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
       waitTimeout.current = void 0;
     }
   };
-  (0, import_react103.useEffect)(() => {
+  (0, import_react102.useEffect)(() => {
     return () => clear();
   }, []);
-  (0, import_react103.useEffect)(() => {
+  (0, import_react102.useEffect)(() => {
     cb.current = callback;
   }, deps);
-  return (0, import_react103.useMemo)(() => {
+  return (0, import_react102.useMemo)(() => {
     const execute = () => {
       clear();
       if (!lastCall.current) return;
@@ -19434,12 +19430,12 @@ function useDebouncedCallback(callback, deps, delay, maxWait = 0) {
 
 // src/components/KeyValueInput/KeyValueInput.styles.ts
 init_emotion_jsx_shim();
-var import_react104 = require("@emotion/react");
-var LabelStyles = import_react104.css`
+var import_react103 = require("@emotion/react");
+var LabelStyles = import_react103.css`
   text-transform: uppercase;
   font-weight: var(--fw-medium);
 `;
-var SelectKeyValueRowStyles = import_react104.css`
+var SelectKeyValueRowStyles = import_react103.css`
   animation: var(--duration-fast) var(--timing-ease-out);
   align-items: flex-start;
   display: grid;
@@ -19448,7 +19444,7 @@ var SelectKeyValueRowStyles = import_react104.css`
   background-color: white;
   flex: 1;
 `;
-var rowWrapper = import_react104.css`
+var rowWrapper = import_react103.css`
   display: flex;
   background-color: white;
   border-radius: var(--rounded-sm);
@@ -19471,22 +19467,22 @@ var KeyValueInput = ({
   errors,
   onFocusChange
 }) => {
-  const [isDragging, setIsDragging] = (0, import_react105.useState)(false);
-  const popoverStoresMap = (0, import_react105.useRef)({});
-  const lastRowFirstInputRef = (0, import_react105.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react104.useState)(false);
+  const popoverStoresMap = (0, import_react104.useRef)({});
+  const lastRowFirstInputRef = (0, import_react104.useRef)(null);
   const sensors = (0, import_core.useSensors)(
     (0, import_core.useSensor)(import_core.PointerSensor),
     (0, import_core.useSensor)(import_core.KeyboardSensor, {
       coordinateGetter: import_sortable.sortableKeyboardCoordinates
     })
   );
-  const valueWithIds = (0, import_react105.useMemo)(() => {
+  const valueWithIds = (0, import_react104.useMemo)(() => {
     return value.map((item, index) => ({ ...item, id: generateItemId(item, index) }));
   }, [value]);
-  const handleAddOptionRow = (0, import_react105.useCallback)(() => {
+  const handleAddOptionRow = (0, import_react104.useCallback)(() => {
     onChange([...value, newItemDefault]);
   }, [onChange, value, newItemDefault]);
-  const handleDeleteOptionRow = (0, import_react105.useCallback)(
+  const handleDeleteOptionRow = (0, import_react104.useCallback)(
     (deleteIndex) => {
       const updatedOptions = value.filter((_, index) => index !== deleteIndex);
       onChange(updatedOptions);
@@ -19500,7 +19496,7 @@ var KeyValueInput = ({
     [onFocusChange],
     300
   );
-  const handleUpdateOptionRow = (0, import_react105.useCallback)(
+  const handleUpdateOptionRow = (0, import_react104.useCallback)(
     (rowIndex, rowValue) => {
       onChange(
         value.map((item, index) => {
@@ -19513,7 +19509,7 @@ var KeyValueInput = ({
     },
     [onChange, value]
   );
-  const handleDragEnd = (0, import_react105.useCallback)(
+  const handleDragEnd = (0, import_react104.useCallback)(
     (e) => {
       setIsDragging(false);
       const { active: active2, over } = e;
@@ -19526,16 +19522,16 @@ var KeyValueInput = ({
     },
     [value, valueWithIds, onChange, setIsDragging]
   );
-  const handleDragStart = (0, import_react105.useCallback)(() => {
+  const handleDragStart = (0, import_react104.useCallback)(() => {
     Object.values(popoverStoresMap.current).forEach((store) => {
       store.hide();
     });
     setIsDragging(true);
   }, [setIsDragging]);
-  const handleDragCancel = (0, import_react105.useCallback)(() => {
+  const handleDragCancel = (0, import_react104.useCallback)(() => {
     setIsDragging(false);
   }, [setIsDragging]);
-  (0, import_react105.useEffect)(() => {
+  (0, import_react104.useEffect)(() => {
     if (lastRowFirstInputRef.current && value.length > 1) {
       lastRowFirstInputRef.current.focus();
     }
@@ -19712,34 +19708,34 @@ init_emotion_jsx_shim();
 
 // src/components/LimitsBar/LimitsBar.styles.ts
 init_emotion_jsx_shim();
-var import_react106 = require("@emotion/react");
-var LimitsBarContainer = import_react106.css`
+var import_react105 = require("@emotion/react");
+var LimitsBarContainer = import_react105.css`
   margin-block: var(--spacing-sm);
 `;
-var LimitsBarProgressBar = import_react106.css`
+var LimitsBarProgressBar = import_react105.css`
   background: var(--gray-100);
   margin-top: var(--spacing-sm);
   position: relative;
   overflow: hidden;
   height: 0.25rem;
 `;
-var LimitsBarProgressBarLine = import_react106.css`
+var LimitsBarProgressBarLine = import_react105.css`
   position: absolute;
   inset: 0;
   transition: transform var(--duration-fast) var(--timing-ease-out);
 `;
-var LimitsBarLabelContainer = import_react106.css`
+var LimitsBarLabelContainer = import_react105.css`
   display: flex;
   justify-content: space-between;
   font-weight: var(--fw-bold);
 `;
-var LimitsBarLabel = import_react106.css`
+var LimitsBarLabel = import_react105.css`
   font-size: var(--fs-baase);
 `;
-var LimitsBarBgColor = (statusColor) => import_react106.css`
+var LimitsBarBgColor = (statusColor) => import_react105.css`
   background: ${statusColor};
 `;
-var LimitsBarTextColor = (statusColor) => import_react106.css`
+var LimitsBarTextColor = (statusColor) => import_react105.css`
   color: ${statusColor};
 `;
 
@@ -19793,8 +19789,8 @@ init_emotion_jsx_shim();
 
 // src/components/LinkList/LinkList.styles.ts
 init_emotion_jsx_shim();
-var import_react107 = require("@emotion/react");
-var LinkListContainer = (padding) => import_react107.css`
+var import_react106 = require("@emotion/react");
+var LinkListContainer = (padding) => import_react106.css`
   padding: ${padding};
 
   ${mq("sm")} {
@@ -19802,7 +19798,7 @@ var LinkListContainer = (padding) => import_react107.css`
     grid-row: 1 / last-line;
   }
 `;
-var LinkListTitle = import_react107.css`
+var LinkListTitle = import_react106.css`
   font-weight: var(--fw-bold);
   font-size: var(--fs-sm);
   text-transform: uppercase;
@@ -19819,15 +19815,15 @@ var LinkList = ({ title: title2, padding = "var(--spacing-md)", children, ...pro
 
 // src/components/List/ScrollableList.tsx
 init_emotion_jsx_shim();
-var import_react109 = require("@emotion/react");
+var import_react108 = require("@emotion/react");
 
 // src/components/List/styles/ScrollableList.styles.ts
 init_emotion_jsx_shim();
-var import_react108 = require("@emotion/react");
-var ScrollableListContainer = import_react108.css`
+var import_react107 = require("@emotion/react");
+var ScrollableListContainer = import_react107.css`
   position: relative;
 `;
-var ScrollableListInner = import_react108.css`
+var ScrollableListInner = import_react107.css`
   background: var(--gray-50);
   border-top: 1px solid var(--gray-200);
   border-bottom: 1px solid var(--gray-200);
@@ -19856,7 +19852,7 @@ var ScrollableList = ({ label, children, ...props }) => {
     label ? /* @__PURE__ */ (0, import_jsx_runtime95.jsx)(
       "span",
       {
-        css: import_react109.css`
+        css: import_react108.css`
             ${labelText}
           `,
         children: label
@@ -19872,8 +19868,8 @@ var import_CgCheck4 = require("@react-icons/all-files/cg/CgCheck");
 
 // src/components/List/styles/ScrollableListItem.styles.ts
 init_emotion_jsx_shim();
-var import_react110 = require("@emotion/react");
-var ScrollableListItemContainer = import_react110.css`
+var import_react109 = require("@emotion/react");
+var ScrollableListItemContainer = import_react109.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -19882,13 +19878,13 @@ var ScrollableListItemContainer = import_react110.css`
   min-height: 52px;
   transition: border-color var(--duration-fast) var(--timing-ease-out);
 `;
-var ScrollableListItemShadow = import_react110.css`
+var ScrollableListItemShadow = import_react109.css`
   box-shadow: var(--shadow-base);
 `;
-var ScrollableListItemActive = import_react110.css`
+var ScrollableListItemActive = import_react109.css`
   border-color: var(--brand-secondary-3);
 `;
-var ScrollableListItemBtn = import_react110.css`
+var ScrollableListItemBtn = import_react109.css`
   align-items: center;
   border: none;
   background: transparent;
@@ -19903,27 +19899,27 @@ var ScrollableListItemBtn = import_react110.css`
     outline: none;
   }
 `;
-var ScrollableListInputLabel = import_react110.css`
+var ScrollableListInputLabel = import_react109.css`
   align-items: center;
   cursor: pointer;
   display: flex;
   padding: var(--spacing-xs) var(--spacing-base) var(--spacing-xs);
   flex-grow: 1;
 `;
-var ScrollableListInputText = import_react110.css`
+var ScrollableListInputText = import_react109.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   flex-grow: 1;
   flex-wrap: wrap;
 `;
-var ScrollableListHiddenInput = import_react110.css`
+var ScrollableListHiddenInput = import_react109.css`
   position: absolute;
   height: 0;
   width: 0;
   opacity: 0;
 `;
-var ScrollableListIcon = import_react110.css`
+var ScrollableListIcon = import_react109.css`
   border-radius: var(--rounded-full);
   background: var(--brand-secondary-3);
   color: var(--white);
@@ -19931,7 +19927,7 @@ var ScrollableListIcon = import_react110.css`
   min-width: 24px;
   opacity: 0;
 `;
-var ScrollableListIconVisible = import_react110.css`
+var ScrollableListIconVisible = import_react109.css`
   animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
 `;
 
@@ -20020,10 +20016,10 @@ init_emotion_jsx_shim();
 
 // src/components/LoadingIndicator/LoadingIndicator.styles.ts
 init_emotion_jsx_shim();
-var import_react111 = require("@emotion/react");
+var import_react110 = require("@emotion/react");
 function bounceFade(size) {
   const bounceHeight = size === "lg" ? 10 : 5;
-  return import_react111.keyframes`
+  return import_react110.keyframes`
     0%, 100% {
       opacity: 1.0;
       transform: translateY(0);
@@ -20041,13 +20037,13 @@ function bounceFade(size) {
     }
 `;
 }
-var loader = import_react111.css`
+var loader = import_react110.css`
   display: inline-flex;
   justify-content: center;
 `;
 function loadingDot(size, backgroundColor) {
   const dotSize = size === "lg" ? 8 : 4;
-  return import_react111.css`
+  return import_react110.css`
     background-color: ${backgroundColor};
     display: block;
     border-radius: var(--rounded-full);
@@ -20089,36 +20085,36 @@ var LoadingIndicator = ({ size = "lg", color = "gray", ...props }) => {
 
 // src/components/LoadingOverlay/LoadingOverlay.tsx
 init_emotion_jsx_shim();
-var import_react113 = require("react");
+var import_react112 = require("react");
 
 // src/components/LoadingOverlay/LoadingOverlay.styles.ts
 init_emotion_jsx_shim();
-var import_react112 = require("@emotion/react");
-var loadingOverlayContainer = import_react112.css`
+var import_react111 = require("@emotion/react");
+var loadingOverlayContainer = import_react111.css`
   inset: 0;
   overflow: hidden;
   justify-content: center;
   padding: var(--spacing-xl);
   overflow-y: auto;
 `;
-var loadingOverlayVisible = import_react112.css`
+var loadingOverlayVisible = import_react111.css`
   display: flex;
 `;
-var loadingOverlayHidden = import_react112.css`
+var loadingOverlayHidden = import_react111.css`
   display: none;
 `;
-var loadingOverlayBackground = (bgColor) => import_react112.css`
+var loadingOverlayBackground = (bgColor) => import_react111.css`
   background: ${bgColor};
   opacity: 0.92;
   position: absolute;
   inset: 0 0;
 `;
-var loadingOverlayBody = import_react112.css`
+var loadingOverlayBody = import_react111.css`
   align-items: center;
   display: flex;
   flex-direction: column;
 `;
-var loadingOverlayMessage = import_react112.css`
+var loadingOverlayMessage = import_react111.css`
   color: var(--gray-600);
   margin: var(--spacing-base) 0 0;
 `;
@@ -20136,14 +20132,14 @@ var LoadingOverlay = ({
   children,
   position = "absolute"
 }) => {
-  const lottieRef = (0, import_react113.useRef)(null);
-  const onLoopComplete = (0, import_react113.useCallback)(() => {
+  const lottieRef = (0, import_react112.useRef)(null);
+  const onLoopComplete = (0, import_react112.useCallback)(() => {
     var _a, _b, _c;
     if (isPaused && !((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.stop();
     }
   }, [isPaused]);
-  (0, import_react113.useEffect)(() => {
+  (0, import_react112.useEffect)(() => {
     var _a, _b, _c, _d, _e, _f;
     if (!isPaused && ((_b = (_a = lottieRef.current) == null ? void 0 : _a.animationItem) == null ? void 0 : _b.isPaused)) {
       (_c = lottieRef.current) == null ? void 0 : _c.play();
@@ -20222,12 +20218,12 @@ init_emotion_jsx_shim();
 
 // src/components/MediaCard/MediaCard.tsx
 init_emotion_jsx_shim();
-var import_react117 = require("react");
+var import_react116 = require("react");
 
 // src/components/Popover/Popover.tsx
 init_emotion_jsx_shim();
-var import_react114 = require("@ariakit/react");
-var import_react115 = require("react");
+var import_react113 = require("@ariakit/react");
+var import_react114 = require("react");
 var import_jsx_runtime100 = require("@emotion/react/jsx-runtime");
 var Popover3 = ({
   iconColor = "action",
@@ -20244,13 +20240,13 @@ var Popover3 = ({
   maxWidth,
   ...otherProps
 }) => {
-  const popover2 = (0, import_react114.usePopoverStore)({ placement });
-  (0, import_react115.useEffect)(() => {
+  const popover2 = (0, import_react113.usePopoverStore)({ placement });
+  (0, import_react114.useEffect)(() => {
     onInit == null ? void 0 : onInit({ store: popover2 });
   }, [popover2]);
-  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_react114.PopoverProvider, { store: popover2, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)(import_react113.PopoverProvider, { store: popover2, children: [
     /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(
-      import_react114.PopoverDisclosure,
+      import_react113.PopoverDisclosure,
       {
         css: [PopoverBtn, trigger2 ? void 0 : PopoverDefaulterTriggerBtn],
         title: buttonText,
@@ -20261,18 +20257,18 @@ var Popover3 = ({
         ] })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_react114.Popover, { unmountOnHide: true, css: Popover(maxWidth), ...otherProps, "aria-label": ariaLabel, children })
+    /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(import_react113.Popover, { unmountOnHide: true, css: Popover(maxWidth), ...otherProps, "aria-label": ariaLabel, children })
   ] });
 };
 var usePopoverComponentContext = () => {
-  const contextValue = (0, import_react114.usePopoverContext)();
+  const contextValue = (0, import_react113.usePopoverContext)();
   return contextValue;
 };
 
 // src/components/MediaCard/MediaCard.styles.ts
 init_emotion_jsx_shim();
-var import_react116 = require("@emotion/react");
-var cardBase = import_react116.css`
+var import_react115 = require("@emotion/react");
+var cardBase = import_react115.css`
   --mediacard-title-color: var(--gray-500);
   display: flex;
   flex-direction: column;
@@ -20296,7 +20292,7 @@ var cardBase = import_react116.css`
     cursor: default;
   }
 `;
-var coverWrapper = import_react116.css`
+var coverWrapper = import_react115.css`
   position: relative;
   display: flex;
   align-items: center;
@@ -20309,10 +20305,10 @@ var coverWrapper = import_react116.css`
   outline: none;
   border: 0;
 `;
-var contentWrapper = import_react116.css`
+var contentWrapper = import_react115.css`
   padding: var(--spacing-sm);
 `;
-var title = import_react116.css`
+var title = import_react115.css`
   font-size: var(--fs-sm);
   color: var(--mediacard-title-color);
   white-space: nowrap;
@@ -20327,7 +20323,7 @@ var title = import_react116.css`
     outline: 2px solid var(--primary-action-default);
   }
 `;
-var subtitle = import_react116.css`
+var subtitle = import_react115.css`
   font-size: var(--fs-xs);
   color: var(--gray-500);
   white-space: nowrap;
@@ -20338,13 +20334,13 @@ var subtitle = import_react116.css`
   background-color: transparent;
   max-width: 100%;
 `;
-var sideSection = import_react116.css`
+var sideSection = import_react115.css`
   cursor: default;
 `;
-var menuSection = import_react116.css`
+var menuSection = import_react115.css`
   cursor: default;
 `;
-var menuButton = import_react116.css`
+var menuButton = import_react115.css`
   padding: var(--spacing-2xs);
   border-radius: var(--rounded-sm);
   border-width: 0;
@@ -20368,7 +20364,7 @@ var MediaCard = ({
   buttonType,
   ...cardProps
 }) => {
-  const onStopPropogation = (0, import_react117.useCallback)((e) => {
+  const onStopPropogation = (0, import_react116.useCallback)((e) => {
     e.stopPropagation();
   }, []);
   const hasMenuItems = Array.isArray(menuItems) ? menuItems.length > 0 : Boolean(menuItems);
@@ -20427,14 +20423,14 @@ var MediaCard = ({
 
 // src/components/Modal/Modal.tsx
 init_emotion_jsx_shim();
-var import_react119 = require("@ariakit/react");
+var import_react118 = require("@ariakit/react");
 var import_CgClose5 = require("@react-icons/all-files/cg/CgClose");
-var import_react120 = __toESM(require("react"));
+var import_react119 = __toESM(require("react"));
 
 // src/components/Modal/Modal.styles.ts
 init_emotion_jsx_shim();
-var import_react118 = require("@emotion/react");
-var modalStyles = import_react118.css`
+var import_react117 = require("@emotion/react");
+var modalStyles = import_react117.css`
   border: none;
   position: relative;
   max-width: calc(100% - var(--spacing-base) * 2);
@@ -20448,16 +20444,16 @@ var modalStyles = import_react118.css`
     opacity: 0.4;
   }
 `;
-var modalSizeSmall = import_react118.css`
+var modalSizeSmall = import_react117.css`
   width: clamp(280px, 100vw, 400px);
 `;
-var modalSizeMedium = import_react118.css`
+var modalSizeMedium = import_react117.css`
   width: clamp(280px, 100vw, 600px);
 `;
-var modalSizeLarge = import_react118.css`
+var modalSizeLarge = import_react117.css`
   width: clamp(280px, 100vw, 800px);
 `;
-var modalInnerStyles = import_react118.css`
+var modalInnerStyles = import_react117.css`
   position: relative;
   width: 100%;
   display: flex;
@@ -20470,7 +20466,7 @@ var modalInnerStyles = import_react118.css`
   box-shadow: var(--elevation-500);
   border-radius: var(--rounded-base);
 `;
-var modalHeaderStyles = import_react118.css`
+var modalHeaderStyles = import_react117.css`
   display: flex;
   align-items: flex-start;
   gap: var(--spacing-base);
@@ -20478,10 +20474,10 @@ var modalHeaderStyles = import_react118.css`
   font-family: var(--ff-base);
   line-height: 1.2;
 `;
-var modalHeaderHeaderStyles = import_react118.css`
+var modalHeaderHeaderStyles = import_react117.css`
   max-width: calc(100% - 3rem);
 `;
-var modalCloseButtonStyles = import_react118.css`
+var modalCloseButtonStyles = import_react117.css`
   background: transparent;
   border: none;
   color: var(--gray-300);
@@ -20496,7 +20492,7 @@ var modalCloseButtonStyles = import_react118.css`
     color: var(--gray-400);
   }
 `;
-var modalContentStyles = import_react118.css`
+var modalContentStyles = import_react117.css`
   position: relative;
   flex: 1;
   overflow: auto;
@@ -20505,11 +20501,11 @@ var modalContentStyles = import_react118.css`
   border-radius: var(--rounded-sm);
   ${scrollbarStyles}
 `;
-var modalDialogWrapper = (hasCloseButton) => import_react118.css`
+var modalDialogWrapper = (hasCloseButton) => import_react117.css`
   height: 100%;
   padding: ${hasCloseButton ? 0 : "var(--spacing-md)"} var(--spacing-lg) var(--spacing-md);
 `;
-var modalDialogInnerStyles = import_react118.css`
+var modalDialogInnerStyles = import_react117.css`
   // we need to override the gap of the modalInnerStyles when using a modal dialog
   > div {
     gap: 0;
@@ -20520,7 +20516,7 @@ var modalDialogInnerStyles = import_react118.css`
 var import_jsx_runtime102 = require("@emotion/react/jsx-runtime");
 var defaultModalWidth = "75rem";
 var defaultModalHeight = "51rem";
-var Modal = import_react120.default.forwardRef(
+var Modal = import_react119.default.forwardRef(
   ({
     header: header2,
     children,
@@ -20534,8 +20530,8 @@ var Modal = import_react120.default.forwardRef(
     disableBodyScroll = false,
     ...modalProps
   }, ref) => {
-    const mouseDownInsideModal = (0, import_react120.useRef)(false);
-    const dialogRef = (0, import_react120.useRef)(null);
+    const mouseDownInsideModal = (0, import_react119.useRef)(false);
+    const dialogRef = (0, import_react119.useRef)(null);
     const size = {
       sm: modalSizeSmall,
       md: modalSizeMedium,
@@ -20547,7 +20543,7 @@ var Modal = import_react120.default.forwardRef(
       },
       shortcut: "escape"
     });
-    (0, import_react120.useEffect)(() => {
+    (0, import_react119.useEffect)(() => {
       var _a;
       if (!document.contains(dialogRef.current)) {
         console.warn(
@@ -20599,7 +20595,7 @@ var Modal = import_react120.default.forwardRef(
           e.preventDefault();
         },
         ...modalProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_react119.PortalContext.Provider, { value: dialogRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime102.jsx)(import_react118.PortalContext.Provider, { value: dialogRef.current, children: /* @__PURE__ */ (0, import_jsx_runtime102.jsxs)(
           "div",
           {
             css: [modalInnerStyles, { height: height === "auto" ? "auto" : "100%" }],
@@ -20647,9 +20643,9 @@ Modal.displayName = "Modal";
 
 // src/components/Modal/ModalDialog.tsx
 init_emotion_jsx_shim();
-var import_react121 = require("react");
+var import_react120 = require("react");
 var import_jsx_runtime103 = require("@emotion/react/jsx-runtime");
-var ModalDialog = (0, import_react121.forwardRef)(
+var ModalDialog = (0, import_react120.forwardRef)(
   ({ header: header2, buttonGroup, modalSize = "lg", children, height = "auto", onRequestClose, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime103.jsx)(
       Modal,
@@ -20676,11 +20672,12 @@ ModalDialog.displayName = "ModalDialog";
 
 // src/components/Objects/ObjectGridContainer.tsx
 init_emotion_jsx_shim();
+var import_react122 = require("react");
 
 // src/components/Objects/styles/ObjectGridContainer.styles.ts
 init_emotion_jsx_shim();
-var import_react122 = require("@emotion/react");
-var ObjectGridContainer = (gridCount) => import_react122.css`
+var import_react121 = require("@emotion/react");
+var ObjectGridContainer = (gridCount) => import_react121.css`
   display: grid;
   grid-template-columns: repeat(${gridCount}, minmax(250px, 1fr));
   gap: var(--spacing-base);
@@ -20688,9 +20685,20 @@ var ObjectGridContainer = (gridCount) => import_react122.css`
 
 // src/components/Objects/ObjectGridContainer.tsx
 var import_jsx_runtime104 = require("@emotion/react/jsx-runtime");
-var ObjectGridContainer2 = ({ gridCount = 3, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)("div", { "data-testid": "object-grid-container", css: ObjectGridContainer(gridCount), children });
-};
+var ObjectGridContainer2 = (0, import_react122.forwardRef)(
+  ({ gridCount = 3, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime104.jsx)(
+      "div",
+      {
+        ref,
+        "data-testid": "object-grid-container",
+        css: ObjectGridContainer(gridCount),
+        ...props,
+        children
+      }
+    );
+  }
+);
 
 // src/components/Objects/ObjectGridItem.tsx
 init_emotion_jsx_shim();
@@ -20708,6 +20716,7 @@ var ObjectGridItem = import_react123.css`
 
   &[aria-selected='true'] {
     border: 1px solid var(--accent-dark);
+    transition: border-color var(--duration-fast) var(--timing-ease-out);
   }
 
   &[aria-selected='false'] {
@@ -20716,20 +20725,54 @@ var ObjectGridItem = import_react123.css`
     }
   }
 `;
+var ObjectGridWithOnClick = import_react123.css`
+  cursor: pointer;
+  &:hover,
+  &:focus {
+    border: 1px solid var(--accent-dark);
+    transition: border-color var(--duration-fast) var(--timing-ease-out);
+  }
+`;
 var ObjectGridItemMediaWrapper = import_react123.css`
   display: flex;
   flex: 1 1 0;
   position: relative;
 `;
+var ObjectGridItemMediaInner = import_react123.css`
+  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 = import_react123.css`
-  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 = import_react123.css`
+  min-width: 0;
 `;
 var ObjectGridItemImage = import_react123.css`
   object-fit: cover;
   width: 100%;
   height: auto;
 `;
+var ObjectGridItemSubtitle = import_react123.css`
+  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
 var import_jsx_runtime105 = require("@emotion/react/jsx-runtime");
@@ -20739,28 +20782,51 @@ var ObjectGridItem2 = ({
   rightSlot,
   menuItems,
   isSelected,
-  children
+  children,
+  menuTestId,
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { css: ObjectGridItem, "aria-selected": isSelected, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { css: ObjectGridItemMediaWrapper, children: cover }),
-    /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(HorizontalRhythm, { css: ObjectGridItemContentWrapper, justify: "space-between", gap: "sm", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(VerticalRhythm, { gap: "0", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
-        children
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(HorizontalRhythm, { gap: "xs", align: "flex-start", children: [
-        rightSlot,
-        menuItems ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
-          Menu,
-          {
-            menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(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__ */ (0, import_jsx_runtime105.jsxs)(
+    "div",
+    {
+      css: [ObjectGridItem, props.onClick ? ObjectGridWithOnClick : void 0],
+      "aria-selected": isSelected,
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { css: ObjectGridItemMediaWrapper, children: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { css: ObjectGridItemMediaInner, children: cover }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)("div", { css: ObjectGridItemContentWrapper, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(VerticalRhythm, { gap: "0", css: ObjectGridItemInnerWrapper, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(HorizontalRhythm, { gap: "xs", align: "center", children: header2 }),
+            /* @__PURE__ */ (0, import_jsx_runtime105.jsx)("div", { css: ObjectGridItemSubtitle, children })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime105.jsxs)(
+            HorizontalRhythm,
+            {
+              gap: "xs",
+              align: "flex-start",
+              css: { cursor: "default" },
+              onClick: hasOnClick ? onStopPropagation : void 0,
+              children: [
+                rightSlot,
+                menuItems ? /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(
+                  Menu,
+                  {
+                    menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime105.jsx)(MenuThreeDots, { "data-testid": menuTestId != null ? menuTestId : "object-grid-item-menu-btn" }),
+                    placement: "bottom-end",
+                    children: menuItems
+                  }
+                ) : null
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 
 // src/components/Objects/ObjectGridItemCardCover.tsx
@@ -20773,8 +20839,15 @@ var CoverImage = import_react124.css`
   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 = import_react124.css`
+  aspect-ratio: 16/9;
+  width: 100%;
+  height: 100%;
 `;
 var CoverIconWrapper = import_react124.css`
   position: relative;
@@ -20782,7 +20855,7 @@ var CoverIconWrapper = import_react124.css`
   align-items: center;
   justify-content: center;
   flex: 1;
-  overflow: hidden;
+  height: 100%;
 `;
 var CoverIconGhost = import_react124.css`
   position: absolute;
@@ -20794,7 +20867,7 @@ var CoverIconGhost = import_react124.css`
 `;
 var CoverSlot = import_react124.css`
   align-items: center;
-  background: var(--white);
+  background: var(--gray-50);
   display: flex;
   justify-content: center;
   position: absolute;
@@ -20824,64 +20897,89 @@ var CoverButton = import_react124.css`
     outline: none;
   }
 `;
-var CoverSelectedChip = import_react124.css`
-  animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
-  opacity: 0;
+var CoverSlotBottom = import_react124.css`
   position: absolute;
   bottom: var(--spacing-base);
+`;
+var CoverSlotBottomLeft = import_react124.css`
+  left: var(--spacing-base);
+`;
+var CoverSlotBottomRight = import_react124.css`
   right: var(--spacing-base);
 `;
+var CoverSelectedChip = import_react124.css`
+  animation: ${fadeInBottom} var(--duration-fast) var(--timing-ease-out) forwards;
+  opacity: 0;
+`;
 
 // src/components/Objects/ObjectGridItemCardCover.tsx
 var import_jsx_runtime106 = require("@emotion/react/jsx-runtime");
 var ObjectGridItemCardCover = (props) => {
   if ("imageUrl" in props && props.imageUrl) {
-    const { imageUrl } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    const { imageUrl, srcSet } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
       "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__ */ (0, import_jsx_runtime106.jsxs)("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon, iconColor: "currentColor", css: CoverIconGhost }),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon, iconColor: "currentColor", size: 48 })
-    ] });
+    const { icon, iconColor } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: CoverContainer, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { css: CoverIconWrapper, "data-testid": "object-grid-item-thumbnail", ...props, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", css: CoverIconGhost }),
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Icon, { icon, iconColor: iconColor != null ? iconColor : "currentColor", size: 48 })
+    ] }) });
   }
 };
 var ObjectGridItemCover = ({
   coverSlotLeft,
   coverSlotRight,
+  coverSlotBottomLeft,
+  coverSlotBottomRight,
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(import_jsx_runtime106.Fragment, { children: [
     coverSlotLeft ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ObjectGridItemCardCover, { ...props }),
-    coverSlotRight ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null
+    coverSlotRight ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
+    coverSlotBottomLeft ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [CoverSlotBottom, CoverSlotBottomLeft], children: coverSlotBottomLeft }) : null,
+    coverSlotBottomRight ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [CoverSlotBottom, CoverSlotBottomRight], children: coverSlotBottomRight }) : null
   ] });
 };
 var ObjectGridItemCoverButton = ({
   id,
   isSelected,
   onSelection,
-  coverSlotLeft,
-  coverSlotRight,
   selectedText = "selected",
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("button", { type: "button", css: CoverButton, onClick: () => onSelection(id), "aria-selected": isSelected, children: [
-    coverSlotLeft ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [CoverSlot, CoverSlotLeft], children: coverSlotLeft }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ObjectGridItemCardCover, { ...props }),
-    coverSlotRight ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: [CoverSlot, CoverSlotRight], children: coverSlotRight }) : null,
-    isSelected ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: CoverSelectedChip, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    "button",
+    {
+      type: "button",
+      css: CoverButton,
+      onClick: (e) => {
+        e.stopPropagation();
+        onSelection(id);
+      },
+      "aria-selected": isSelected,
+      children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+        ObjectGridItemCover,
+        {
+          ...props,
+          coverSlotBottomRight: isSelected ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { css: CoverSelectedChip, children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Chip, { text: selectedText, size: "xs", theme: "accent-dark" }) }) : null
+        }
+      )
+    }
+  );
 };
 
 // src/components/Objects/ObjectGridItemHeading.tsx
@@ -20892,12 +20990,13 @@ var import_react126 = require("react");
 init_emotion_jsx_shim();
 var import_react125 = require("@emotion/react");
 var ObjectGridItemHeading = import_react125.css`
+  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 = import_react125.css`
   min-width: 50px;
@@ -20908,10 +21007,15 @@ var import_jsx_runtime107 = require("@emotion/react/jsx-runtime");
 var ObjectGridItemHeading2 = ({
   heading,
   beforeHeadingSlot,
-  afterHeadingSlot
+  afterHeadingSlot,
+  tooltip,
+  ...props
 }) => {
   const [hasTruncation, setHasTruncation] = (0, import_react126.useState)(false);
   const headingRef = (0, import_react126.useRef)(null);
+  const onStopPropagation = (e) => {
+    e.stopPropagation();
+  };
   (0, import_react126.useEffect)(() => {
     const currentHeading = headingRef.current;
     const observer = new ResizeObserver((entries) => {
@@ -20929,10 +21033,10 @@ var ObjectGridItemHeading2 = ({
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", children: [
-    beforeHeadingSlot,
-    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Tooltip, { title: hasTruncation ? heading : "", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, children: heading }) }),
-    afterHeadingSlot
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(HorizontalRhythm, { align: "center", gap: "xs", css: { minWidth: 0 }, children: [
+    beforeHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: beforeHeadingSlot }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Tooltip, { title: hasTruncation && tooltip ? tooltip : "", children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { role: "heading", css: ObjectGridItemHeading, ref: headingRef, ...props, children: heading }) }),
+    afterHeadingSlot ? /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(HorizontalRhythm, { gap: "xs", align: "center", onClick: onStopPropagation, children: afterHeadingSlot }) : null
   ] });
 };
 
@@ -20943,9 +21047,10 @@ var ObjectGridItemIconWithTooltip = ({
   tooltipTitle,
   placement = "bottom-start",
   icon,
-  iconColor = "accent-dark"
+  iconColor = "accent-dark",
+  ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Tooltip, { title: tooltipTitle, placement, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon, iconColor, size: "1rem" }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Tooltip, { title: tooltipTitle, placement, ...props, css: { minWidth: "max-content" }, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { css: { whiteSpace: "nowrap" }, children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Icon, { icon, iconColor, size: "1rem" }) }) });
 };
 
 // src/components/Objects/ObjectGridItemLoadingSkeleton.tsx
@@ -22186,6 +22291,7 @@ var ParameterLinkInner = (0, import_react144.forwardRef)(
             disabled: disabled2,
             onClick: onConnectLink,
             title: "edit current selection",
+            "data-testid": "edit-current-selection",
             children: "edit"
           }
         ),
@@ -24634,7 +24740,11 @@ 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__ */ (0, import_jsx_runtime132.jsx)(RichTextToolbarIcon, { icon: "link" })
@@ -24645,7 +24755,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           "button",
           {
             onClick: () => {
-              activeElement === "unorderedList" ? editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(import_list2.INSERT_UNORDERED_LIST_COMMAND, void 0);
+              if (activeElement === "unorderedList") {
+                editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0);
+              } else {
+                editor.dispatchCommand(import_list2.INSERT_UNORDERED_LIST_COMMAND, void 0);
+              }
             },
             css: [
               richTextToolbarButton,
@@ -24658,7 +24772,11 @@ var RichTextToolbar = ({ config, customControls, onInsertTable, onInsertAsset })
           "button",
           {
             onClick: () => {
-              activeElement === "orderedList" ? editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0) : editor.dispatchCommand(import_list2.INSERT_ORDERED_LIST_COMMAND, void 0);
+              if (activeElement === "orderedList") {
+                editor.dispatchCommand(import_list2.REMOVE_LIST_COMMAND, void 0);
+              } else {
+                editor.dispatchCommand(import_list2.INSERT_ORDERED_LIST_COMMAND, void 0);
+              }
             },
             css: [
               richTextToolbarButton,
@@ -26022,7 +26140,6 @@ var StatusBulletContainer = import_react177.css`
   gap: var(--spacing-xs);
   line-height: 1;
   position: relative;
-  text-transform: lowercase;
 
   &:before {
     border-radius: var(--rounded-full);
@@ -26097,6 +26214,7 @@ var StatusBullet = ({
   hideText = false,
   size = "base",
   message,
+  compact = false,
   ...props
 }) => {
   const currentStateStyles = {
@@ -26111,7 +26229,7 @@ var StatusBullet = ({
     Deleted: StatusDeleted
   };
   const statusSize = size === "base" ? StatusBulletBase : StatusBulletSmall;
-  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+  const StatusComponent = () => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
     "span",
     {
       role: "status",
@@ -26119,7 +26237,11 @@ var StatusBullet = ({
       ...props,
       children: hideText ? null : message ? message : status
     }
-  ) });
+  );
+  if (compact) {
+    return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(StatusComponent, {});
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Tooltip, { title: message != null ? message : status, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(StatusComponent, {}) }) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {