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

package/dist/index.js

@@ -195,6 +195,7 @@ __export(src_exports, {
   urlEncodeRequestParameter: () => urlEncodeRequestParameter,
   urlEncodeRequestUrl: () => urlEncodeRequestUrl,
   useConnectedDataAsVariables: () => useConnectedDataAsVariables,
+  useContentDataResourceLocaleInfo: () => useContentDataResourceLocaleInfo,
   useDynamicInputsAsVariables: () => useDynamicInputsAsVariables,
   useMeshLocation: () => useMeshLocation,
   useObjectSearchContext: () => useObjectSearchContext,
@@ -1164,8 +1165,8 @@ var ProductPreviewList = ({
 
 // src/components/commerce/ProductSearch.tsx
 var import_design_system10 = require("@uniformdev/design-system");
-var import_react21 = __toESM(require("react"));
-var import_react_use3 = require("react-use");
+var import_react22 = __toESM(require("react"));
+var import_react_use4 = require("react-use");
 
 // src/components/legacy/EntrySearch/DefaultSearchRow.tsx
 var import_react9 = require("@emotion/react");
@@ -1200,7 +1201,7 @@ var searchRowPopover = import_react8.css`
   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);
@@ -1334,7 +1335,7 @@ var selectedItemCopy = import_react11.css`
   position: relative;
 `;
 var selectedItemTitle = import_react11.css`
-  color: var(--brand-secondary-1);
+  color: var(--typography-base);
   font-size: var(--fs-base);
   font-weight: var(--fw-bold);
   line-height: 1;
@@ -1574,11 +1575,11 @@ var DefaultSelectedItem = ({
 };
 
 // src/components/legacy/EntrySearch/EntrySearch.tsx
-var import_react16 = require("@emotion/react");
+var import_react17 = require("@emotion/react");
 var import_design_system7 = require("@uniformdev/design-system");
 var React5 = __toESM(require("react"));
-var import_react_beautiful_dnd = require("react-beautiful-dnd");
-var import_react_use2 = require("react-use");
+var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
+var import_react_use3 = require("react-use");
 var import_uuid = require("uuid");
 
 // src/hooks/useLoadingDelay.ts
@@ -1614,16 +1615,33 @@ function useLoadingDelay(loading, { delay = 500, minDuration = 200 } = {
   return state === "DISPLAY" || state === "EXPIRE";
 }
 
+// src/components/DragDropContext.tsx
+var import_react15 = require("react");
+var import_react_beautiful_dnd = require("react-beautiful-dnd");
+var import_react_use2 = require("react-use");
+var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
+function DragDropContext({ children, ...props }) {
+  const [isReady, setIsReady] = (0, import_react15.useState)(false);
+  (0, import_react_use2.useDebounce)(
+    () => {
+      setIsReady(true);
+    },
+    300,
+    []
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_beautiful_dnd.DragDropContext, { ...props, children: isReady ? children : null });
+}
+
 // src/components/legacy/EntrySearch/styles/EntrySearch.styles.ts
-var import_react15 = require("@emotion/react");
-var entrySearchWrapper = import_react15.css`
+var import_react16 = require("@emotion/react");
+var entrySearchWrapper = import_react16.css`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: calc(var(--spacing-base) - 0.25rem) var(--spacing-sm);
   margin-bottom: var(--spacing-base);
 `;
-var entrySearchBtn = import_react15.css`
+var entrySearchBtn = import_react16.css`
   align-items: center;
   display: flex;
   position: relative;
@@ -1632,8 +1650,8 @@ var entrySearchBtn = import_react15.css`
   background-color: transparent;
   border: 0;
 `;
-var entrySearchLoadMoreBtn = import_react15.css`
-  color: var(--brand-secondary-1);
+var entrySearchLoadMoreBtn = import_react16.css`
+  color: var(--typography-base);
   display: block;
   font-weight: var(--fw-bold);
   font-size: var(--fs-sm);
@@ -1649,17 +1667,17 @@ var entrySearchLoadMoreBtn = import_react15.css`
     outline: none;
   }
 `;
-var entrySearchConfig = import_react15.css`
+var entrySearchConfig = import_react16.css`
   background: var(--white);
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
   padding: calc(var(--spacing-base) - 0.25rem) var(--spacing-base);
   display: block;
 `;
-var entrySearchConfigHidden = import_react15.css`
+var entrySearchConfigHidden = import_react16.css`
   display: none;
 `;
-var entrySearchResultList = import_react15.css`
+var entrySearchResultList = import_react16.css`
   overflow-y: auto;
   height: 16rem;
   margin-bottom: var(--spacing-base);
@@ -1669,11 +1687,11 @@ var entrySearchResultList = import_react15.css`
     border-bottom: 1px solid var(--gray-200);
   }
 `;
-var entrySearchSelectInput = import_react15.css`
+var entrySearchSelectInput = import_react16.css`
   background-color: var(--gray-50);
   max-width: 33.33%;
 `;
-var entrySearchSelectIcon = import_react15.css`
+var entrySearchSelectIcon = import_react16.css`
   align-items: center;
   display: flex;
   position: absolute;
@@ -1681,18 +1699,18 @@ var entrySearchSelectIcon = import_react15.css`
   pointer-events: none;
   padding-right: var(--spacing-sm);
 `;
-var entrySearchSelectImg = import_react15.css`
-  color: var(--brand-secondary-1);
+var entrySearchSelectImg = import_react16.css`
+  color: var(--typography-base);
   width: 1.25rem;
   height: 1.25rem;
   transition: transform var(--duration-fast) var(--timing-ease-out);
   transform: rotate(0);
 `;
-var entrySearchSelectOption = import_react15.css`
+var entrySearchSelectOption = import_react16.css`
   background: var(--white);
-  color: var(--brand-secondary-1);
+  color: var(--typography-base);
 `;
-var draggableContainer = import_react15.css`
+var draggableContainer = import_react16.css`
   position: relative;
   margin-block: var(--spacing-sm) 0;
 
@@ -1705,7 +1723,7 @@ var draggableContainer = import_react15.css`
     top: auto !important;
   }
 `;
-var draggableIconWrapper = import_react15.css`
+var draggableIconWrapper = import_react16.css`
   align-items: center;
   display: flex;
   position: absolute;
@@ -1713,20 +1731,20 @@ var draggableIconWrapper = import_react15.css`
   margin-block: auto;
   opacity: 0;
 `;
-var draggableIcon = import_react15.css`
-  color: var(--brand-secondary-1);
+var draggableIcon = import_react16.css`
+  color: var(--typography-base);
 `;
-var draggableIconOffset = import_react15.css`
+var draggableIconOffset = import_react16.css`
   position: absolute;
   left: 0.375rem;
 `;
-var badgeIcon = import_react15.css`
+var badgeIcon = import_react16.css`
   width: calc(var(--spacing-lg) + var(--spacing-xs));
   height: calc(var(--spacing-lg) + var(--spacing-xs));
 `;
 
 // src/components/legacy/EntrySearch/EntrySearch.tsx
-var import_jsx_runtime21 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
 var DefaultNoResults = ({ searchText, selectedContentType }) => {
   let message = "No content found";
   if (selectedContentType && selectedContentType !== "any") {
@@ -1735,7 +1753,7 @@ var DefaultNoResults = ({ searchText, selectedContentType }) => {
   if (searchText) {
     message = `${message} for keyword '${searchText}'.`;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system7.Callout, { type: "info", children: message });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system7.Callout, { type: "info", children: message });
 };
 var EntrySearch = ({
   search,
@@ -1779,7 +1797,7 @@ var EntrySearch = ({
   const [selectedListItems, setSelectedListItems] = React5.useState([]);
   const [loadingMore, setLoadingMore] = React5.useState(false);
   const listBoxId = React5.useRef(`x${(0, import_uuid.v4)()}`);
-  (0, import_react_use2.useDebounce)(
+  (0, import_react_use3.useDebounce)(
     () => {
       search(textInput, {
         count: pageSize,
@@ -1858,7 +1876,7 @@ var EntrySearch = ({
   const ResolvedSelectedItemComponent = selectedItemComponent || DefaultSelectedItem;
   const ResolvedNoResultsComponent = noResultsComponent || DefaultNoResults;
   const CompIcon = logoIcon && typeof logoIcon !== "string" ? logoIcon : null;
-  const resolvedIcon = CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CompIcon, { css: badgeIcon }) : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("img", { src: logoIcon, alt: "Logo", css: badgeIcon });
+  const resolvedIcon = CompIcon ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CompIcon, { css: badgeIcon }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("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)) {
@@ -1872,22 +1890,22 @@ var EntrySearch = ({
       return result;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
-      css: import_react16.css`
+      css: import_react17.css`
         width: 100%;
       `,
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
         {
-          css: import_react16.css`
+          css: import_react17.css`
           position: relative;
           margin-block: var(--spacing-base);
         `,
           children: [
-            showSearchBox ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { css: entrySearchWrapper, "data-testid": "component-search", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+            showSearchBox ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { css: entrySearchWrapper, "data-testid": "component-search", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                 "button",
                 {
                   css: entrySearchBtn,
@@ -1898,21 +1916,21 @@ var EntrySearch = ({
                   "aria-controls": `entry-search-config-${listBoxId.current}`,
                   children: [
                     resolvedIcon,
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                       "span",
                       {
-                        css: import_react16.css`
+                        css: import_react17.css`
                     margin-left: var(--spacing-base);
                   `,
                         children: "Select"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { css: entrySearchSelectIcon, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { css: entrySearchSelectIcon, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                       ChevronDown_default,
                       {
                         css: [
                           entrySearchSelectImg,
-                          !listOpen ? void 0 : import_react16.css`
+                          !listOpen ? void 0 : import_react17.css`
                             transform: rotate(180deg);
                           `
                         ]
@@ -1921,7 +1939,7 @@ var EntrySearch = ({
                   ]
                 }
               ) }),
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                 "div",
                 {
                   id: `entry-search-config-${listBoxId.current}`,
@@ -1929,16 +1947,16 @@ var EntrySearch = ({
                   css: [entrySearchConfig, listOpen ? void 0 : entrySearchConfigHidden],
                   children: [
                     helpComponent || null,
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                       "div",
                       {
-                        css: import_react16.css`
+                        css: import_react17.css`
                   display: flex;
                   gap: calc(var(--spacing-base) - 0.25rem);
                   margin-bottom: var(--spacing-base);
                 `,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                             import_design_system7.InputSelect,
                             {
                               onChange: (e) => setContentTypeSelected(e.target.value),
@@ -1956,13 +1974,13 @@ var EntrySearch = ({
                               ]
                             }
                           ),
-                          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                             "div",
                             {
-                              css: import_react16.css`
+                              css: import_react17.css`
                     flex-grow: 1;
                   `,
-                              children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                 import_design_system7.InputKeywordSearch,
                                 {
                                   inputFieldName: "searchText",
@@ -1977,7 +1995,7 @@ var EntrySearch = ({
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                       "div",
                       {
                         css: [entrySearchResultList, import_design_system7.scrollbarStyles],
@@ -1986,8 +2004,8 @@ var EntrySearch = ({
                         tabIndex: 0,
                         "data-testid": "entry-list",
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system7.LoadingOverlay, { isActive: showLoadingOverlay }),
-                          Array.isArray(results) && results.length > 0 ? results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system7.LoadingOverlay, { isActive: showLoadingOverlay }),
+                          Array.isArray(results) && results.length > 0 ? results.map((result) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                             ResolvedRowComponent,
                             {
                               isSelected: selectedListItems.some((item) => item.id === result.id),
@@ -1995,36 +2013,36 @@ var EntrySearch = ({
                               triggerSelection: () => handleListItemSelect(result)
                             },
                             result.id
-                          )) : resultsLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                          )) : resultsLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                             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__ */ (0, import_jsx_runtime21.jsx)("button", { type: "button", css: entrySearchLoadMoreBtn, onClick: handleLoadMoreClick, children: !loadingMore ? "Load More" : /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system7.LoadingIndicator, {}) })
+                          !resultsLoading && typeof totalResults !== "undefined" && results && (results == null ? void 0 : results.length) < totalResults && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", css: entrySearchLoadMoreBtn, onClick: handleLoadMoreClick, children: !loadingMore ? "Load More" : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system7.LoadingIndicator, {}) })
                         ]
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                       "div",
                       {
-                        css: import_react16.css`
+                        css: import_react17.css`
                   display: flex;
                   justify-content: space-between;
                 `,
                         children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { children: onAddNew && ((_c = contentTypes == null ? void 0 : contentTypes.length) != null ? _c : 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { children: onAddNew && ((_c = contentTypes == null ? void 0 : contentTypes.length) != null ? _c : 0) > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                             import_design_system7.Menu,
                             {
                               menuLabel: "Add new menu",
-                              menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system7.Button, { buttonType: "secondary", children: "Add New" }),
-                              children: contentTypes == null ? void 0 : contentTypes.map((ct) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                              menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system7.Button, { buttonType: "secondary", children: "Add New" }),
+                              children: contentTypes == null ? void 0 : contentTypes.map((ct) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                 import_design_system7.MenuItem,
                                 {
-                                  css: import_react16.css`
+                                  css: import_react17.css`
                             background: var(--white);
-                            color: var(--brand-secondary-1);
+                            color: var(--typography-base);
                           `,
                                   onClick: () => onAddNew(ct),
                                   children: ct.name
@@ -2033,16 +2051,16 @@ var EntrySearch = ({
                               ))
                             }
                           ) : null }),
-                          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                             "div",
                             {
-                              css: import_react16.css`
+                              css: import_react17.css`
                     display: flex;
                     gap: var(--spacing-base);
                   `,
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_design_system7.Button, { buttonType: "unimportant", onClick: handleCancelClick, children: "Cancel" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_design_system7.Button, { buttonType: "unimportant", onClick: handleCancelClick, children: "Cancel" }),
+                                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                   import_design_system7.Button,
                                   {
                                     disabled: !selectedListItems.length,
@@ -2063,19 +2081,19 @@ var EntrySearch = ({
             ] }) : null,
             !listOpen ? multiSelect && selectedListItems.length > 1 ? (
               //enable dnd only if selected more then 1 item
-              /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_beautiful_dnd.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_beautiful_dnd.Droppable, { droppableId: multiSelectId || "canvas-multi-select", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_beautiful_dnd2.Droppable, { droppableId: multiSelectId || "canvas-multi-select", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                 "div",
                 {
                   ...provided.droppableProps,
                   ref: provided.innerRef,
-                  css: import_react16.css`
+                  css: import_react17.css`
                       margin-block: var(--spacing-sm) 0;
                     `,
                   children: [
                     selectedListItems == null ? void 0 : selectedListItems.map((selectedItem, index) => {
                       if (selectedItem == null ? void 0 : selectedItem.id) {
-                        return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_beautiful_dnd.Draggable, { draggableId: selectedItem.id, index, children: (provided2, snapshot) => {
-                          return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+                        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_beautiful_dnd2.Draggable, { draggableId: selectedItem.id, index, children: (provided2, snapshot) => {
+                          return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
                             "div",
                             {
                               css: draggableContainer,
@@ -2084,8 +2102,8 @@ var EntrySearch = ({
                               ...provided2.draggableProps,
                               ...provided2.dragHandleProps,
                               children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { css: draggableIconWrapper, children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { css: draggableIconWrapper, children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                     MoreVerticalAlt_default,
                                     {
                                       css: [draggableIcon, draggableIconOffset],
@@ -2093,9 +2111,9 @@ var EntrySearch = ({
                                       height: 24
                                     }
                                   ),
-                                  /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MoreVerticalAlt_default, { css: draggableIcon, width: 24, height: 24 })
+                                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MoreVerticalAlt_default, { css: draggableIcon, width: 24, height: 24 })
                                 ] }),
-                                /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                                   ResolvedSelectedItemComponent,
                                   {
                                     logoIcon,
@@ -2115,7 +2133,7 @@ var EntrySearch = ({
                   ]
                 }
               ) }) })
-            ) : selectedListItems == null ? void 0 : selectedListItems.map((selectedItem) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            ) : selectedListItems == null ? void 0 : selectedListItems.map((selectedItem) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               ResolvedSelectedItemComponent,
               {
                 logoIcon,
@@ -2133,11 +2151,11 @@ var EntrySearch = ({
 };
 
 // src/components/commerce/ProductSearchRow.tsx
-var import_react18 = require("@emotion/react");
+var import_react19 = require("@emotion/react");
 
 // src/components/commerce/styles/ProductSearchRow.styles.ts
-var import_react17 = require("@emotion/react");
-var productSearchRowContainer = import_react17.css`
+var import_react18 = require("@emotion/react");
+var productSearchRowContainer = import_react18.css`
   cursor: pointer;
   padding: var(--spacing-sm) 0;
   margin-right: var(--spacing-sm);
@@ -2145,7 +2163,7 @@ var productSearchRowContainer = import_react17.css`
   transition: background-color var(--duration-fast) var(--timing-ease-out),
     color var(--duration-fast) var(--timing-ease-out);
 `;
-var productSearchRowContent = import_react17.css`
+var productSearchRowContent = import_react18.css`
   border: 2px solid transparent;
   border-radius: var(--rounded-base);
   display: flex;
@@ -2153,25 +2171,25 @@ var productSearchRowContent = import_react17.css`
   gap: var(--spacing-base);
   padding: var(--spacing-sm) var(--spacing-xs);
 `;
-var productSearchRowContentActive = import_react17.css`
+var productSearchRowContentActive = import_react18.css`
   background-color: var(--green-50);
 `;
-var productSearchRowTitle = import_react17.css`
+var productSearchRowTitle = import_react18.css`
   font-size: var(--fs-sm);
   font-weight: var(--fw-bold);
   width: 50%;
 `;
-var productSearchRowCategory = import_react17.css`
+var productSearchRowCategory = import_react18.css`
   font-weight: var(--fw-normal);
   display: block;
 `;
-var productSearchRowDetails = import_react17.css`
+var productSearchRowDetails = import_react18.css`
   font-size: var(--fs-sm);
   > * {
     display: block;
   }
 `;
-var productSearchRowActiveIcon = import_react17.css`
+var productSearchRowActiveIcon = import_react18.css`
   display: block;
   height: 1.5rem;
   width: 1.5rem;
@@ -2180,7 +2198,7 @@ var productSearchRowActiveIcon = import_react17.css`
 `;
 
 // src/components/commerce/ProductSearchRow.tsx
-var import_jsx_runtime22 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
 function ProductSearchRow({
   result,
   isSelected,
@@ -2190,7 +2208,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__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       "data-value": result.id,
@@ -2198,40 +2216,40 @@ function ProductSearchRow({
       tabIndex: -1,
       onClick: () => triggerSelection(),
       css: [productSearchRowContainer],
-      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { css: [productSearchRowContent, isSelected ? productSearchRowContentActive : void 0], children: [
-        result.thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { css: [productSearchRowContent, isSelected ? productSearchRowContentActive : void 0], children: [
+        result.thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           "img",
           {
             src: result.thumbnailUrl,
             alt: `Thumbnail for ${result.title}`,
-            css: import_react18.css`
+            css: import_react19.css`
               background-color: var(--gray-200);
               width: 3rem;
               height: 3rem;
               object-fit: cover;
             `
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Image,
           {
             src: logoIcon,
             alt: "Logo",
-            css: import_react18.css`
+            css: import_react19.css`
               height: 2.25rem;
               width: 2.25rem;
             `
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("h4", { css: [productSearchRowTitle], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("h4", { css: [productSearchRowTitle], children: [
           result.title,
-          categoryName ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { css: [productSearchRowCategory], children: categoryName }) : null
+          categoryName ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: [productSearchRowCategory], children: categoryName }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { css: [productSearchRowDetails], children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { css: [productSearchRowDetails], children: [
           "SKU: ",
           result.sku || result.id,
-          result.price !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: result.price }) : null
+          result.price !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: result.price }) : null
         ] }),
-        isSelected ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkmark_default, { css: [productSearchRowActiveIcon] }) : null
+        isSelected ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Checkmark_default, { css: [productSearchRowActiveIcon] }) : null
       ] })
     },
     result.id
@@ -2239,21 +2257,21 @@ function ProductSearchRow({
 }
 
 // src/components/commerce/ProductSelectedItem.tsx
-var import_react20 = require("@emotion/react");
+var import_react21 = require("@emotion/react");
 var import_CgClose3 = require("@react-icons/all-files/cg/CgClose");
 var import_design_system9 = require("@uniformdev/design-system");
 
 // src/components/commerce/styles/ProductSelectedItem.styles.ts
-var import_react19 = require("@emotion/react");
+var import_react20 = require("@emotion/react");
 var import_design_system8 = require("@uniformdev/design-system");
-var productSelectedItemContainer = import_react19.css`
+var productSelectedItemContainer = import_react20.css`
   border: 1px solid var(--gray-200);
   border-radius: var(--rounded-base);
   background: var(--gray-50);
   display: flex;
   width: 100%;
 `;
-var productSelectedItemDetails = import_react19.css`
+var productSelectedItemDetails = import_react20.css`
   align-items: center;
   display: flex;
   padding: var(--spacing-base) var(--spacing-base) var(--spacing-base) var(--spacing-lg);
@@ -2262,7 +2280,7 @@ var productSelectedItemDetails = import_react19.css`
   gap: var(--spacing-sm);
   margin-inline: 0 var(--spacing-sm);
 `;
-var productSelectedItemContent = import_react19.css`
+var productSelectedItemContent = import_react20.css`
   display: flex;
   align-items: center;
   gap: var(--spacing-sm);
@@ -2273,13 +2291,13 @@ var productSelectedItemContent = import_react19.css`
     margin-bottom: 0;
   }
 `;
-var productSelectedItemImage = import_react19.css`
+var productSelectedItemImage = import_react20.css`
   background-color: var(--gray-200);
   width: 3.5rem;
   height: 3.5rem;
   object-fit: cover;
 `;
-var productedSelectedItemLinkBtn = import_react19.css`
+var productedSelectedItemLinkBtn = import_react20.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -2295,15 +2313,15 @@ var productedSelectedItemLinkBtn = import_react19.css`
     background: var(--gray-50);
   }
 `;
-var productedSelectedItemSmallText = import_react19.css`
+var productedSelectedItemSmallText = import_react20.css`
   font-size: var(--fs-sm);
 `;
-var productSelectedItemIcon = import_react19.css`
+var productSelectedItemIcon = import_react20.css`
   display: block;
   width: 1rem;
   height: 1rem;
 `;
-var productSelectedItemLinkContainer = import_react19.css`
+var productSelectedItemLinkContainer = import_react20.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
@@ -2316,7 +2334,7 @@ var productSelectedItemLinkContainer = import_react19.css`
 `;
 
 // src/components/commerce/ProductSelectedItem.tsx
-var import_jsx_runtime23 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
 function ProductSelectedItem({
   selectedItem,
   onDeselect
@@ -2325,9 +2343,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__ */ (0, import_jsx_runtime23.jsx)("div", { css: [productSelectedItemContainer], children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("article", { css: [productSelectedItemDetails], children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { css: [productSelectedItemContent], children: [
-      selectedItem.thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { css: [productSelectedItemContainer], children: /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("article", { css: [productSelectedItemDetails], children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { css: [productSelectedItemContent], children: [
+      selectedItem.thumbnailUrl ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "img",
         {
           src: selectedItem.thumbnailUrl,
@@ -2335,29 +2353,29 @@ function ProductSelectedItem({
           css: [productSelectedItemImage],
           loading: "lazy"
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { css: [productSelectedItemImage] }),
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { css: [productSelectedItemImage] }),
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "div",
         {
-          css: import_react20.css`
+          css: import_react21.css`
               > :not(:last-child) {
                 margin-bottom: var(--spacing-xs);
               }
             `,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
               "h4",
               {
-                css: import_react20.css`
+                css: import_react21.css`
                 margin-top: 0px;
                 font-weight: var(--fw-bold);
               `,
                 children: [
                   selectedItem.title || selectedItem.id || "",
-                  categoryName && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  categoryName && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     "span",
                     {
-                      css: import_react20.css`
+                      css: import_react21.css`
                     display: block;
                     font-weight: var(--fw-regular);
                   `,
@@ -2367,10 +2385,10 @@ function ProductSelectedItem({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
               "ul",
               {
-                css: import_react20.css`
+                css: import_react21.css`
                 font-size: var(--fs-sm);
 
                 ${(0, import_design_system9.mq)("sm")} {
@@ -2379,11 +2397,11 @@ function ProductSelectedItem({
                 }
               `,
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "span",
                       {
-                        css: import_react20.css`
+                        css: import_react21.css`
                     margin-right: var(--spacing-xs);
                   `,
                         children: "SKU:"
@@ -2391,17 +2409,17 @@ function ProductSelectedItem({
                     ),
                     selectedItem.sku || selectedItem.id
                   ] }),
-                  selectedItem.price !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("li", { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                  selectedItem.price !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("li", { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                       "span",
                       {
-                        css: import_react20.css`
+                        css: import_react21.css`
                       margin-right: var(--spacing-xs);
                     `,
                         children: "Price:"
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: selectedItem.price })
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: selectedItem.price })
                   ] }) : null
                 ]
               }
@@ -2410,8 +2428,8 @@ function ProductSelectedItem({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { css: productSelectedItemLinkContainer, children: [
-      selectedItem.editLink ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { css: productSelectedItemLinkContainer, children: [
+      selectedItem.editLink ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "a",
         {
           href: selectedItem.editLink,
@@ -2420,12 +2438,12 @@ function ProductSelectedItem({
           target: "_blank",
           css: productedSelectedItemLinkBtn,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: productedSelectedItemSmallText, children: "Edit" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Image, { src: logoIcon, alt: "Logo", css: productSelectedItemIcon })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { css: productedSelectedItemSmallText, children: "Edit" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Image, { src: logoIcon, alt: "Logo", css: productSelectedItemIcon })
           ]
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         "button",
         {
           type: "button",
@@ -2434,8 +2452,8 @@ function ProductSelectedItem({
           },
           css: productedSelectedItemLinkBtn,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { css: productedSelectedItemSmallText, children: "Unlink" }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_design_system9.Icon, { icon: import_CgClose3.CgClose, iconColor: "red", size: 16 })
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { css: productedSelectedItemSmallText, children: "Unlink" }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_design_system9.Icon, { icon: import_CgClose3.CgClose, iconColor: "red", size: 16 })
           ]
         }
       )
@@ -2444,7 +2462,7 @@ function ProductSelectedItem({
 }
 
 // src/components/commerce/ProductSearch.tsx
-var import_jsx_runtime24 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
 function ProductSearch({
   selectedProducts,
   setSelectedProducts,
@@ -2467,11 +2485,11 @@ function ProductSearch({
     value: categories,
     loading: categoriesLoading,
     error: categoriesError
-  } = (0, import_react_use3.useAsync)(async () => {
+  } = (0, import_react_use4.useAsync)(async () => {
     return await onGetCategories();
   }, [onGetCategories]);
   const categoryIds = categories == null ? void 0 : categories.map((c) => c.id).join(",");
-  const categoryOptions = (0, import_react21.useMemo)(
+  const categoryOptions = (0, import_react22.useMemo)(
     () => {
       if (!categories) {
         return void 0;
@@ -2487,8 +2505,8 @@ function ProductSearch({
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [categoryIds]
   );
-  const combinedSearchResults = (0, import_react21.useRef)();
-  const [handleSearchState, handleSearch] = (0, import_react_use3.useAsyncFn)(
+  const combinedSearchResults = (0, import_react22.useRef)();
+  const [handleSearchState, handleSearch] = (0, import_react_use4.useAsyncFn)(
     async (text, options) => {
       const result = await onSearchProducts({
         text,
@@ -2511,13 +2529,13 @@ function ProductSearch({
     await setSelectedProducts(items);
   };
   if (categoriesError || handleSearchState.error) {
-    const ErrorComp = errorComponent ? errorComponent : ({ categoriesError: categoriesError2, searchError }) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_design_system10.Callout, { type: "error", children: [
+    const ErrorComp = errorComponent ? errorComponent : ({ categoriesError: categoriesError2, searchError }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_design_system10.Callout, { type: "error", children: [
       "There was an error: ",
       (categoriesError2 == null ? void 0 : categoriesError2.message) || (searchError == null ? void 0 : searchError.message)
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ErrorComp, { categoriesError, searchError: handleSearchState.error });
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ErrorComp, { categoriesError, searchError: handleSearchState.error });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ProductSearchContext.Provider, { value: { categories, logoIcon }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ProductSearchContext.Provider, { value: { categories, logoIcon }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     EntrySearch,
     {
       search: handleSearch,
@@ -2541,9 +2559,9 @@ function ProductSearch({
     }
   ) });
 }
-var ProductSearchContext = import_react21.default.createContext(void 0);
+var ProductSearchContext = import_react22.default.createContext(void 0);
 var useProductSearchContext = () => {
-  const context = (0, import_react21.useContext)(ProductSearchContext);
+  const context = (0, import_react22.useContext)(ProductSearchContext);
   if (!context) {
     throw new Error("useProductSearchContext must be used within a <ProductSearchContext> provider");
   }
@@ -2551,24 +2569,24 @@ var useProductSearchContext = () => {
 };
 
 // src/components/dam/DamSelectedItem.tsx
-var import_react23 = require("@emotion/react");
+var import_react24 = require("@emotion/react");
 var import_CgClose4 = require("@react-icons/all-files/cg/CgClose");
 var import_CgInfo2 = require("@react-icons/all-files/cg/CgInfo");
 var import_design_system12 = require("@uniformdev/design-system");
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_timeago2 = require("timeago.js");
 
 // src/components/dam/DamSelectedItem.styles.ts
-var import_react22 = require("@emotion/react");
+var import_react23 = require("@emotion/react");
 var import_design_system11 = require("@uniformdev/design-system");
-var damSelectedItemContainer = import_react22.css`
+var damSelectedItemContainer = import_react23.css`
   border: 1px solid var(--gray-200);
   background: var(--gray-50);
   border-radius: var(--rounded-base);
   display: flex;
   width: 100%;
 `;
-var damSelectedItemInner = import_react22.css`
+var damSelectedItemInner = import_react23.css`
   align-items: center;
   display: flex;
   flex-grow: 1;
@@ -2577,27 +2595,27 @@ var damSelectedItemInner = import_react22.css`
   padding: var(--spacing-base) var(--spacing-base) var(--spacing-base) var(--spacing-lg);
   position: relative;
 `;
-var damSelectedItemDetails = import_react22.css`
+var damSelectedItemDetails = import_react23.css`
   flex-grow: 1;
 `;
-var damSelectedItemCopy = import_react22.css`
+var damSelectedItemCopy = import_react23.css`
   align-items: center;
   display: flex;
   position: relative;
 `;
-var damSelectedItemTitle = import_react22.css`
-  color: var(--brand-secondary-1);
+var damSelectedItemTitle = import_react23.css`
+  color: var(--typography-base);
   font-size: var(--fs-base);
   font-weight: var(--fw-bold);
   line-height: 1;
   margin: 0;
   word-break: break-word;
 `;
-var damSelectedItemIcon = import_react22.css`
+var damSelectedItemIcon = import_react23.css`
   width: 1.5rem;
   height: 1.5rem;
 `;
-var damSelectedItemPopover = import_react22.css`
+var damSelectedItemPopover = import_react23.css`
   background: var(--white);
   border-radius: var(--rounded-base);
   border-left: 4px solid var(--brand-secondary-3);
@@ -2608,14 +2626,14 @@ var damSelectedItemPopover = import_react22.css`
   z-index: var(--z-10);
   width: max-content;
 `;
-var damSelectedItemSmallText = import_react22.css`
+var damSelectedItemSmallText = import_react23.css`
   font-size: var(--fs-sm);
 `;
-var damSelectedItemPopoverLabel = import_react22.css`
+var damSelectedItemPopoverLabel = import_react23.css`
   font-weight: var(--fw-bold);
   margin-right: var(--spacing-sm);
 `;
-var damSelectedItemLinkContainer = import_react22.css`
+var damSelectedItemLinkContainer = import_react23.css`
   display: flex;
   flex-direction: column;
   gap: var(--spacing-sm);
@@ -2626,7 +2644,7 @@ var damSelectedItemLinkContainer = import_react22.css`
     min-width: 200px;
   }
 `;
-var damSelectedItemLinkBtn = import_react22.css`
+var damSelectedItemLinkBtn = import_react23.css`
   align-items: center;
   background: var(--white);
   border-radius: var(--rounded-base);
@@ -2642,18 +2660,18 @@ var damSelectedItemLinkBtn = import_react22.css`
     background: var(--gray-50);
   }
 `;
-var damSelectedItemMediaContainer = import_react22.css`
+var damSelectedItemMediaContainer = import_react23.css`
   display: flex;
   margin-top: var(--spacing-sm);
   gap: var(--spacing-sm);
 `;
-var damSelectedItemInfoBtn = import_react22.css`
+var damSelectedItemInfoBtn = import_react23.css`
   background: none;
   outline: none;
   border: none;
   margin: calc(var(--spacing-xs) * -1) 0 calc(var(--spacing-xs) * -1) var(--spacing-sm);
 `;
-var damSelectItemImage = import_react22.css`
+var damSelectItemImage = import_react23.css`
   display: block;
   max-width: 100%;
   min-width: 100px;
@@ -2661,7 +2679,7 @@ var damSelectItemImage = import_react22.css`
 `;
 
 // src/components/dam/DamSelectedItem.tsx
-var import_jsx_runtime25 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
 function DamSelectedItem({
   selectedItem,
   onDeselect,
@@ -2669,9 +2687,9 @@ function DamSelectedItem({
   logoIcon,
   itemDetailsRendererComponent
 }) {
-  const popoverRef = (0, import_react24.useRef)(null);
-  const [showInfo, setShowInfo] = (0, import_react24.useState)(false);
-  (0, import_react24.useEffect)(() => {
+  const popoverRef = (0, import_react25.useRef)(null);
+  const [showInfo, setShowInfo] = (0, import_react25.useState)(false);
+  (0, import_react25.useEffect)(() => {
     const resizeHandler = () => {
       setShowInfo(false);
     };
@@ -2681,21 +2699,21 @@ function DamSelectedItem({
     };
   }, [popoverRef]);
   const ResolvedItemDetailsRendererComponent = itemDetailsRendererComponent != null ? itemDetailsRendererComponent : DefaultDamItemRenderer;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "div",
     {
       css: [
         damSelectedItemContainer,
-        import_react23.css`
+        import_react24.css`
           margin: 0 0 1rem 0;
         `
       ],
-      children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { css: damSelectedItemInner, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { css: damSelectedItemDetails, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { css: damSelectedItemCopy, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("h4", { css: [damSelectedItemTitle], title: `ID: ${selectedItem.id}`, "data-testid": "dam-selected-item", children: selectedItem.title || selectedItem.id || "" }),
-            selectedItem.popoverData ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { ref: popoverRef, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { css: damSelectedItemInner, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { css: damSelectedItemDetails, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { css: damSelectedItemCopy, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h4", { css: [damSelectedItemTitle], title: `ID: ${selectedItem.id}`, "data-testid": "dam-selected-item", children: selectedItem.title || selectedItem.id || "" }),
+            selectedItem.popoverData ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { ref: popoverRef, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "button",
                 {
                   type: "button",
@@ -2703,34 +2721,34 @@ function DamSelectedItem({
                   "aria-controls": "path-details",
                   "aria-expanded": showInfo,
                   onClick: () => setShowInfo(!showInfo),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                     import_design_system12.Icon,
                     {
                       icon: import_CgInfo2.CgInfo,
                       iconColor: "gray",
                       size: 24,
-                      css: import_react23.css`
+                      css: import_react24.css`
                       opacity: var(--opacity-75);
                     `
                     }
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
                 "div",
                 {
                   id: "path-details",
                   "aria-hidden": !showInfo,
                   css: [
                     damSelectedItemPopover,
-                    showInfo ? import_react23.css`
+                    showInfo ? import_react24.css`
                           visibility: visible;
-                        ` : import_react23.css`
+                        ` : import_react24.css`
                           visibility: hidden;
                         `
                   ],
-                  children: Object.entries(selectedItem.popoverData).map(([key, value], index) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { css: damSelectedItemSmallText, children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { css: damSelectedItemPopoverLabel, children: [
+                  children: Object.entries(selectedItem.popoverData).map(([key, value], index) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { css: damSelectedItemSmallText, children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { css: damSelectedItemPopoverLabel, children: [
                       key,
                       ":"
                     ] }),
@@ -2740,10 +2758,10 @@ function DamSelectedItem({
               )
             ] }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ResolvedItemDetailsRendererComponent, { item: selectedItem })
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ResolvedItemDetailsRendererComponent, { item: selectedItem })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { css: damSelectedItemLinkContainer, children: [
-          selectedItem.editLink ? typeof selectedItem.editLink === "string" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { css: damSelectedItemLinkContainer, children: [
+          selectedItem.editLink ? typeof selectedItem.editLink === "string" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             "a",
             {
               href: selectedItem.editLink,
@@ -2758,12 +2776,12 @@ function DamSelectedItem({
               },
               css: damSelectedItemLinkBtn,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { css: damSelectedItemSmallText, children: "Edit" }),
-                logoIcon ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Image, { src: logoIcon, css: damSelectedItemIcon, alt: "Logo" }) : null
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { css: damSelectedItemSmallText, children: "Edit" }),
+                logoIcon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Image, { src: logoIcon, css: damSelectedItemIcon, alt: "Logo" }) : null
               ]
             }
           ) : selectedItem.editLink : null,
-          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
             "button",
             {
               type: "button",
@@ -2772,8 +2790,8 @@ function DamSelectedItem({
               },
               css: damSelectedItemLinkBtn,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { css: damSelectedItemSmallText, children: "Unlink" }),
-                /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_design_system12.Icon, { icon: import_CgClose4.CgClose, iconColor: "red", size: 16 })
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { css: damSelectedItemSmallText, children: "Unlink" }),
+                /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_design_system12.Icon, { icon: import_CgClose4.CgClose, iconColor: "red", size: 16 })
               ]
             }
           )
@@ -2787,33 +2805,33 @@ function DefaultDamItemRenderer({ item }) {
   let preview = null;
   if (item.previewUrl && typeof item.previewUrl === "string") {
     if (item.type === "image") {
-      preview = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("img", { src: item.previewUrl, alt: item.id, width: "200", css: damSelectItemImage });
+      preview = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("img", { src: item.previewUrl, alt: item.id, width: "200", css: damSelectItemImage });
     } else if (item.type === "video") {
-      preview = /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("video", { src: item.previewUrl, title: item.id, width: "200", controls: true, css: damSelectItemImage });
+      preview = /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("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__ */ (0, import_jsx_runtime25.jsxs)("div", { css: damSelectedItemMediaContainer, children: [
-    preview ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { children: preview }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("ul", { children: [
+  return preview || item.metadata ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { css: damSelectedItemMediaContainer, children: [
+    preview ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { children: preview }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("ul", { children: [
       item.metadata ? Object.entries(item.metadata).map(([key, value]) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
           "li",
           {
             css: [
               damSelectedItemSmallText,
-              import_react23.css`
+              import_react24.css`
                       order: 1;
                     `
             ],
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
                 "span",
                 {
                   css: [
                     damSelectedItemPopoverLabel,
-                    import_react23.css`
+                    import_react24.css`
                         order: 1;
                       `
                   ],
@@ -2829,8 +2847,8 @@ function DefaultDamItemRenderer({ item }) {
           key
         );
       }) : null,
-      item.createdDate ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("li", { css: damSelectedItemSmallText, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { css: damSelectedItemPopoverLabel, children: "Date:" }),
+      item.createdDate ? /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("li", { css: damSelectedItemSmallText, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { css: damSelectedItemPopoverLabel, children: "Date:" }),
         (0, import_timeago2.format)(item.createdDate)
       ] }) : null
     ] })
@@ -2838,9 +2856,9 @@ function DefaultDamItemRenderer({ item }) {
 }
 
 // src/hooks/useConnectedDataAsVariables.tsx
-var import_react25 = require("react");
+var import_react26 = require("react");
 function useConnectedDataAsVariables(connectedData) {
-  return (0, import_react25.useMemo)(
+  return (0, import_react26.useMemo)(
     () => Object.entries(connectedData != null ? connectedData : {}).reduce(
       (acc, [key, value]) => {
         if (value === null || value === void 0) {
@@ -2856,13 +2874,14 @@ function useConnectedDataAsVariables(connectedData) {
 }
 
 // src/hooks/useDynamicInputsAsVariables.tsx
-var import_react26 = require("react");
-var import_jsx_runtime26 = require("@emotion/react/jsx-runtime");
+var import_canvas = require("@uniformdev/canvas");
+var import_react27 = require("react");
+var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
 function useDynamicInputsAsVariables(dynamicInputs) {
-  return (0, import_react26.useMemo)(() => {
+  return (0, import_react27.useMemo)(() => {
     const result = Object.entries(dynamicInputs).reduce(
       (acc, [name, input3]) => {
-        const source = `from ${input3.type === "path" ? "URL path" : "query string"}`;
+        const source = `from ${name === import_canvas.LOCALE_DYNAMIC_INPUT_NAME ? "current locale" : input3.type === "path" ? "URL path" : "query string"}`;
         acc[name] = {
           readOnly: true,
           type: input3.type,
@@ -2875,14 +2894,14 @@ Current preview value: ${input3.value || "not provided"}`
         if (!input3.value) {
           acc[name] = {
             ...acc[name],
-            helpText: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: input3.value || /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("em", { children: "not provided" }) }),
+            helpText: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: input3.value || /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("em", { children: "not provided" }) }),
             displayName: name
           };
         } else {
           acc[name] = {
             ...acc[name],
             displayName: input3.value,
-            helpText: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_jsx_runtime26.Fragment, { children: name })
+            helpText: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_jsx_runtime27.Fragment, { children: name })
           };
         }
         return acc;
@@ -2894,18 +2913,18 @@ Current preview value: ${input3.value || "not provided"}`
 }
 
 // src/hooks/useMeshLocation.ts
-var import_react29 = require("react");
+var import_react30 = require("react");
 
 // src/components/UniformMeshLocationContext.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 
 // src/components/UniformMeshSdkContext.tsx
 var import_design_system13 = require("@uniformdev/design-system");
-var import_react27 = require("react");
-var import_jsx_runtime27 = require("@emotion/react/jsx-runtime");
-var UniformMeshSdkContext = (0, import_react27.createContext)(void 0);
+var import_react28 = require("react");
+var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
+var UniformMeshSdkContext = (0, import_react28.createContext)(void 0);
 var useUniformMeshSdkContext = () => {
-  const context = (0, import_react27.useContext)(UniformMeshSdkContext);
+  const context = (0, import_react28.useContext)(UniformMeshSdkContext);
   if (!context) {
     throw new Error("useUniformMeshSdkContext must be used within <MeshApp /> or <UniformMeshSdkContext />");
   }
@@ -2919,14 +2938,14 @@ function useUniformMeshSdk() {
 }
 
 // src/components/UniformMeshLocationContext.tsx
-var import_jsx_runtime28 = require("@emotion/react/jsx-runtime");
-var UniformMeshLocationContext = (0, import_react28.createContext)(void 0);
+var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
+var UniformMeshLocationContext = (0, import_react29.createContext)(void 0);
 var UniformMeshLocationContextProvider = ({
   children
 }) => {
   const sdk = useUniformMeshSdk();
-  const [location, setLocation] = (0, import_react28.useState)(sdk.getCurrentLocation());
-  (0, import_react28.useMemo)(() => {
+  const [location, setLocation] = (0, import_react29.useState)(sdk.getCurrentLocation());
+  (0, import_react29.useMemo)(() => {
     const valueChangeListener = (event) => {
       setLocation((old) => ({ ...old, value: event.newValue }));
     };
@@ -2940,10 +2959,10 @@ var UniformMeshLocationContextProvider = ({
       sdk.events.off("onMetadataChanged", metaChangeListener);
     };
   }, [sdk]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(UniformMeshLocationContext.Provider, { value: { location }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(UniformMeshLocationContext.Provider, { value: { location }, children });
 };
 var useUniformMeshLocationContext = () => {
-  const context = (0, import_react28.useContext)(UniformMeshLocationContext);
+  const context = (0, import_react29.useContext)(UniformMeshLocationContext);
   if (!context) {
     throw new Error("useUniformMeshLocationContext must be used within a UniformMeshLocationContextProvider");
   }
@@ -2956,9 +2975,9 @@ function useMeshLocation(expectedLocation) {
   if (expectedLocation && location.type !== expectedLocation) {
     throw new Error(`Expected location type ${expectedLocation} but got ${location.type}`);
   }
-  const backdoorLocation = (0, import_react29.useRef)(location);
+  const backdoorLocation = (0, import_react30.useRef)(location);
   backdoorLocation.current = location;
-  const stabilizedSetValueProxy = (0, import_react29.useMemo)(
+  const stabilizedSetValueProxy = (0, import_react30.useMemo)(
     () => (dispatch) => {
       const { newValue, options } = dispatch(backdoorLocation.current.value);
       backdoorLocation.current.setValue(newValue, options);
@@ -2978,14 +2997,14 @@ var import_design_system14 = require("@uniformdev/design-system");
 // src/components/Variables/composer/ControlledValuePlugin.tsx
 var import_LexicalComposerContext = require("@lexical/react/LexicalComposerContext");
 var import_lite = require("dequal/lite");
-var import_react30 = require("react");
+var import_react31 = require("react");
 
 // src/components/Variables/util/deserializeVariablesEditorState.ts
-var import_canvas = require("@uniformdev/canvas");
+var import_canvas2 = require("@uniformdev/canvas");
 var import_lexical = require("lexical");
 function deserializeVariablesEditorState(serialized) {
   const result = [];
-  (0, import_canvas.parseVariableExpression)(serialized != null ? serialized : "", (token, type) => {
+  (0, import_canvas2.parseVariableExpression)(serialized != null ? serialized : "", (token, type) => {
     if (type === "text") {
       const node = {
         type: import_lexical.TextNode.getType(),
@@ -3089,8 +3108,8 @@ function ControlledValuePlugin({
   extraDependencies
 }) {
   const [editor] = (0, import_LexicalComposerContext.useLexicalComposerContext)();
-  const lastValueRef = (0, import_react30.useRef)(value);
-  (0, import_react30.useEffect)(() => {
+  const lastValueRef = (0, import_react31.useRef)(value);
+  (0, import_react31.useEffect)(() => {
     if (!enabled) {
       return;
     }
@@ -3112,10 +3131,10 @@ var import_LexicalComposerContext3 = require("@lexical/react/LexicalComposerCont
 var import_useLexicalNodeSelection = require("@lexical/react/useLexicalNodeSelection");
 var import_selection = require("@lexical/selection");
 var import_utils2 = require("@lexical/utils");
-var import_canvas3 = require("@uniformdev/canvas");
+var import_canvas4 = require("@uniformdev/canvas");
 var import_design_system18 = require("@uniformdev/design-system");
 var import_lexical4 = require("lexical");
-var import_react39 = require("react");
+var import_react40 = require("react");
 
 // src/components/Variables/util/prettifyBindExpression.tsx
 function prettifyBindExpression(bindExpression) {
@@ -3124,23 +3143,24 @@ function prettifyBindExpression(bindExpression) {
 
 // src/components/Variables/composer/VariableChip.tsx
 var import_design_system15 = require("@uniformdev/design-system");
-var import_react31 = require("react");
-var import_jsx_runtime29 = require("@emotion/react/jsx-runtime");
+var import_react32 = require("react");
+var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
 function VariableChip({
   displayName,
   referenceIsValid,
   tooltip,
   reference,
   onClick,
+  clickToEdit,
   isFresh,
   selected,
   disabled
 }) {
   const hasClickEvent = !!onClick;
   const referenceIsValidFr = isFresh ? true : referenceIsValid;
-  const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? import_react31.Fragment : UndefinedVariableReference;
-  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent ? "Click to edit" : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  const Wrapper = referenceIsValidFr === "info" ? InfoVariableReference : referenceIsValidFr ? import_react32.Fragment : UndefinedVariableReference;
+  const extraTitle = !referenceIsValidFr ? `${reference} is not defined.` : hasClickEvent && clickToEdit ? "Click to edit" : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     import_design_system15.MultilineChip,
     {
       title: tooltip ? `${tooltip}${extraTitle ? `
@@ -3149,12 +3169,12 @@ ${extraTitle}` : ""}` : extraTitle,
       onClick,
       "aria-selected": selected ? true : void 0,
       "aria-disabled": disabled,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(Wrapper, { children: displayName || reference })
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Wrapper, { children: displayName || reference })
     }
   );
 }
 function UndefinedVariableReference({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
       style: {
@@ -3167,7 +3187,7 @@ function UndefinedVariableReference({ children }) {
   );
 }
 function InfoVariableReference({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "span",
     {
       style: {
@@ -3181,21 +3201,21 @@ function InfoVariableReference({ children }) {
 }
 
 // src/components/Variables/composer/VariablesPlugin.tsx
-var import_react37 = require("@emotion/react");
+var import_react38 = require("@emotion/react");
 var import_LexicalComposerContext2 = require("@lexical/react/LexicalComposerContext");
 var import_LexicalTypeaheadMenuPlugin = require("@lexical/react/LexicalTypeaheadMenuPlugin");
 var import_utils = require("@lexical/utils");
 var import_AiFillPlusCircle = require("@react-icons/all-files/ai/AiFillPlusCircle");
-var import_canvas2 = require("@uniformdev/canvas");
+var import_canvas3 = require("@uniformdev/canvas");
 var import_design_system17 = require("@uniformdev/design-system");
 var import_lite2 = require("dequal/lite");
 var import_lexical3 = require("lexical");
-var import_react38 = require("react");
+var import_react39 = require("react");
 var import_react_dom = require("react-dom");
 
 // src/components/Variables/toolbox/SelectVariableMenu.styles.ts
-var import_react32 = require("@emotion/react");
-var menuBtn = import_react32.css`
+var import_react33 = require("@emotion/react");
+var menuBtn = import_react33.css`
   background: none;
   border: none;
   color: var(--gray-500);
@@ -3205,47 +3225,47 @@ var menuBtn = import_react32.css`
     outline: none;
   }
 `;
-var menuItemTextGroup = import_react32.css`
+var menuItemTextGroup = import_react33.css`
   align-items: flex-start;
   display: flex;
   flex-direction: column;
   gap: 0;
   line-height: 1em;
 `;
-var smallText = import_react32.css`
+var smallText = import_react33.css`
   font-size: var(--fs-xs);
   color: var(--gray-500);
 `;
-var variablesTipText = import_react32.css`
+var variablesTipText = import_react33.css`
   ${smallText}
   color: var(--gray-500);
   padding: 0 var(--spacing-sm);
 `;
 
 // src/components/Variables/useVariableEditor.ts
-var import_react36 = require("react");
+var import_react37 = require("react");
 
 // src/components/Variables/VariablesProvider.tsx
 var import_mitt = __toESM(require("mitt"));
-var import_react35 = require("react");
+var import_react36 = require("react");
 
 // src/components/Variables/VariableEditor.tsx
 var import_zod = require("@hookform/resolvers/zod");
 var import_design_system16 = require("@uniformdev/design-system");
-var import_react34 = require("react");
+var import_react35 = require("react");
 var import_react_hook_form = require("react-hook-form");
 var import_zod2 = require("zod");
 
 // src/components/Variables/styles/VariableEditor.styles.ts
-var import_react33 = require("@emotion/react");
-var variablesFormContainer = import_react33.css`
+var import_react34 = require("@emotion/react");
+var variablesFormContainer = import_react34.css`
   > * {
     margin: var(--spacing-base) 0 0;
   }
 `;
 
 // src/components/Variables/VariableEditor.tsx
-var import_jsx_runtime30 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
 var schema = import_zod2.z.object({
   name: import_zod2.z.string().nonempty("Name can't be empty").regex(/^[^${}]+$/, "$, {, and } are reserved characters and cannot be used in a variable name"),
   default: import_zod2.z.string(),
@@ -3290,9 +3310,9 @@ function VariableEditor({
     },
     activeWhenEditing: true
   });
-  const nameRef = (0, import_react34.useRef)(null);
+  const nameRef = (0, import_react35.useRef)(null);
   const { ref, ...nameRegister } = register("name");
-  (0, import_react34.useLayoutEffect)(() => {
+  (0, import_react35.useLayoutEffect)(() => {
     if (nameRef.current && !nameRef.current.value) {
       nameRef.current.focus();
     }
@@ -3300,8 +3320,8 @@ function VariableEditor({
   return (
     // 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__ */ (0, import_jsx_runtime30.jsxs)("div", { css: variablesFormContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { css: variablesFormContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         import_design_system16.Input,
         {
           ...nameRegister,
@@ -3315,7 +3335,7 @@ function VariableEditor({
           }
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         import_design_system16.Input,
         {
           ...register("helpText"),
@@ -3325,7 +3345,7 @@ function VariableEditor({
           errorMessage: (_f = formState.errors.helpText) == null ? void 0 : _f.message
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         import_design_system16.Input,
         {
           ...register("default"),
@@ -3334,14 +3354,14 @@ function VariableEditor({
           errorMessage: (_g = formState.errors.default) == null ? void 0 : _g.message
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system16.HorizontalRhythm, { justify: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_design_system16.HorizontalRhythm, { gap: "sm", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system16.Button, { type: "button", onClick: submitHandler, children: "OK" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_design_system16.Button, { type: "button", buttonType: "ghost", onClick: () => onCancel({ disconnect: false }), children: "cancel" })
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system16.HorizontalRhythm, { justify: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_design_system16.HorizontalRhythm, { gap: "sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system16.Button, { type: "button", onClick: submitHandler, children: "OK" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_design_system16.Button, { type: "button", buttonType: "ghost", onClick: () => onCancel({ disconnect: false }), children: "cancel" })
       ] }) }),
-      disableMeshTip ? null : /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_design_system16.Callout, { type: "tip", title: "Customized User Interfaces", children: [
+      disableMeshTip ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_design_system16.Callout, { 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__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           "a",
           {
             href: "https://docs.uniform.app/docs/integrations/mesh-integrations/custom-integrations",
@@ -3357,8 +3377,8 @@ function VariableEditor({
 }
 
 // src/components/Variables/VariablesProvider.tsx
-var import_jsx_runtime31 = require("@emotion/react/jsx-runtime");
-var VariablesContext = (0, import_react35.createContext)(null);
+var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
+var VariablesContext = (0, import_react36.createContext)(null);
 function VariablesProvider({
   value,
   onChange,
@@ -3368,9 +3388,9 @@ function VariablesProvider({
   children,
   knownUndefinedValues = {}
 }) {
-  const [editing, setEditing] = (0, import_react35.useState)();
-  const [editingContext, setEditingContext] = (0, import_react35.useState)();
-  const events = (0, import_react35.useMemo)(
+  const [editing, setEditing] = (0, import_react36.useState)();
+  const [editingContext, setEditingContext] = (0, import_react36.useState)();
+  const events = (0, import_react36.useMemo)(
     () => (0, import_mitt.default)(),
     []
   );
@@ -3378,7 +3398,7 @@ function VariablesProvider({
     throw new Error("onChange must be provided when readOnly is false");
   }
   const Editor = editVariableComponent != null ? editVariableComponent : VariableEditor;
-  const valueBasedContextValue = (0, import_react35.useMemo)(
+  const valueBasedContextValue = (0, import_react36.useMemo)(
     () => ({
       flatVariables: flattenVariables(value),
       dispatch: (event) => {
@@ -3416,7 +3436,7 @@ function VariablesProvider({
     }),
     [onChange, readOnly, value]
   );
-  const contextValue = (0, import_react35.useMemo)(() => {
+  const contextValue = (0, import_react36.useMemo)(() => {
     return {
       ...valueBasedContextValue,
       isEditing: typeof editing !== "undefined",
@@ -3426,9 +3446,9 @@ function VariablesProvider({
       isLoading: !!isLoading
     };
   }, [editing, events, knownUndefinedValues, valueBasedContextValue, isLoading]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(VariablesContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(VariablesContext.Provider, { value: contextValue, children: [
     children,
-    typeof editing !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    typeof editing !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Editor,
       {
         context: editingContext,
@@ -3456,7 +3476,7 @@ function VariablesProvider({
   ] });
 }
 function useVariables(returnEmptyWithoutProvider = false) {
-  const context = (0, import_react35.useContext)(VariablesContext);
+  const context = (0, import_react36.useContext)(VariablesContext);
   if (!context) {
     if (returnEmptyWithoutProvider) {
       return {
@@ -3487,8 +3507,8 @@ function flattenVariables(variables) {
 // src/components/Variables/useVariableEditor.ts
 function useVariableEditor() {
   const { variables, events, canDispatch, dispatch, isEditing } = useVariables(true);
-  const [isEditingBinding, setIsEditingBinding] = (0, import_react36.useState)();
-  (0, import_react36.useEffect)(() => {
+  const [isEditingBinding, setIsEditingBinding] = (0, import_react37.useState)();
+  (0, import_react37.useEffect)(() => {
     if (!canDispatch || !isEditingBinding) {
       return;
     }
@@ -3499,7 +3519,7 @@ function useVariableEditor() {
     events.on("editCompleted", fn);
     return () => events.off("editCompleted", fn);
   }, [canDispatch, events, isEditingBinding, variables]);
-  (0, import_react36.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     if (!isEditing) {
       setIsEditingBinding(void 0);
     }
@@ -3584,7 +3604,7 @@ function variablesToGroupedList(variables, filterFn, context) {
 }
 
 // src/components/Variables/composer/VariablesPlugin.tsx
-var import_jsx_runtime32 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
 var OPEN_INSERT_VARIABLE_COMMAND = (0, import_lexical3.createCommand)("uniform:open-insert-variable");
 var EDIT_VARIABLE_COMMAND = (0, import_lexical3.createCommand)("uniform:edit-variable");
 var DISCONNECT_VARIABLE_COMMAND = (0, import_lexical3.createCommand)(
@@ -3615,7 +3635,7 @@ function useVariablesMenu({
   getEditorContext
 }) {
   const { variables, canDispatch, readOnly } = useVariables(true);
-  const canEditVariable = (0, import_react38.useCallback)(
+  const canEditVariable = (0, import_react39.useCallback)(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
       name === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
@@ -3623,7 +3643,7 @@ function useVariablesMenu({
     [canDispatch, enableEditingVariables, readOnly]
   );
   const canAddVariable = canDispatch && showAddVariableMenuOption && !readOnly;
-  const { groupedVariables, menuOptions } = (0, import_react38.useMemo)(() => {
+  const { groupedVariables, menuOptions } = (0, import_react39.useMemo)(() => {
     const groupedVariables2 = variablesToGroupedList(variables, filterVariable, getEditorContext == null ? void 0 : getEditorContext());
     if (canAddVariable) {
       groupedVariables2.unshift({
@@ -3645,7 +3665,7 @@ function useVariablesMenu({
     );
     return { menuOptions: menuOptions2, groupedVariables: groupedVariables2 };
   }, [variables, filterVariable, getEditorContext, canAddVariable, showAddVariableMenuOption]);
-  const onSelect = (0, import_react38.useCallback)(
+  const onSelect = (0, import_react39.useCallback)(
     ({ queryString, value, nodeToReplace, editor, overwriteExistingValue }) => {
       if (value === ADD_VARIABLE_OPTION) {
         editor.update(() => {
@@ -3660,7 +3680,7 @@ function useVariablesMenu({
           var _a;
           const targetVariable = variables[value];
           if (overwriteExistingValue) {
-            setVariablesEditorValue(editor, (0, import_canvas2.createVariableReference)(value));
+            setVariablesEditorValue(editor, (0, import_canvas3.createVariableReference)(value));
             return true;
           }
           const variableNode = $createVariableNode(value, {
@@ -3693,9 +3713,9 @@ function VariablesPlugin({
 }) {
   const [editor] = (0, import_LexicalComposerContext2.useLexicalComposerContext)();
   const { variables, dispatch, isEditing, canDispatch, readOnly, knownUndefinedValues, isLoading } = useVariables(true);
-  const variablesRef = (0, import_react38.useRef)({ variables, knownUndefinedValues, isLoading });
+  const variablesRef = (0, import_react39.useRef)({ variables, knownUndefinedValues, isLoading });
   variablesRef.current = { variables, knownUndefinedValues, isLoading };
-  const canEditVariable = (0, import_react38.useCallback)(
+  const canEditVariable = (0, import_react39.useCallback)(
     (name, variable) => (
       // name === '' means new var. Add var perms computed by menu options.
       name === "" || canDispatch && enableEditingVariables && !readOnly && !(variable == null ? void 0 : variable.readOnly)
@@ -3703,13 +3723,13 @@ function VariablesPlugin({
     [canDispatch, enableEditingVariables, readOnly]
   );
   const { editVariable } = useVariableEditor();
-  const [queryString, setQueryString] = (0, import_react38.useState)(null);
+  const [queryString, setQueryString] = (0, import_react39.useState)(null);
   const { groupedVariables, menuOptions, onSelect } = useVariablesMenu({
     showAddVariableMenuOption,
     filterVariable,
     getEditorContext
   });
-  const { filteredGroupedVariables, filteredMenuOptions } = (0, import_react38.useMemo)(() => {
+  const { filteredGroupedVariables, filteredMenuOptions } = (0, import_react39.useMemo)(() => {
     if (!queryString) {
       return {
         filteredGroupedVariables: groupedVariables,
@@ -3729,7 +3749,7 @@ function VariablesPlugin({
       )
     };
   }, [queryString, groupedVariables, menuOptions]);
-  const onSelectOption = (0, import_react38.useCallback)(
+  const onSelectOption = (0, import_react39.useCallback)(
     (selectedOption, nodeToReplace, closeMenu) => {
       onSelect({
         queryString: queryString != null ? queryString : void 0,
@@ -3742,7 +3762,7 @@ function VariablesPlugin({
     },
     [editor, onSelect, queryString, replaceValueOnVariableInsert]
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     return (0, import_utils.mergeRegister)(
       editor.registerCommand(
         EDIT_VARIABLE_COMMAND,
@@ -3830,7 +3850,7 @@ function VariablesPlugin({
           if (!disableVariables) {
             const targetVariable = variablesRef.current.variables[reference];
             if (overwriteExistingValue) {
-              setVariablesEditorValue(editor, (0, import_canvas2.createVariableReference)(reference));
+              setVariablesEditorValue(editor, (0, import_canvas3.createVariableReference)(reference));
               return true;
             }
             const variableNode = $createVariableNode(reference, {
@@ -3863,7 +3883,7 @@ function VariablesPlugin({
     editVariable,
     replaceValueOnVariableInsert
   ]);
-  const updateExistingNodeIfChanged = (0, import_react38.useCallback)(
+  const updateExistingNodeIfChanged = (0, import_react39.useCallback)(
     (variableNode) => {
       var _a, _b, _c;
       const targetVar = variablesRef.current.variables[variableNode.reference];
@@ -3889,14 +3909,14 @@ function VariablesPlugin({
     },
     [canEditVariable]
   );
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     editor.update(() => {
       (0, import_lexical3.$nodesOfType)(VariableNode).forEach((variableNode) => {
         updateExistingNodeIfChanged(variableNode);
       });
     });
   }, [editor, variables, canEditVariable, updateExistingNodeIfChanged]);
-  (0, import_react38.useEffect)(() => {
+  (0, import_react39.useEffect)(() => {
     return editor.registerNodeTransform(VariableNode, (variableNode) => {
       updateExistingNodeIfChanged(variableNode);
     });
@@ -3904,7 +3924,7 @@ function VariablesPlugin({
   if (disableVariables) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     import_LexicalTypeaheadMenuPlugin.LexicalTypeaheadMenuPlugin,
     {
       onQueryChange: setQueryString,
@@ -3917,11 +3937,11 @@ function VariablesPlugin({
         }
         let currentCumulativeMenuIndex = -1;
         return (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
             "div",
             {
               "data-auto-resize-opt-in": true,
-              css: import_react37.css`
+              css: import_react38.css`
               box-shadow: var(--shadow-base);
               border-radius: var(--rounded-base);
               background: var(--gray-50);
@@ -3936,14 +3956,14 @@ function VariablesPlugin({
               position: relative;
               z-index: var(--z-50);
             `,
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { children: filteredGroupedVariables.map((group, index) => {
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { children: filteredGroupedVariables.map((group, index) => {
                 var _a, _b;
-                return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.MenuGroup, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
+                return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system17.MenuGroup, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
                     var _a2;
                     currentCumulativeMenuIndex++;
                     const myCumulativeIndex = currentCumulativeMenuIndex;
-                    return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
                       import_design_system17.MenuItemInner,
                       {
                         active: selectedIndex === myCumulativeIndex,
@@ -3955,19 +3975,19 @@ function VariablesPlugin({
                           setHighlightedIndex(myCumulativeIndex);
                         },
                         css: menuItemTextGroup,
-                        children: variable.name === ADD_VARIABLE_OPTION ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_design_system17.HorizontalRhythm, { gap: "sm", align: "center", children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_AiFillPlusCircle.AiFillPlusCircle, { fill: "var(--gray-500)" }),
+                        children: variable.name === ADD_VARIABLE_OPTION ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_design_system17.HorizontalRhythm, { gap: "sm", align: "center", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_AiFillPlusCircle.AiFillPlusCircle, { fill: "var(--gray-500)" }),
                           " ",
-                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: variable.displayName })
-                        ] }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
-                          variable.helpText ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("small", { css: smallText, children: variable.helpText }) : null
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: variable.displayName })
+                        ] }) : /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_jsx_runtime33.Fragment, { children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: (_a2 = variable.displayName) != null ? _a2 : variable.name }),
+                          variable.helpText ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("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__ */ (0, import_jsx_runtime32.jsx)(import_design_system17.MenuItemSeparator, {})
+                  group.name || index === filteredGroupedVariables.length - 1 ? null : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system17.MenuItemSeparator, {})
                 ] });
               }) })
             }
@@ -3980,7 +4000,7 @@ function VariablesPlugin({
 }
 
 // src/components/Variables/composer/VariableNode.tsx
-var import_jsx_runtime33 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
 var VariableNode = class _VariableNode extends import_lexical4.DecoratorNode {
   constructor(reference, state, key) {
     super(key);
@@ -4030,7 +4050,7 @@ var VariableNode = class _VariableNode extends import_lexical4.DecoratorNode {
    * (albeit it won't get the fancy chip-node)
    */
   getTextContent() {
-    return (0, import_canvas3.createVariableReference)(this.reference);
+    return (0, import_canvas4.createVariableReference)(this.reference);
   }
   /** Creates the DOM wrapper that hosts the node */
   createDOM() {
@@ -4045,7 +4065,7 @@ var VariableNode = class _VariableNode extends import_lexical4.DecoratorNode {
    * rely on Context, etc in this renderer.
    */
   decorate() {
-    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(VariableNodeComponent, { state: this.__state, reference: this.reference, nodeKey: this.__key });
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(VariableNodeComponent, { state: this.__state, reference: this.reference, nodeKey: this.__key });
   }
 };
 function $createVariableNode(variableReference, state) {
@@ -4062,7 +4082,7 @@ function VariableNodeComponent({
   const [editor] = (0, import_LexicalComposerContext3.useLexicalComposerContext)();
   const [isSelected, setSelected, clearSelection] = (0, import_useLexicalNodeSelection.useLexicalNodeSelection)(nodeKey);
   const readOnly = !editor.isEditable();
-  const onDelete = (0, import_react39.useCallback)(
+  const onDelete = (0, import_react40.useCallback)(
     (event) => {
       if (isSelected && (0, import_lexical4.$isNodeSelection)((0, import_lexical4.$getSelection)())) {
         event.preventDefault();
@@ -4075,7 +4095,7 @@ function VariableNodeComponent({
     },
     [isSelected, nodeKey]
   );
-  (0, import_react39.useEffect)(() => {
+  (0, import_react40.useEffect)(() => {
     return (0, import_utils2.mergeRegister)(
       editor.registerCommand(import_lexical4.KEY_DELETE_COMMAND, onDelete, import_lexical4.COMMAND_PRIORITY_LOW),
       editor.registerCommand(import_lexical4.KEY_BACKSPACE_COMMAND, onDelete, import_lexical4.COMMAND_PRIORITY_LOW),
@@ -4138,14 +4158,15 @@ function VariableNodeComponent({
       )
     );
   }, [clearSelection, editor, isSelected, nodeKey, onDelete, setSelected]);
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     VariableChip,
     {
       ...state,
       reference,
-      displayName: state.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_design_system18.LoadingIndicator, { size: "sm" }) : state.displayName,
+      displayName: state.isLoading ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system18.LoadingIndicator, { size: "sm" }) : state.displayName,
       selected: isSelected,
       disabled: readOnly,
+      clickToEdit: state.hasClickEvent,
       onClick: state.hasClickEvent ? () => {
         setSelected(!isSelected);
         editor.dispatchCommand(EDIT_VARIABLE_COMMAND, {
@@ -4163,7 +4184,7 @@ function $isTargetWithinDecorator(target) {
 
 // src/components/Variables/InputVariables.tsx
 var import_design_system20 = require("@uniformdev/design-system");
-var import_react49 = require("react");
+var import_react50 = require("react");
 var import_uuid2 = require("uuid");
 
 // src/components/Variables/composer/EditorRefPlugin.tsx
@@ -4184,10 +4205,10 @@ function EditorRefPlugin({
 var import_LexicalComposerContext5 = require("@lexical/react/LexicalComposerContext");
 var import_utils3 = require("@lexical/utils");
 var import_lexical5 = require("lexical");
-var import_react40 = require("react");
+var import_react41 = require("react");
 function PasteTransformerPlugin({ transformPaste }) {
   const [editor] = (0, import_LexicalComposerContext5.useLexicalComposerContext)();
-  (0, import_react40.useEffect)(() => {
+  (0, import_react41.useEffect)(() => {
     return (0, import_utils3.mergeRegister)(
       editor.registerCommand(
         import_lexical5.PASTE_COMMAND,
@@ -4212,21 +4233,21 @@ function PasteTransformerPlugin({ transformPaste }) {
 }
 
 // src/components/Variables/styles/InputVariables.styles.ts
-var import_react41 = require("@emotion/react");
-var menuContainer = import_react41.css`
+var import_react42 = require("@emotion/react");
+var menuContainer = import_react42.css`
   position: relative;
 `;
-var menuBtn2 = import_react41.css`
+var menuBtn2 = import_react42.css`
   position: absolute;
   top: 50%;
   right: var(--spacing-sm);
   transform: translateY(-50%);
 `;
-var input = import_react41.css`
+var input = import_react42.css`
   appearance: none;
   background-color: var(--white);
-  border: 1px solid var(--gray-400);
-  border-radius: var(--rounded-md);
+  border: 1px solid var(--gray-200);
+  border-radius: var(--rounded-sm);
   color: var(--gray-700);
   padding-block: var(--spacing-base);
   padding-left: var(--spacing-base);
@@ -4240,7 +4261,7 @@ var input = import_react41.css`
 
   &:focus,
   &:focus-within {
-    border-color: var(--brand-secondary-1);
+    border-color: var(--typography-base);
     box-shadow: none;
     outline: none;
   }
@@ -4248,7 +4269,7 @@ var input = import_react41.css`
   &:disabled,
   &:disabled::placeholder {
     cursor: not-allowed;
-    color: var(--gray-300);
+    color: var(--gray-400);
     border-color: var(--gray-300);
   }
 
@@ -4256,16 +4277,16 @@ var input = import_react41.css`
     margin: 0;
   }
 `;
-var inputCompact = import_react41.css`
+var inputCompact = import_react42.css`
   border: 1px solid var(--white);
   padding-block: var(--spacing-sm);
   font-size: var(--fs-sm);
 `;
-var inputDisabled = import_react41.css`
+var inputDisabled = import_react42.css`
   cursor: not-allowed;
   opacity: var(--opacity-50);
 `;
-var placeholderCaption = import_react41.css`
+var placeholderCaption = import_react42.css`
   position: absolute;
   color: var(--gray-400);
   inset: var(--spacing-base) var(--spacing-lg) var(--spacing-base) var(--spacing-base);
@@ -4274,19 +4295,19 @@ var placeholderCaption = import_react41.css`
   white-space: nowrap;
   pointer-events: none;
 `;
-var placeholderCompact = import_react41.css`
+var placeholderCompact = import_react42.css`
   inset: var(--spacing-sm) var(--spacing-lg) var(--spacing-sm) var(--spacing-base);
 `;
 
 // src/components/Variables/toolbox/InputVariablesProvider.tsx
 var React10 = __toESM(require("react"));
-var import_react42 = require("react");
+var import_react43 = require("react");
 
 // src/components/Variables/util/hasReferencedVariables.ts
-var import_canvas4 = require("@uniformdev/canvas");
+var import_canvas5 = require("@uniformdev/canvas");
 function hasReferencedVariables(value) {
   let result = false;
-  (0, import_canvas4.parseVariableExpression)(value, (token, type) => {
+  (0, import_canvas5.parseVariableExpression)(value, (token, type) => {
     if (type === "variable") {
       result = true;
       return false;
@@ -4325,7 +4346,7 @@ function useInputVariablesState({
   const hadVariablesInValueForReals = inputWhenNoVariables ? hadVariablesInValue : hasVariablesInValue;
   const disableVariablesForReals = disableVariables || Object.keys(variables).length === 0 && !showAddVariableMenuOption;
   const disableResetForReals = !inputWhenNoVariables || !hadVariablesInValueForReals;
-  const sharedMenuProps = (0, import_react42.useMemo)(
+  const sharedMenuProps = (0, import_react43.useMemo)(
     () => ({
       menuTooltip,
       showAddVariableMenuOption,
@@ -4356,15 +4377,15 @@ function useInputVariablesState({
 }
 
 // src/components/Variables/toolbox/VariableField.styles.ts
-var import_react43 = require("@emotion/react");
-var labelText = import_react43.css`
+var import_react44 = require("@emotion/react");
+var labelText = import_react44.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-xs);
   font-weight: var(--fw-regular);
   margin: 0 0 var(--spacing-xs);
 `;
-var variableBindButton = import_react43.css`
+var variableBindButton = import_react44.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -4396,8 +4417,8 @@ var import_lexical6 = require("lexical");
 var import_BsFillPlusCircleFill = require("@react-icons/all-files/bs/BsFillPlusCircleFill");
 var import_CgUsbC = require("@react-icons/all-files/cg/CgUsbC");
 var import_design_system19 = require("@uniformdev/design-system");
-var import_react44 = require("react");
-var import_jsx_runtime34 = require("@emotion/react/jsx-runtime");
+var import_react45 = require("react");
+var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
 function SelectVariableMenu({
   onSelectVariable,
   onResetVariables,
@@ -4410,7 +4431,7 @@ function SelectVariableMenu({
   filterVariable
 }) {
   const { variables, canDispatch, readOnly } = useVariables(true);
-  const btnRef = (0, import_react44.useRef)(null);
+  const btnRef = (0, import_react45.useRef)(null);
   const { editVariable } = useVariableEditor();
   const variablesGroups = variablesToGroupedList(variables, filterVariable, getEditorContext == null ? void 0 : getEditorContext());
   const showAddVariableMenuOptionForReals = showAddVariableMenuOption && canDispatch && !readOnly;
@@ -4418,12 +4439,12 @@ function SelectVariableMenu({
   if (!showAddVariableMenuOptionForReals && !menuHasVariableOptions) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     import_design_system19.Menu,
     {
       placement: "bottom-start",
       withoutPortal: true,
-      menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
         "button",
         {
           ...buttonProps,
@@ -4432,12 +4453,12 @@ function SelectVariableMenu({
           css: [menuBtn, buttonCss],
           type: "button",
           "data-testid": "insert-variable",
-          children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_CgUsbC.CgUsbC, { size: "1.4rem" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_CgUsbC.CgUsbC, { size: "1.4rem" })
         }
       ),
       menuLabel: menuTooltip,
       children: [
-        showAddVariableMenuOptionForReals ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        showAddVariableMenuOptionForReals ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           import_design_system19.MenuItem,
           {
             onClick: async () => {
@@ -4448,43 +4469,43 @@ function SelectVariableMenu({
               onSelectVariable == null ? void 0 : onSelectVariable(result.selectedVariable);
             },
             "data-testid": "add-variable-button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_design_system19.HorizontalRhythm, { gap: "sm", align: "center", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_BsFillPlusCircleFill.BsFillPlusCircleFill, { fill: "var(--gray-500)", size: "1.25em" }),
-              /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: typeof showAddVariableMenuOption === "string" ? showAddVariableMenuOption : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_jsx_runtime34.Fragment, { children: "Add\u2026" }) })
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_design_system19.HorizontalRhythm, { gap: "sm", align: "center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_BsFillPlusCircleFill.BsFillPlusCircleFill, { fill: "var(--gray-500)", size: "1.25em" }),
+              /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: typeof showAddVariableMenuOption === "string" ? showAddVariableMenuOption : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_jsx_runtime35.Fragment, { children: "Add\u2026" }) })
             ] })
           }
         ) : null,
-        showAddVariableMenuOptionForReals && menuHasVariableOptions ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system19.MenuItemSeparator, {}) : null,
+        showAddVariableMenuOptionForReals && menuHasVariableOptions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system19.MenuItemSeparator, {}) : null,
         variablesGroups.map((group) => {
           var _a;
-          return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system19.MenuGroup, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
+          return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system19.MenuGroup, { title: (_a = group.name) != null ? _a : "", children: group.variables.map((variable) => {
             const { name, displayName, helpText } = variable;
-            return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+            return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
               import_design_system19.MenuItem,
               {
                 id: name,
                 css: menuItemTextGroup,
                 onClick: () => onSelectVariable == null ? void 0 : onSelectVariable(variable),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: displayName != null ? displayName : name }),
-                  helpText ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("small", { css: smallText, children: helpText }) : null
+                  /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: displayName != null ? displayName : name }),
+                  helpText ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("small", { css: smallText, children: helpText }) : null
                 ]
               },
               name
             );
           }) }, group.name);
         }),
-        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system19.MenuItemSeparator, {}) : null,
-        onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system19.MenuItem, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
-        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_design_system19.MenuItemSeparator, {}) : null,
-        tip ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("i", { css: variablesTipText, children: tip }) : null
+        menuHasVariableOptions && onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system19.MenuItemSeparator, {}) : null,
+        onResetVariables ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system19.MenuItem, { onClick: onResetVariables, css: { color: "var(--brand-secondary-5)" }, children: "Reset" }) : null,
+        tip && (menuHasVariableOptions || onResetVariables) ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_design_system19.MenuItemSeparator, {}) : null,
+        tip ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("i", { css: variablesTipText, children: tip }) : null
       ]
     }
   );
 }
 
 // src/components/Variables/toolbox/VariablesComposerVariableMenu.tsx
-var import_jsx_runtime35 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
 function VariablesComposerVariableMenu(props) {
   const [editor] = (0, import_LexicalComposerContext6.useLexicalComposerContext)();
   const onSelectVariable = (selectedVariable) => {
@@ -4500,7 +4521,7 @@ function VariablesComposerVariableMenu(props) {
     editor.dispatchCommand(import_lexical6.CLEAR_EDITOR_COMMAND, void 0);
     (_a = props.onResetVariables) == null ? void 0 : _a.call(props);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     SelectVariableMenu,
     {
       ...props,
@@ -4511,7 +4532,7 @@ function VariablesComposerVariableMenu(props) {
 }
 
 // src/components/Variables/toolbox/VariableField.tsx
-var import_jsx_runtime36 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
 function VariableField({
   label,
   selectVariableMenuOptions,
@@ -4522,7 +4543,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__ */ (0, import_jsx_runtime36.jsx)(
+  const variableSelector = (varCount > 0 || (selectVariableMenuOptions == null ? void 0 : selectVariableMenuOptions.showAddVariableMenuOption)) && !disableVariables ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     VariablesComposerVariableMenu,
     {
       ...selectVariableMenuOptions,
@@ -4530,10 +4551,10 @@ function VariableField({
       buttonProps: isActive ? { "aria-pressed": "true" } : void 0
     }
   ) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("label", { htmlFor: id, css: labelText, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { "data-testid": "variable-field", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("label", { htmlFor: id, css: labelText, "data-testid": "field-name", children: [
       variableSelector,
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: label })
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { children: label })
     ] }),
     children
   ] });
@@ -4544,14 +4565,14 @@ var import_LexicalAutoFocusPlugin = require("@lexical/react/LexicalAutoFocusPlug
 var import_LexicalClearEditorPlugin = require("@lexical/react/LexicalClearEditorPlugin");
 var import_LexicalComposer = require("@lexical/react/LexicalComposer");
 var import_LexicalOnChangePlugin = require("@lexical/react/LexicalOnChangePlugin");
-var import_react47 = require("react");
+var import_react48 = require("react");
 
 // src/components/Variables/composer/DisablePlugin.tsx
 var import_LexicalComposerContext7 = require("@lexical/react/LexicalComposerContext");
-var import_react45 = require("react");
+var import_react46 = require("react");
 function DisablePlugin({ disabled }) {
   const [editor] = (0, import_LexicalComposerContext7.useLexicalComposerContext)();
-  (0, import_react45.useEffect)(() => {
+  (0, import_react46.useEffect)(() => {
     editor.setEditable(!disabled);
   }, [editor, disabled]);
   return null;
@@ -4560,10 +4581,10 @@ function DisablePlugin({ disabled }) {
 // src/components/Variables/composer/SingleLineTextPlugin.tsx
 var import_LexicalComposerContext8 = require("@lexical/react/LexicalComposerContext");
 var import_lexical7 = require("lexical");
-var import_react46 = require("react");
+var import_react47 = require("react");
 function SingleLineTextPlugin() {
   const [editor] = (0, import_LexicalComposerContext8.useLexicalComposerContext)();
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     editor.registerNodeTransform(import_lexical7.LineBreakNode, (node) => {
       node.remove();
     });
@@ -4572,7 +4593,7 @@ function SingleLineTextPlugin() {
 }
 
 // src/components/Variables/util/serializeVariablesEditorState.ts
-var import_canvas5 = require("@uniformdev/canvas");
+var import_canvas6 = require("@uniformdev/canvas");
 var import_lexical8 = require("lexical");
 
 // src/components/Variables/util/variableExpression.ts
@@ -4591,7 +4612,7 @@ function serializeRecursive(node, buffer) {
     buffer.push(node.text.replace(variablePrefix, "\\${"));
   }
   if (node.type === VariableNode.getType()) {
-    buffer.push((0, import_canvas5.createVariableReference)(node.reference));
+    buffer.push((0, import_canvas6.createVariableReference)(node.reference));
   }
   if (node.type === import_lexical8.LineBreakNode.getType()) {
     buffer.push("\n");
@@ -4604,7 +4625,7 @@ function serializeRecursive(node, buffer) {
 }
 
 // src/components/Variables/toolbox/VariablesComposer.tsx
-var import_jsx_runtime37 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
 function VariablesComposer(props) {
   const {
     value,
@@ -4616,8 +4637,8 @@ function VariablesComposer(props) {
     autoFocus,
     ...variablesPluginProps
   } = props;
-  const [lastEmittedValue, setLastEmittedValue] = (0, import_react47.useState)(value);
-  const editorConfig = (0, import_react47.useMemo)(
+  const [lastEmittedValue, setLastEmittedValue] = (0, import_react48.useState)(value);
+  const editorConfig = (0, import_react48.useMemo)(
     () => ({
       namespace: "uniform",
       onError(error) {
@@ -4629,14 +4650,15 @@ function VariablesComposer(props) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
     []
   );
-  const editorState = (0, import_react47.useRef)();
-  const updateTimeout = (0, import_react47.useRef)();
+  const editorState = (0, import_react48.useRef)();
+  const updateTimeout = (0, import_react48.useRef)();
   if (typeof document === "undefined")
     return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_LexicalComposer.LexicalComposer, { initialConfig: editorConfig, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_LexicalComposer.LexicalComposer, { initialConfig: editorConfig, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       import_LexicalOnChangePlugin.OnChangePlugin,
       {
+        ignoreSelectionChange: true,
         onChange: (state) => {
           editorState.current = state;
           if (updateTimeout.current) {
@@ -4654,12 +4676,12 @@ function VariablesComposer(props) {
         }
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: multiLine ? null : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(SingleLineTextPlugin, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_LexicalClearEditorPlugin.ClearEditorPlugin, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(VariablesPlugin, { ...variablesPluginProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DisablePlugin, { disabled }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: autoFocus ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_LexicalAutoFocusPlugin.AutoFocusPlugin, {}) : null }),
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children })
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: multiLine ? null : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(SingleLineTextPlugin, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_LexicalClearEditorPlugin.ClearEditorPlugin, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(VariablesPlugin, { ...variablesPluginProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DisablePlugin, { disabled }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: autoFocus ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_LexicalAutoFocusPlugin.AutoFocusPlugin, {}) : null }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children })
   ] });
 }
 
@@ -4672,29 +4694,29 @@ var import_LexicalHistoryPlugin = require("@lexical/react/LexicalHistoryPlugin")
 var import_LexicalPlainTextPlugin = require("@lexical/react/LexicalPlainTextPlugin");
 var import_utils4 = require("@lexical/utils");
 var import_lexical9 = require("lexical");
-var import_react48 = require("react");
-var import_jsx_runtime38 = require("@emotion/react/jsx-runtime");
+var import_react49 = require("react");
+var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
 function VariablesComposerInput({
   css: css37,
   placeholder,
   ...contentEditableProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       import_LexicalPlainTextPlugin.PlainTextPlugin,
       {
-        contentEditable: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_LexicalContentEditable.ContentEditable, { ...contentEditableProps }),
-        placeholder: placeholder ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_jsx_runtime38.Fragment, { children: placeholder }) : null,
+        contentEditable: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_LexicalContentEditable.ContentEditable, { ...contentEditableProps }),
+        placeholder: placeholder ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: placeholder }) : null,
         ErrorBoundary: import_LexicalErrorBoundary.default
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(RichishCopyAndPastePlugin, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {})
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(RichishCopyAndPastePlugin, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_LexicalHistoryPlugin.HistoryPlugin, {})
   ] });
 }
 function RichishCopyAndPastePlugin() {
   const [editor] = (0, import_LexicalComposerContext9.useLexicalComposerContext)();
-  (0, import_react48.useEffect)(() => {
+  (0, import_react49.useEffect)(() => {
     return (0, import_utils4.mergeRegister)(
       editor.registerCommand(
         import_lexical9.COPY_COMMAND,
@@ -4769,7 +4791,7 @@ function RichishCopyAndPastePlugin() {
 }
 
 // src/components/Variables/InputVariables.tsx
-var import_jsx_runtime39 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
 function InputVariables(props) {
   const {
     id,
@@ -4796,11 +4818,11 @@ function InputVariables(props) {
     filterVariable,
     styleVariant = "default"
   } = props;
-  const [finalId] = (0, import_react49.useState)(id != null ? id : () => (0, import_uuid2.v4)());
+  const [finalId] = (0, import_react50.useState)(id != null ? id : () => (0, import_uuid2.v4)());
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps } = useInputVariablesState(props);
   const useInputWithNoVariables = Boolean(inputWhenNoVariables && !hadVariablesInValue);
-  const input3 = /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  const input3 = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
       onKeyDown: () => {
@@ -4810,14 +4832,14 @@ function InputVariables(props) {
       },
       css: disabled ? inputDisabled : "",
       children: [
-        useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        useInputWithNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           InputVariablesOverlayMenu,
           {
             ...sharedMenuProps,
             disabled: disableVariablesForReals || disableInlineMenu === true || disableInlineMenu === "by-input",
             replaceValueOnVariableInsert: useInputWithNoVariables,
             useInputWhenNoVariables: useInputWithNoVariables,
-            children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
               VariablesComposerInput,
               {
                 id: finalId,
@@ -4825,7 +4847,7 @@ function InputVariables(props) {
                 "data-testid": dataTestId ? dataTestId : "input-container",
                 "data-text-value": value,
                 css: [input, styleVariant === "compact" ? inputCompact : null],
-                placeholder: placeholder ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+                placeholder: placeholder ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
                   import_design_system20.Caption,
                   {
                     css: [
@@ -4839,16 +4861,16 @@ function InputVariables(props) {
             )
           }
         ),
-        caption ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.Caption, { children: caption }) : null,
-        errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.ErrorMessage, { message: errorMessage }) : null,
-        warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.WarningMessage, { message: warningMessage }) : null,
-        infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_design_system20.InfoMessage, { message: infoMessage }) : null
+        caption ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system20.Caption, { children: caption }) : null,
+        errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system20.ErrorMessage, { message: errorMessage }) : null,
+        warningMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system20.WarningMessage, { message: warningMessage }) : null,
+        infoMessage ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_design_system20.InfoMessage, { message: infoMessage }) : null
       ]
     }
   );
   let body = input3;
   if (label) {
-    body = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    body = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       VariableField,
       {
         label,
@@ -4863,7 +4885,7 @@ function InputVariables(props) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     VariablesComposer,
     {
       onChange,
@@ -4878,9 +4900,9 @@ function InputVariables(props) {
       autoFocus,
       filterVariable,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(PasteTransformerPlugin, { transformPaste }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ControlledValuePlugin, { value, enabled: useInputWithNoVariables }),
-        editorRef ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(EditorRefPlugin, { editorRef }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(PasteTransformerPlugin, { transformPaste }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(ControlledValuePlugin, { value, enabled: useInputWithNoVariables }),
+        editorRef ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(EditorRefPlugin, { editorRef }) : null,
         body
       ]
     }
@@ -4893,11 +4915,11 @@ function InputVariablesOverlayMenu({
   ...props
 }) {
   if (disabled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children });
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_jsx_runtime40.Fragment, { children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { css: menuContainer, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { css: menuContainer, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       VariablesComposerVariableMenu,
       {
         ...props,
@@ -4910,14 +4932,14 @@ function InputVariablesOverlayMenu({
 
 // src/components/Variables/ParameterConnectionIndicator.tsx
 var import_CgUsbC2 = require("@react-icons/all-files/cg/CgUsbC");
-var import_canvas6 = require("@uniformdev/canvas");
+var import_canvas7 = require("@uniformdev/canvas");
 var import_design_system22 = require("@uniformdev/design-system");
-var import_react51 = require("react");
+var import_react52 = require("react");
 
 // src/components/Variables/styles/ParameterVariables.styles.ts
-var import_react50 = require("@emotion/react");
+var import_react51 = require("@emotion/react");
 var import_design_system21 = require("@uniformdev/design-system");
-var variableBindButton2 = import_react50.css`
+var variableBindButton2 = import_react51.css`
   align-items: center;
   border: none;
   border-radius: var(--rounded-base);
@@ -4946,12 +4968,12 @@ var variableBindButton2 = import_react50.css`
     max-height: unset;
   }
 `;
-var input2 = import_react50.css`
+var input2 = import_react51.css`
   display: block;
   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);
@@ -4971,16 +4993,19 @@ var input2 = import_react50.css`
 
   &: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);
   }
@@ -4995,7 +5020,7 @@ var input2 = import_react50.css`
     margin: 0;
   }
 `;
-var inputMultiLine = (lines) => import_react50.css`
+var inputMultiLine = (lines) => import_react51.css`
   ${import_design_system21.scrollbarStyles}
   // 1.5 = line height, spacing-sm = top and bottom padding + spacing-xs to give a slight increase in height
   // as the text looked to close to the bottom of the input
@@ -5005,7 +5030,7 @@ var inputMultiLine = (lines) => import_react50.css`
 `;
 
 // src/components/Variables/ParameterConnectionIndicator.tsx
-var import_jsx_runtime40 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
 function ParameterConnectionIndicator({
   children,
   value,
@@ -5013,9 +5038,9 @@ function ParameterConnectionIndicator({
   disabled,
   menuTooltip = "Insert variable"
 }) {
-  const hasVariablesInValue = (0, import_react51.useMemo)(() => {
+  const hasVariablesInValue = (0, import_react52.useMemo)(() => {
     let result = false;
-    (0, import_canvas6.bindVariablesToObject)({
+    (0, import_canvas7.bindVariablesToObject)({
       value,
       variables: {},
       handleBinding: () => {
@@ -5024,21 +5049,21 @@ function ParameterConnectionIndicator({
     });
     return result;
   }, [value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_design_system22.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { css: { flex: 1 }, children }),
-    disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system22.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { css: { flex: 1 }, children }),
+    disabled ? null : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       import_design_system22.Menu,
       {
         placement: "bottom-start",
         withoutPortal: true,
-        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        menuTrigger: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
           "button",
           {
             title: menuTooltip,
             "aria-pressed": hasVariablesInValue,
             css: [menuBtn, variableBindButton2],
             type: "button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_CgUsbC2.CgUsbC, { size: "1.4rem" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_CgUsbC2.CgUsbC, { size: "1.4rem" })
           }
         ),
         menuLabel: menuTooltip,
@@ -5050,21 +5075,21 @@ function ParameterConnectionIndicator({
 
 // src/components/Variables/ParameterOrSingleVariable.tsx
 var import_design_system23 = require("@uniformdev/design-system");
-var import_react53 = require("react");
+var import_react54 = require("react");
 
 // src/components/Variables/composer/OnDisconnectPlugin.tsx
 var import_LexicalComposerContext10 = require("@lexical/react/LexicalComposerContext");
 var import_utils5 = require("@lexical/utils");
 var import_lexical10 = require("lexical");
-var import_react52 = require("react");
+var import_react53 = require("react");
 function OnDisconnectPlugin({
   onDisconnect
 }) {
   const [editor] = (0, import_LexicalComposerContext10.useLexicalComposerContext)();
   const { variables } = useVariables(true);
-  const variablesRef = (0, import_react52.useRef)(variables);
+  const variablesRef = (0, import_react53.useRef)(variables);
   variablesRef.current = variables;
-  (0, import_react52.useEffect)(() => {
+  (0, import_react53.useEffect)(() => {
     return (0, import_utils5.mergeRegister)(
       editor.registerCommand(
         DISCONNECT_VARIABLE_COMMAND,
@@ -5090,7 +5115,7 @@ function OnDisconnectPlugin({
 }
 
 // src/components/Variables/ParameterOrSingleVariable.tsx
-var import_jsx_runtime41 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
 function ParameterOrSingleVariable(props) {
   const {
     value,
@@ -5109,7 +5134,7 @@ function ParameterOrSingleVariable(props) {
     hasVariablesInValue,
     setHadVariablesInValue
   } = useInputVariablesState(props);
-  const handleDisconnect = (0, import_react53.useCallback)(
+  const handleDisconnect = (0, import_react54.useCallback)(
     (variable) => {
       setHadVariablesInValue(false);
       if (onDisconnect) {
@@ -5121,7 +5146,7 @@ function ParameterOrSingleVariable(props) {
   return (
     // we use a "fauxical" lexical here to render the vars the same as other editors do,
     // and also to enable us to dispatch the same editor commands as other editors do
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       VariablesComposer,
       {
         onChange,
@@ -5132,11 +5157,11 @@ function ParameterOrSingleVariable(props) {
         replaceValueOnVariableInsert: true,
         disabled: true,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(OnDisconnectPlugin, { onDisconnect: handleDisconnect }),
-          editorRef ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(EditorRefPlugin, { editorRef }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ControlledValuePlugin, { enabled: true, value }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_design_system23.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { css: { flex: 1 }, children: inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(OnDisconnectPlugin, { onDisconnect: handleDisconnect }),
+          editorRef ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EditorRefPlugin, { editorRef }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ControlledValuePlugin, { enabled: true, value }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_design_system23.HorizontalRhythm, { align: "center", gap: "xs", css: { width: "100%" }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { css: { flex: 1 }, children: inputWhenNoVariables && !hadVariablesInValue ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               VariablesComposerInput,
               {
                 "data-text-value": value,
@@ -5144,7 +5169,7 @@ function ParameterOrSingleVariable(props) {
                 css: input2
               }
             ) }),
-            disableVariablesForReals ? null : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            disableVariablesForReals ? null : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               VariablesComposerVariableMenu,
               {
                 ...sharedMenuProps,
@@ -5162,9 +5187,9 @@ function ParameterOrSingleVariable(props) {
 }
 
 // src/components/Variables/ParameterVariables.tsx
-var import_react54 = require("@emotion/react");
+var import_react55 = require("@emotion/react");
 var import_design_system24 = require("@uniformdev/design-system");
-var import_jsx_runtime42 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
 function ParameterVariables(props) {
   const {
     value,
@@ -5184,7 +5209,7 @@ function ParameterVariables(props) {
   const { dispatch, canDispatch, isEditing } = useVariables(true);
   const { disableVariablesForReals, hadVariablesInValue, sharedMenuProps, hasVariablesInValue } = useInputVariablesState(props);
   const useInputWhenNoVariables = Boolean(inputWhenNoVariables && !hadVariablesInValue);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
     VariablesComposer,
     {
       onChange,
@@ -5199,9 +5224,9 @@ function ParameterVariables(props) {
       autoFocus,
       filterVariable,
       children: [
-        editorRef ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(EditorRefPlugin, { editorRef }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        editorRef ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(EditorRefPlugin, { editorRef }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(ControlledValuePlugin, { value, enabled: useInputWhenNoVariables }),
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
           import_design_system24.HorizontalRhythm,
           {
             align: "center",
@@ -5213,7 +5238,7 @@ function ParameterVariables(props) {
               }
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { css: { flex: 1 }, children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { css: { flex: 1 }, children: useInputWhenNoVariables ? inputWhenNoVariables : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 VariablesComposerInput,
                 {
                   "aria-label": ariaLabel,
@@ -5221,12 +5246,12 @@ function ParameterVariables(props) {
                   "data-text-value": value,
                   css: [
                     input2,
-                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) : import_react54.css``,
-                    inputCss != null ? inputCss : import_react54.css``
+                    typeof multiLine === "number" ? inputMultiLine(multiLine) : multiLine === true ? inputMultiLine(2) : import_react55.css``,
+                    inputCss != null ? inputCss : import_react55.css``
                   ]
                 }
               ) }),
-              disableVariablesForReals ? null : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              disableVariablesForReals ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
                 VariablesComposerVariableMenu,
                 {
                   ...sharedMenuProps,
@@ -5258,13 +5283,13 @@ ${prettifyBindExpression(bindExpression)}`
 }
 
 // src/components/Variables/VariablesList.tsx
-var import_react56 = require("@emotion/react");
+var import_react57 = require("@emotion/react");
 var import_design_system25 = require("@uniformdev/design-system");
-var import_react_beautiful_dnd2 = require("react-beautiful-dnd");
+var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
 
 // src/components/Variables/styles/VariablesList.styles.ts
-var import_react55 = require("@emotion/react");
-var tableRow = (isDragging) => import_react55.css`
+var import_react56 = require("@emotion/react");
+var tableRow = (isDragging) => import_react56.css`
   position: relative;
   ${isDragging ? `
   display: table;   
@@ -5272,7 +5297,7 @@ var tableRow = (isDragging) => import_react55.css`
   top: auto !important;
   ` : void 0}
 `;
-var tableCellDragIcon = import_react55.css`
+var tableCellDragIcon = import_react56.css`
   &::after {
     content: '';
     display: block;
@@ -5290,9 +5315,8 @@ var tableCellDragIcon = import_react55.css`
     opacity: 1;
   }
 `;
-var variableName = import_react55.css`
+var variableName = import_react56.css`
   border: none;
-  color: var(--brand-secondary-5);
   font-weight: var(--fw-medium);
   padding: 0;
   background: none;
@@ -5301,7 +5325,7 @@ var variableName = import_react55.css`
   white-space: nowrap;
   max-width: 20ch;
 `;
-var variableValue = import_react55.css`
+var variableValue = import_react56.css`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -5309,7 +5333,7 @@ var variableValue = import_react55.css`
 `;
 
 // src/components/Variables/VariablesList.tsx
-var import_jsx_runtime43 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime44 = require("@emotion/react/jsx-runtime");
 function VariablesList() {
   const { variables, dispatch, readOnly } = useVariables();
   const sorted = variablesToList(variables).filter((variable) => !variable.system);
@@ -5330,24 +5354,24 @@ function VariablesList() {
       return result;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_beautiful_dnd2.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_react_beautiful_dnd2.Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system25.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system25.TableRow, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellHead, { children: "Name" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellHead, { children: "Default Value" }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellHead, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react_beautiful_dnd3.Droppable, { droppableId: "variables-table", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_design_system25.Table, { ...provided.droppableProps, ref: provided.innerRef, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_design_system25.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_design_system25.TableRow, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_design_system25.TableCellHead, { children: "Name" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_design_system25.TableCellHead, { children: "Default Value" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_design_system25.TableCellHead, {})
       ] }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_design_system25.TableBody, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_design_system25.TableBody, { children: [
         sorted.map(({ name, displayName, default: defaultValue }, index) => {
           const text = displayName != null ? displayName : name;
           const textValue = variableDefaultTextValue(defaultValue);
-          return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
-            import_react_beautiful_dnd2.Draggable,
+          return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+            import_react_beautiful_dnd3.Draggable,
             {
               draggableId: name,
               index,
               isDragDisabled: sorted.length === 1,
-              children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+              children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
                 import_design_system25.TableRow,
                 {
                   ref: provided2.innerRef,
@@ -5357,7 +5381,7 @@ function VariablesList() {
                   css: tableRow(snapshot.isDragging),
                   "data-dragging": snapshot.isDragging,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: readOnly ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: variableName, children: text }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_design_system25.TableCellData, { css: sorted.length > 1 ? tableCellDragIcon : void 0, children: readOnly ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { css: variableName, children: text }) : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                       "button",
                       {
                         css: variableName,
@@ -5370,21 +5394,21 @@ function VariablesList() {
                         children: text
                       }
                     ) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellData, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { css: variableValue, title: textValue, children: textValue }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.TableCellData, { align: "right", children: readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_design_system25.TableCellData, { children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { css: variableValue, title: textValue, children: textValue }) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_design_system25.TableCellData, { align: "right", children: readOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                       "button",
                       {
                         type: "button",
                         title: `delete ${text}`,
                         css: [
                           import_design_system25.button,
-                          import_react56.css`
+                          import_react57.css`
                                     background: transparent;
                                   `
                         ],
                         "aria-controls": text,
                         onClick: () => dispatch({ type: "remove", variable: name }),
-                        children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_design_system25.Icon, { icon: "trash", iconColor: "red" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_design_system25.Icon, { icon: "trash", iconColor: "red" })
                       }
                     ) })
                   ]
@@ -5397,12 +5421,12 @@ function VariablesList() {
         provided.placeholder
       ] })
     ] }) }) }),
-    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       import_design_system25.AddListButton,
       {
         onButtonClick: () => dispatch({ type: "edit", variable: "" }),
         "aria-label": "Add variable",
-        buttonText: "add variable",
+        buttonText: "Add variable",
         icon: "math-plus",
         css: { marginLeft: "var(--spacing-md)" }
       }
@@ -5411,37 +5435,37 @@ function VariablesList() {
 }
 
 // src/components/DataResourceDynamicInputProvider.tsx
-var import_jsx_runtime44 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
 function DataResourceDynamicInputProvider(props) {
   const { children, dynamicInputs } = props;
   if (dynamicInputs) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DataResourceDynamicInputProviderRenderer, { ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DataResourceDynamicInputProviderRenderer, { ...props, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DataResourceDynamicInputProviderContextShim, { children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DataResourceDynamicInputProviderContextShim, { children });
 }
 function DataResourceDynamicInputProviderContextShim(props) {
   const {
     metadata: { dynamicInputs }
   } = useMeshLocation("dataResource");
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(DataResourceDynamicInputProviderRenderer, { ...props, dynamicInputs });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DataResourceDynamicInputProviderRenderer, { ...props, dynamicInputs });
 }
 function DataResourceDynamicInputProviderRenderer({
   children,
   dynamicInputs
 }) {
   const variables = useDynamicInputsAsVariables(dynamicInputs);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(VariablesProvider, { value: variables, readOnly: true, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(VariablesProvider, { value: variables, readOnly: true, children });
 }
 
 // src/components/DataResourceVariablesList.tsx
 var import_design_system26 = require("@uniformdev/design-system");
-var import_jsx_runtime45 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
 function DataResourceVariablesList(props) {
   const {
     value,
     metadata: { dataType, dynamicInputs }
   } = useMeshLocation("dataResource");
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     DataResourceVariablesListExplicit,
     {
       ...props,
@@ -5462,14 +5486,14 @@ function DataResourceVariablesListExplicit({
   const variableDefinitions = variablesToList(dataType.variables);
   if (variableDefinitions.length === 0) {
     if (NoVariablesComponent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(NoVariablesComponent, {});
+      return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(NoVariablesComponent, {});
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system26.Callout, { type: "note", children: "No settings are required." });
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_design_system26.Callout, { type: "note", children: "No settings are required." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_design_system26.VerticalRhythm, { children: variableDefinitions.map((variableDefinition) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(DataResourceDynamicInputProvider, { dynamicInputs, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_design_system26.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__ */ (0, import_jsx_runtime45.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       VariableRenderer,
       {
         definition: variableDefinition,
@@ -5494,7 +5518,7 @@ function DataResourceVariablesListExplicit({
 }
 function TextVariableRenderer({ definition, value, setValue }) {
   var _a;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { "data-testid": "variable-input-container", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { "data-testid": "variable-input-container", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     InputVariables,
     {
       label: definition.displayName || definition.name,
@@ -5507,13 +5531,13 @@ function TextVariableRenderer({ definition, value, setValue }) {
 }
 
 // src/components/Request/RequestBody.tsx
-var import_react58 = require("@emotion/react");
+var import_react59 = require("@emotion/react");
 var import_design_system27 = require("@uniformdev/design-system");
-var import_react59 = require("react");
+var import_react60 = require("react");
 
 // src/components/Request/RequestProvider.tsx
 var React11 = __toESM(require("react"));
-var import_jsx_runtime46 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime47 = require("@emotion/react/jsx-runtime");
 var RequestContext = React11.createContext(null);
 function RequestProvider({ value, onChange, children }) {
   const contextValue = React11.useMemo(() => {
@@ -5582,7 +5606,7 @@ function RequestProvider({ value, onChange, children }) {
       request: value
     };
   }, [onChange, value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(RequestContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(RequestContext.Provider, { value: contextValue, children });
 }
 function useRequest() {
   const context = React11.useContext(RequestContext);
@@ -5593,11 +5617,11 @@ function useRequest() {
 }
 
 // src/components/Request/styles/Request.styles.ts
-var import_react57 = require("@emotion/react");
-var innerContentStyles = import_react57.css`
+var import_react58 = require("@emotion/react");
+var innerContentStyles = import_react58.css`
   background: var(--white);
 `;
-var requestTypeContainer = (bgColor) => import_react57.css`
+var requestTypeContainer = (bgColor) => import_react58.css`
   align-items: start;
   background: ${bgColor};
   display: grid;
@@ -5606,17 +5630,17 @@ var requestTypeContainer = (bgColor) => import_react57.css`
 `;
 
 // src/components/Request/RequestTypeContainer.tsx
-var import_jsx_runtime47 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime48 = require("@emotion/react/jsx-runtime");
 var RequestTypeContainer = ({
   bgColor = "transparent",
   children,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { css: requestTypeContainer(bgColor), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { css: requestTypeContainer(bgColor), ...props, children });
 };
 
 // src/components/Request/RequestBody.tsx
-var import_jsx_runtime48 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
 var LANGUAGE_OPTIONS = [
   { label: "Text", value: "plaintext" },
   { label: "JSON", value: "json" },
@@ -5635,22 +5659,22 @@ var LANGUAGE_TO_CONTENT_TYPE = {
 };
 function RequestBody() {
   const { request, dispatch } = useRequest();
-  const [language, setLanguage] = (0, import_react59.useState)("json");
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  const [language, setLanguage] = (0, import_react60.useState)("json");
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
     "div",
     {
-      css: import_react58.css`
+      css: import_react59.css`
         background: var(--white);
       `,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           RequestTypeContainer,
           {
             bgColor: "var(--gray-100)",
-            css: import_react58.css`
+            css: import_react59.css`
           padding: var(--spacing-sm) var(--spacing-base);
         `,
-            children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
               import_design_system27.InputSelect,
               {
                 label: "Language",
@@ -5673,7 +5697,7 @@ function RequestBody() {
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
           import_design_system27.JsonEditor,
           {
             height: 200,
@@ -5692,7 +5716,7 @@ function RequestBody() {
 
 // src/components/Request/RequestHeaders.tsx
 var import_design_system28 = require("@uniformdev/design-system");
-var import_jsx_runtime49 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
 function RequestHeaders({
   disableVariables,
   addOmitIfEmpty
@@ -5711,29 +5735,29 @@ function RequestHeaders({
       index
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableCellHead, { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableCellHead, { children: "Value" }),
-      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableCellHead, { children: "Omit If Empty" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_design_system28.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system28.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_design_system28.TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system28.TableCellHead, { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system28.TableCellHead, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system28.TableCellHead, { children: "Omit If Empty" }) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_design_system28.TableBody, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.headers) == null ? void 0 : _b.map((baseHeader) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.TableCellData, { width: "50%", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_design_system28.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_design_system28.TableCellData, { width: "50%", children: [
             baseHeader.key,
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("br", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("small", { children: "from data source" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("br", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.TableCellData, { width: "50%", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
-            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.WarningMessage, { message: "overridden below" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_design_system28.TableCellData, { width: "50%", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseHeader.value }),
+            request.headers.find((p) => p.key === baseHeader.key) ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system28.WarningMessage, { message: "overridden below" }) : null
           ] })
         ] }, baseHeader.key);
       }),
       deezHeaders.map((header, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(import_design_system28.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_design_system28.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system28.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             import_design_system28.Input,
             {
               label: header.key,
@@ -5753,7 +5777,7 @@ function RequestHeaders({
               "data-testid": "header-key"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system28.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             InputVariables,
             {
               value: header.value,
@@ -5764,7 +5788,7 @@ function RequestHeaders({
               "data-testid": "header-value"
             }
           ) : null }),
-          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_design_system28.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_design_system28.TableCellData, { width: "50%", children: header.key ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
             import_design_system28.Input,
             {
               type: "checkbox",
@@ -5789,11 +5813,11 @@ function RequestHeaders({
 
 // src/components/Request/RequestMethodSelect.tsx
 var import_design_system29 = require("@uniformdev/design-system");
-var import_jsx_runtime50 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
 function RequestMethodSelect(props) {
   var _a;
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     import_design_system29.InputSelect,
     {
       ...props,
@@ -5810,7 +5834,7 @@ function RequestMethodSelect(props) {
 
 // src/components/Request/RequestParameters.tsx
 var import_design_system30 = require("@uniformdev/design-system");
-var import_jsx_runtime51 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime52 = require("@emotion/react/jsx-runtime");
 function RequestParameters({
   disableVariables,
   addOmitIfEmpty
@@ -5830,29 +5854,29 @@ function RequestParameters({
       index
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.Table, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.TableRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableCellHead, { children: "Name" }),
-      /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableCellHead, { children: "Value" }),
-      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableCellHead, { children: "Omit If Empty" }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { css: innerContentStyles, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_design_system30.Table, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system30.TableHead, { children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_design_system30.TableRow, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system30.TableCellHead, { children: "Name" }),
+      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system30.TableCellHead, { children: "Value" }),
+      addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system30.TableCellHead, { children: "Omit If Empty" }) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.TableBody, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_design_system30.TableBody, { children: [
       (_b = (_a = request.baseRequest) == null ? void 0 : _a.parameters) == null ? void 0 : _b.map((baseParameter) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.TableCellData, { width: "50%", children: [
+        return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_design_system30.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_design_system30.TableCellData, { width: "50%", children: [
             baseParameter.key,
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("br", {}),
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("small", { children: "from data source" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("br", {}),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("i", { css: { color: "var(--gray-500)" }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("small", { children: "from data source" }) })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.TableCellData, { width: "50%", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
-            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.WarningMessage, { message: "overridden below" }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_design_system30.TableCellData, { width: "50%", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("i", { css: { color: "var(--gray-500)" }, children: baseParameter.value }),
+            request.parameters.find((p) => p.key === baseParameter.key) ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system30.WarningMessage, { message: "overridden below" }) : null
           ] })
         ] }, baseParameter.key);
       }),
       deezParameters.map((parameter, index) => {
-        return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_design_system30.TableRow, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_design_system30.TableRow, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system30.TableCellData, { width: "50%", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             import_design_system30.Input,
             {
               label: parameter.key,
@@ -5876,7 +5900,7 @@ function RequestParameters({
               "data-testid": "parameter-key"
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system30.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             InputVariables,
             {
               value: parameter.value,
@@ -5892,7 +5916,7 @@ function RequestParameters({
               enableEditingVariables: true
             }
           ) : null }),
-          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_design_system30.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          addOmitIfEmpty ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_design_system30.TableCellData, { width: "50%", children: parameter.key ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
             import_design_system30.Input,
             {
               type: "checkbox",
@@ -5918,8 +5942,8 @@ function RequestParameters({
 }
 
 // src/components/Request/RequestUrl.tsx
-var import_react60 = require("@emotion/react");
-var import_react61 = require("react");
+var import_react61 = require("@emotion/react");
+var import_react62 = require("react");
 
 // src/components/Request/urlEncodeRequestParameter.ts
 function urlEncodeRequestUrl(url, varValues) {
@@ -5940,35 +5964,35 @@ function decodeVariablesInUrlEncodedString(string, varValues) {
 }
 
 // src/components/Request/RequestUrl.tsx
-var import_jsx_runtime52 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime53 = require("@emotion/react/jsx-runtime");
 function RequestUrl() {
   var _a, _b;
   const { variables } = useVariables();
   const { request } = useRequest();
-  const mergedParameters = (0, import_react61.useMemo)(() => {
+  const mergedParameters = (0, import_react62.useMemo)(() => {
     var _a2;
     if (!((_a2 = request.baseRequest) == null ? void 0 : _a2.parameters)) {
       return request.parameters;
     }
     return request.baseRequest.parameters.filter((baseParam) => !request.parameters.find((p) => p.key === baseParam.key)).concat(request.parameters);
   }, [(_a = request.baseRequest) == null ? void 0 : _a.parameters, request.parameters]);
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "small",
     {
-      css: import_react60.css`
+      css: import_react61.css`
         display: inline-block;
         margin-bottom: var(--spacing-xs);
         word-break: break-word;
       `,
       children: [
-        request.baseRequest ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
+        request.baseRequest ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { children: (_b = request.baseRequest) == null ? void 0 : _b.baseUrl }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { css: { fontWeight: request.baseRequest ? "bold" : "inherit" }, children: [
           urlEncodeRequestUrl(request.relativeUrl, variables),
-          mergedParameters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+          mergedParameters.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
             "?",
             mergedParameters.map((param, index) => {
               const encoded = urlEncodeRequestParameter(param, variables);
-              return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { children: [
+              return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { children: [
                 index > 0 ? "&" : null,
                 encoded.key,
                 "=",
@@ -6007,10 +6031,10 @@ function transformPastedUrl(value, currentRequest, dispatch) {
 }
 
 // src/components/Request/RequestUrlInput.tsx
-var import_jsx_runtime53 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
 function RequestUrlInput(props) {
   const { request, dispatch } = useRequest();
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
     InputVariables,
     {
       ...props,
@@ -6060,12 +6084,12 @@ function useRequestParameter(paramName) {
 }
 
 // src/components/DataSourceEditor.tsx
-var import_jsx_runtime54 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
 function DataSourceEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const { value } = useMeshLocation("dataSource");
   const currentRequestValue = convertDataSourceToRequestData(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
@@ -6081,7 +6105,7 @@ function DataSourceEditor({ onChange, children, editVariableComponent }) {
       },
       editVariableComponent,
       readOnly: true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -6118,7 +6142,7 @@ function convertRequestDataToDataSource(dataSource, requestData) {
 }
 
 // src/components/DataTypeEditor.tsx
-var import_jsx_runtime55 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
 function DataTypeEditor({ onChange, children, editVariableComponent }) {
   var _a;
   const {
@@ -6127,7 +6151,7 @@ function DataTypeEditor({ onChange, children, editVariableComponent }) {
     isReadOnly
   } = useMeshLocation("dataType");
   const currentRequestValue = convertDataTypeToRequestData(value, dataSource);
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     VariablesProvider,
     {
       value: (_a = value.variables) != null ? _a : {},
@@ -6143,7 +6167,7 @@ function DataTypeEditor({ onChange, children, editVariableComponent }) {
       },
       editVariableComponent,
       readOnly: isReadOnly,
-      children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
         RequestProvider,
         {
           value: currentRequestValue,
@@ -6193,12 +6217,12 @@ var import_design_system31 = require("@uniformdev/design-system");
 
 // src/hooks/useInitializeUniformMeshSdk.ts
 var import_mesh_sdk = require("@uniformdev/mesh-sdk");
-var import_react62 = require("react");
+var import_react63 = require("react");
 var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
-  const [error, setError] = (0, import_react62.useState)();
-  const [sdk, setSdk] = (0, import_react62.useState)();
-  const initializationInProgress = (0, import_react62.useRef)(false);
-  (0, import_react62.useEffect)(
+  const [error, setError] = (0, import_react63.useState)();
+  const [sdk, setSdk] = (0, import_react63.useState)();
+  const initializationInProgress = (0, import_react63.useRef)(false);
+  (0, import_react63.useEffect)(
     () => {
       if (typeof window === "undefined" || sdk) {
         return;
@@ -6231,7 +6255,7 @@ var useInitializeUniformMeshSdk = ({ autoResizingDisabled } = {}) => {
 };
 
 // src/components/MeshApp.tsx
-var import_jsx_runtime56 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
 var MeshApp = ({
   children,
   loadingComponent,
@@ -6240,36 +6264,36 @@ var MeshApp = ({
   const { initializing, error, sdk } = useInitializeUniformMeshSdk();
   if (initializing || !sdk) {
     const LoadingComponent = loadingComponent;
-    return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system31.LoadingIndicator, {});
+    return LoadingComponent ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(LoadingComponent, {}) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_design_system31.LoadingIndicator, {});
   }
   if (error) {
     const ErrorComponent = errorComponent;
     if (ErrorComponent) {
-      return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ErrorComponent, { error });
+      return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ErrorComponent, { error });
     }
     throw error;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_design_system31.Theme, {}),
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(UniformMeshLocationContextProvider, { children })
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(UniformMeshSdkContext.Provider, { value: { sdk }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_design_system31.Theme, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(UniformMeshLocationContextProvider, { children })
   ] });
 };
 
 // src/components/ObjectSearch/DataRefreshButton.tsx
-var import_react63 = require("@emotion/react");
+var import_react64 = require("@emotion/react");
 var import_design_system32 = require("@uniformdev/design-system");
-var import_jsx_runtime57 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
 var DataRefreshButton = ({
   buttonText,
   isLoading,
   onRefreshData,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_design_system32.Button, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
-    !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_design_system32.Button, { buttonType: "primaryInvert", onClick: onRefreshData, disabled: isLoading, ...props, children: [
+    !isLoading ? null : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
       import_design_system32.LoadingIndicator,
       {
-        css: import_react63.css`
+        css: import_react64.css`
             ${isLoading ? "opacity: 0.2;" : void 0}
           `
       }
@@ -6279,15 +6303,15 @@ var DataRefreshButton = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_react65 = require("@emotion/react");
-var import_canvas8 = require("@uniformdev/canvas");
-var import_design_system33 = require("@uniformdev/design-system");
+var import_react67 = require("@emotion/react");
+var import_canvas9 = require("@uniformdev/canvas");
+var import_design_system35 = require("@uniformdev/design-system");
 
 // src/components/ObjectSearch/hooks/ObjectSearchContext.tsx
-var import_canvas7 = require("@uniformdev/canvas");
-var import_react64 = require("react");
-var import_jsx_runtime58 = require("@emotion/react/jsx-runtime");
-var ObjectSearchContext = (0, import_react64.createContext)({
+var import_canvas8 = require("@uniformdev/canvas");
+var import_react65 = require("react");
+var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
+var ObjectSearchContext = (0, import_react65.createContext)({
   onSetQuery: () => {
   },
   onSelectItem: () => {
@@ -6299,18 +6323,25 @@ var ObjectSearchContext = (0, import_react64.createContext)({
   },
   selectedListItems: [],
   onRemoveAllSelectedItems: () => {
-  }
+  },
+  isMulti: false
 });
-var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
-  const [query, setQuery] = (0, import_react64.useState)({
+var ObjectSearchProvider = ({
+  currentlySelectedItems,
+  isMulti = false,
+  children,
+  defaultQuery
+}) => {
+  const [query, setQuery] = (0, import_react65.useState)({
     contentType: "",
-    keyword: ""
+    keyword: "",
+    ...defaultQuery
   });
   const { flatVariables } = useVariables(true);
-  const querySearchDeferred = (0, import_react64.useDeferredValue)(query);
-  const [selectedItems, setSelectedItems] = (0, import_react64.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
-  const [list, setList] = (0, import_react64.useState)({});
-  const onSetQuery = (0, import_react64.useCallback)(
+  const querySearchDeferred = (0, import_react65.useDeferredValue)(query);
+  const [selectedItems, setSelectedItems] = (0, import_react65.useState)(currentlySelectedItems != null ? currentlySelectedItems : []);
+  const [list, setList] = (0, import_react65.useState)({});
+  const onSetQuery = (0, import_react65.useCallback)(
     (value2) => {
       if (Array.isArray(value2.contentType) && value2.contentType.length > 0) {
         return setQuery({
@@ -6322,7 +6353,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setQuery]
   );
-  const onSelectItem = (0, import_react64.useCallback)(
+  const onSelectItem = (0, import_react65.useCallback)(
     (selectedResult) => {
       if (Array.isArray(selectedResult)) {
         setSelectedItems(selectedResult);
@@ -6336,17 +6367,17 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
     },
     [setSelectedItems, selectedItems]
   );
-  const onRemoveAllSelectedItems = (0, import_react64.useCallback)(() => {
+  const onRemoveAllSelectedItems = (0, import_react65.useCallback)(() => {
     setSelectedItems([]);
   }, [setSelectedItems]);
-  const onSetList = (0, import_react64.useCallback)(
+  const onSetList = (0, import_react65.useCallback)(
     (value2) => {
       setList(value2);
     },
     [setList]
   );
-  const boundQuery = (0, import_react64.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
-  const value = (0, import_react64.useMemo)(
+  const boundQuery = (0, import_react65.useMemo)(() => bindQuery(query, flatVariables), [query, flatVariables]);
+  const value = (0, import_react65.useMemo)(
     () => ({
       boundQuery,
       onSetQuery,
@@ -6355,6 +6386,7 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       selectedListItems: selectedItems,
       onRemoveAllSelectedItems,
       list,
+      isMulti,
       onSetList
     }),
     [
@@ -6365,16 +6397,17 @@ var ObjectSearchProvider = ({ currentlySelectedItems, children }) => {
       selectedItems,
       onRemoveAllSelectedItems,
       list,
+      isMulti,
       onSetList
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ObjectSearchContext.Provider, { value, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(ObjectSearchContext.Provider, { value, children });
 };
 function useObjectSearchContext() {
-  return (0, import_react64.useContext)(ObjectSearchContext);
+  return (0, import_react65.useContext)(ObjectSearchContext);
 }
 function bindQuery(query, inputs) {
-  const { result, errors } = (0, import_canvas7.bindVariablesToObject)({
+  const { result, errors } = (0, import_canvas8.bindVariablesToObject)({
     value: query,
     variables: inputs,
     errorPrefix: "Dynamic input"
@@ -6385,8 +6418,148 @@ function bindQuery(query, inputs) {
   return result;
 }
 
+// src/components/ObjectSearch/ObjectSearchListItem.tsx
+var import_design_system34 = require("@uniformdev/design-system");
+
+// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
+var import_react66 = require("@emotion/react");
+var import_design_system33 = require("@uniformdev/design-system");
+var ObjectListItemContainer = import_react66.css`
+  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 = import_react66.css`
+  opacity: var(--opacity-50);
+  pointer-events: none;
+`;
+var ObjectListItemLoading = import_react66.css`
+  animation: ${import_design_system33.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 = import_react66.css`
+  align-items: center;
+  display: grid;
+`;
+var ObjectListItemThumbnail = import_react66.css`
+  width: 30px;
+  object-fit: contain;
+`;
+var ObjectListItemTitle = import_react66.css`
+  color: var(--typography-base);
+  display: block;
+  font-size: var(--fs-sm);
+`;
+var ObjectListItemSubtitle = import_react66.css`
+  color: var(--gray-500);
+  display: block;
+  font-size: var(--fs-xs);
+  line-height: 1;
+`;
+var ObjectListItemInfoContainer = import_react66.css`
+  align-items: center;
+  display: flex;
+  gap: var(--spacing-sm);
+  justify-content: center;
+`;
+var ObjectListItemControlledContent = import_react66.css`
+  display: flex;
+  gap: var(--spacing-sm);
+`;
+var ObjectListItemUnControlledContent = import_react66.css`
+  margin-top: var(--spacing-sm);
+  grid-column: 1 / -1;
+`;
+
+// src/components/ObjectSearch/ObjectSearchListItem.tsx
+var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
+var ObjectSearchListItem = ({
+  id,
+  title,
+  contentType,
+  image,
+  imageUrl,
+  popoverData,
+  onSelect,
+  isMulti,
+  disabled,
+  children
+}) => {
+  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__ */ (0, import_jsx_runtime60.jsxs)(
+    "div",
+    {
+      role: "listitem",
+      css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
+      "data-testid": "list-item",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(
+          "div",
+          {
+            role: "button",
+            onClick: handleSelectItem,
+            css: ObjectListItemControlledContent,
+            "aria-disabled": disabled,
+            children: [
+              !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
+              !image || imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
+                !contentType ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
+                /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
+              ] })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
+          selected ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_design_system34.Chip, { text: "selected", size: "xs" }) : null,
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_design_system34.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
+        ] }),
+        !children ? null : /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { css: ObjectListItemUnControlledContent, children })
+      ]
+    }
+  );
+};
+var ObjectSearchListItemLoadingSkeleton = () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
+};
+
 // src/components/ObjectSearch/ObjectSearchContainer.tsx
-var import_jsx_runtime59 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
 var ObjectSearchContainer = ({
   label,
   enableDynamicInputToResultId,
@@ -6398,21 +6571,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__ */ (0, import_jsx_runtime59.jsxs)(import_design_system33.VerticalRhythm, { children: [
+  const listItems = resultList != null ? resultList : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+    import_design_system35.ScrollableList,
+    {
+      role: "list",
+      css: import_react67.css`
+        > div {
+          transition: max-height var(--duration-slow) var(--timing-ease-out);
+          max-height: ${selectedListItems.length === 0 ? "50vh" : "184px"};
+        }
+      `,
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DefaultResultList, {})
+    }
+  );
+  const body = /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_design_system35.VerticalRhythm, { children: [
     searchFilters,
-    !resultList ? null : /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
-      import_design_system33.ScrollableList,
-      {
-        role: "list",
-        css: import_react65.css`
-            > 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;
@@ -6420,7 +6594,7 @@ var ObjectSearchContainer = ({
       onSelectItem([]);
       return;
     }
-    const { result, errors } = (0, import_canvas8.bindVariables)({
+    const { result, errors } = (0, import_canvas9.bindVariables)({
       value: selectedValue,
       variables: flatVariables,
       errorPrefix: "Dynamic input"
@@ -6441,8 +6615,8 @@ var ObjectSearchContainer = ({
       }
     ]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system33.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_design_system33.VerticalRhythm, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_design_system33.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.IconsProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_design_system35.VerticalRhythm, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.Container, { backgroundColor: "gray-50", padding: "var(--spacing-base)", border: true, children: label ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
       InputVariables,
       {
         label,
@@ -6460,14 +6634,25 @@ var ObjectSearchContainer = ({
     children
   ] }) });
 };
+var DefaultResultList = () => {
+  var _a;
+  const { list } = useObjectSearchContext();
+  if (!list.items) {
+    return Array.from(Array(5).keys()).map((i) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ObjectSearchListItemLoadingSkeleton, {}, i));
+  }
+  if (list.items.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_design_system35.Callout, { type: "info", children: "No results were found" });
+  }
+  return (_a = list.items) == null ? void 0 : _a.map((item) => /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ObjectSearchListItem, { ...item }, item.id));
+};
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-var import_design_system34 = require("@uniformdev/design-system");
-var import_react67 = require("react");
+var import_design_system36 = require("@uniformdev/design-system");
+var import_react69 = require("react");
 
 // src/components/ObjectSearch/styles/ObjectSearchFilterContainer.styles.ts
-var import_react66 = require("@emotion/react");
-var ObjectSearchFilterContainerLabel = import_react66.css`
+var import_react68 = require("@emotion/react");
+var ObjectSearchFilterContainerLabel = import_react68.css`
   align-items: center;
   display: flex;
   font-size: var(--fs-sm);
@@ -6475,18 +6660,18 @@ var ObjectSearchFilterContainerLabel = import_react66.css`
   line-height: 1rem;
   margin-bottom: var(--spacing-sm);
 `;
-var ObjectSearchFilterContainer = import_react66.css`
+var ObjectSearchFilterContainer = import_react68.css`
   display: grid;
   gap: var(--spacing-base);
 `;
-var ObjectSearchFilterGrid = (gridColumns) => import_react66.css`
+var ObjectSearchFilterGrid = (gridColumns) => import_react68.css`
   display: grid;
   grid-template-columns: ${gridColumns};
   gap: var(--spacing-base);
 `;
 
 // src/components/ObjectSearch/ObjectSearchFilter.tsx
-var import_jsx_runtime60 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime62 = require("@emotion/react/jsx-runtime");
 var ObjectSearchFilter = ({
   requireContentType,
   typeSelectorAllTypesOptionText = "All content types",
@@ -6495,10 +6680,11 @@ var ObjectSearchFilter = ({
   selectLabel = "Content Type Select",
   selectOptions
 }) => {
+  var _a, _b;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [searchState, setSearchState] = (0, import_react67.useState)({
-    contentType: "",
-    keyword: ""
+  const [searchState, setSearchState] = (0, import_react69.useState)({
+    contentType: (_a = query.contentType) != null ? _a : "",
+    keyword: (_b = query.keyword) != null ? _b : ""
   });
   const handleFilterChange = (value) => {
     setSearchState((prev) => {
@@ -6506,20 +6692,17 @@ var ObjectSearchFilter = ({
     });
     onSetQuery({ ...query, ...value });
   };
-  const memoizedSelectOptions = (0, import_react67.useMemo)(() => {
+  const memoizedSelectOptions = (0, import_react69.useMemo)(() => {
     if (!requireContentType && !(selectOptions == null ? void 0 : selectOptions.length)) {
       return [];
     }
     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__ */ (0, import_jsx_runtime60.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
     "fieldset",
     {
       css: [
@@ -6527,8 +6710,8 @@ var ObjectSearchFilter = ({
         ObjectSearchFilterGrid(shouldRenderSelect ? "1fr 2fr" : "1fr")
       ],
       children: [
-        memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-          import_design_system34.InputSelect,
+        memoizedSelectOptions.length ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          import_design_system36.InputSelect,
           {
             label: selectLabel,
             showLabel: false,
@@ -6537,8 +6720,8 @@ var ObjectSearchFilter = ({
             value: query.contentType
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-          import_design_system34.InputKeywordSearch,
+        /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          import_design_system36.InputKeywordSearch,
           {
             inputFieldName: searchInputName,
             placeholder: searchInputPlaceholderText,
@@ -6554,166 +6737,26 @@ var ObjectSearchFilter = ({
 };
 
 // src/components/ObjectSearch/ObjectSearchFilterContainer.tsx
-var import_jsx_runtime61 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
 var ObjectSearchFilterContainer2 = ({ label, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { css: ObjectSearchFilterContainer, children })
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { css: ObjectSearchFilterContainer, children })
   ] });
 };
 
-// src/components/ObjectSearch/ObjectSearchListItem.tsx
-var import_design_system36 = require("@uniformdev/design-system");
-
-// src/components/ObjectSearch/styles/ObjectSearchListItem.styles.ts
-var import_react68 = require("@emotion/react");
-var import_design_system35 = require("@uniformdev/design-system");
-var ObjectListItemContainer = import_react68.css`
-  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 = import_react68.css`
-  opacity: var(--opacity-50);
-  pointer-events: none;
-`;
-var ObjectListItemLoading = import_react68.css`
-  animation: ${import_design_system35.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 = import_react68.css`
-  align-items: center;
-  display: grid;
-`;
-var ObjectListItemThumbnail = import_react68.css`
-  width: 30px;
-  object-fit: contain;
-`;
-var ObjectListItemTitle = import_react68.css`
-  color: var(--brand-secondary-1);
-  display: block;
-  font-size: var(--fs-sm);
-`;
-var ObjectListItemSubtitle = import_react68.css`
-  color: var(--gray-500);
-  display: block;
-  font-size: var(--fs-xs);
-  line-height: 1;
-`;
-var ObjectListItemInfoContainer = import_react68.css`
-  align-items: center;
-  display: flex;
-  gap: var(--spacing-sm);
-  justify-content: center;
-`;
-var ObjectListItemControlledContent = import_react68.css`
-  display: flex;
-  gap: var(--spacing-sm);
-`;
-var ObjectListItemUnControlledContent = import_react68.css`
-  margin-top: var(--spacing-sm);
-  grid-column: 1 / -1;
-`;
-
-// src/components/ObjectSearch/ObjectSearchListItem.tsx
-var import_jsx_runtime62 = require("@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__ */ (0, import_jsx_runtime62.jsxs)(
-    "div",
-    {
-      role: "listitem",
-      css: [ObjectListItemContainer, disabled ? ObjectListItemContainerDisabled : void 0],
-      "data-testid": "list-item",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
-          "div",
-          {
-            role: "button",
-            onClick: handleSelectItem,
-            css: ObjectListItemControlledContent,
-            "aria-disabled": disabled,
-            children: [
-              !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectListItemThumbnail }),
-              !image || imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { ...image, loading: (image == null ? void 0 : image.width) && image.height ? "lazy" : "eager" }),
-              /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { role: "heading", css: ObjectListItemHeadingGroup, children: [
-                !contentType ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectListItemSubtitle, children: formatedContentType }),
-                /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { css: ObjectListItemTitle, "data-testid": "title", children: title })
-              ] })
-            ]
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { css: ObjectListItemInfoContainer, children: [
-          selected ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Chip, { text: "selected", size: "xs" }) : null,
-          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(import_design_system36.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, iconColor: "default", children: popoverData })
-        ] }),
-        !children ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { css: ObjectListItemUnControlledContent, children })
-      ]
-    }
-  );
-};
-var ObjectSearchListItemLoadingSkeleton = () => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { role: "presentation", css: [ObjectListItemContainer, ObjectListItemLoading] });
-};
-
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
 var import_design_system38 = require("@uniformdev/design-system");
 var import_timeago3 = require("timeago.js");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItemButton.styles.ts
-var import_react69 = require("@emotion/react");
+var import_react70 = require("@emotion/react");
 var import_design_system37 = require("@uniformdev/design-system");
-var ButtonStyles = import_react69.css`
+var ButtonStyles = import_react70.css`
   ${import_design_system37.button}
   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;
@@ -6736,20 +6779,20 @@ var ButtonStyles = import_react69.css`
     text-decoration: none;
   }
 `;
-var ButtonIcon = import_react69.css`
+var ButtonIcon = import_react70.css`
   width: 1rem;
   height: 1rem;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItemButton.tsx
-var import_jsx_runtime63 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
 var ObjectSearchResultItemButton = ({
   text,
   icon,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("button", { type: "button", css: ButtonStyles, ...props, children: [
-    !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Image, { src: icon, css: ButtonIcon }),
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("button", { type: "button", css: ButtonStyles, ...props, children: [
+    !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
@@ -6758,15 +6801,15 @@ var LinkButton = ({
   icon,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
-    !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Image, { src: icon, css: ButtonIcon }),
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("a", { ...props, css: ButtonStyles, target: "_blank", rel: "noopener noreferrer", children: [
+    !icon ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Image, { src: icon, css: ButtonIcon }),
     text
   ] });
 };
 
 // src/components/ObjectSearch/styles/ObjectSearchResultItem.styles.ts
-var import_react70 = require("@emotion/react");
-var ObjectSearchResultItemContainer = import_react70.css`
+var import_react71 = require("@emotion/react");
+var ObjectSearchResultItemContainer = import_react71.css`
   align-items: center;
   border: 1px solid var(--gray-300);
   border-radius: var(--rounded-base);
@@ -6782,7 +6825,7 @@ var ObjectSearchResultItemContainer = import_react70.css`
     }
   }
 `;
-var ObjectSearchDragHandle = import_react70.css`
+var ObjectSearchDragHandle = import_react71.css`
   border-left: 2px dotted var(--gray-300);
   border-right: 2px dotted var(--gray-300);
   position: absolute;
@@ -6791,41 +6834,41 @@ var ObjectSearchDragHandle = import_react70.css`
   transition: opacity var(--duration-fast) var(--timing-ease-out);
   opacity: 0;
 `;
-var ObjectSearchResultItemSubtitle = import_react70.css`
+var ObjectSearchResultItemSubtitle = import_react71.css`
   color: var(--gray-500);
   display: block;
   font-size: var(--fs-xs);
   line-height: 1;
 `;
-var ObjectSearchResultItemTitle = import_react70.css`
+var ObjectSearchResultItemTitle = import_react71.css`
   align-items: center;
-  color: var(--brand-secondary-1);
+  color: var(--typography-base);
   display: flex;
   gap: var(--spacing-xs);
 `;
-var ObjectSearchResultItemTimeStamp = import_react70.css`
+var ObjectSearchResultItemTimeStamp = import_react71.css`
   color: var(--gray-500);
   font-size: var(--fs-xs);
 `;
-var ObjectSearchAuthorStateGroup = import_react70.css`
+var ObjectSearchAuthorStateGroup = import_react71.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchUpdateGroup = import_react70.css`
+var ObjectSearchUpdateGroup = import_react71.css`
   display: grid;
 `;
-var ObjectSearchContentContainer = import_react70.css`
+var ObjectSearchContentContainer = import_react71.css`
   display: flex;
   gap: var(--spacing-base);
 `;
-var ObjectSearchImage = import_react70.css`
+var ObjectSearchImage = import_react71.css`
   width: 56px;
   object-fit: contain;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultItem.tsx
-var import_jsx_runtime64 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
 var ObjectSearchResultItem = ({
   id,
   title,
@@ -6849,79 +6892,80 @@ var ObjectSearchResultItem = ({
     onSelectItem({ id, title: id });
     onRemove == null ? void 0 : onRemove();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchResultItemContainer, children: [
-    disableDnD ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
-    /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchContentContainer, children: [
-      !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
-      /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("span", { css: ObjectSearchResultItemSubtitle, children: formatedContentType }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchResultItemContainer, "data-testid": "search-result-item", children: [
+    disableDnD ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { role: "presentation", className: "drag-handle", css: ObjectSearchDragHandle }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchContentContainer, children: [
+      !imageUrl ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("img", { src: imageUrl, alt: `Thumbnail for ${title}`, css: ObjectSearchImage }),
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { css: ObjectSearchResultItemSubtitle, "data-testid": "sub-title", children: formatedContentType }),
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { role: "heading", css: ObjectSearchResultItemTitle, "data-testid": "title", children: [
           title != null ? title : name,
-          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
+          !popoverData ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system38.Popover, { baseId: title, ariaLabel: title, buttonText: `See ${title} details`, children: popoverData })
         ] }),
-        !createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
-          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
-          !createdAt && !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchUpdateGroup, children: [
-            !createdAt ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("strong", { children: "Last updated: " }),
+        !createdAt && !publishStatus ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
+          !(publishStatus == null ? void 0 : publishStatus.text) ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system38.Badge, { ...publishStatus, size: "sm", uppercaseText: true }),
+          !createdAt && !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchUpdateGroup, children: [
+            !createdAt ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("strong", { children: "Last updated: " }),
               (0, import_timeago3.format)(createdAt)
             ] }),
-            !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("strong", { children: "Last published: " }),
+            !publishedAt ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("small", { css: ObjectSearchResultItemTimeStamp, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("strong", { children: "Last published: " }),
               (0, import_timeago3.format)(publishedAt)
             ] })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { children })
+        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { children })
       ] })
     ] }) }),
-    !editLink && hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
-      !editLink ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
-      hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(import_design_system38.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
+    !editLink && hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchAuthorStateGroup, children: [
+      !editLink ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(LinkButton, { text: "Edit", href: editLink, icon: editLinkIcon }),
+      hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system38.Button, { buttonType: "ghostDestructive", onClick: onRemoveItem, children: "Remove" })
     ] })
   ] });
 };
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
 var import_design_system39 = require("@uniformdev/design-system");
-var import_react_beautiful_dnd3 = require("react-beautiful-dnd");
+var import_react_beautiful_dnd4 = require("react-beautiful-dnd");
 
 // src/components/ObjectSearch/styles/ObjectSearchResultList.styles.ts
-var import_react71 = require("@emotion/react");
-var ObjectSearchResultListContainer = import_react71.css`
+var import_react72 = require("@emotion/react");
+var ObjectSearchResultListContainer = import_react72.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
   justify-content: space-between;
 `;
-var ObjectSearchDragContainer = import_react71.css`
+var ObjectSearchDragContainer = import_react72.css`
   margin: 0 0 var(--spacing-sm);
 `;
-var ObjectSearchContainerDragging = import_react71.css`
+var ObjectSearchContainerDragging = import_react72.css`
   box-shadow: var(--shadow-base);
   opacity: var(--opacity-50);
 `;
-var ObjectSearchResultListCounterContainer = import_react71.css`
+var ObjectSearchResultListCounterContainer = import_react72.css`
   align-items: center;
   display: flex;
   gap: var(--spacing-sm);
 `;
-var ObjectSearchResultListTitle = import_react71.css`
+var ObjectSearchResultListTitle = import_react72.css`
   font-weight: var(--fw-bold);
   line-height: 1;
 `;
 
 // src/components/ObjectSearch/ObjectSearchResultList.tsx
-var import_jsx_runtime65 = require("@emotion/react/jsx-runtime");
+var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
 function ObjectSearchResultList({
   resultLabelText = "Selected",
   removeButtonText = "Remove all",
   onRemoveAllSelected,
   hideRemoveButton = false,
   additionalButtons,
-  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ObjectSearchResultItem, { ...value }),
+  renderResultComponent = (value) => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ObjectSearchResultItem, { ...value }),
   multiSelectId,
   disableDnD = false,
+  getContainerForDnDReparenting,
   whenNothingSelected = null
 }) {
   const { selectedListItems, onRemoveAllSelectedItems, onSelectItem } = useObjectSearchContext();
@@ -6939,16 +6983,37 @@ function ObjectSearchResultList({
       return result;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
+  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__ */ (0, import_jsx_runtime66.jsx)(
+      "div",
+      {
+        css: [
+          ObjectSearchDragContainer,
+          snapshot.isDragging ? ObjectSearchContainerDragging : void 0
+        ],
+        ref: provided.innerRef,
+        "data-dragging": snapshot.isDragging,
+        ...provided.draggableProps,
+        ...provided.dragHandleProps,
+        children: renderListItem
+      }
+    );
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_jsx_runtime66.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "group", css: ObjectSearchResultListContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { role: "note", css: ObjectSearchResultListCounterContainer, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { css: ObjectSearchResultListTitle, children: resultLabelText }),
         " ",
-        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_design_system39.Counter, { count: selectedListItems.length })
+        !selectedListItems.length ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(import_design_system39.Counter, { count: selectedListItems.length })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: ObjectSearchResultListCounterContainer, children: [
         additionalButtons,
-        hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+        hideRemoveButton ? null : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
           import_design_system39.Button,
           {
             buttonType: "ghostDestructive",
@@ -6960,43 +7025,36 @@ function ObjectSearchResultList({
         )
       ] })
     ] }),
-    !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_beautiful_dnd3.DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_react_beautiful_dnd3.Droppable, { droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select", children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("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__ */ (0, import_jsx_runtime65.jsx)(
-          import_react_beautiful_dnd3.Draggable,
-          {
-            draggableId: item.id,
-            index: i,
-            isDragDisabled: selectedListItems.length === 1 || disableDnD,
-            children: (provided2, snapshot) => /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
-              "div",
+    !selectedListItems.length ? whenNothingSelected : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(DragDropContext, { onDragEnd: (res) => onDragEnd(res), children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      import_react_beautiful_dnd4.Droppable,
+      {
+        droppableId: multiSelectId != null ? multiSelectId : "canvas-multi-select",
+        renderClone: getContainerForDnDReparenting ? getDraggableItem : void 0,
+        getContainerForClone: getContainerForDnDReparenting,
+        children: (provided) => /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { ...provided.droppableProps, ref: provided.innerRef, children: [
+          selectedListItems.map((item, i) => {
+            return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              import_react_beautiful_dnd4.Draggable,
               {
-                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
 var import_design_system40 = require("@uniformdev/design-system");
-var import_react72 = require("react");
-var import_jsx_runtime66 = require("@emotion/react/jsx-runtime");
+var import_react73 = require("react");
+var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
 var QueryFilter = ({
   requireContentType,
   queryFilterTitle = "Configure Query",
@@ -7025,34 +7083,34 @@ var QueryFilter = ({
   ],
   children
 }) => {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f;
   const { query, onSetQuery } = useObjectSearchContext();
-  const [queryState, setQueryState] = (0, import_react72.useState)({
-    contentType: "",
-    keyword: "",
+  const [queryState, setQueryState] = (0, import_react73.useState)({
+    contentType: (_a = query.contentType) != null ? _a : "",
+    keyword: (_b = query.contentType) != null ? _b : "",
     count: countValue != null ? countValue : 5,
-    sortBy: (_a = sortOptions[0].id) != null ? _a : "",
-    sortOrder: (_b = sortOrderOptions[0].id) != null ? _b : ""
+    sortBy: (_c = sortOptions[0].id) != null ? _c : "",
+    sortOrder: (_d = sortOrderOptions[0].id) != null ? _d : ""
   });
   const handleFilterChange = (value) => {
     setQueryState((prev) => ({ ...prev, ...value }));
     onSetQuery({ ...query, ...value });
   };
-  (0, import_react72.useEffect)(() => {
+  (0, import_react73.useEffect)(() => {
     onSetQuery(queryState);
   }, [onSetQuery, queryState]);
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("fieldset", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(import_design_system40.VerticalRhythm, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("fieldset", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { css: ObjectSearchFilterContainerLabel, children: queryFilterTitle }),
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { css: ObjectSearchFilterContainer, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_design_system40.VerticalRhythm, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
         InputVariables,
         {
           label: searchInputLabel,
-          value: (_c = queryState.keyword) != null ? _c : "",
+          value: (_e = queryState.keyword) != null ? _e : "",
           onChange: (newQuery) => handleFilterChange({ keyword: newQuery }),
           disableInlineMenu: true,
           id: "qf_searchText",
-          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+          inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
             import_design_system40.InputKeywordSearch,
             {
               id: "qf_searchText",
@@ -7066,16 +7124,16 @@ var QueryFilter = ({
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { css: ObjectSearchFilterGrid("1fr 100px"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           InputVariables,
           {
             label: contentTypeLabel,
             id: "qf_contentType",
-            value: (_d = queryState.contentType) != null ? _d : "",
+            value: (_f = queryState.contentType) != null ? _f : "",
             onChange: (newType) => handleFilterChange({ contentType: newType }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
               import_design_system40.InputSelect,
               {
                 id: "qf_contentType",
@@ -7094,7 +7152,7 @@ var QueryFilter = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           InputVariables,
           {
             label: countLabel,
@@ -7102,7 +7160,7 @@ var QueryFilter = ({
             value: queryState.count.toString(10),
             onChange: (newCount) => handleFilterChange({ count: newCount }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
               import_design_system40.Input,
               {
                 id: "qf_count",
@@ -7117,8 +7175,8 @@ var QueryFilter = ({
           }
         )
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { css: ObjectSearchFilterGrid("2fr 1fr"), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           InputVariables,
           {
             id: "qf_sortBy",
@@ -7126,7 +7184,7 @@ var QueryFilter = ({
             value: queryState.sortBy,
             onChange: (newSortBy) => handleFilterChange({ sortBy: newSortBy }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
               import_design_system40.InputSelect,
               {
                 label: sortLabel,
@@ -7148,7 +7206,7 @@ var QueryFilter = ({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
           InputVariables,
           {
             label: sortOrderLabel,
@@ -7156,7 +7214,7 @@ var QueryFilter = ({
             value: queryState.sortOrder,
             onChange: (newSort) => handleFilterChange({ sortOrder: newSort }),
             disableInlineMenu: true,
-            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+            inputWhenNoVariables: /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
               import_design_system40.InputSelect,
               {
                 label: sortOrderLabel,
@@ -7181,8 +7239,8 @@ var QueryFilter = ({
 };
 
 // src/components/ParamTypeDynamicDataProvider.tsx
-var import_react73 = require("react");
-var import_jsx_runtime67 = require("@emotion/react/jsx-runtime");
+var import_react74 = require("react");
+var import_jsx_runtime68 = require("@emotion/react/jsx-runtime");
 function ParamTypeDynamicDataProvider(props) {
   const { children } = props;
   const {
@@ -7190,11 +7248,11 @@ function ParamTypeDynamicDataProvider(props) {
   } = useMeshLocation("paramType");
   const dynamicInputsAsVariables = useDynamicInputsAsVariables(dynamicInputs);
   const connectedDataAsVariables = useConnectedDataAsVariables(connectedData);
-  const variables = (0, import_react73.useMemo)(
+  const variables = (0, import_react74.useMemo)(
     () => ({ ...connectedDataAsVariables, ...dynamicInputsAsVariables }),
     [dynamicInputsAsVariables, connectedDataAsVariables]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(VariablesProvider, { value: variables, onChange: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(VariablesProvider, { value: variables, onChange: () => {
   }, editVariableComponent: JsonMeshVariableEditor, children });
 }
 var JsonMeshVariableEditor = ({
@@ -7203,9 +7261,9 @@ var JsonMeshVariableEditor = ({
   variable,
   context
 }) => {
-  const sillyRef = (0, import_react73.useRef)(false);
+  const sillyRef = (0, import_react74.useRef)(false);
   const { editConnectedData } = useMeshLocation("paramType");
-  (0, import_react73.useEffect)(() => {
+  (0, import_react74.useEffect)(() => {
     if (sillyRef.current) {
       return;
     }
@@ -7241,6 +7299,28 @@ function createLocationValidator(setValue, validate) {
   });
 }
 
+// src/utils/useContentDataResourceLocaleInfo.ts
+var import_canvas10 = require("@uniformdev/canvas");
+var import_react75 = require("react");
+function useContentDataResourceLocaleInfo({
+  locale,
+  setLocale,
+  dynamicInputs
+}) {
+  var _a;
+  const setLocaleRef = (0, import_react75.useRef)(setLocale);
+  setLocaleRef.current = setLocale;
+  const { flatVariables } = useVariables();
+  const effectiveLocale = locale != null ? locale : dynamicInputs[import_canvas10.LOCALE_DYNAMIC_INPUT_NAME] ? (0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME) : "";
+  const boundLocale = (_a = (0, import_canvas10.bindVariables)({ variables: flatVariables, value: effectiveLocale }).result) != null ? _a : effectiveLocale;
+  (0, import_react75.useEffect)(() => {
+    if (locale === void 0 && effectiveLocale && setLocaleRef.current) {
+      setLocaleRef.current((0, import_canvas10.createVariableReference)(import_canvas10.LOCALE_DYNAMIC_INPUT_NAME));
+    }
+  }, [locale, effectiveLocale]);
+  return { effectiveLocale, boundLocale: boundLocale ? boundLocale : void 0 };
+}
+
 // src/index.ts
 var import_design_system41 = require("@uniformdev/design-system");
 __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
@@ -7410,6 +7490,7 @@ __reExport(src_exports, require("@uniformdev/mesh-sdk"), module.exports);
   urlEncodeRequestParameter,
   urlEncodeRequestUrl,
   useConnectedDataAsVariables,
+  useContentDataResourceLocaleInfo,
   useDynamicInputsAsVariables,
   useMeshLocation,
   useObjectSearchContext,