@uniformdev/mesh-sdk-react 19.108.0 → 19.112.0

package/dist/index.esm.js

@@ -1375,8 +1375,8 @@ import {
   scrollbarStyles as scrollbarStyles2
 } from "@uniformdev/design-system";
 import * as React5 from "react";
-import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd";
-import { useDebounce as useDebounce2 } from "react-use";
+import { Draggable, Droppable } from "react-beautiful-dnd";
+import { useDebounce as useDebounce3 } from "react-use";
 import { v4 } from "uuid";
 
 // src/hooks/useLoadingDelay.ts
@@ -1412,6 +1412,23 @@ function useLoadingDelay(loading, { delay = 500, minDuration = 200 } = {
   return state === "DISPLAY" || state === "EXPIRE";
 }
 
+// src/components/DragDropContext.tsx
+import { useState as useState4 } from "react";
+import { DragDropContext as BaseDragDropContext } from "react-beautiful-dnd";
+import { useDebounce as useDebounce2 } from "react-use";
+import { jsx as jsx21 } from "@emotion/react/jsx-runtime";
+function DragDropContext({ children, ...props }) {
+  const [isReady, setIsReady] = useState4(false);
+  useDebounce2(
+    () => {
+      setIsReady(true);
+    },
+    300,
+    []
+  );
+  return /* @__PURE__ */ jsx21(BaseDragDropContext, { ...props, children: isReady ? children : null });
+}
+
 // src/components/legacy/EntrySearch/styles/EntrySearch.styles.ts
 import { css as css10 } from "@emotion/react";
 var entrySearchWrapper = css10`
@@ -1524,7 +1541,7 @@ var badgeIcon = css10`
 `;
 
 // src/components/legacy/EntrySearch/EntrySearch.tsx
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx22, jsxs as jsxs10 } from "@emotion/react/jsx-runtime";
 var DefaultNoResults = ({ searchText, selectedContentType }) => {
   let message = "No content found";
   if (selectedContentType && selectedContentType !== "any") {
@@ -1533,7 +1550,7 @@ var DefaultNoResults = ({ searchText, selectedContentType }) => {
   if (searchText) {
     message = `${message} for keyword '${searchText}'.`;
   }
-  return /* @__PURE__ */ jsx21(Callout, { type: "info", children: message });
+  return /* @__PURE__ */ jsx22(Callout, { type: "info", children: message });
 };
 var EntrySearch = ({
   search,
@@ -1577,7 +1594,7 @@ var EntrySearch = ({
   const [selectedListItems, setSelectedListItems] = React5.useState([]);
   const [loadingMore, setLoadingMore] = React5.useState(false);
   const listBoxId = React5.useRef(`x${v4()}`);
-  useDebounce2(
+  useDebounce3(
     () => {
       search(textInput, {
         count: pageSize,
@@ -1656,7 +1673,7 @@ var EntrySearch = ({
   const ResolvedSelectedItemComponent = selectedItemComponent || DefaultSelectedItem;
   const ResolvedNoResultsComponent = noResultsComponent || DefaultNoResults;
   const CompIcon = logoIcon && typeof logoIcon !== "string" ? logoIcon : null;
-  const resolvedIcon = CompIcon ? /* @__PURE__ */ jsx21(CompIcon, { css: badgeIcon }) : /* @__PURE__ */ jsx21("img", { src: logoIcon, alt: "Logo", css: badgeIcon });
+  const resolvedIcon = CompIcon ? /* @__PURE__ */ jsx22(CompIcon, { css: badgeIcon }) : /* @__PURE__ */ jsx22("img", { src: logoIcon, alt: "Logo", css: badgeIcon });
   const onDragEnd = (res) => {
     var _a2, _b2;
     if (res.destination && res.source.droppableId === ((_a2 = res.destination) == null ? void 0 : _a2.droppableId)) {
@@ -1670,7 +1687,7 @@ var EntrySearch = ({
       return result;
     }
   };
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       css: css11`
@@ -1685,7 +1702,7 @@ var EntrySearch = ({
         `,
           children: [
             showSearchBox ? /* @__PURE__ */ jsxs10(Fragment3, { children: [
-              /* @__PURE__ */ jsx21("div", { css: entrySearchWrapper, "data-testid": "component-search", children: /* @__PURE__ */ jsxs10(
+              /* @__PURE__ */ jsx22("div", { css: entrySearchWrapper, "data-testid": "component-search", children: /* @__PURE__ */ jsxs10(
                 "button",
                 {
                   css: entrySearchBtn,
@@ -1696,7 +1713,7 @@ var EntrySearch = ({
                   "aria-controls": `entry-search-config-${listBoxId.current}`,
                   children: [
                     resolvedIcon,
-                    /* @__PURE__ */ jsx21(
+                    /* @__PURE__ */ jsx22(
                       "span",
                       {
                         css: css11`
@@ -1705,7 +1722,7 @@ var EntrySearch = ({
                         children: "Select"
                       }
                     ),
-                    /* @__PURE__ */ jsx21("span", { css: entrySearchSelectIcon, children: /* @__PURE__ */ jsx21(
+                    /* @__PURE__ */ jsx22("span", { css: entrySearchSelectIcon, children: /* @__PURE__ */ jsx22(
                       ChevronDown_default,
                       {
                         css: [
@@ -1736,7 +1753,7 @@ var EntrySearch = ({
                   margin-bottom: var(--spacing-base);
                 `,
                         children: [
-                          /* @__PURE__ */ jsx21(
+                          /* @__PURE__ */ jsx22(
                             InputSelect3,
                             {
                               onChange: (e) => setContentTypeSelected(e.target.value),
@@ -1754,13 +1771,13 @@ var EntrySearch = ({
                               ]
                             }
                           ),
-                          /* @__PURE__ */ jsx21(
+                          /* @__PURE__ */ jsx22(
                             "div",
                             {
                               css: css11`
                     flex-grow: 1;
                   `,
-                              children: /* @__PURE__ */ jsx21(
+                              children: /* @__PURE__ */ jsx22(
                                 InputKeywordSearch,
                                 {
                                   inputFieldName: "searchText",
@@ -1784,8 +1801,8 @@ var EntrySearch = ({
                         tabIndex: 0,
                         "data-testid": "entry-list",
                         children: [
-                          /* @__PURE__ */ jsx21(LoadingOverlay, { isActive: showLoadingOverlay }),
-                          Array.isArray(results) && results.length > 0 ? results.map((result) => /* @__PURE__ */ jsx21(
+                          /* @__PURE__ */ jsx22(LoadingOverlay, { isActive: showLoadingOverlay }),
+                          Array.isArray(results) && results.length > 0 ? results.map((result) => /* @__PURE__ */ jsx22(
                             ResolvedRowComponent,
                             {
                               isSelected: selectedListItems.some((item) => item.id === result.id),
@@ -1793,14 +1810,14 @@ var EntrySearch = ({
                               triggerSelection: () => handleListItemSelect(result)
                             },
                             result.id
-                          )) : resultsLoading ? null : /* @__PURE__ */ jsx21(
+                          )) : resultsLoading ? null : /* @__PURE__ */ jsx22(
                             ResolvedNoResultsComponent,
                             {
                               searchText: textInput || textInput,
                               selectedContentType: (_b = (_a = contentTypes == null ? void 0 : contentTypes.find((t) => t.id === contentTypeSelected)) == null ? void 0 : _a.name) != null ? _b : contentTypeSelected
                             }
                           ),
-                          !resultsLoading && typeof totalResults !== "undefined" && results && (results == null ? void 0 : results.length) < totalResults && /* @__PURE__ */ jsx21("button", { type: "button", css: entrySearchLoadMoreBtn, onClick: handleLoadMoreClick, children: !loadingMore ? "Load More" : /* @__PURE__ */ jsx21(LoadingIndicator, {}) })
+                          !resultsLoading && typeof totalResults !== "undefined" && results && (results == null ? void 0 : results.length) < totalResults && /* @__PURE__ */ jsx22("button", { type: "button", css: entrySearchLoadMoreBtn, onClick: handleLoadMoreClick, children: !loadingMore ? "Load More" : /* @__PURE__ */ jsx22(LoadingIndicator, {}) })
                         ]
                       }
                     ),
@@ -1812,12 +1829,12 @@ var EntrySearch = ({
                   justify-content: space-between;
                 `,
                         children: [
-                          /* @__PURE__ */ jsx21("div", { children: onAddNew && ((_c = contentTypes == null ? void 0 : contentTypes.length) != null ? _c : 0) > 0 ? /* @__PURE__ */ jsx21(
+                          /* @__PURE__ */ jsx22("div", { children: onAddNew && ((_c = contentTypes == null ? void 0 : contentTypes.length) != null ? _c : 0) > 0 ? /* @__PURE__ */ jsx22(
                             Menu,
                             {
                               menuLabel: "Add new menu",
-                              menuTrigger: /* @__PURE__ */ jsx21(Button, { buttonType: "secondary", children: "Add New" }),
-                              children: contentTypes == null ? void 0 : contentTypes.map((ct) => /* @__PURE__ */ jsx21(
+                              menuTrigger: /* @__PURE__ */ jsx22(Button, { buttonType: "secondary", children: "Add New" }),
+                              children: contentTypes == null ? void 0 : contentTypes.map((ct) => /* @__PURE__ */ jsx22(
                                 MenuItem,
                                 {
                                   css: css11`
@@ -1839,8 +1856,8 @@ var EntrySearch = ({
                     gap: var(--spacing-base);
                   `,
                               children: [
-                                /* @__PURE__ */ jsx21(Button, { buttonType: "unimportant", onClick: handleCancelClick, children: "Cancel" }),
-                                /* @__PURE__ */ jsx21(
+                                /* @__PURE__ */ jsx22(Button, { buttonType: "unimportant", onClick: handleCancelClick, children: "Cancel" }),
+                                /* @__PURE__ */ jsx22(
                                   Button,
                                   {
                                     disabled: !selectedListItems.length,
@@ -1861,7 +1878,7 @@ var EntrySearch = ({
             ] }) : null,
             !listOpen ? multiSelect && selectedListItems.length > 1 ? (
               //enable dnd only if selected more then 1 item
-              /* @__PURE__ */ jsx21(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx21(Droppable, { droppableId: multiSelectId || "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs10(
+              /* @__PURE__ */ jsx22(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx22(Droppable, { droppableId: multiSelectId || "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs10(
                 "div",
                 {
                   ...provided.droppableProps,
@@ -1872,7 +1889,7 @@ var EntrySearch = ({
                   children: [
                     selectedListItems == null ? void 0 : selectedListItems.map((selectedItem, index) => {
                       if (selectedItem == null ? void 0 : selectedItem.id) {
-                        return /* @__PURE__ */ jsx21(Draggable, { draggableId: selectedItem.id, index, children: (provided2, snapshot) => {
+                        return /* @__PURE__ */ jsx22(Draggable, { draggableId: selectedItem.id, index, children: (provided2, snapshot) => {
                           return /* @__PURE__ */ jsxs10(
                             "div",
                             {
@@ -1883,7 +1900,7 @@ var EntrySearch = ({
                               ...provided2.dragHandleProps,
                               children: [
                                 /* @__PURE__ */ jsxs10("span", { css: draggableIconWrapper, children: [
-                                  /* @__PURE__ */ jsx21(
+                                  /* @__PURE__ */ jsx22(
                                     MoreVerticalAlt_default,
                                     {
                                       css: [draggableIcon, draggableIconOffset],
@@ -1891,9 +1908,9 @@ var EntrySearch = ({
                                       height: 24
                                     }
                                   ),
-                                  /* @__PURE__ */ jsx21(MoreVerticalAlt_default, { css: draggableIcon, width: 24, height: 24 })
+                                  /* @__PURE__ */ jsx22(MoreVerticalAlt_default, { css: draggableIcon, width: 24, height: 24 })
                                 ] }),
-                                /* @__PURE__ */ jsx21(
+                                /* @__PURE__ */ jsx22(
                                   ResolvedSelectedItemComponent,
                                   {
                                     logoIcon,
@@ -1913,7 +1930,7 @@ var EntrySearch = ({
                   ]
                 }
               ) }) })
-            ) : selectedListItems == null ? void 0 : selectedListItems.map((selectedItem) => /* @__PURE__ */ jsx21(
+            ) : selectedListItems == null ? void 0 : selectedListItems.map((selectedItem) => /* @__PURE__ */ jsx22(
               ResolvedSelectedItemComponent,
               {
                 logoIcon,
@@ -1978,7 +1995,7 @@ var productSearchRowActiveIcon = css12`
 `;
 
 // src/components/commerce/ProductSearchRow.tsx
-import { jsx as jsx22, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs11 } from "@emotion/react/jsx-runtime";
 function ProductSearchRow({
   result,
   isSelected,
@@ -1988,7 +2005,7 @@ function ProductSearchRow({
   const { categories, logoIcon } = useProductSearchContext();
   const [category] = result.categories || [{ id: "", name: "" }];
   const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c) => c.id === category.id)) == null ? void 0 : _a.name;
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     "div",
     {
       "data-value": result.id,
@@ -1997,7 +2014,7 @@ function ProductSearchRow({
       onClick: () => triggerSelection(),
       css: [productSearchRowContainer],
       children: /* @__PURE__ */ jsxs11("div", { css: [productSearchRowContent, isSelected ? productSearchRowContentActive : void 0], children: [
-        result.thumbnailUrl ? /* @__PURE__ */ jsx22(
+        result.thumbnailUrl ? /* @__PURE__ */ jsx23(
           "img",
           {
             src: result.thumbnailUrl,
@@ -2009,7 +2026,7 @@ function ProductSearchRow({
               object-fit: cover;
             `
           }
-        ) : /* @__PURE__ */ jsx22(
+        ) : /* @__PURE__ */ jsx23(
           Image,
           {
             src: logoIcon,
@@ -2022,14 +2039,14 @@ function ProductSearchRow({
         ),
         /* @__PURE__ */ jsxs11("h4", { css: [productSearchRowTitle], children: [
           result.title,
-          categoryName ? /* @__PURE__ */ jsx22("span", { css: [productSearchRowCategory], children: categoryName }) : null
+          categoryName ? /* @__PURE__ */ jsx23("span", { css: [productSearchRowCategory], children: categoryName }) : null
         ] }),
         /* @__PURE__ */ jsxs11("p", { css: [productSearchRowDetails], children: [
           "SKU: ",
           result.sku || result.id,
-          result.price !== void 0 ? /* @__PURE__ */ jsx22("span", { children: result.price }) : null
+          result.price !== void 0 ? /* @__PURE__ */ jsx23("span", { children: result.price }) : null
         ] }),
-        isSelected ? /* @__PURE__ */ jsx22(Checkmark_default, { css: [productSearchRowActiveIcon] }) : null
+        isSelected ? /* @__PURE__ */ jsx23(Checkmark_default, { css: [productSearchRowActiveIcon] }) : null
       ] })
     },
     result.id
@@ -2114,7 +2131,7 @@ var productSelectedItemLinkContainer = css14`
 `;
 
 // src/components/commerce/ProductSelectedItem.tsx
-import { jsx as jsx23, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs12 } from "@emotion/react/jsx-runtime";
 function ProductSelectedItem({
   selectedItem,
   onDeselect
@@ -2123,9 +2140,9 @@ function ProductSelectedItem({
   const { categories, logoIcon } = useProductSearchContext();
   const [category] = selectedItem.categories || [{ id: "", name: "" }];
   const categoryName = typeof category === "undefined" || !categories ? void 0 : (_a = categories.find((c) => c.id === category.id)) == null ? void 0 : _a.name;
-  return /* @__PURE__ */ jsx23("div", { css: [productSelectedItemContainer], children: /* @__PURE__ */ jsxs12("article", { css: [productSelectedItemDetails], children: [
+  return /* @__PURE__ */ jsx24("div", { css: [productSelectedItemContainer], children: /* @__PURE__ */ jsxs12("article", { css: [productSelectedItemDetails], children: [
     /* @__PURE__ */ jsxs12("div", { css: [productSelectedItemContent], children: [
-      selectedItem.thumbnailUrl ? /* @__PURE__ */ jsx23(
+      selectedItem.thumbnailUrl ? /* @__PURE__ */ jsx24(
         "img",
         {
           src: selectedItem.thumbnailUrl,
@@ -2133,7 +2150,7 @@ function ProductSelectedItem({
           css: [productSelectedItemImage],
           loading: "lazy"
         }
-      ) : /* @__PURE__ */ jsx23("div", { css: [productSelectedItemImage] }),
+      ) : /* @__PURE__ */ jsx24("div", { css: [productSelectedItemImage] }),
       /* @__PURE__ */ jsxs12(
         "div",
         {
@@ -2152,7 +2169,7 @@ function ProductSelectedItem({
               `,
                 children: [
                   selectedItem.title || selectedItem.id || "",
-                  categoryName && /* @__PURE__ */ jsx23(
+                  categoryName && /* @__PURE__ */ jsx24(
                     "span",
                     {
                       css: css15`
@@ -2178,7 +2195,7 @@ function ProductSelectedItem({
               `,
                 children: [
                   /* @__PURE__ */ jsxs12("li", { children: [
-                    /* @__PURE__ */ jsx23(
+                    /* @__PURE__ */ jsx24(
                       "span",
                       {
                         css: css15`
@@ -2190,7 +2207,7 @@ function ProductSelectedItem({
                     selectedItem.sku || selectedItem.id
                   ] }),
                   selectedItem.price !== void 0 ? /* @__PURE__ */ jsxs12("li", { children: [
-                    /* @__PURE__ */ jsx23(
+                    /* @__PURE__ */ jsx24(
                       "span",
                       {
                         css: css15`
@@ -2199,7 +2216,7 @@ function ProductSelectedItem({
                         children: "Price:"
                       }
                     ),
-                    /* @__PURE__ */ jsx23("span", { children: selectedItem.price })
+                    /* @__PURE__ */ jsx24("span", { children: selectedItem.price })
                   ] }) : null
                 ]
               }
@@ -2218,8 +2235,8 @@ function ProductSelectedItem({
           target: "_blank",
           css: productedSelectedItemLinkBtn,
           children: [
-            /* @__PURE__ */ jsx23("span", { css: productedSelectedItemSmallText, children: "Edit" }),
-            /* @__PURE__ */ jsx23(Image, { src: logoIcon, alt: "Logo", css: productSelectedItemIcon })
+            /* @__PURE__ */ jsx24("span", { css: productedSelectedItemSmallText, children: "Edit" }),
+            /* @__PURE__ */ jsx24(Image, { src: logoIcon, alt: "Logo", css: productSelectedItemIcon })
           ]
         }
       ) : null,
@@ -2232,8 +2249,8 @@ function ProductSelectedItem({
           },
           css: productedSelectedItemLinkBtn,
           children: [
-            /* @__PURE__ */ jsx23("span", { css: productedSelectedItemSmallText, children: "Unlink" }),
-            /* @__PURE__ */ jsx23(Icon3, { icon: CgClose3, iconColor: "red", size: 16 })
+            /* @__PURE__ */ jsx24("span", { css: productedSelectedItemSmallText, children: "Unlink" }),
+            /* @__PURE__ */ jsx24(Icon3, { icon: CgClose3, iconColor: "red", size: 16 })
           ]
         }
       )
@@ -2242,7 +2259,7 @@ function ProductSelectedItem({
 }
 
 // src/components/commerce/ProductSearch.tsx
-import { jsx as jsx24, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs13 } from "@emotion/react/jsx-runtime";
 function ProductSearch({
   selectedProducts,
   setSelectedProducts,
@@ -2313,9 +2330,9 @@ function ProductSearch({
       "There was an error: ",
       (categoriesError2 == null ? void 0 : categoriesError2.message) || (searchError == null ? void 0 : searchError.message)
     ] });
-    return /* @__PURE__ */ jsx24(ErrorComp, { categoriesError, searchError: handleSearchState.error });
+    return /* @__PURE__ */ jsx25(ErrorComp, { categoriesError, searchError: handleSearchState.error });
   }
-  return /* @__PURE__ */ jsx24(ProductSearchContext.Provider, { value: { categories, logoIcon }, children: /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(ProductSearchContext.Provider, { value: { categories, logoIcon }, children: /* @__PURE__ */ jsx25(
     EntrySearch,
     {
       search: handleSearch,
@@ -2353,7 +2370,7 @@ import { css as css17 } from "@emotion/react";
 import { CgClose as CgClose4 } from "@react-icons/all-files/cg/CgClose";
 import { CgInfo as CgInfo2 } from "@react-icons/all-files/cg/CgInfo";
 import { Icon as Icon4 } from "@uniformdev/design-system";
-import { useEffect as useEffect4, useRef as useRef6, useState as useState5 } from "react";
+import { useEffect as useEffect4, useRef as useRef6, useState as useState6 } from "react";
 import { format as timeAgo2 } from "timeago.js";
 
 // src/components/dam/DamSelectedItem.styles.ts
@@ -2459,7 +2476,7 @@ var damSelectItemImage = css16`
 `;
 
 // src/components/dam/DamSelectedItem.tsx
-import { jsx as jsx25, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs14 } from "@emotion/react/jsx-runtime";
 function DamSelectedItem({
   selectedItem,
   onDeselect,
@@ -2468,7 +2485,7 @@ function DamSelectedItem({
   itemDetailsRendererComponent
 }) {
   const popoverRef = useRef6(null);
-  const [showInfo, setShowInfo] = useState5(false);
+  const [showInfo, setShowInfo] = useState6(false);
   useEffect4(() => {
     const resizeHandler = () => {
       setShowInfo(false);
@@ -2479,7 +2496,7 @@ function DamSelectedItem({
     };
   }, [popoverRef]);
   const ResolvedItemDetailsRendererComponent = itemDetailsRendererComponent != null ? itemDetailsRendererComponent : DefaultDamItemRenderer;
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     "div",
     {
       css: [
@@ -2491,9 +2508,9 @@ function DamSelectedItem({
       children: /* @__PURE__ */ jsxs14("div", { css: damSelectedItemInner, children: [
         /* @__PURE__ */ jsxs14("div", { css: damSelectedItemDetails, children: [
           /* @__PURE__ */ jsxs14("div", { css: damSelectedItemCopy, children: [
-            /* @__PURE__ */ jsx25("h4", { css: [damSelectedItemTitle], title: `ID: ${selectedItem.id}`, "data-testid": "dam-selected-item", children: selectedItem.title || selectedItem.id || "" }),
+            /* @__PURE__ */ jsx26("h4", { css: [damSelectedItemTitle], title: `ID: ${selectedItem.id}`, "data-testid": "dam-selected-item", children: selectedItem.title || selectedItem.id || "" }),
             selectedItem.popoverData ? /* @__PURE__ */ jsxs14("div", { ref: popoverRef, children: [
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx26(
                 "button",
                 {
                   type: "button",
@@ -2501,7 +2518,7 @@ function DamSelectedItem({
                   "aria-controls": "path-details",
                   "aria-expanded": showInfo,
                   onClick: () => setShowInfo(!showInfo),
-                  children: /* @__PURE__ */ jsx25(
+                  children: /* @__PURE__ */ jsx26(
                     Icon4,
                     {
                       icon: CgInfo2,
@@ -2514,7 +2531,7 @@ function DamSelectedItem({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx25(
+              /* @__PURE__ */ jsx26(
                 "div",
                 {
                   id: "path-details",
@@ -2538,7 +2555,7 @@ function DamSelectedItem({
               )
             ] }) : null
           ] }),
-          /* @__PURE__ */ jsx25(ResolvedItemDetailsRendererComponent, { item: selectedItem })
+          /* @__PURE__ */ jsx26(ResolvedItemDetailsRendererComponent, { item: selectedItem })
         ] }),
         /* @__PURE__ */ jsxs14("div", { css: damSelectedItemLinkContainer, children: [
           selectedItem.editLink ? typeof selectedItem.editLink === "string" ? /* @__PURE__ */ jsxs14(
@@ -2556,8 +2573,8 @@ function DamSelectedItem({
               },
               css: damSelectedItemLinkBtn,
               children: [
-                /* @__PURE__ */ jsx25("span", { css: damSelectedItemSmallText, children: "Edit" }),
-                logoIcon ? /* @__PURE__ */ jsx25(Image, { src: logoIcon, css: damSelectedItemIcon, alt: "Logo" }) : null
+                /* @__PURE__ */ jsx26("span", { css: damSelectedItemSmallText, children: "Edit" }),
+                logoIcon ? /* @__PURE__ */ jsx26(Image, { src: logoIcon, css: damSelectedItemIcon, alt: "Logo" }) : null
               ]
             }
           ) : selectedItem.editLink : null,
@@ -2570,8 +2587,8 @@ function DamSelectedItem({
               },
               css: damSelectedItemLinkBtn,
               children: [
-                /* @__PURE__ */ jsx25("span", { css: damSelectedItemSmallText, children: "Unlink" }),
-                /* @__PURE__ */ jsx25(Icon4, { icon: CgClose4, iconColor: "red", size: 16 })
+                /* @__PURE__ */ jsx26("span", { css: damSelectedItemSmallText, children: "Unlink" }),
+                /* @__PURE__ */ jsx26(Icon4, { icon: CgClose4, iconColor: "red", size: 16 })
               ]
             }
           )
@@ -2585,15 +2602,15 @@ function DefaultDamItemRenderer({ item }) {
   let preview = null;
   if (item.previewUrl && typeof item.previewUrl === "string") {
     if (item.type === "image") {
-      preview = /* @__PURE__ */ jsx25("img", { src: item.previewUrl, alt: item.id, width: "200", css: damSelectItemImage });
+      preview = /* @__PURE__ */ jsx26("img", { src: item.previewUrl, alt: item.id, width: "200", css: damSelectItemImage });
     } else if (item.type === "video") {
-      preview = /* @__PURE__ */ jsx25("video", { src: item.previewUrl, title: item.id, width: "200", controls: true, css: damSelectItemImage });
+      preview = /* @__PURE__ */ jsx26("video", { src: item.previewUrl, title: item.id, width: "200", controls: true, css: damSelectItemImage });
     }
   } else if (item.previewUrl && typeof item.previewUrl !== "string") {
     preview = item.previewUrl;
   }
   return preview || item.metadata ? /* @__PURE__ */ jsxs14("div", { css: damSelectedItemMediaContainer, children: [
-    preview ? /* @__PURE__ */ jsx25("div", { children: preview }) : null,
+    preview ? /* @__PURE__ */ jsx26("div", { children: preview }) : null,
     /* @__PURE__ */ jsxs14("ul", { children: [
       item.metadata ? Object.entries(item.metadata).map(([key, value]) => {
         return /* @__PURE__ */ jsxs14(
@@ -2628,7 +2645,7 @@ function DefaultDamItemRenderer({ item }) {
         );
       }) : null,
       item.createdDate ? /* @__PURE__ */ jsxs14("li", { css: damSelectedItemSmallText, children: [
-        /* @__PURE__ */ jsx25("span", { css: damSelectedItemPopoverLabel, children: "Date:" }),
+        /* @__PURE__ */ jsx26("span", { css: damSelectedItemPopoverLabel, children: "Date:" }),
         timeAgo2(item.createdDate)
       ] }) : null
     ] })
@@ -2656,7 +2673,7 @@ function useConnectedDataAsVariables(connectedData) {
 // src/hooks/useDynamicInputsAsVariables.tsx
 import { LOCALE_DYNAMIC_INPUT_NAME } from "@uniformdev/canvas";
 import { useMemo as useMemo4 } from "react";
-import { Fragment as Fragment4, jsx as jsx26 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx27 } from "@emotion/react/jsx-runtime";
 function useDynamicInputsAsVariables(dynamicInputs) {
   return useMemo4(() => {
     const result = Object.entries(dynamicInputs).reduce(
@@ -2674,14 +2691,14 @@ Current preview value: ${input3.value || "not provided"}`
         if (!input3.value) {
           acc[name] = {
             ...acc[name],
-            helpText: /* @__PURE__ */ jsx26(Fragment4, { children: input3.value || /* @__PURE__ */ jsx26("em", { children: "not provided" }) }),
+            helpText: /* @__PURE__ */ jsx27(Fragment4, { children: input3.value || /* @__PURE__ */ jsx27("em", { children: "not provided" }) }),
             displayName: name
           };
         } else {
           acc[name] = {
             ...acc[name],
             displayName: input3.value,
-            helpText: /* @__PURE__ */ jsx26(Fragment4, { children: name })
+            helpText: /* @__PURE__ */ jsx27(Fragment4, { children: name })
           };
         }
         return acc;
@@ -2696,12 +2713,12 @@ Current preview value: ${input3.value || "not provided"}`
 import { useMemo as useMemo6, useRef as useRef7 } from "react";
 
 // src/components/UniformMeshLocationContext.tsx
-import { createContext as createContext2, useContext as useContext4, useMemo as useMemo5, useState as useState6 } from "react";
+import { createContext as createContext2, useContext as useContext4, useMemo as useMemo5, useState as useState7 } from "react";
 
 // src/components/UniformMeshSdkContext.tsx
 import { Theme } from "@uniformdev/design-system";
 import { createContext, useContext as useContext3 } from "react";
-import { jsx as jsx27, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs15 } from "@emotion/react/jsx-runtime";
 var UniformMeshSdkContext = createContext(void 0);
 var useUniformMeshSdkContext = () => {
   const context = useContext3(UniformMeshSdkContext);
@@ -2718,13 +2735,13 @@ function useUniformMeshSdk() {
 }
 
 // src/components/UniformMeshLocationContext.tsx
-import { jsx as jsx28 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx29 } from "@emotion/react/jsx-runtime";
 var UniformMeshLocationContext = createContext2(void 0);
 var UniformMeshLocationContextProvider = ({
   children
 }) => {
   const sdk = useUniformMeshSdk();
-  const [location, setLocation] = useState6(sdk.getCurrentLocation());
+  const [location, setLocation] = useState7(sdk.getCurrentLocation());
   useMemo5(() => {
     const valueChangeListener = (event) => {
       setLocation((old) => ({ ...old, value: event.newValue }));
@@ -2739,7 +2756,7 @@ var UniformMeshLocationContextProvider = ({
       sdk.events.off("onMetadataChanged", metaChangeListener);
     };
   }, [sdk]);
-  return /* @__PURE__ */ jsx28(UniformMeshLocationContext.Provider, { value: { location }, children });
+  return /* @__PURE__ */ jsx29(UniformMeshLocationContext.Provider, { value: { location }, children });
 };
 var useUniformMeshLocationContext = () => {
   const context = useContext4(UniformMeshLocationContext);
@@ -2938,7 +2955,7 @@ function prettifyBindExpression(bindExpression) {
 // src/components/Variables/composer/VariableChip.tsx
 import { MultilineChip } from "@uniformdev/design-system";
 import { Fragment as Fragment5 } from "react";
-import { jsx as jsx29 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx30 } from "@emotion/react/jsx-runtime";
 function VariableChip({
   displayName,
   referenceIsValid,
@@ -2954,7 +2971,7 @@ function VariableChip({
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
   const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? Fragment5 : UndefinedVariableReference;
   const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     MultilineChip,
     {
       title: tooltip ? `${tooltip}${extraTitle ? `
@@ -2963,12 +2980,12 @@ ${extraTitle}` : ""}` : extraTitle,
       onClick,
       "aria-selected": selected ? true : void 0,
       "aria-disabled": disabled,
-      children: /* @__PURE__ */ jsx29(Wrapper, { children: displayName || reference })
+      children: /* @__PURE__ */ jsx30(Wrapper, { children: displayName || reference })
     }
   );
 }
 function UndefinedVariableReference({ children }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "span",
     {
       style: {
@@ -2981,7 +2998,7 @@ function UndefinedVariableReference({ children }) {
   );
 }
 function InfoVariableReference({ children }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "span",
     {
       style: {
@@ -3014,7 +3031,7 @@ import {
   COMMAND_PRIORITY_NORMAL,
   createCommand
 } from "lexical";
-import { useCallback, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef10, useState as useState9 } from "react";
+import { useCallback, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef10, useState as useState10 } from "react";
 import { createPortal } from "react-dom";
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
@@ -3047,11 +3064,11 @@ var variablesTipText = css18`
 `;
 
 // src/components/Variables/useVariableEditor.ts
-import { useEffect as useEffect6, useState as useState8 } from "react";
+import { useEffect as useEffect6, useState as useState9 } from "react";
 
 // src/components/Variables/VariablesProvider.tsx
 import mitt from "mitt";
-import { createContext as createContext3, useContext as useContext5, useMemo as useMemo7, useState as useState7 } from "react";
+import { createContext as createContext3, useContext as useContext5, useMemo as useMemo7, useState as useState8 } from "react";
 
 // src/components/Variables/VariableEditor.tsx
 import { zodResolver } from "@hookform/resolvers/zod";
@@ -3069,7 +3086,7 @@ var variablesFormContainer = css19`
 `;
 
 // src/components/Variables/VariableEditor.tsx
-import { jsx as jsx30, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs16 } from "@emotion/react/jsx-runtime";
 var schema = z.object({
   name: z.string().nonempty("Name can't be empty").regex(/^[^${}]+$/, "$, {, and } are reserved characters and cannot be used in a variable name"),
   default: z.string(),
@@ -3125,7 +3142,7 @@ function VariableEditor({
     // NOTE: this is intentionally NOT a <form> because it's regularly used in a nested modal and that can make it bubble
     // up a submit to its 'parent form' which is not what we want.
     /* @__PURE__ */ jsxs16("div", { css: variablesFormContainer, children: [
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31(
         Input2,
         {
           ...nameRegister,
@@ -3139,7 +3156,7 @@ function VariableEditor({
           }
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31(
         Input2,
         {
           ...register("helpText"),
@@ -3149,7 +3166,7 @@ function VariableEditor({
           errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31(
         Input2,
         {
           ...register("default"),
@@ -3158,14 +3175,14 @@ function VariableEditor({
           errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
         }
       ),
-      /* @__PURE__ */ jsx30(HorizontalRhythm, { justify: "space-between", children: /* @__PURE__ */ jsxs16(HorizontalRhythm, { gap: "sm", children: [
-        /* @__PURE__ */ jsx30(Button2, { type: "button", onClick: submitHandler, children: "OK" }),
-        /* @__PURE__ */ jsx30(Button2, { type: "button", buttonType: "ghost", onClick: () => onCancel({ disconnect: false }), children: "cancel" })
+      /* @__PURE__ */ jsx31(HorizontalRhythm, { justify: "space-between", children: /* @__PURE__ */ jsxs16(HorizontalRhythm, { gap: "sm", children: [
+        /* @__PURE__ */ jsx31(Button2, { type: "button", onClick: submitHandler, children: "OK" }),
+        /* @__PURE__ */ jsx31(Button2, { type: "button", buttonType: "ghost", onClick: () => onCancel({ disconnect: false }), children: "cancel" })
       ] }) }),
       disableMeshTip ? null : /* @__PURE__ */ jsxs16(Callout3, { type: "tip", title: "Customized User Interfaces", children: [
         "Developers can create customized user interfaces for variable editing by building a Uniform mesh integration. Get started quickly with our",
         " ",
-        /* @__PURE__ */ jsx30(
+        /* @__PURE__ */ jsx31(
           "a",
           {
             href: "https://docs.uniform.app/docs/integrations/mesh-integrations/custom-integrations",
@@ -3181,7 +3198,7 @@ function VariableEditor({
 }
 
 // src/components/Variables/VariablesProvider.tsx
-import { jsx as jsx31, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs17 } from "@emotion/react/jsx-runtime";
 var VariablesContext = createContext3(null);
 function VariablesProvider({
   value,
@@ -3192,8 +3209,8 @@ function VariablesProvider({
   children,
   knownUndefinedValues = {}
 }) {
-  const [editing, setEditing] = useState7();
-  const [editingContext, setEditingContext] = useState7();
+  const [editing, setEditing] = useState8();
+  const [editingContext, setEditingContext] = useState8();
   const events = useMemo7(
     () => mitt(),
     []
@@ -3252,7 +3269,7 @@ function VariablesProvider({
   }, [editing, events, knownUndefinedValues, valueBasedContextValue, isLoading]);
   return /* @__PURE__ */ jsxs17(VariablesContext.Provider, { value: contextValue, children: [
     children,
-    typeof editing !== "undefined" ? /* @__PURE__ */ jsx31(
+    typeof editing !== "undefined" ? /* @__PURE__ */ jsx32(
       Editor,
       {
         context: editingContext,
@@ -3311,7 +3328,7 @@ function flattenVariables(variables) {
 // src/components/Variables/useVariableEditor.ts
 function useVariableEditor() {
   const { variables, events, canDispatch, dispatch, isEditing } = useVariables(true);
-  const [isEditingBinding, setIsEditingBinding] = useState8();
+  const [isEditingBinding, setIsEditingBinding] = useState9();
   useEffect6(() => {
     if (!canDispatch || !isEditingBinding) {
       return;
@@ -3408,7 +3425,7 @@ function variablesToGroupedList(variables, filterFn, context) {
 }
 
 // src/components/Variables/composer/VariablesPlugin.tsx
-import { Fragment as Fragment6, jsx as jsx32, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx33, jsxs as jsxs18 } from "@emotion/react/jsx-runtime";
 var OPEN_INSERT_VARIABLE_COMMAND = createCommand("uniform:open-insert-variable");
 var EDIT_VARIABLE_COMMAND = createCommand("uniform:edit-variable");
 var DISCONNECT_VARIABLE_COMMAND = createCommand(
@@ -3527,7 +3544,7 @@ function VariablesPlugin({
     [canDispatch, enableEditingVariables, readOnly]
   );
   const { editVariable } = useVariableEditor();
-  const [queryString, setQueryString] = useState9(null);
+  const [queryString, setQueryString] = useState10(null);
   const { groupedVariables, menuOptions, onSelect } = useVariablesMenu({
     showAddVariableMenuOption,
     filterVariable,
@@ -3728,7 +3745,7 @@ function VariablesPlugin({
   if (disableVariables) {
     return null;
   }
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     LexicalTypeaheadMenuPlugin,
     {
       onQueryChange: setQueryString,
@@ -3741,7 +3758,7 @@ function VariablesPlugin({
         }
         let currentCumulativeMenuIndex = -1;
         return createPortal(
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             "div",
             {
               "data-auto-resize-opt-in": true,
@@ -3760,14 +3777,14 @@ function VariablesPlugin({
               position: relative;
               z-index: var(--z-50);
             `,
-              children: /* @__PURE__ */ jsx32("div", { children: filteredGroupedVariables.map((group, index) => {
+              children: /* @__PURE__ */ jsx33("div", { children: filteredGroupedVariables.map((group, index) => {
                 var _a, _b;
                 return /* @__PURE__ */ jsxs18(Fragment6, { children: [
-                  /* @__PURE__ */ jsx32(MenuGroup, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
+                  /* @__PURE__ */ jsx33(MenuGroup, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
                     var _a2;
                     currentCumulativeMenuIndex++;
                     const myCumulativeIndex = currentCumulativeMenuIndex;
-                    return /* @__PURE__ */ jsx32(
+                    return /* @__PURE__ */ jsx33(
                       MenuItemInner,
                       {
                         active: selectedIndex === myCumulativeIndex,
@@ -3780,18 +3797,18 @@ function VariablesPlugin({
                         },
                         css: menuItemTextGroup,
                         children: variable.name === ADD_VARIABLE_OPTION ? /* @__PURE__ */ jsxs18(HorizontalRhythm2, { gap: "sm", align: "center", children: [
-                          /* @__PURE__ */ jsx32(AiFillPlusCircle, { fill: "var(--gray-500)" }),
+                          /* @__PURE__ */ jsx33(AiFillPlusCircle, { fill: "var(--gray-500)" }),
                           " ",
-                          /* @__PURE__ */ jsx32("span", { children: variable.displayName })
+                          /* @__PURE__ */ jsx33("span", { children: variable.displayName })
                         ] }) : /* @__PURE__ */ jsxs18(Fragment6, { children: [
-                          /* @__PURE__ */ jsx32("span", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
-                          variable.helpText ? /* @__PURE__ */ jsx32("small", { css: smallText, children: variable.helpText }) : null
+                          /* @__PURE__ */ jsx33("span", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
+                          variable.helpText ? /* @__PURE__ */ jsx33("small", { css: smallText, children: variable.helpText }) : null
                         ] })
                       },
                       group.name + variable.name
                     );
                   }) }, (_b = group.name) != null ? _b : `none${index}`),
-                  group.name || index === filteredGroupedVariables.length - 1 ? null : /* @__PURE__ */ jsx32(MenuItemSeparator, {})
+                  group.name || index === filteredGroupedVariables.length - 1 ? null : /* @__PURE__ */ jsx33(MenuItemSeparator, {})
                 ] });
               }) })
             }
@@ -3804,7 +3821,7 @@ function VariablesPlugin({
 }
 
 // src/components/Variables/composer/VariableNode.tsx
-import { jsx as jsx33 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx34 } from "@emotion/react/jsx-runtime";
 var VariableNode = class _VariableNode extends DecoratorNode {
   constructor(reference, state, key) {
     super(key);
@@ -3869,7 +3886,7 @@ var VariableNode = class _VariableNode extends DecoratorNode {
    * rely on Context, etc in this renderer.
    */
   decorate() {
-    return /* @__PURE__ */ jsx33(VariableNodeComponent, { state: this.__state, reference: this.reference, nodeKey: this.__key });
+    return /* @__PURE__ */ jsx34(VariableNodeComponent, { state: this.__state, reference: this.reference, nodeKey: this.__key });
   }
 };
 function $createVariableNode(variableReference, state) {
@@ -3962,12 +3979,12 @@ function VariableNodeComponent({
       )
     );
   }, [clearSelection, editor, isSelected, nodeKey, onDelete, setSelected]);
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     VariableChip,
     {
       ...state,
       reference,
-      displayName: state.isLoading ? /* @__PURE__ */ jsx33(LoadingIndicator2, { size: "sm" }) : state.displayName,
+      displayName: state.isLoading ? /* @__PURE__ */ jsx34(LoadingIndicator2, { size: "sm" }) : state.displayName,
       selected: isSelected,
       disabled: readOnly,
       clickToEdit: state.hasClickEvent,
@@ -3988,7 +4005,7 @@ function $isTargetWithinDecorator(target) {
 
 // src/components/Variables/InputVariables.tsx
 import { Caption, ErrorMessage, InfoMessage, WarningMessage } from "@uniformdev/design-system";
-import { useState as useState12 } from "react";
+import { useState as useState13 } from "react";
 import { v4 as v42 } from "uuid";
 
 // src/components/Variables/composer/EditorRefPlugin.tsx
@@ -4222,7 +4239,7 @@ import { BsFillPlusCircleFill } from "@react-icons/all-files/bs/BsFillPlusCircle
 import { CgUsbC } from "@react-icons/all-files/cg/CgUsbC";
 import { HorizontalRhythm as HorizontalRhythm3, Menu as Menu2, MenuGroup as MenuGroup2, MenuItem as MenuItem2, MenuItemSeparator as MenuItemSeparator2 } from "@uniformdev/design-system";
 import { useRef as useRef11 } from "react";
-import { Fragment as Fragment7, jsx as jsx34, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx35, jsxs as jsxs19 } from "@emotion/react/jsx-runtime";
 function SelectVariableMenu({
   onSelectVariable,
   onResetVariables,
@@ -4248,7 +4265,7 @@ function SelectVariableMenu({
     {
       placement: "bottom-start",
       withoutPortal: true,
-      menuTrigger: /* @__PURE__ */ jsx34(
+      menuTrigger: /* @__PURE__ */ jsx35(
         "button",
         {
           ...buttonProps,
@@ -4257,12 +4274,12 @@ function SelectVariableMenu({
           css: [menuBtn, buttonCss],
           type: "button",
           "data-testid": "insert-variable",
-          children: /* @__PURE__ */ jsx34(CgUsbC, { size: "1.4rem" })
+          children: /* @__PURE__ */ jsx35(CgUsbC, { size: "1.4rem" })
         }
       ),
       menuLabel: menuTooltip,
       children: [
-        showAddVariableMenuOptionForReals ? /* @__PURE__ */ jsx34(
+        showAddVariableMenuOptionForReals ? /* @__PURE__ */ jsx35(
           MenuItem2,
           {
             onClick: async () => {
@@ -4274,15 +4291,15 @@ function SelectVariableMenu({
             },
             "data-testid": "add-variable-button",
             children: /* @__PURE__ */ jsxs19(HorizontalRhythm3, { gap: "sm", align: "center", children: [
-              /* @__PURE__ */ jsx34(BsFillPlusCircleFill, { fill: "var(--gray-500)", size: "1.25em" }),
-              /* @__PURE__ */ jsx34("span", { children: typeof showAddVariableMenuOption === "string" ? showAddVariableMenuOption : /* @__PURE__ */ jsx34(Fragment7, { children: "Add\u2026" }) })
+              /* @__PURE__ */ jsx35(BsFillPlusCircleFill, { fill: "var(--gray-500)", size: "1.25em" }),
+              /* @__PURE__ */ jsx35("span", { children: typeof showAddVariableMenuOption === "string" ? showAddVariableMenuOption : /* @__PURE__ */ jsx35(Fragment7, { children: "Add\u2026" }) })
             ] })
           }
         ) : null,
-        showAddVariableMenuOptionForReals && menuHasVariableOptions ? /* @__PURE__ */ jsx34(MenuItemSeparator2, {}) : null,
+        showAddVariableMenuOptionForReals && menuHasVariableOptions ? /* @__PURE__ */ jsx35(MenuItemSeparator2, {}) : null,
         variablesGroups.map((group) => {
           var _a;
-          return /* @__PURE__ */ jsx34(MenuGroup2, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
+          return /* @__PURE__ */ jsx35(MenuGroup2, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
             const { name, displayName, helpText } = variable;
             return /* @__PURE__ */ jsxs19(
               MenuItem2,
@@ -4291,25 +4308,25 @@ function SelectVariableMenu({
                 css: menuItemTextGroup,
                 onClick: () => onSelectVariable == null ? void 0 : onSelectVariable(variable),
                 children: [
-                  /* @__PURE__ */ jsx34("span", { children: displayName != null ? displayName : name }),
-                  helpText ? /* @__PURE__ */ jsx34("small", { css: smallText, children: helpText }) : null
+                  /* @__PURE__ */ jsx35("span", { children: displayName != null ? displayName : name }),
+                  helpText ? /* @__PURE__ */ jsx35("small", { css: smallText, children: helpText }) : null
                 ]
               },
               name
             );
           }) }, group.name);
         }),
-        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ jsx34(MenuItemSeparator2, {}) : null,
-        onResetVariables ? /* @__PURE__ */ jsx34(MenuItem2, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
-        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ jsx34(MenuItemSeparator2, {}) : null,
-        tip ? /* @__PURE__ */ jsx34("i", { css: variablesTipText, children: tip }) : null
+        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ jsx35(MenuItemSeparator2, {}) : null,
+        onResetVariables ? /* @__PURE__ */ jsx35(MenuItem2, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
+        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ jsx35(MenuItemSeparator2, {}) : null,
+        tip ? /* @__PURE__ */ jsx35("i", { css: variablesTipText, children: tip }) : null
       ]
     }
   );
 }
 
 // src/components/Variables/toolbox/VariablesComposerVariableMenu.tsx
-import { jsx as jsx35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx36 } from "@emotion/react/jsx-runtime";
 function VariablesComposerVariableMenu(props) {
   const [editor] = useLexicalComposerContext6();
   const onSelectVariable = (selectedVariable) => {
@@ -4325,7 +4342,7 @@ function VariablesComposerVariableMenu(props) {
     editor.dispatchCommand(CLEAR_EDITOR_COMMAND, void 0);
     (_a = props.onResetVariables) == null ? void 0 : _a.call(props);
   };
-  return /* @__PURE__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     SelectVariableMenu,
     {
       ...props,
@@ -4336,7 +4353,7 @@ function VariablesComposerVariableMenu(props) {
 }
 
 // src/components/Variables/toolbox/VariableField.tsx
-import { jsx as jsx36, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs20 } from "@emotion/react/jsx-runtime";
 function VariableField({
   label,
   selectVariableMenuOptions,
@@ -4347,7 +4364,7 @@ function VariableField({
 }) {
   const { variables } = useVariables(true);
   const varCount = Object.keys(variables).length;
-  const variableSelector = (varCount > 0 || (selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.showAddVariableMenuOption)) && !disableVariables ? /* @__PURE__ */ jsx36(
+  const variableSelector = (varCount > 0 || (selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.showAddVariableMenuOption)) && !disableVariables ? /* @__PURE__ */ jsx37(
     VariablesComposerVariableMenu,
     {
       ...selectVariableMenuOptions,
@@ -4358,7 +4375,7 @@ function VariableField({
   return /* @__PURE__ */ jsxs20("div", { "data-testid": "variable-field", children: [
     /* @__PURE__ */ jsxs20("label", { htmlFor: id, css: labelText, "data-testid": "field-name", children: [
       variableSelector,
-      /* @__PURE__ */ jsx36("span", { children: label })
+      /* @__PURE__ */ jsx37("span", { children: label })
     ] }),
     children
   ] });
@@ -4369,7 +4386,7 @@ import { AutoFocusPlugin } from "@lexical/react/LexicalAutoFocusPlugin";
 import { ClearEditorPlugin } from "@lexical/react/LexicalClearEditorPlugin";
 import { LexicalComposer } from "@lexical/react/LexicalComposer";
 import { OnChangePlugin } from "@lexical/react/LexicalOnChangePlugin";
-import { useMemo as useMemo10, useRef as useRef12, useState as useState11 } from "react";
+import { useMemo as useMemo10, useRef as useRef12, useState as useState12 } from "react";
 
 // src/components/Variables/composer/DisablePlugin.tsx
 import { useLexicalComposerContext as useLexicalComposerContext7 } from "@lexical/react/LexicalComposerContext";
@@ -4429,7 +4446,7 @@ function serializeRecursive(node, buffer) {
 }
 
 // src/components/Variables/toolbox/VariablesComposer.tsx
-import { Fragment as Fragment8, jsx as jsx37, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx38, jsxs as jsxs21 } from "@emotion/react/jsx-runtime";
 function VariablesComposer(props) {
   const {
     value,
@@ -4441,7 +4458,7 @@ function VariablesComposer(props) {
     autoFocus,
     ...variablesPluginProps
   } = props;
-  const [lastEmittedValue, setLastEmittedValue] = useState11(value);
+  const [lastEmittedValue, setLastEmittedValue] = useState12(value);
   const editorConfig = useMemo10(
     () => ({
       namespace: "uniform",
@@ -4459,7 +4476,7 @@ function VariablesComposer(props) {
   if (typeof document === "undefined")
     return null;
   return /* @__PURE__ */ jsxs21(LexicalComposer, { initialConfig: editorConfig, children: [
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       OnChangePlugin,
       {
         ignoreSelectionChange: true,
@@ -4480,12 +4497,12 @@ function VariablesComposer(props) {
         }
       }
     ),
-    /* @__PURE__ */ jsx37(Fragment8, { children: multiLine ? null : /* @__PURE__ */ jsx37(SingleLineTextPlugin, {}) }),
-    /* @__PURE__ */ jsx37(ClearEditorPlugin, {}),
-    /* @__PURE__ */ jsx37(VariablesPlugin, { ...variablesPluginProps }),
-    /* @__PURE__ */ jsx37(DisablePlugin, { disabled }),
-    /* @__PURE__ */ jsx37(Fragment8, { children: autoFocus ? /* @__PURE__ */ jsx37(AutoFocusPlugin, {}) : null }),
-    /* @__PURE__ */ jsx37(Fragment8, { children })
+    /* @__PURE__ */ jsx38(Fragment8, { children: multiLine ? null : /* @__PURE__ */ jsx38(SingleLineTextPlugin, {}) }),
+    /* @__PURE__ */ jsx38(ClearEditorPlugin, {}),
+    /* @__PURE__ */ jsx38(VariablesPlugin, { ...variablesPluginProps }),
+    /* @__PURE__ */ jsx38(DisablePlugin, { disabled }),
+    /* @__PURE__ */ jsx38(Fragment8, { children: autoFocus ? /* @__PURE__ */ jsx38(AutoFocusPlugin, {}) : null }),
+    /* @__PURE__ */ jsx38(Fragment8, { children })
   ] });
 }
 
@@ -4511,23 +4528,23 @@ import {
   PASTE_COMMAND as PASTE_COMMAND2
 } from "lexical";
 import { useEffect as useEffect13 } from "react";
-import { Fragment as Fragment9, jsx as jsx38, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx39, jsxs as jsxs22 } from "@emotion/react/jsx-runtime";
 function VariablesComposerInput({
   css: css37,
   placeholder,
   ...contentEditableProps
 }) {
   return /* @__PURE__ */ jsxs22("div", { children: [
-    /* @__PURE__ */ jsx38(
+    /* @__PURE__ */ jsx39(
       PlainTextPlugin,
       {
-        contentEditable: /* @__PURE__ */ jsx38(ContentEditable, { ...contentEditableProps }),
-        placeholder: placeholder ? /* @__PURE__ */ jsx38(Fragment9, { children: placeholder }) : null,
+        contentEditable: /* @__PURE__ */ jsx39(ContentEditable, { ...contentEditableProps }),
+        placeholder: placeholder ? /* @__PURE__ */ jsx39(Fragment9, { children: placeholder }) : null,
         ErrorBoundary: LexicalErrorBoundary
       }
     ),
-    /* @__PURE__ */ jsx38(RichishCopyAndPastePlugin, {}),
-    /* @__PURE__ */ jsx38(HistoryPlugin, {})
+    /* @__PURE__ */ jsx39(RichishCopyAndPastePlugin, {}),
+    /* @__PURE__ */ jsx39(HistoryPlugin, {})
   ] });
 }
 function RichishCopyAndPastePlugin() {
@@ -4607,7 +4624,7 @@ function RichishCopyAndPastePlugin() {
 }
 
 // src/components/Variables/InputVariables.tsx
-import { Fragment as Fragment10, jsx as jsx39, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx40, jsxs as jsxs23 } from "@emotion/react/jsx-runtime";
 function InputVariables(props) {
   const {
     id,
@@ -4634,7 +4651,7 @@ function InputVariables(props) {
     filterVariable,
     styleVariant = "default"
   } = props;
-  const [finalId] = useState12(id != null ? id : () => v42());
+  const [finalId] = useState13(id != null ? id : () => v42());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps } = useInputVariablesState(props);
   const useInputWithNoVariables = Boolean(inputWhenNoVariables && !hadVariablesInValue);
@@ -4648,14 +4665,14 @@ function InputVariables(props) {
       },
       css: disabled ? inputDisabled : "",
       children: [
-        useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx39(
+        useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx40(
           InputVariablesOverlayMenu,
           {
             ...sharedMenuProps,
             disabled: disableVariablesForReals || disableInlineMenu === true || disableInlineMenu === "by-input",
             replaceValueOnVariableInsert: useInputWithNoVariables,
             useInputWhenNoVariables: useInputWithNoVariables,
-            children: /* @__PURE__ */ jsx39(
+            children: /* @__PURE__ */ jsx40(
               VariablesComposerInput,
               {
                 id: finalId,
@@ -4663,7 +4680,7 @@ function InputVariables(props) {
                 "data-testid": dataTestId ? dataTestId : "input-container",
                 "data-text-value": value,
                 css: [input, styleVariant === "compact" ? inputCompact : null],
-                placeholder: placeholder ? /* @__PURE__ */ jsx39(
+                placeholder: placeholder ? /* @__PURE__ */ jsx40(
                   Caption,
                   {
                     css: [
@@ -4677,16 +4694,16 @@ function InputVariables(props) {
             )
           }
         ),
-        caption ? /* @__PURE__ */ jsx39(Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ jsx39(ErrorMessage, { message: errorMessage }) : null,
-        warningMessage ? /* @__PURE__ */ jsx39(WarningMessage, { message: warningMessage }) : null,
-        infoMessage ? /* @__PURE__ */ jsx39(InfoMessage, { message: infoMessage }) : null
+        caption ? /* @__PURE__ */ jsx40(Caption, { children: caption }) : null,
+        errorMessage ? /* @__PURE__ */ jsx40(ErrorMessage, { message: errorMessage }) : null,
+        warningMessage ? /* @__PURE__ */ jsx40(WarningMessage, { message: warningMessage }) : null,
+        infoMessage ? /* @__PURE__ */ jsx40(InfoMessage, { message: infoMessage }) : null
       ]
     }
   );
   let body = input3;
   if (label) {
-    body = /* @__PURE__ */ jsx39(
+    body = /* @__PURE__ */ jsx40(
       VariableField,
       {
         label,
@@ -4716,9 +4733,9 @@ function InputVariables(props) {
       autoFocus,
       filterVariable,
       children: [
-        /* @__PURE__ */ jsx39(PasteTransformerPlugin, { transformPaste }),
-        /* @__PURE__ */ jsx39(ControlledValuePlugin, { value, enabled: useInputWithNoVariables }),
-        editorRef ? /* @__PURE__ */ jsx39(EditorRefPlugin, { editorRef }) : null,
+        /* @__PURE__ */ jsx40(PasteTransformerPlugin, { transformPaste }),
+        /* @__PURE__ */ jsx40(ControlledValuePlugin, { value, enabled: useInputWithNoVariables }),
+        editorRef ? /* @__PURE__ */ jsx40(EditorRefPlugin, { editorRef }) : null,
         body
       ]
     }
@@ -4731,11 +4748,11 @@ function InputVariablesOverlayMenu({
   ...props
 }) {
   if (disabled) {
-    return /* @__PURE__ */ jsx39(Fragment10, { children });
+    return /* @__PURE__ */ jsx40(Fragment10, { children });
   }
   return /* @__PURE__ */ jsxs23("div", { css: menuContainer, children: [
     children,
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx40(
       VariablesComposerVariableMenu,
       {
         ...props,
@@ -4846,7 +4863,7 @@ var inputMultiLine = (lines) => css23`
 `;
 
 // src/components/Variables/ParameterConnectionIndicator.tsx
-import { jsx as jsx40, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs24 } from "@emotion/react/jsx-runtime";
 function ParameterConnectionIndicator({
   children,
   value,
@@ -4866,20 +4883,20 @@ function ParameterConnectionIndicator({
     return result;
   }, [value]);
   return /* @__PURE__ */ jsxs24(HorizontalRhythm4, { align: "center", gap: "xs", css: { width: "100%" }, children: [
-    /* @__PURE__ */ jsx40("div", { css: { flex: 1 }, children }),
-    disabled ? null : /* @__PURE__ */ jsx40(
+    /* @__PURE__ */ jsx41("div", { css: { flex: 1 }, children }),
+    disabled ? null : /* @__PURE__ */ jsx41(
       Menu3,
       {
         placement: "bottom-start",
         withoutPortal: true,
-        menuTrigger: /* @__PURE__ */ jsx40(
+        menuTrigger: /* @__PURE__ */ jsx41(
           "button",
           {
             title: menuTooltip,
             "aria-pressed": hasVariablesInValue,
             css: [menuBtn, variableBindButton2],
             type: "button",
-            children: /* @__PURE__ */ jsx40(CgUsbC2, { size: "1.4rem" })
+            children: /* @__PURE__ */ jsx41(CgUsbC2, { size: "1.4rem" })
           }
         ),
         menuLabel: menuTooltip,
@@ -4931,7 +4948,7 @@ function OnDisconnectPlugin({
 }
 
 // src/components/Variables/ParameterOrSingleVariable.tsx
-import { jsx as jsx41, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "@emotion/react/jsx-runtime";
 function ParameterOrSingleVariable(props) {
   const {
     value,
@@ -4973,11 +4990,11 @@ function ParameterOrSingleVariable(props) {
         replaceValueOnVariableInsert: true,
         disabled: true,
         children: [
-          /* @__PURE__ */ jsx41(OnDisconnectPlugin, { onDisconnect: handleDisconnect }),
-          editorRef ? /* @__PURE__ */ jsx41(EditorRefPlugin, { editorRef }) : null,
-          /* @__PURE__ */ jsx41(ControlledValuePlugin, { enabled: true, value }),
+          /* @__PURE__ */ jsx42(OnDisconnectPlugin, { onDisconnect: handleDisconnect }),
+          editorRef ? /* @__PURE__ */ jsx42(EditorRefPlugin, { editorRef }) : null,
+          /* @__PURE__ */ jsx42(ControlledValuePlugin, { enabled: true, value }),
           /* @__PURE__ */ jsxs25(HorizontalRhythm5, { align: "center", gap: "xs", css: { width: "100%" }, children: [
-            /* @__PURE__ */ jsx41("div", { css: { flex: 1 }, children: inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42("div", { css: { flex: 1 }, children: inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ jsx42(
               VariablesComposerInput,
               {
                 "data-text-value": value,
@@ -4985,7 +5002,7 @@ function ParameterOrSingleVariable(props) {
                 css: input2
               }
             ) }),
-            disableVariablesForReals ? null : /* @__PURE__ */ jsx41(
+            disableVariablesForReals ? null : /* @__PURE__ */ jsx42(
               VariablesComposerVariableMenu,
               {
                 ...sharedMenuProps,
@@ -5005,7 +5022,7 @@ function ParameterOrSingleVariable(props) {
 // src/components/Variables/ParameterVariables.tsx
 import { css as css24 } from "@emotion/react";
 import { HorizontalRhythm as HorizontalRhythm6 } from "@uniformdev/design-system";
-import { jsx as jsx42, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs26 } from "@emotion/react/jsx-runtime";
 function ParameterVariables(props) {
   const {
     value,
@@ -5040,8 +5057,8 @@ function ParameterVariables(props) {
       autoFocus,
       filterVariable,
       children: [
-        editorRef ? /* @__PURE__ */ jsx42(EditorRefPlugin, { editorRef }) : null,
-        /* @__PURE__ */ jsx42(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
+        editorRef ? /* @__PURE__ */ jsx43(EditorRefPlugin, { editorRef }) : null,
+        /* @__PURE__ */ jsx43(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
         /* @__PURE__ */ jsxs26(
           HorizontalRhythm6,
           {
@@ -5054,7 +5071,7 @@ function ParameterVariables(props) {
               }
             },
             children: [
-              /* @__PURE__ */ jsx42("div", { css: { flex: 1 }, children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx42(
+              /* @__PURE__ */ jsx43("div", { css: { flex: 1 }, children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ jsx43(
                 VariablesComposerInput,
                 {
                   "aria-label": ariaLabel,
@@ -5067,7 +5084,7 @@ function ParameterVariables(props) {
                   ]
                 }
               ) }),
-              disableVariablesForReals ? null : /* @__PURE__ */ jsx42(
+              disableVariablesForReals ? null : /* @__PURE__ */ jsx43(
                 VariablesComposerVariableMenu,
                 {
                   ...sharedMenuProps,
@@ -5111,7 +5128,7 @@ import {
   TableHead,
   TableRow
 } from "@uniformdev/design-system";
-import { DragDropContext as DragDropContext2, Draggable as Draggable2, Droppable as Droppable2 } from "react-beautiful-dnd";
+import { Draggable as Draggable2, Droppable as Droppable2 } from "react-beautiful-dnd";
 
 // src/components/Variables/styles/VariablesList.styles.ts
 import { css as css25 } from "@emotion/react";
@@ -5159,7 +5176,7 @@ var variableValue = css25`
 `;
 
 // src/components/Variables/VariablesList.tsx
-import { Fragment as Fragment11, jsx as jsx43, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx44, jsxs as jsxs27 } from "@emotion/react/jsx-runtime";
 function VariablesList() {
   const { variables, dispatch, readOnly } = useVariables();
   const sorted = variablesToList(variables).filter((variable) => !variable.system);
@@ -5181,17 +5198,17 @@ function VariablesList() {
     }
   };
   return /* @__PURE__ */ jsxs27(Fragment11, { children: [
-    /* @__PURE__ */ jsx43(DragDropContext2, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx43(Droppable2, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs27(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
-      /* @__PURE__ */ jsx43(TableHead, { children: /* @__PURE__ */ jsxs27(TableRow, { children: [
-        /* @__PURE__ */ jsx43(TableCellHead, { children: "Name" }),
-        /* @__PURE__ */ jsx43(TableCellHead, { children: "Default Value" }),
-        /* @__PURE__ */ jsx43(TableCellHead, {})
+    /* @__PURE__ */ jsx44(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx44(Droppable2, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ jsxs27(Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ jsx44(TableHead, { children: /* @__PURE__ */ jsxs27(TableRow, { children: [
+        /* @__PURE__ */ jsx44(TableCellHead, { children: "Name" }),
+        /* @__PURE__ */ jsx44(TableCellHead, { children: "Default Value" }),
+        /* @__PURE__ */ jsx44(TableCellHead, {})
       ] }) }),
       /* @__PURE__ */ jsxs27(TableBody, { children: [
         sorted.map(({ name, displayName, default: defaultValue }, index) => {
           const text = displayName != null ? displayName : name;
           const textValue = variableDefaultTextValue(defaultValue);
-          return /* @__PURE__ */ jsx43(
+          return /* @__PURE__ */ jsx44(
             Draggable2,
             {
               draggableId: name,
@@ -5207,7 +5224,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ jsx43(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: readOnly ? /* @__PURE__ */ jsx43("span", { css: variableName, children: text }) : /* @__PURE__ */ jsx43(
+                    /* @__PURE__ */ jsx44(TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: readOnly ? /* @__PURE__ */ jsx44("span", { css: variableName, children: text }) : /* @__PURE__ */ jsx44(
                       "button",
                       {
                         css: variableName,
@@ -5220,8 +5237,8 @@ function VariablesList() {
                         children: text
                       }
                     ) }),
-                    /* @__PURE__ */ jsx43(TableCellData, { children: /* @__PURE__ */ jsx43("span", { css: variableValue, title: textValue, children: textValue }) }),
-                    /* @__PURE__ */ jsx43(TableCellData, { align: "right", children: readOnly ? null : /* @__PURE__ */ jsx43(
+                    /* @__PURE__ */ jsx44(TableCellData, { children: /* @__PURE__ */ jsx44("span", { css: variableValue, title: textValue, children: textValue }) }),
+                    /* @__PURE__ */ jsx44(TableCellData, { align: "right", children: readOnly ? null : /* @__PURE__ */ jsx44(
                       "button",
                       {
                         type: "button",
@@ -5234,7 +5251,7 @@ function VariablesList() {
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ jsx43(Icon5, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ jsx44(Icon5, { icon: "trash", iconColor: "red" })
                       }
                     ) })
                   ]
@@ -5247,7 +5264,7 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    !readOnly && /* @__PURE__ */ jsx43(
+    !readOnly && /* @__PURE__ */ jsx44(
       AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
@@ -5261,37 +5278,37 @@ function VariablesList() {
 }
 
 // src/components/DataResourceDynamicInputProvider.tsx
-import { jsx as jsx44 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx45 } from "@emotion/react/jsx-runtime";
 function DataResourceDynamicInputProvider(props) {
   const { children, dynamicInputs } = props;
   if (dynamicInputs) {
-    return /* @__PURE__ */ jsx44(DataResourceDynamicInputProviderRenderer, { ...props, children });
+    return /* @__PURE__ */ jsx45(DataResourceDynamicInputProviderRenderer, { ...props, children });
   }
-  return /* @__PURE__ */ jsx44(DataResourceDynamicInputProviderContextShim, { children });
+  return /* @__PURE__ */ jsx45(DataResourceDynamicInputProviderContextShim, { children });
 }
 function DataResourceDynamicInputProviderContextShim(props) {
   const {
     metadata: { dynamicInputs }
   } = useMeshLocation("dataResource");
-  return /* @__PURE__ */ jsx44(DataResourceDynamicInputProviderRenderer, { ...props, dynamicInputs });
+  return /* @__PURE__ */ jsx45(DataResourceDynamicInputProviderRenderer, { ...props, dynamicInputs });
 }
 function DataResourceDynamicInputProviderRenderer({
   children,
   dynamicInputs
 }) {
   const variables = useDynamicInputsAsVariables(dynamicInputs);
-  return /* @__PURE__ */ jsx44(VariablesProvider, { value: variables, readOnly: true, children });
+  return /* @__PURE__ */ jsx45(VariablesProvider, { value: variables, readOnly: true, children });
 }
 
 // src/components/DataResourceVariablesList.tsx
 import { Callout as Callout4, VerticalRhythm } from "@uniformdev/design-system";
-import { jsx as jsx45 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx46 } from "@emotion/react/jsx-runtime";
 function DataResourceVariablesList(props) {
   const {
     value,
     metadata: { dataType, dynamicInputs }
   } = useMeshLocation("dataResource");
-  return /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46(
     DataResourceVariablesListExplicit,
     {
       ...props,
@@ -5312,14 +5329,14 @@ function DataResourceVariablesListExplicit({
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
-      return /* @__PURE__ */ jsx45(NoVariablesComponent, {});
+      return /* @__PURE__ */ jsx46(NoVariablesComponent, {});
     }
-    return /* @__PURE__ */ jsx45(Callout4, { type: "note", children: "No settings are required." });
+    return /* @__PURE__ */ jsx46(Callout4, { type: "note", children: "No settings are required." });
   }
-  return /* @__PURE__ */ jsx45(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ jsx45(VerticalRhythm, { children: variableDefinitions.map((variableDefinition) => {
+  return /* @__PURE__ */ jsx46(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ jsx46(VerticalRhythm, { children: variableDefinitions.map((variableDefinition) => {
     var _a, _b, _c;
     const VariableRenderer = variableDefinition.type ? (_a = typeRenderers == null ? void 0 : typeRenderers[variableDefinition.type]) != null ? _a : TextVariableRenderer : TextVariableRenderer;
-    return /* @__PURE__ */ jsx45("div", { children: /* @__PURE__ */ jsx45(
+    return /* @__PURE__ */ jsx46("div", { children: /* @__PURE__ */ jsx46(
       VariableRenderer,
       {
         definition: variableDefinition,
@@ -5344,7 +5361,7 @@ function DataResourceVariablesListExplicit({
 }
 function TextVariableRenderer({ definition, value, setValue }) {
   var _a;
-  return /* @__PURE__ */ jsx45("div", { "data-testid": "variable-input-container", children: /* @__PURE__ */ jsx45(
+  return /* @__PURE__ */ jsx46("div", { "data-testid": "variable-input-container", children: /* @__PURE__ */ jsx46(
     InputVariables,
     {
       label: definition.displayName || definition.name,
@@ -5359,11 +5376,11 @@ function TextVariableRenderer({ definition, value, setValue }) {
 // src/components/Request/RequestBody.tsx
 import { css as css28 } from "@emotion/react";
 import { InputSelect as InputSelect4, JsonEditor } from "@uniformdev/design-system";
-import { useState as useState13 } from "react";
+import { useState as useState14 } from "react";
 
 // src/components/Request/RequestProvider.tsx
 import * as React11 from "react";
-import { jsx as jsx46 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
 var RequestContext = React11.createContext(null);
 function RequestProvider({ value, onChange, children }) {
   const contextValue = React11.useMemo(() => {
@@ -5432,7 +5449,7 @@ function RequestProvider({ value, onChange, children }) {
       request: value
     };
   }, [onChange, value]);
-  return /* @__PURE__ */ jsx46(RequestContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx47(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
   const context = React11.useContext(RequestContext);
@@ -5456,17 +5473,17 @@ var requestTypeContainer = (bgColor) => css27`
 `;
 
 // src/components/Request/RequestTypeContainer.tsx
-import { jsx as jsx47 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx48 } from "@emotion/react/jsx-runtime";
 var RequestTypeContainer = ({
   bgColor = "transparent",
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ jsx47("div", { css: requestTypeContainer(bgColor), ...props, children });
+  return /* @__PURE__ */ jsx48("div", { css: requestTypeContainer(bgColor), ...props, children });
 };
 
 // src/components/Request/RequestBody.tsx
-import { jsx as jsx48, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs28 } from "@emotion/react/jsx-runtime";
 var LANGUAGE_OPTIONS = [
   { label: "Text", value: "plaintext" },
   { label: "JSON", value: "json" },
@@ -5485,7 +5502,7 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = useState13("json");
+  const [language, setLanguage] = useState14("json");
   return /* @__PURE__ */ jsxs28(
     "div",
     {
@@ -5493,14 +5510,14 @@ function RequestBody() {
         background: var(--white);
       `,
       children: [
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
             css: css28`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
-            children: /* @__PURE__ */ jsx48(
+            children: /* @__PURE__ */ jsx49(
               InputSelect4,
               {
                 label: "Language",
@@ -5523,7 +5540,7 @@ function RequestBody() {
             )
           }
         ),
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(
           JsonEditor,
           {
             height: 200,
@@ -5551,7 +5568,7 @@ import {
   TableRow as TableRow2,
   WarningMessage as WarningMessage2
 } from "@uniformdev/design-system";
-import { jsx as jsx49, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs29 } from "@emotion/react/jsx-runtime";
 function RequestHeaders({
   disableVariables,
   addOmitIfEmpty
@@ -5570,29 +5587,29 @@ function RequestHeaders({
       index
     });
   };
-  return /* @__PURE__ */ jsx49("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs29(Table2, { children: [
-    /* @__PURE__ */ jsx49(TableHead2, { children: /* @__PURE__ */ jsxs29(TableRow2, { children: [
-      /* @__PURE__ */ jsx49(TableCellHead2, { children: "Name" }),
-      /* @__PURE__ */ jsx49(TableCellHead2, { children: "Value" }),
-      addOmitIfEmpty ? /* @__PURE__ */ jsx49(TableCellHead2, { children: "Omit If Empty" }) : null
+  return /* @__PURE__ */ jsx50("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs29(Table2, { children: [
+    /* @__PURE__ */ jsx50(TableHead2, { children: /* @__PURE__ */ jsxs29(TableRow2, { children: [
+      /* @__PURE__ */ jsx50(TableCellHead2, { children: "Name" }),
+      /* @__PURE__ */ jsx50(TableCellHead2, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ jsx50(TableCellHead2, { children: "Omit If Empty" }) : null
     ] }) }),
     /* @__PURE__ */ jsxs29(TableBody2, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
         return /* @__PURE__ */ jsxs29(TableRow2, { children: [
           /* @__PURE__ */ jsxs29(TableCellData2, { width: "50%", children: [
             baseHeader.key,
-            /* @__PURE__ */ jsx49("br", {}),
-            /* @__PURE__ */ jsx49("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx49("small", { children: "from data source" }) })
+            /* @__PURE__ */ jsx50("br", {}),
+            /* @__PURE__ */ jsx50("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx50("small", { children: "from data source" }) })
           ] }),
           /* @__PURE__ */ jsxs29(TableCellData2, { width: "50%", children: [
-            /* @__PURE__ */ jsx49("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
-            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ jsx49(WarningMessage2, { message: "overridden below" }) : null
+            /* @__PURE__ */ jsx50("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
+            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ jsx50(WarningMessage2, { message: "overridden below" }) : null
           ] })
         ] }, baseHeader.key);
       }),
       deezHeaders.map((header, index) => {
         return /* @__PURE__ */ jsxs29(TableRow2, { children: [
-          /* @__PURE__ */ jsx49(TableCellData2, { width: "50%", children: /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(TableCellData2, { width: "50%", children: /* @__PURE__ */ jsx50(
             Input3,
             {
               label: header.key,
@@ -5612,7 +5629,7 @@ function RequestHeaders({
               "data-testid": "header-key"
             }
           ) }),
-          /* @__PURE__ */ jsx49(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx49(
+          /* @__PURE__ */ jsx50(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx50(
             InputVariables,
             {
               value: header.value,
@@ -5623,7 +5640,7 @@ function RequestHeaders({
               "data-testid": "header-value"
             }
           ) : null }),
-          addOmitIfEmpty ? /* @__PURE__ */ jsx49(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx49(
+          addOmitIfEmpty ? /* @__PURE__ */ jsx50(TableCellData2, { width: "50%", children: header.key ? /* @__PURE__ */ jsx50(
             Input3,
             {
               type: "checkbox",
@@ -5648,11 +5665,11 @@ function RequestHeaders({
 
 // src/components/Request/RequestMethodSelect.tsx
 import { InputSelect as InputSelect5 } from "@uniformdev/design-system";
-import { jsx as jsx50 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx51 } from "@emotion/react/jsx-runtime";
 function RequestMethodSelect(props) {
   var _a;
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     InputSelect5,
     {
       ...props,
@@ -5678,7 +5695,7 @@ import {
   TableRow as TableRow3,
   WarningMessage as WarningMessage3
 } from "@uniformdev/design-system";
-import { jsx as jsx51, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs30 } from "@emotion/react/jsx-runtime";
 function RequestParameters({
   disableVariables,
   addOmitIfEmpty
@@ -5698,29 +5715,29 @@ function RequestParameters({
       index
     });
   };
-  return /* @__PURE__ */ jsx51("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs30(Table3, { children: [
-    /* @__PURE__ */ jsx51(TableHead3, { children: /* @__PURE__ */ jsxs30(TableRow3, { children: [
-      /* @__PURE__ */ jsx51(TableCellHead3, { children: "Name" }),
-      /* @__PURE__ */ jsx51(TableCellHead3, { children: "Value" }),
-      addOmitIfEmpty ? /* @__PURE__ */ jsx51(TableCellHead3, { children: "Omit If Empty" }) : null
+  return /* @__PURE__ */ jsx52("div", { css: innerContentStyles, children: /* @__PURE__ */ jsxs30(Table3, { children: [
+    /* @__PURE__ */ jsx52(TableHead3, { children: /* @__PURE__ */ jsxs30(TableRow3, { children: [
+      /* @__PURE__ */ jsx52(TableCellHead3, { children: "Name" }),
+      /* @__PURE__ */ jsx52(TableCellHead3, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ jsx52(TableCellHead3, { children: "Omit If Empty" }) : null
     ] }) }),
     /* @__PURE__ */ jsxs30(TableBody3, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
         return /* @__PURE__ */ jsxs30(TableRow3, { children: [
           /* @__PURE__ */ jsxs30(TableCellData3, { width: "50%", children: [
             baseParameter.key,
-            /* @__PURE__ */ jsx51("br", {}),
-            /* @__PURE__ */ jsx51("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx51("small", { children: "from data source" }) })
+            /* @__PURE__ */ jsx52("br", {}),
+            /* @__PURE__ */ jsx52("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ jsx52("small", { children: "from data source" }) })
           ] }),
           /* @__PURE__ */ jsxs30(TableCellData3, { width: "50%", children: [
-            /* @__PURE__ */ jsx51("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
-            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ jsx51(WarningMessage3, { message: "overridden below" }) : null
+            /* @__PURE__ */ jsx52("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
+            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ jsx52(WarningMessage3, { message: "overridden below" }) : null
           ] })
         ] }, baseParameter.key);
       }),
       deezParameters.map((parameter, index) => {
         return /* @__PURE__ */ jsxs30(TableRow3, { children: [
-          /* @__PURE__ */ jsx51(TableCellData3, { width: "50%", children: /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx52(TableCellData3, { width: "50%", children: /* @__PURE__ */ jsx52(
             Input4,
             {
               label: parameter.key,
@@ -5744,7 +5761,7 @@ function RequestParameters({
               "data-testid": "parameter-key"
             }
           ) }),
-          /* @__PURE__ */ jsx51(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx51(
+          /* @__PURE__ */ jsx52(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx52(
             InputVariables,
             {
               value: parameter.value,
@@ -5760,7 +5777,7 @@ function RequestParameters({
               enableEditingVariables: true
             }
           ) : null }),
-          addOmitIfEmpty ? /* @__PURE__ */ jsx51(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx51(
+          addOmitIfEmpty ? /* @__PURE__ */ jsx52(TableCellData3, { width: "50%", children: parameter.key ? /* @__PURE__ */ jsx52(
             Input4,
             {
               type: "checkbox",
@@ -5808,7 +5825,7 @@ function decodeVariablesInUrlEncodedString(string, varValues) {
 }
 
 // src/components/Request/RequestUrl.tsx
-import { Fragment as Fragment12, jsx as jsx52, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx53, jsxs as jsxs31 } from "@emotion/react/jsx-runtime";
 function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
@@ -5829,7 +5846,7 @@ function RequestUrl() {
         word-break: break-word;
       `,
       children: [
-        request.baseRequest ? /* @__PURE__ */ jsx52("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
+        request.baseRequest ? /* @__PURE__ */ jsx53("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
         /* @__PURE__ */ jsxs31("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
           urlEncodeRequestUrl(request.relativeUrl, variables),
           mergedParameters.length > 0 ? /* @__PURE__ */ jsxs31(Fragment12, { children: [
@@ -5875,10 +5892,10 @@ function transformPastedUrl(value, currentRequest, dispatch) {
 }
 
 // src/components/Request/RequestUrlInput.tsx
-import { jsx as jsx53 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx54 } from "@emotion/react/jsx-runtime";
 function RequestUrlInput(props) {
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ jsx53(
+  return /* @__PURE__ */ jsx54(
     InputVariables,
     {
       ...props,
@@ -5928,12 +5945,12 @@ function useRequestParameter(paramName) {
 }
 
 // src/components/DataSourceEditor.tsx
-import { jsx as jsx54 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx55 } from "@emotion/react/jsx-runtime";
 function DataSourceEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const { value } = useMeshLocation("dataSource");
   const currentRequestValue = convertDataSourceToRequestData(value);
-  return /* @__PURE__ */ jsx54(
+  return /* @__PURE__ */ jsx55(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
@@ -5949,7 +5966,7 @@ function DataSourceEditor({ onChange, children, editVariableComponent }) {
       },
       editVariableComponent,
       readOnly: true,
-      children: /* @__PURE__ */ jsx54(
+      children: /* @__PURE__ */ jsx55(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -5986,7 +6003,7 @@ function convertRequestDataToDataSource(dataSource, requestData) {
 }
 
 // src/components/DataTypeEditor.tsx
-import { jsx as jsx55 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx56 } from "@emotion/react/jsx-runtime";
 function DataTypeEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const {
@@ -5995,7 +6012,7 @@ function DataTypeEditor({ onChange, children, editVariableComponent }) {
     isReadOnly
   } = useMeshLocation("dataType");
   const currentRequestValue = convertDataTypeToRequestData(value, dataSource);
-  return /* @__PURE__ */ jsx55(
+  return /* @__PURE__ */ jsx56(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
@@ -6011,7 +6028,7 @@ function DataTypeEditor({ onChange, children, editVariableComponent }) {
       },
       editVariableComponent,
       readOnly: isReadOnly,
-      children: /* @__PURE__ */ jsx55(
+      children: /* @__PURE__ */ jsx56(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -6061,10 +6078,10 @@ import { LoadingIndicator as LoadingIndicator3, Theme as Theme2 } from "@uniform
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 import { initializeUniformMeshSDK } from "@uniformdev/mesh-sdk";
-import { useEffect as useEffect15, useRef as useRef14, useState as useState14 } from "react";
+import { useEffect as useEffect15, useRef as useRef14, useState as useState15 } from "react";
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = useState14();
-  const [sdk, setSdk] = useState14();
+  const [error, setError] = useState15();
+  const [sdk, setSdk] = useState15();
   const initializationInProgress = useRef14(false);
   useEffect15(
     () => {
@@ -6099,7 +6116,7 @@ var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
 };
 
 // src/components/MeshApp.tsx
-import { jsx as jsx56, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs32 } from "@emotion/react/jsx-runtime";
 var MeshApp = ({
   children,
   loadingComponent,
@@ -6108,25 +6125,25 @@ var MeshApp = ({
   const { initializing, error, sdk } = useInitializeUniformMeshSdk();
   if (initializing || !sdk) {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? /* @__PURE__ */ jsx56(LoadingComponent, {}) : /* @__PURE__ */ jsx56(LoadingIndicator3, {});
+    return LoadingComponent ? /* @__PURE__ */ jsx57(LoadingComponent, {}) : /* @__PURE__ */ jsx57(LoadingIndicator3, {});
   }
   if (error) {
     const ErrorComponent = errorComponent;
     if (ErrorComponent) {
-      return /* @__PURE__ */ jsx56(ErrorComponent, { error });
+      return /* @__PURE__ */ jsx57(ErrorComponent, { error });
     }
     throw error;
   }
   return /* @__PURE__ */ jsxs32(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
-    /* @__PURE__ */ jsx56(Theme2, {}),
-    /* @__PURE__ */ jsx56(UniformMeshLocationContextProvider, { children })
+    /* @__PURE__ */ jsx57(Theme2, {}),
+    /* @__PURE__ */ jsx57(UniformMeshLocationContextProvider, { children })
   ] });
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
 import { css as css30 } from "@emotion/react";
 import { Button as Button3, LoadingIndicator as LoadingIndicator4 } from "@uniformdev/design-system";
-import { jsx as jsx57, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs33 } from "@emotion/react/jsx-runtime";
 var DataRefreshButton = ({
   buttonText,
   isLoading,
@@ -6134,7 +6151,7 @@ var DataRefreshButton = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs33(Button3, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
-    !isLoading ? null : /* @__PURE__ */ jsx57(
+    !isLoading ? null : /* @__PURE__ */ jsx58(
       LoadingIndicator4,
       {
         css: css30`
@@ -6159,9 +6176,9 @@ import {
   useContext as useContext7,
   useDeferredValue,
   useMemo as useMemo14,
-  useState as useState15
+  useState as useState16
 } from "react";
-import { jsx as jsx58 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx59 } from "@emotion/react/jsx-runtime";
 var ObjectSearchContext = createContext5({
   onSetQuery: () => {
   },
@@ -6183,15 +6200,15 @@ var ObjectSearchProvider = ({
   children,
   defaultQuery
 }) => {
-  const [query, setQuery] = useState15({
+  const [query, setQuery] = useState16({
     contentType: "",
     keyword: "",
     ...defaultQuery
   });
   const { flatVariables } = useVariables(true);
   const querySearchDeferred = useDeferredValue(query);
-  const [selectedItems, setSelectedItems] = useState15(currentlySelectedItems != null ? currentlySelectedItems : []);
-  const [list, setList] = useState15({});
+  const [selectedItems, setSelectedItems] = useState16(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = useState16({});
   const onSetQuery = useCallback4(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
@@ -6252,7 +6269,7 @@ var ObjectSearchProvider = ({
       onSetList
     ]
   );
-  return /* @__PURE__ */ jsx58(ObjectSearchContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx59(ObjectSearchContext.Provider, { value, children });
 };
 function useObjectSearchContext() {
   return useContext7(ObjectSearchContext);
@@ -6347,7 +6364,7 @@ var ObjectListItemUnControlledContent = css31`
 `;
 
 // src/components/ObjectSearch/ObjectSearchListItem.tsx
-import { jsx as jsx59, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx60, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
 var ObjectSearchListItem = ({
   id,
   title,
@@ -6387,30 +6404,30 @@ var ObjectSearchListItem = ({
             css: ObjectListItemControlledContent,
             "aria-disabled": disabled,
             children: [
-              !imageUrl ? null : /* @__PURE__ */ jsx59("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
-              !image || imageUrl ? null : /* @__PURE__ */ jsx59("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
+              !imageUrl ? null : /* @__PURE__ */ jsx60("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
+              !image || imageUrl ? null : /* @__PURE__ */ jsx60("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
               /* @__PURE__ */ jsxs34("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
-                !contentType ? null : /* @__PURE__ */ jsx59("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
-                /* @__PURE__ */ jsx59("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
+                !contentType ? null : /* @__PURE__ */ jsx60("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
+                /* @__PURE__ */ jsx60("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
               ] })
             ]
           }
         ),
         /* @__PURE__ */ jsxs34("div", { css: ObjectListItemInfoContainer, children: [
-          selected ? /* @__PURE__ */ jsx59(Chip, { text: "selected", size: "xs" }) : null,
-          !popoverData ? null : /* @__PURE__ */ jsx59(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+          selected ? /* @__PURE__ */ jsx60(Chip, { text: "selected", size: "xs" }) : null,
+          !popoverData ? null : /* @__PURE__ */ jsx60(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
         ] }),
-        !children ? null : /* @__PURE__ */ jsx59("div", { css: ObjectListItemUnControlledContent, children })
+        !children ? null : /* @__PURE__ */ jsx60("div", { css: ObjectListItemUnControlledContent, children })
       ]
     }
   );
 };
 var ObjectSearchListItemLoadingSkeleton = () => {
-  return /* @__PURE__ */ jsx59("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
+  return /* @__PURE__ */ jsx60("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-import { jsx as jsx60, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var ObjectSearchContainer = ({
   label,
   enableDynamicInputToResultId,
@@ -6422,7 +6439,7 @@ var ObjectSearchContainer = ({
   const { onSelectItem, selectedListItems, list } = useObjectSearchContext();
   const { flatVariables } = useVariables(true);
   const inputValue = (_b = (_a = selectedListItems == null ? void 0 : selectedListItems[0]) == null ? void 0 : _a.id) != null ? _b : "";
-  const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx60(
+  const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx61(
     ScrollableList,
     {
       role: "list",
@@ -6432,7 +6449,7 @@ var ObjectSearchContainer = ({
           max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
         }
       `,
-      children: /* @__PURE__ */ jsx60(DefaultResultList, {})
+      children: /* @__PURE__ */ jsx61(DefaultResultList, {})
     }
   );
   const body = /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
@@ -6466,8 +6483,8 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ jsx60(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
-    /* @__PURE__ */ jsx60(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(IconsProvider, { children: /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
+    /* @__PURE__ */ jsx61(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx61(
       InputVariables,
       {
         label,
@@ -6489,17 +6506,17 @@ var DefaultResultList = () => {
   var _a;
   const { list } = useObjectSearchContext();
   if (!list.items) {
-    return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx60(ObjectSearchListItemLoadingSkeleton, {}, i));
+    return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx61(ObjectSearchListItemLoadingSkeleton, {}, i));
   }
   if (list.items.length === 0) {
-    return /* @__PURE__ */ jsx60(Callout5, { type: "info", children: "No results were found" });
+    return /* @__PURE__ */ jsx61(Callout5, { type: "info", children: "No results were found" });
   }
-  return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx60(ObjectSearchListItem, { ...item }, item.id));
+  return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ jsx61(ObjectSearchListItem, { ...item }, item.id));
 };
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
 import { InputKeywordSearch as InputKeywordSearch2, InputSelect as InputSelect6 } from "@uniformdev/design-system";
-import { useMemo as useMemo15, useState as useState16 } from "react";
+import { useMemo as useMemo15, useState as useState17 } from "react";
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
 import { css as css33 } from "@emotion/react";
@@ -6522,7 +6539,7 @@ var ObjectSearchFilterGrid = (gridColumns) => css33`
 `;
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-import { jsx as jsx61, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilter = ({
   requireContentType,
   typeSelectorAllTypesOptionText = "All content types",
@@ -6533,7 +6550,7 @@ var ObjectSearchFilter = ({
 }) => {
   var _a, _b;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = useState16({
+  const [searchState, setSearchState] = useState17({
     contentType: (_a = query.contentType) != null ? _a : "",
     keyword: (_b = query.keyword) != null ? _b : ""
   });
@@ -6561,7 +6578,7 @@ var ObjectSearchFilter = ({
         ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
       ],
       children: [
-        memoizedSelectOptions.length ? /* @__PURE__ */ jsx61(
+        memoizedSelectOptions.length ? /* @__PURE__ */ jsx62(
           InputSelect6,
           {
             label: selectLabel,
@@ -6571,7 +6588,7 @@ var ObjectSearchFilter = ({
             value: query.contentType
           }
         ) : null,
-        /* @__PURE__ */ jsx61(
+        /* @__PURE__ */ jsx62(
           InputKeywordSearch2,
           {
             inputFieldName: searchInputName,
@@ -6588,11 +6605,11 @@ var ObjectSearchFilter = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
-import { jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilterContainer2 = ({ label, children }) => {
   return /* @__PURE__ */ jsxs37("div", { children: [
-    label ? /* @__PURE__ */ jsx62("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
-    /* @__PURE__ */ jsx62("div", { css: ObjectSearchFilterContainer, children })
+    label ? /* @__PURE__ */ jsx63("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
+    /* @__PURE__ */ jsx63("div", { css: ObjectSearchFilterContainer, children })
   ] });
 };
 
@@ -6636,14 +6653,14 @@ var ButtonIcon = css34`
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
-import { jsx as jsx63, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx64, jsxs as jsxs38 } from "@emotion/react/jsx-runtime";
 var ObjectSearchResultItemButton = ({
   text,
   icon,
   ...props
 }) => {
   return /* @__PURE__ */ jsxs38("button", { type: "button", css: ButtonStyles, ...props, children: [
-    !icon ? null : /* @__PURE__ */ jsx63(Image, { src: icon, css: ButtonIcon }),
+    !icon ? null : /* @__PURE__ */ jsx64(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
@@ -6653,7 +6670,7 @@ var LinkButton = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs38("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
-    !icon ? null : /* @__PURE__ */ jsx63(Image, { src: icon, css: ButtonIcon }),
+    !icon ? null : /* @__PURE__ */ jsx64(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
@@ -6719,7 +6736,7 @@ var ObjectSearchImage = css35`
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
-import { jsx as jsx64, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs39 } from "@emotion/react/jsx-runtime";
 var ObjectSearchResultItem = ({
   id,
   title,
@@ -6744,41 +6761,41 @@ var ObjectSearchResultItem = ({
     onRemove == null ? void 0 : onRemove();
   };
   return /* @__PURE__ */ jsxs39("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
-    disableDnD ? null : /* @__PURE__ */ jsx64("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
-    /* @__PURE__ */ jsx64("div", { children: /* @__PURE__ */ jsxs39("div", { css: ObjectSearchContentContainer, children: [
-      !imageUrl ? null : /* @__PURE__ */ jsx64("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
+    disableDnD ? null : /* @__PURE__ */ jsx65("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
+    /* @__PURE__ */ jsx65("div", { children: /* @__PURE__ */ jsxs39("div", { css: ObjectSearchContentContainer, children: [
+      !imageUrl ? null : /* @__PURE__ */ jsx65("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
       /* @__PURE__ */ jsxs39("div", { children: [
-        /* @__PURE__ */ jsx64("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
+        /* @__PURE__ */ jsx65("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
         /* @__PURE__ */ jsxs39("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
           title != null ? title : name,
-          !popoverData ? null : /* @__PURE__ */ jsx64(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ jsx65(Popover2, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
         !createdAt && !publishStatus ? null : /* @__PURE__ */ jsxs39("div", { css: ObjectSearchAuthorStateGroup, children: [
-          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ jsx64(Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
+          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ jsx65(Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
           !createdAt && !publishedAt ? null : /* @__PURE__ */ jsxs39("div", { css: ObjectSearchUpdateGroup, children: [
             !createdAt ? null : /* @__PURE__ */ jsxs39("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ jsx64("strong", { children: "Last updated: " }),
+              /* @__PURE__ */ jsx65("strong", { children: "Last updated: " }),
               timeagoFormat(createdAt)
             ] }),
             !publishedAt ? null : /* @__PURE__ */ jsxs39("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ jsx64("strong", { children: "Last published: " }),
+              /* @__PURE__ */ jsx65("strong", { children: "Last published: " }),
               timeagoFormat(publishedAt)
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ jsx64("div", { children })
+        /* @__PURE__ */ jsx65("div", { children })
       ] })
     ] }) }),
     !editLink && hideRemoveButton ? null : /* @__PURE__ */ jsxs39("div", { css: ObjectSearchAuthorStateGroup, children: [
-      !editLink ? null : /* @__PURE__ */ jsx64(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
-      hideRemoveButton ? null : /* @__PURE__ */ jsx64(Button4, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+      !editLink ? null : /* @__PURE__ */ jsx65(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
+      hideRemoveButton ? null : /* @__PURE__ */ jsx65(Button4, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
     ] })
   ] });
 };
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
 import { Button as Button5, Counter } from "@uniformdev/design-system";
-import { DragDropContext as DragDropContext3, Draggable as Draggable3, Droppable as Droppable3 } from "react-beautiful-dnd";
+import { Draggable as Draggable3, Droppable as Droppable3 } from "react-beautiful-dnd";
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
 import { css as css36 } from "@emotion/react";
@@ -6806,16 +6823,17 @@ var ObjectSearchResultListTitle = css36`
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-import { Fragment as Fragment13, jsx as jsx65, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
+import { Fragment as Fragment13, jsx as jsx66, jsxs as jsxs40 } from "@emotion/react/jsx-runtime";
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ jsx65(ObjectSearchResultItem, { ...value }),
+  renderResultComponent = (value) => /* @__PURE__ */ jsx66(ObjectSearchResultItem, { ...value }),
   multiSelectId,
   disableDnD = false,
+  getContainerForDnDReparenting,
   whenNothingSelected = null
 }) {
   const { selectedListItems, onRemoveAllSelectedItems, onSelectItem } = useObjectSearchContext();
@@ -6833,16 +6851,37 @@ function ObjectSearchResultList({
       return result;
     }
   };
+  const getDraggableItem = (provided, snapshot, rubric) => {
+    const item = selectedListItems.find((i) => i.id === rubric.draggableId);
+    const renderListItem = renderResultComponent({
+      ...item,
+      disableDnD: selectedListItems.length === 1 || disableDnD
+    });
+    return /* @__PURE__ */ jsx66(
+      "div",
+      {
+        css: [
+          ObjectSearchDragContainer,
+          snapshot.isDragging ? ObjectSearchContainerDragging : void 0
+        ],
+        ref: provided.innerRef,
+        "data-dragging": snapshot.isDragging,
+        ...provided.draggableProps,
+        ...provided.dragHandleProps,
+        children: renderListItem
+      }
+    );
+  };
   return /* @__PURE__ */ jsxs40(Fragment13, { children: [
     /* @__PURE__ */ jsxs40("div", { role: "group", css: ObjectSearchResultListContainer, children: [
       /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
-        /* @__PURE__ */ jsx65("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
+        /* @__PURE__ */ jsx66("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
-        !selectedListItems.length ? null : /* @__PURE__ */ jsx65(Counter, { count: selectedListItems.length })
+        !selectedListItems.length ? null : /* @__PURE__ */ jsx66(Counter, { count: selectedListItems.length })
       ] }),
       /* @__PURE__ */ jsxs40("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
-        hideRemoveButton ? null : /* @__PURE__ */ jsx65(
+        hideRemoveButton ? null : /* @__PURE__ */ jsx66(
           Button5,
           {
             buttonType: "ghostDestructive",
@@ -6854,43 +6893,36 @@ function ObjectSearchResultList({
         )
       ] })
     ] }),
-    !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx65(DragDropContext3, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx65(Droppable3, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ jsxs40("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
-      selectedListItems.map((item, i) => {
-        const itemValues = selectedListItems.length === 1 ? { ...item, disableDnD: true } : { ...item, disableDnD };
-        const renderListItem = renderResultComponent(itemValues);
-        return /* @__PURE__ */ jsx65(
-          Draggable3,
-          {
-            draggableId: item.id,
-            index: i,
-            isDragDisabled: selectedListItems.length === 1 || disableDnD,
-            children: (provided2, snapshot) => /* @__PURE__ */ jsx65(
-              "div",
+    !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ jsx66(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ jsx66(
+      Droppable3,
+      {
+        droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
+        renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
+        getContainerForClone: getContainerForDnDReparenting,
+        children: (provided) => /* @__PURE__ */ jsxs40("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
+          selectedListItems.map((item, i) => {
+            return /* @__PURE__ */ jsx66(
+              Draggable3,
               {
-                css: [
-                  ObjectSearchDragContainer,
-                  snapshot.isDragging ? ObjectSearchContainerDragging : void 0
-                ],
-                ref: provided2.innerRef,
-                "data-dragging": snapshot.isDragging,
-                ...provided2.draggableProps,
-                ...provided2.dragHandleProps,
-                children: renderListItem
-              }
-            )
-          },
-          item.id
-        );
-      }),
-      provided.placeholder
-    ] }) }) })
+                draggableId: item.id,
+                index: i,
+                isDragDisabled: selectedListItems.length === 1 || disableDnD,
+                children: getDraggableItem
+              },
+              item.id
+            );
+          }),
+          provided.placeholder
+        ] })
+      }
+    ) })
   ] });
 }
 
 // src/components/ObjectSearch/QueryFilter.tsx
 import { Input as Input5, InputKeywordSearch as InputKeywordSearch3, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
-import { useEffect as useEffect16, useState as useState17 } from "react";
-import { jsx as jsx66, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
+import { useEffect as useEffect16, useState as useState18 } from "react";
+import { jsx as jsx67, jsxs as jsxs41 } from "@emotion/react/jsx-runtime";
 var QueryFilter = ({
   requireContentType,
   queryFilterTitle = "Configure Query",
@@ -6921,7 +6953,7 @@ var QueryFilter = ({
 }) => {
   var _a, _b, _c, _d, _e, _f;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = useState17({
+  const [queryState, setQueryState] = useState18({
     contentType: (_a = query.contentType) != null ? _a : "",
     keyword: (_b = query.contentType) != null ? _b : "",
     count: countValue != null ? countValue : 5,
@@ -6936,9 +6968,9 @@ var QueryFilter = ({
     onSetQuery(queryState);
   }, [onSetQuery, queryState]);
   return /* @__PURE__ */ jsxs41("fieldset", { children: [
-    /* @__PURE__ */ jsx66("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
-    /* @__PURE__ */ jsx66("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs41(VerticalRhythm3, { children: [
-      /* @__PURE__ */ jsx66(
+    /* @__PURE__ */ jsx67("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
+    /* @__PURE__ */ jsx67("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ jsxs41(VerticalRhythm3, { children: [
+      /* @__PURE__ */ jsx67(
         InputVariables,
         {
           label: searchInputLabel,
@@ -6946,7 +6978,7 @@ var QueryFilter = ({
           onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
           disableInlineMenu: true,
           id: "qf_searchText",
-          inputWhenNoVariables: /* @__PURE__ */ jsx66(
+          inputWhenNoVariables: /* @__PURE__ */ jsx67(
             InputKeywordSearch3,
             {
               id: "qf_searchText",
@@ -6961,7 +6993,7 @@ var QueryFilter = ({
         }
       ),
       /* @__PURE__ */ jsxs41("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx67(
           InputVariables,
           {
             label: contentTypeLabel,
@@ -6969,7 +7001,7 @@ var QueryFilter = ({
             value: (_f = queryState.contentType) != null ? _f : "",
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ jsx66(
+            inputWhenNoVariables: /* @__PURE__ */ jsx67(
               InputSelect7,
               {
                 id: "qf_contentType",
@@ -6988,7 +7020,7 @@ var QueryFilter = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx67(
           InputVariables,
           {
             label: countLabel,
@@ -6996,7 +7028,7 @@ var QueryFilter = ({
             value: queryState.count.toString(10),
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ jsx66(
+            inputWhenNoVariables: /* @__PURE__ */ jsx67(
               Input5,
               {
                 id: "qf_count",
@@ -7012,7 +7044,7 @@ var QueryFilter = ({
         )
       ] }),
       /* @__PURE__ */ jsxs41("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx67(
           InputVariables,
           {
             id: "qf_sortBy",
@@ -7020,7 +7052,7 @@ var QueryFilter = ({
             value: queryState.sortBy,
             onChange: (newSortBy) => handleFilterChange({ sortBy: newSortBy }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ jsx66(
+            inputWhenNoVariables: /* @__PURE__ */ jsx67(
               InputSelect7,
               {
                 label: sortLabel,
@@ -7042,7 +7074,7 @@ var QueryFilter = ({
             )
           }
         ),
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx67(
           InputVariables,
           {
             label: sortOrderLabel,
@@ -7050,7 +7082,7 @@ var QueryFilter = ({
             value: queryState.sortOrder,
             onChange: (newSort) => handleFilterChange({ sortOrder: newSort }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ jsx66(
+            inputWhenNoVariables: /* @__PURE__ */ jsx67(
               InputSelect7,
               {
                 label: sortOrderLabel,
@@ -7076,7 +7108,7 @@ var QueryFilter = ({
 
 // src/components/ParamTypeDynamicDataProvider.tsx
 import { useEffect as useEffect17, useMemo as useMemo16, useRef as useRef15 } from "react";
-import { jsx as jsx67 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx68 } from "@emotion/react/jsx-runtime";
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
   const {
@@ -7088,7 +7120,7 @@ function ParamTypeDynamicDataProvider(props) {
     () => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
     [dynamicInputsAsVariables, connectedDataAsVariables]
   );
-  return /* @__PURE__ */ jsx67(VariablesProvider, { value: variables, onChange: () => {
+  return /* @__PURE__ */ jsx68(VariablesProvider, { value: variables, onChange: () => {
   }, editVariableComponent: JsonMeshVariableEditor, children });
 }
 var JsonMeshVariableEditor = ({