@uniformdev/mesh-sdk-react 19.79.1-alpha.11 → 19.79.1-alpha.18

package/dist/index.esm.js

@@ -988,7 +988,7 @@ var searchRowPopover = css6`
   border-left: 4px solid var(--brand-secondary-3);
   border-radius: var(--rounded-base);
   box-shadow: var(--shadow-base);
-  color: var(--brand-secondary-1);
+  color: var(--typography-base);
   padding: var(--spacing-base);
   position: absolute;
   top: var(--spacing-base);
@@ -1122,7 +1122,7 @@ var selectedItemCopy = css8`
   position: relative;
 `;
 var selectedItemTitle = css8`
-  color: var(--brand-secondary-1);
+  color: var(--typography-base);
   font-size: var(--fs-base);
   font-weight: var(--fw-bold);
   line-height: 1;
@@ -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`
@@ -1431,7 +1448,7 @@ var entrySearchBtn = css10`
   border: 0;
 `;
 var entrySearchLoadMoreBtn = css10`
-  color: var(--brand-secondary-1);
+  color: var(--typography-base);
   display: block;
   font-weight: var(--fw-bold);
   font-size: var(--fs-sm);
@@ -1480,7 +1497,7 @@ var entrySearchSelectIcon = css10`
   padding-right: var(--spacing-sm);
 `;
 var entrySearchSelectImg = css10`
-  color: var(--brand-secondary-1);
+  color: var(--typography-base);
   width: 1.25rem;
   height: 1.25rem;
   transition: transform var(--duration-fast) var(--timing-ease-out);
@@ -1488,7 +1505,7 @@ var entrySearchSelectImg = css10`
 `;
 var entrySearchSelectOption = css10`
   background: var(--white);
-  color: var(--brand-secondary-1);
+  color: var(--typography-base);
 `;
 var draggableContainer = css10`
   position: relative;
@@ -1512,7 +1529,7 @@ var draggableIconWrapper = css10`
   opacity: 0;
 `;
 var draggableIcon = css10`
-  color: var(--brand-secondary-1);
+  color: var(--typography-base);
 `;
 var draggableIconOffset = css10`
   position: absolute;
@@ -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,17 +1829,17 @@ 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`
                             background: var(--white);
-                            color: var(--brand-secondary-1);
+                            color: var(--typography-base);
                           `,
                                   onClick: () => onAddNew(ct),
                                   children: ct.name
@@ -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
@@ -2384,7 +2401,7 @@ var damSelectedItemCopy = css16`
   position: relative;
 `;
 var damSelectedItemTitle = css16`
-  color: var(--brand-secondary-1);
+  color: var(--typography-base);
   font-size: var(--fs-base);
   font-weight: var(--fw-bold);
   line-height: 1;
@@ -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
     ] })
@@ -2654,13 +2671,14 @@ 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(
       (acc, [name, input3]) => {
-        const source = `from ${input3.type === "path" ? "URL path" : "query string"}`;
+        const source = `from ${name === LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
         acc[name] = {
           readOnly: true,
           type: input3.type,
@@ -2673,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;
@@ -2695,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);
@@ -2717,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 }));
@@ -2738,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);
@@ -2937,13 +2955,14 @@ 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,
   tooltip,
   reference,
   onClick,
+  clickToEdit,
   isFresh,
   selected,
   disabled
@@ -2951,8 +2970,8 @@ function VariableChip({
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
   const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? Fragment5 : UndefinedVariableReference;
-  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0;
-  return /* @__PURE__ */ jsx29(
+  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
+  return /* @__PURE__ */ jsx30(
     MultilineChip,
     {
       title: tooltip ? `${tooltip}${extraTitle ? `
@@ -2961,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: {
@@ -2979,7 +2998,7 @@ function UndefinedVariableReference({ children }) {
   );
 }
 function InfoVariableReference({ children }) {
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     "span",
     {
       style: {
@@ -3012,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
@@ -3045,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";
@@ -3067,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(),
@@ -3080,9 +3099,10 @@ function VariableEditor({
   variable,
   onSubmit,
   onCancel,
+  showDisplayName,
   disableMeshTip
 }) {
-  var _a, _b, _c, _d, _e, _f, _g;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const { variables } = useVariables();
   const currentVariable = variables[variable];
   const { register, handleSubmit, formState } = useForm({
@@ -3123,7 +3143,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,
@@ -3137,33 +3157,43 @@ function VariableEditor({
           }
         }
       ),
-      /* @__PURE__ */ jsx30(
+      showDisplayName ? /* @__PURE__ */ jsx31(
+        Input2,
+        {
+          ...register("displayName"),
+          label: "Display name",
+          autoComplete: "off",
+          caption: "This is the name that will be displayed in the UI. If not provided, the name will be used.",
+          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+        }
+      ) : null,
+      /* @__PURE__ */ jsx31(
         Input2,
         {
           ...register("helpText"),
           label: "Help Text",
           caption: "Appears when entering a value for this variable.",
           autoComplete: "off",
-          errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
+          errorMessage: (_g = formState.errors.helpText) == null ? void 0 : _g.message
         }
       ),
-      /* @__PURE__ */ jsx30(
+      /* @__PURE__ */ jsx31(
         Input2,
         {
           ...register("default"),
           label: "Default Value",
           autoComplete: "off",
-          errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
+          errorMessage: (_h = formState.errors.default) == null ? void 0 : _h.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",
@@ -3179,7 +3209,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,
@@ -3190,8 +3220,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(),
     []
@@ -3250,7 +3280,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,
@@ -3309,7 +3339,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;
@@ -3406,7 +3436,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(
@@ -3525,7 +3555,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,
@@ -3726,7 +3756,7 @@ function VariablesPlugin({
   if (disableVariables) {
     return null;
   }
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     LexicalTypeaheadMenuPlugin,
     {
       onQueryChange: setQueryString,
@@ -3739,7 +3769,7 @@ function VariablesPlugin({
         }
         let currentCumulativeMenuIndex = -1;
         return createPortal(
-          /* @__PURE__ */ jsx32(
+          /* @__PURE__ */ jsx33(
             "div",
             {
               "data-auto-resize-opt-in": true,
@@ -3758,14 +3788,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,
@@ -3778,18 +3808,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, {})
                 ] });
               }) })
             }
@@ -3802,7 +3832,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);
@@ -3867,7 +3897,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) {
@@ -3960,14 +3990,15 @@ 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,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
         editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
@@ -3985,7 +4016,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
@@ -4045,28 +4076,37 @@ var menuBtn2 = css21`
   transform: translateY(-50%);
 `;
 var input = css21`
+  --input-padding: 12px var(--spacing-base) 12px var(--spacing-sm);
   appearance: none;
   background-color: var(--white);
-  border: 1px solid var(--gray-400);
-  border-radius: var(--rounded-md);
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-sm);
   color: var(--gray-700);
-  padding-block: var(--spacing-base);
-  padding-left: var(--spacing-base);
-  padding-right: var(--spacing-lg);
-  line-height: 1.75;
+  padding: var(--input-padding);
+  min-height: 50px;
   width: 100%;
   position: relative;
   transition: background var(--duration-fast) var(--timing-ease-out),
     border-color var(--duration-fast) var(--timing-ease-out),
-    color var(--duration-fast) var(--timing-ease-out);
+    color var(--duration-fast) var(--timing-ease-out), box-shadow var(--duration-fast) var(--timing-ease-out);
+
+  &::placeholder {
+    color: var(--gray-400);
+  }
+
+  &:hover {
+    border-color: var(--accent-dark-hover);
+  }
 
+  &[data-focus='true'],
   &:focus,
   &:focus-within {
-    border-color: var(--brand-secondary-1);
-    box-shadow: none;
+    border-color: var(--accent-dark-active);
+    box-shadow: var(--elevation-100);
     outline: none;
   }
 
+  &[data-disabled='true'],
   &:disabled,
   &:disabled::placeholder {
     cursor: not-allowed;
@@ -4219,7 +4259,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,
@@ -4245,7 +4285,7 @@ function SelectVariableMenu({
     {
       placement: "bottom-start",
       withoutPortal: true,
-      menuTrigger: /* @__PURE__ */ jsx34(
+      menuTrigger: /* @__PURE__ */ jsx35(
         "button",
         {
           ...buttonProps,
@@ -4254,12 +4294,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 () => {
@@ -4271,15 +4311,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,
@@ -4288,25 +4328,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) => {
@@ -4322,7 +4362,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,
@@ -4333,7 +4373,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,
@@ -4344,7 +4384,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,
@@ -4352,10 +4392,10 @@ function VariableField({
       buttonProps: isActive ? { "aria-pressed": "true" } : void 0
     }
   ) : null;
-  return /* @__PURE__ */ jsxs20("div", { children: [
-    /* @__PURE__ */ jsxs20("label", { htmlFor: id, css: labelText, children: [
+  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
   ] });
@@ -4366,7 +4406,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";
@@ -4426,7 +4466,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,
@@ -4438,7 +4478,7 @@ function VariablesComposer(props) {
     autoFocus,
     ...variablesPluginProps
   } = props;
-  const [lastEmittedValue, setLastEmittedValue] = useState11(value);
+  const [lastEmittedValue, setLastEmittedValue] = useState12(value);
   const editorConfig = useMemo10(
     () => ({
       namespace: "uniform",
@@ -4456,9 +4496,10 @@ function VariablesComposer(props) {
   if (typeof document === "undefined")
     return null;
   return /* @__PURE__ */ jsxs21(LexicalComposer, { initialConfig: editorConfig, children: [
-    /* @__PURE__ */ jsx37(
+    /* @__PURE__ */ jsx38(
       OnChangePlugin,
       {
+        ignoreSelectionChange: true,
         onChange: (state) => {
           editorState.current = state;
           if (updateTimeout.current) {
@@ -4476,12 +4517,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 })
   ] });
 }
 
@@ -4507,23 +4548,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() {
@@ -4603,7 +4644,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,
@@ -4630,7 +4671,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);
@@ -4644,14 +4685,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,
@@ -4659,7 +4700,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: [
@@ -4673,16 +4714,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,
@@ -4712,9 +4753,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
       ]
     }
@@ -4727,11 +4768,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,
@@ -4785,7 +4826,7 @@ var input2 = css23`
   appearance: none;
   box-sizing: border-box;
   background: var(--white);
-  border: 1px solid var(--white);
+  border: 1px solid var(--gray-200);
   border-radius: var(--rounded-sm);
   color: var(--gray-700);
   font-size: var(--fs-sm);
@@ -4805,16 +4846,19 @@ var input2 = css23`
 
   &:focus,
   &:focus-within {
-    border-radius: var(--rounded-md);
-    box-shadow: none;
-    border: 1px solid var(--gray-300);
+    border-radius: var(--rounded-sm);
+    box-shadow: var(--elevation-100);
+    border: 1px solid var(--accent-dark-active);
     outline: none;
   }
+  &:hover {
+    border: 1px solid var(--accent-dark-hover);
+  }
 
   &:disabled,
   &:disabled::placeholder,
   &:disabled:hover {
-    border-radius: var(--rounded-md);
+    border-radius: var(--rounded-sm);
     cursor: not-allowed;
     color: var(--gray-400);
   }
@@ -4839,7 +4883,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,
@@ -4859,20 +4903,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,
@@ -4924,7 +4968,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,
@@ -4966,11 +5010,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,
@@ -4978,7 +5022,7 @@ function ParameterOrSingleVariable(props) {
                 css: input2
               }
             ) }),
-            disableVariablesForReals ? null : /* @__PURE__ */ jsx41(
+            disableVariablesForReals ? null : /* @__PURE__ */ jsx42(
               VariablesComposerVariableMenu,
               {
                 ...sharedMenuProps,
@@ -4998,7 +5042,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,
@@ -5033,8 +5077,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,
           {
@@ -5047,7 +5091,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,
@@ -5060,7 +5104,7 @@ function ParameterVariables(props) {
                   ]
                 }
               ) }),
-              disableVariablesForReals ? null : /* @__PURE__ */ jsx42(
+              disableVariablesForReals ? null : /* @__PURE__ */ jsx43(
                 VariablesComposerVariableMenu,
                 {
                   ...sharedMenuProps,
@@ -5104,7 +5148,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";
@@ -5136,7 +5180,6 @@ var tableCellDragIcon = css25`
 `;
 var variableName = css25`
   border: none;
-  color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
   padding: 0;
   background: none;
@@ -5153,7 +5196,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);
@@ -5163,29 +5206,29 @@ function VariablesList() {
       const result = [...sorted || []];
       const [removed] = (_b = result == null ? void 0 : result.splice(res.source.index, 1)) != null ? _b : [];
       result == null ? void 0 : result.splice(res.destination.index, 0, removed);
-      const resultAsObj = result.reduce(
-        (acc, item, index) => ({
+      const resultAsObj = result.reduce((acc, item, index) => {
+        const { name, ...variableDefinition } = item;
+        return {
           ...acc,
-          [item.name]: { type: item.type, default: item.default, order: index }
-        }),
-        {}
-      );
+          [item.name]: { ...variableDefinition, order: index }
+        };
+      }, {});
       dispatch({ type: "reorder", result: resultAsObj });
       return result;
     }
   };
   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,
@@ -5201,7 +5244,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,
@@ -5214,8 +5257,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",
@@ -5228,7 +5271,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" })
                       }
                     ) })
                   ]
@@ -5241,12 +5284,12 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    !readOnly && /* @__PURE__ */ jsx43(
+    !readOnly && /* @__PURE__ */ jsx44(
       AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
         "aria-label": "Add variable",
-        buttonText: "add variable",
+        buttonText: "Add variable",
         icon: "math-plus",
         css: { marginLeft: "var(--spacing-md)" }
       }
@@ -5255,37 +5298,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,
@@ -5306,14 +5349,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,
@@ -5338,7 +5381,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,
@@ -5353,11 +5396,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(() => {
@@ -5426,7 +5469,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);
@@ -5450,17 +5493,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" },
@@ -5479,7 +5522,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",
     {
@@ -5487,14 +5530,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",
@@ -5517,7 +5560,7 @@ function RequestBody() {
             )
           }
         ),
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(
           JsonEditor,
           {
             height: 200,
@@ -5545,7 +5588,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
@@ -5564,29 +5607,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,
@@ -5606,7 +5649,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,
@@ -5617,7 +5660,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",
@@ -5642,11 +5685,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,
@@ -5672,7 +5715,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
@@ -5692,29 +5735,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,
@@ -5738,7 +5781,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,
@@ -5754,7 +5797,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",
@@ -5802,7 +5845,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();
@@ -5823,7 +5866,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: [
@@ -5869,10 +5912,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,
@@ -5922,12 +5965,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 : {},
@@ -5943,7 +5986,7 @@ function DataSourceEditor({ onChange, children, editVariableComponent }) {
       },
       editVariableComponent,
       readOnly: true,
-      children: /* @__PURE__ */ jsx54(
+      children: /* @__PURE__ */ jsx55(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -5980,7 +6023,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 {
@@ -5989,7 +6032,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 : {},
@@ -6005,7 +6048,7 @@ function DataTypeEditor({ onChange, children, editVariableComponent }) {
       },
       editVariableComponent,
       readOnly: isReadOnly,
-      children: /* @__PURE__ */ jsx55(
+      children: /* @__PURE__ */ jsx56(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -6055,10 +6098,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(
     () => {
@@ -6093,7 +6136,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,
@@ -6102,25 +6145,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,
@@ -6128,7 +6171,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`
@@ -6141,9 +6184,9 @@ var DataRefreshButton = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-import { css as css31 } from "@emotion/react";
+import { css as css32 } from "@emotion/react";
 import { bindVariables } from "@uniformdev/canvas";
-import { Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
+import { Callout as Callout5, Container, IconsProvider, ScrollableList, VerticalRhythm as VerticalRhythm2 } from "@uniformdev/design-system";
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
 import { bindVariablesToObject as bindVariablesToObject2 } from "@uniformdev/canvas";
@@ -6153,9 +6196,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: () => {
   },
@@ -6168,17 +6211,24 @@ var ObjectSearchContext = createContext5({
   },
   selectedListItems: [],
   onRemoveAllSelectedItems: () => {
-  }
+  },
+  isMulti: false
 });
-var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
-  const [query, setQuery] = useState15({
+var ObjectSearchProvider = ({
+  currentlySelectedItems,
+  isMulti = false,
+  children,
+  defaultQuery
+}) => {
+  const [query, setQuery] = useState16({
     contentType: "",
-    keyword: ""
+    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) {
@@ -6224,6 +6274,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       selectedListItems: selectedItems,
       onRemoveAllSelectedItems,
       list,
+      isMulti,
       onSetList
     }),
     [
@@ -6234,10 +6285,11 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       selectedItems,
       onRemoveAllSelectedItems,
       list,
+      isMulti,
       onSetList
     ]
   );
-  return /* @__PURE__ */ jsx58(ObjectSearchContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx59(ObjectSearchContext.Provider, { value, children });
 };
 function useObjectSearchContext() {
   return useContext7(ObjectSearchContext);
@@ -6254,8 +6306,150 @@ function bindQuery(query, inputs) {
   return result;
 }
 
+// src/components/ObjectSearch/ObjectSearchListItem.tsx
+import { Chip, Popover } from "@uniformdev/design-system";
+
+// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
+import { css as css31 } from "@emotion/react";
+import { skeletonLoading } from "@uniformdev/design-system";
+var ObjectListItemContainer = css31`
+  align-items: center;
+  border: 1px solid var(--gray-300);
+  border-radius: var(--rounded-base);
+  background: var(--white);
+  display: grid;
+  grid-template-columns: 1fr auto;
+  padding: var(--spacing-sm);
+`;
+var ObjectListItemContainerDisabled = css31`
+  opacity: var(--opacity-50);
+  pointer-events: none;
+`;
+var ObjectListItemLoading = css31`
+  animation: ${skeletonLoading} 1s linear infinite alternate;
+  border-color: transparent;
+  min-height: 42px;
+  position: relative;
+
+  &:before,
+  &:after {
+    background: var(--gray-200);
+    content: '';
+    display: block;
+    height: 1rem;
+  }
+
+  &:before {
+    border-radius: var(--rounded-base);
+    width: 10rem;
+  }
+
+  &:after {
+    border-radius: var(--rounded-full);
+    width: 1rem;
+  }
+`;
+var ObjectListItemHeadingGroup = css31`
+  align-items: center;
+  display: grid;
+`;
+var ObjectListItemThumbnail = css31`
+  width: 30px;
+  object-fit: contain;
+`;
+var ObjectListItemTitle = css31`
+  color: var(--typography-base);
+  display: block;
+  font-size: var(--fs-sm);
+`;
+var ObjectListItemSubtitle = css31`
+  color: var(--gray-500);
+  display: block;
+  font-size: var(--fs-xs);
+  line-height: 1;
+`;
+var ObjectListItemInfoContainer = css31`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: center;
+`;
+var ObjectListItemControlledContent = css31`
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+var ObjectListItemUnControlledContent = css31`
+  margin-top: var(--spacing-sm);
+  grid-column: 1 / -1;
+`;
+
+// src/components/ObjectSearch/ObjectSearchListItem.tsx
+import { jsx as jsx60, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+var ObjectSearchListItem = ({
+  id,
+  title,
+  contentType,
+  image,
+  imageUrl,
+  popoverData,
+  onSelect,
+  isMulti,
+  disabled,
+  children,
+  ...props
+}) => {
+  const { onSelectItem, selectedListItems, isMulti: globalIsMulti } = useObjectSearchContext();
+  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
+  const handleSelectItem = () => {
+    var _a;
+    const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
+    const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
+    if (isMulti === true || globalIsMulti) {
+      return onSelectItem(selectedItem);
+    }
+    return onSelectItem([selectedItem]);
+  };
+  const selected = selectedListItems.some((item) => item.id === id);
+  return /* @__PURE__ */ jsxs34(
+    "div",
+    {
+      role: "listitem",
+      css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
+      "data-testid": "list-item",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs34(
+          "div",
+          {
+            role: "button",
+            onClick: handleSelectItem,
+            css: ObjectListItemControlledContent,
+            "aria-disabled": disabled,
+            children: [
+              !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__ */ jsx60("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
+                /* @__PURE__ */ jsx60("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs34("div", { css: ObjectListItemInfoContainer, children: [
+          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__ */ jsx60("div", { css: ObjectListItemUnControlledContent, children })
+      ]
+    }
+  );
+};
+var ObjectSearchListItemLoadingSkeleton = () => {
+  return /* @__PURE__ */ jsx60("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
+};
+
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-import { jsx as jsx59, jsxs as jsxs34 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
 var ObjectSearchContainer = ({
   label,
   enableDynamicInputToResultId,
@@ -6267,21 +6461,22 @@ 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 body = /* @__PURE__ */ jsxs34(VerticalRhythm2, { children: [
+  const listItems = resultList != null ? resultList : /* @__PURE__ */ jsx61(
+    ScrollableList,
+    {
+      role: "list",
+      css: css32`
+        > div {
+          transition: max-height var(--duration-slow) var(--timing-ease-out);
+          max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+        }
+      `,
+      children: /* @__PURE__ */ jsx61(DefaultResultList, {})
+    }
+  );
+  const body = /* @__PURE__ */ jsxs35(VerticalRhythm2, { children: [
     searchFilters,
-    !resultList ? null : /* @__PURE__ */ jsx59(
-      ScrollableList,
-      {
-        role: "list",
-        css: css31`
-            > div {
-              transition: max-height var(--duration-slow) var(--timing-ease-out);
-              max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
-            }
-          `,
-        children: resultList
-      }
-    )
+    listItems
   ] });
   const handleSelectedVariableChange = (selectedValue) => {
     var _a2;
@@ -6310,8 +6505,8 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ jsx59(IconsProvider, { children: /* @__PURE__ */ jsxs34(VerticalRhythm2, { children: [
-    /* @__PURE__ */ jsx59(Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ jsx59(
+  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,
@@ -6329,14 +6524,25 @@ var ObjectSearchContainer = ({
     children
   ] }) });
 };
+var DefaultResultList = () => {
+  var _a;
+  const { list } = useObjectSearchContext();
+  if (!list.items) {
+    return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ jsx61(ObjectSearchListItemLoadingSkeleton, {}, i));
+  }
+  if (list.items.length === 0) {
+    return /* @__PURE__ */ jsx61(Callout5, { type: "info", children: "No results were found" });
+  }
+  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 { DebouncedInputKeywordSearch, InputSelect as InputSelect6 } from "@uniformdev/design-system";
+import { useMemo as useMemo15, useState as useState17 } from "react";
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
-import { css as css32 } from "@emotion/react";
-var ObjectSearchFilterContainerLabel = css32`
+import { css as css33 } from "@emotion/react";
+var ObjectSearchFilterContainerLabel = css33`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -6344,18 +6550,18 @@ var ObjectSearchFilterContainerLabel = css32`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = css32`
+var ObjectSearchFilterContainer = css33`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterGrid = (gridColumns) => css32`
+var ObjectSearchFilterGrid = (gridColumns) => css33`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
 `;
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-import { jsx as jsx60, jsxs as jsxs35 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilter = ({
   requireContentType,
   typeSelectorAllTypesOptionText = "All content types",
@@ -6364,10 +6570,11 @@ var ObjectSearchFilter = ({
   selectLabel = "Content Type Select",
   selectOptions
 }) => {
+  var _a, _b;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = useState16({
-    contentType: "",
-    keyword: ""
+  const [searchState, setSearchState] = useState17({
+    contentType: (_a = query.contentType) != null ? _a : "",
+    keyword: (_b = query.keyword) != null ? _b : ""
   });
   const handleFilterChange = (value) => {
     setSearchState((prev) => {
@@ -6381,14 +6588,11 @@ var ObjectSearchFilter = ({
     }
     return [
       ...!requireContentType ? [{ value: "any", label: typeSelectorAllTypesOptionText }] : [],
-      ...selectOptions ? selectOptions.map((option) => {
-        var _a;
-        return { name: option == null ? void 0 : option.name, label: (_a = option.label) != null ? _a : option == null ? void 0 : option.name, id: option.id };
-      }) : []
+      ...selectOptions != null ? selectOptions : []
     ];
   }, [requireContentType, typeSelectorAllTypesOptionText, selectOptions]);
   const shouldRenderSelect = memoizedSelectOptions.length > 0;
-  return /* @__PURE__ */ jsxs35(
+  return /* @__PURE__ */ jsxs36(
     "fieldset",
     {
       css: [
@@ -6396,7 +6600,7 @@ var ObjectSearchFilter = ({
         ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
       ],
       children: [
-        memoizedSelectOptions.length ? /* @__PURE__ */ jsx60(
+        memoizedSelectOptions.length ? /* @__PURE__ */ jsx62(
           InputSelect6,
           {
             label: selectLabel,
@@ -6406,15 +6610,15 @@ var ObjectSearchFilter = ({
             value: query.contentType
           }
         ) : null,
-        /* @__PURE__ */ jsx60(
-          InputKeywordSearch2,
+        /* @__PURE__ */ jsx62(
+          DebouncedInputKeywordSearch,
           {
             inputFieldName: searchInputName,
             placeholder: searchInputPlaceholderText,
-            onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+            onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
             disabledFieldSubmission: true,
-            onClear: () => handleFilterChange({ keyword: "" }),
-            value: searchState.keyword
+            defaultValue: searchState.keyword,
+            delay: 300
           }
         )
       ]
@@ -6423,154 +6627,14 @@ var ObjectSearchFilter = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
-import { jsx as jsx61, jsxs as jsxs36 } from "@emotion/react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
 var ObjectSearchFilterContainer2 = ({ label, children }) => {
-  return /* @__PURE__ */ jsxs36("div", { children: [
-    label ? /* @__PURE__ */ jsx61("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
-    /* @__PURE__ */ jsx61("div", { css: ObjectSearchFilterContainer, children })
+  return /* @__PURE__ */ jsxs37("div", { children: [
+    label ? /* @__PURE__ */ jsx63("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
+    /* @__PURE__ */ jsx63("div", { css: ObjectSearchFilterContainer, children })
   ] });
 };
 
-// src/components/ObjectSearch/ObjectSearchListItem.tsx
-import { Chip, Popover } from "@uniformdev/design-system";
-
-// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
-import { css as css33 } from "@emotion/react";
-import { skeletonLoading } from "@uniformdev/design-system";
-var ObjectListItemContainer = css33`
-  align-items: center;
-  border: 1px solid var(--gray-300);
-  border-radius: var(--rounded-base);
-  background: var(--white);
-  display: grid;
-  grid-template-columns: 1fr auto;
-  padding: var(--spacing-sm);
-`;
-var ObjectListItemContainerDisabled = css33`
-  opacity: var(--opacity-50);
-  pointer-events: none;
-`;
-var ObjectListItemLoading = css33`
-  animation: ${skeletonLoading} 1s linear infinite alternate;
-  border-color: transparent;
-  min-height: 42px;
-  position: relative;
-
-  &:before,
-  &:after {
-    background: var(--gray-200);
-    content: '';
-    display: block;
-    height: 1rem;
-  }
-
-  &:before {
-    border-radius: var(--rounded-base);
-    width: 10rem;
-  }
-
-  &:after {
-    border-radius: var(--rounded-full);
-    width: 1rem;
-  }
-`;
-var ObjectListItemHeadingGroup = css33`
-  align-items: center;
-  display: grid;
-`;
-var ObjectListItemThumbnail = css33`
-  width: 30px;
-  object-fit: contain;
-`;
-var ObjectListItemTitle = css33`
-  color: var(--brand-secondary-1);
-  display: block;
-  font-size: var(--fs-sm);
-`;
-var ObjectListItemSubtitle = css33`
-  color: var(--gray-500);
-  display: block;
-  font-size: var(--fs-xs);
-  line-height: 1;
-`;
-var ObjectListItemInfoContainer = css33`
-  align-items: center;
-  display: flex;
-  gap: var(--spacing-sm);
-  justify-content: center;
-`;
-var ObjectListItemControlledContent = css33`
-  display: flex;
-  gap: var(--spacing-sm);
-`;
-var ObjectListItemUnControlledContent = css33`
-  margin-top: var(--spacing-sm);
-  grid-column: 1 / -1;
-`;
-
-// src/components/ObjectSearch/ObjectSearchListItem.tsx
-import { jsx as jsx62, jsxs as jsxs37 } from "@emotion/react/jsx-runtime";
-var ObjectSearchListItem = ({
-  id,
-  title,
-  contentType,
-  image,
-  imageUrl,
-  popoverData,
-  onSelect,
-  isMulti = false,
-  disabled,
-  children
-}) => {
-  const { onSelectItem, selectedListItems } = useObjectSearchContext();
-  const formatedContentType = Array.isArray(contentType) ? contentType.join(", ") : contentType;
-  const handleSelectItem = () => {
-    var _a;
-    const extraData = (_a = onSelect == null ? void 0 : onSelect()) != null ? _a : {};
-    const selectedItem = { id, title, contentType, imageUrl, image, popoverData, ...extraData };
-    if (isMulti) {
-      return onSelectItem(selectedItem);
-    }
-    return onSelectItem([selectedItem]);
-  };
-  const selected = selectedListItems.some((item) => item.id === id);
-  return /* @__PURE__ */ jsxs37(
-    "div",
-    {
-      role: "listitem",
-      css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
-      "data-testid": "list-item",
-      children: [
-        /* @__PURE__ */ jsxs37(
-          "div",
-          {
-            role: "button",
-            onClick: handleSelectItem,
-            css: ObjectListItemControlledContent,
-            "aria-disabled": disabled,
-            children: [
-              !imageUrl ? null : /* @__PURE__ */ jsx62("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
-              !image || imageUrl ? null : /* @__PURE__ */ jsx62("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
-              /* @__PURE__ */ jsxs37("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
-                !contentType ? null : /* @__PURE__ */ jsx62("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
-                /* @__PURE__ */ jsx62("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxs37("div", { css: ObjectListItemInfoContainer, children: [
-          selected ? /* @__PURE__ */ jsx62(Chip, { text: "selected", size: "xs" }) : null,
-          !popoverData ? null : /* @__PURE__ */ jsx62(Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
-        ] }),
-        !children ? null : /* @__PURE__ */ jsx62("div", { css: ObjectListItemUnControlledContent, children })
-      ]
-    }
-  );
-};
-var ObjectSearchListItemLoadingSkeleton = () => {
-  return /* @__PURE__ */ jsx62("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
-};
-
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
 import { Badge, Button as Button4, Popover as Popover2 } from "@uniformdev/design-system";
 import { format as timeagoFormat } from "timeago.js";
@@ -6581,8 +6645,8 @@ import { button as button2 } from "@uniformdev/design-system";
 var ButtonStyles = css34`
   ${button2}
   background: transparent;
-  border: 1px solid var(--brand-secondary-1);
-  color: var(--brand-secondary-1);
+  border: 1px solid var(--typography-base);
+  color: var(--typography-base);
   padding: var(--spacing-sm);
   font-size: var(--fs-sm);
   line-height: 1;
@@ -6611,14 +6675,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
   ] });
 };
@@ -6628,7 +6692,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
   ] });
 };
@@ -6668,7 +6732,7 @@ var ObjectSearchResultItemSubtitle = css35`
 `;
 var ObjectSearchResultItemTitle = css35`
   align-items: center;
-  color: var(--brand-secondary-1);
+  color: var(--typography-base);
   display: flex;
   gap: var(--spacing-xs);
 `;
@@ -6694,7 +6758,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,
@@ -6718,42 +6782,42 @@ var ObjectSearchResultItem = ({
     onSelectItem({ id, title: id });
     onRemove == null ? void 0 : onRemove();
   };
-  return /* @__PURE__ */ jsxs39("div", { css: ObjectSearchResultItemContainer, 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 }),
+  return /* @__PURE__ */ jsxs39("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
+    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, children: formatedContentType }),
-        /* @__PURE__ */ jsxs39("span", { role: "heading", css: ObjectSearchResultItemTitle, children: [
+        /* @__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";
@@ -6781,16 +6845,18 @@ 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,
+  resultLabelOverride,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ jsx65(ObjectSearchResultItem, { ...value }),
+  renderResultComponent = (value) => /* @__PURE__ */ jsx66(ObjectSearchResultItem, { ...value }),
   multiSelectId,
   disableDnD = false,
+  getContainerForDnDReparenting,
   whenNothingSelected = null
 }) {
   const { selectedListItems, onRemoveAllSelectedItems, onSelectItem } = useObjectSearchContext();
@@ -6808,16 +6874,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 }),
+      !resultLabelOverride ? /* @__PURE__ */ jsxs40("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+        /* @__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 })
+      ] }) : resultLabelOverride,
       /* @__PURE__ */ jsxs40("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
-        hideRemoveButton ? null : /* @__PURE__ */ jsx65(
+        hideRemoveButton ? null : /* @__PURE__ */ jsx66(
           Button5,
           {
             buttonType: "ghostDestructive",
@@ -6829,43 +6916,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 { DebouncedInputKeywordSearch as DebouncedInputKeywordSearch2, Input as Input5, InputSelect as InputSelect7, VerticalRhythm as VerticalRhythm3 } from "@uniformdev/design-system";
+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",
@@ -6882,26 +6962,24 @@ var QueryFilter = ({
   sortOrderLabel = "Sort Order",
   sortOrderOptions = [
     {
-      name: "Ascending",
-      id: "asc",
+      value: "asc",
       label: "Ascending"
     },
     {
-      name: "Descending",
-      id: "desc",
+      value: "desc",
       label: "Descending"
     }
   ],
   children
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = useState17({
-    contentType: "",
-    keyword: "",
-    count: countValue != null ? countValue : 5,
-    sortBy: (_a = sortOptions[0].id) != null ? _a : "",
-    sortOrder: (_b = sortOrderOptions[0].id) != null ? _b : ""
+  const [queryState, setQueryState] = useState18({
+    contentType: (_a = query.contentType) != null ? _a : "",
+    keyword: (_b = query.keyword) != null ? _b : "",
+    count: (_c = query.count) != null ? _c : countValue,
+    sortBy: (_d = query.sortBy) != null ? _d : "",
+    sortOrder: (_e = query.sortOrder) != null ? _e : ""
   });
   const handleFilterChange = (value) => {
     setQueryState((prev) => ({ ...prev, ...value }));
@@ -6909,61 +6987,56 @@ var QueryFilter = ({
   };
   useEffect16(() => {
     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,
-          value: (_c = queryState.keyword) != null ? _c : "",
+          value: (_f = queryState.keyword) != null ? _f : "",
           onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
           disableInlineMenu: true,
           id: "qf_searchText",
-          inputWhenNoVariables: /* @__PURE__ */ jsx66(
-            InputKeywordSearch3,
+          inputWhenNoVariables: /* @__PURE__ */ jsx67(
+            DebouncedInputKeywordSearch2,
             {
               id: "qf_searchText",
               inputFieldName: searchInputName,
               placeholder: searchInputPlaceholderText,
-              onSearchTextChanged: (e) => handleFilterChange({ keyword: e }),
+              onSearchTextChanged: (keyword) => handleFilterChange({ keyword }),
               disabledFieldSubmission: true,
-              onClear: () => handleFilterChange({ keyword: "" }),
-              value: queryState.keyword
+              delay: 300,
+              defaultValue: queryState.keyword
             }
           )
         }
       ),
       /* @__PURE__ */ jsxs41("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx67(
           InputVariables,
           {
             label: contentTypeLabel,
             id: "qf_contentType",
-            value: (_d = queryState.contentType) != null ? _d : "",
+            value: (_g = queryState.contentType) != null ? _g : "",
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ jsx66(
+            inputWhenNoVariables: /* @__PURE__ */ jsx67(
               InputSelect7,
               {
                 id: "qf_contentType",
                 label: contentTypeLabel,
                 showLabel: false,
-                options: [
-                  ...!requireContentType ? [{ id: "", label: typeSelectorAllTypesOptionText }] : [],
-                  ...contentTypeOptions ? contentTypeOptions.map((option) => {
-                    var _a2;
-                    return { id: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-                  }) : []
-                ],
+                defaultOption: requireContentType ? void 0 : typeSelectorAllTypesOptionText,
+                options: contentTypeOptions != null ? contentTypeOptions : [],
                 onChange: (e) => handleFilterChange({ contentType: e.target.value }),
                 value: queryState.contentType
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx67(
           InputVariables,
           {
             label: countLabel,
@@ -6971,7 +7044,8 @@ var QueryFilter = ({
             value: queryState.count.toString(10),
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ jsx66(
+            valueToResetTo: "5",
+            inputWhenNoVariables: /* @__PURE__ */ jsx67(
               Input5,
               {
                 id: "qf_count",
@@ -6987,7 +7061,7 @@ var QueryFilter = ({
         )
       ] }),
       /* @__PURE__ */ jsxs41("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx67(
           InputVariables,
           {
             id: "qf_sortBy",
@@ -6995,29 +7069,21 @@ var QueryFilter = ({
             value: queryState.sortBy,
             onChange: (newSortBy) => handleFilterChange({ sortBy: newSortBy }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ jsx66(
+            inputWhenNoVariables: /* @__PURE__ */ jsx67(
               InputSelect7,
               {
                 label: sortLabel,
                 id: "qf_sortBy",
                 showLabel: false,
-                options: [
-                  {
-                    label: "Select a sort",
-                    id: ""
-                  },
-                  ...sortOptions ? sortOptions.map((option) => {
-                    var _a2;
-                    return { id: option.id, name: option.name, label: (_a2 = option.label) != null ? _a2 : option.name };
-                  }) : []
-                ],
+                defaultOption: "Select a sort",
+                options: sortOptions != null ? sortOptions : [],
                 onChange: (e) => handleFilterChange({ sortBy: e.target.value }),
                 value: queryState.sortBy
               }
             )
           }
         ),
-        /* @__PURE__ */ jsx66(
+        /* @__PURE__ */ jsx67(
           InputVariables,
           {
             label: sortOrderLabel,
@@ -7025,18 +7091,13 @@ var QueryFilter = ({
             value: queryState.sortOrder,
             onChange: (newSort) => handleFilterChange({ sortOrder: newSort }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ jsx66(
+            inputWhenNoVariables: /* @__PURE__ */ jsx67(
               InputSelect7,
               {
                 label: sortOrderLabel,
                 id: "qf_sortOrder",
                 showLabel: false,
-                options: [
-                  ...sortOrderOptions ? sortOrderOptions.map((option) => {
-                    var _a2;
-                    return { value: option.id, label: (_a2 = option.label) != null ? _a2 : option.name, name: option.name };
-                  }) : []
-                ],
+                options: sortOrderOptions != null ? sortOrderOptions : [],
                 onChange: (e) => handleFilterChange({ sortOrder: e.target.value }),
                 value: queryState.sortOrder
               }
@@ -7051,7 +7112,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 {
@@ -7063,7 +7124,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 = ({
@@ -7110,16 +7171,38 @@ function createLocationValidator(setValue, validate) {
   });
 }
 
+// src/utils/useContentDataResourceLocaleInfo.ts
+import { bindVariables as bindVariables2, createVariableReference as createVariableReference4, LOCALE_DYNAMIC_INPUT_NAME as LOCALE_DYNAMIC_INPUT_NAME2 } from "@uniformdev/canvas";
+import { useEffect as useEffect18, useRef as useRef16 } from "react";
+function useContentDataResourceLocaleInfo({
+  locale,
+  setLocale,
+  dynamicInputs
+}) {
+  var _a;
+  const setLocaleRef = useRef16(setLocale);
+  setLocaleRef.current = setLocale;
+  const { flatVariables } = useVariables();
+  const effectiveLocale = locale != null ? locale : dynamicInputs[LOCALE_DYNAMIC_INPUT_NAME2] ? createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2) : "";
+  const boundLocale = (_a = bindVariables2({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
+  useEffect18(() => {
+    if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
+      setLocaleRef.current(createVariableReference4(LOCALE_DYNAMIC_INPUT_NAME2));
+    }
+  }, [locale, effectiveLocale]);
+  return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
+}
+
 // src/index.ts
 import {
   AddListButton as AddListButton2,
   Button as Button6,
-  Callout as Callout5,
+  Callout as Callout6,
   DrawerContent,
   Heading,
   Input as Input6,
   InputComboBox,
-  InputKeywordSearch as InputKeywordSearch4,
+  InputKeywordSearch as InputKeywordSearch2,
   InputSelect as InputSelect8,
   InputToggle,
   Label,
@@ -7153,7 +7236,7 @@ export {
   $isVariableNode,
   AddListButton2 as AddListButton,
   Button6 as Button,
-  Callout5 as Callout,
+  Callout6 as Callout,
   ControlledValuePlugin,
   DISCONNECT_VARIABLE_COMMAND,
   DamSelectedItem,
@@ -7173,7 +7256,7 @@ export {
   icons_exports as Icons,
   Input6 as Input,
   InputComboBox,
-  InputKeywordSearch4 as InputKeywordSearch,
+  InputKeywordSearch2 as InputKeywordSearch,
   InputSelect8 as InputSelect,
   InputToggle,
   InputVariables,
@@ -7313,6 +7396,7 @@ export {
   urlEncodeRequestParameter,
   urlEncodeRequestUrl,
   useConnectedDataAsVariables,
+  useContentDataResourceLocaleInfo,
   useDynamicInputsAsVariables,
   useMeshLocation,
   useObjectSearchContext,